fannypack-v5/es/Columns/styles-45c1068b.js

An accessible, composable, and friendly React UI Kit

import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import { css as css$1 } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { space, theme, breakpoint } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';

function _templateObject21() {
  var data = _taggedTemplateLiteralLoose(["\n          margin-left: 0;\n        "]);

  _templateObject21 = function _templateObject21() {
    return data;
  };

  return data;
}

function _templateObject20() {
  var data = _taggedTemplateLiteralLoose(["\n          margin-left: 0;\n        "]);

  _templateObject20 = function _templateObject20() {
    return data;
  };

  return data;
}

function _templateObject19() {
  var data = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n    "]);

  _templateObject19 = function _templateObject19() {
    return data;
  };

  return data;
}

function _templateObject18() {
  var data = _taggedTemplateLiteralLoose(["\n          ", ";\n        "]);

  _templateObject18 = function _templateObject18() {
    return data;
  };

  return data;
}

function _templateObject17() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "]);

  _templateObject17 = function _templateObject17() {
    return data;
  };

  return data;
}

function _templateObject16() {
  var data = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "]);

  _templateObject16 = function _templateObject16() {
    return data;
  };

  return data;
}

function _templateObject15() {
  var data = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "]);

  _templateObject15 = function _templateObject15() {
    return data;
  };

  return data;
}

function _templateObject14() {
  var data = _taggedTemplateLiteralLoose(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "]);

  _templateObject14 = function _templateObject14() {
    return data;
  };

  return data;
}

function _templateObject13() {
  var data = _taggedTemplateLiteralLoose(["\n          ", ";\n        "]);

  _templateObject13 = function _templateObject13() {
    return data;
  };

  return data;
}

function _templateObject12() {
  var data = _taggedTemplateLiteralLoose(["\n      flex: none;\n      width: ", ";\n    "]);

  _templateObject12 = function _templateObject12() {
    return data;
  };

  return data;
}

function _templateObject11() {
  var data = _taggedTemplateLiteralLoose(["\n      @media (max-width: ", "px) {\n        flex: none;\n        width: 100%;\n      }\n    "]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n      flex-wrap: wrap;\n    "]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n          flex-wrap: wrap;\n        "]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteralLoose(["\n          flex-wrap: wrap;\n        "]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose(["\n    margin-right: auto;\n  "]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n    margin-left: auto;\n    margin-right: auto;\n  "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n    margin-left: auto;\n  "]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      padding: ", "rem;\n    "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  max-width: 100%;\n\n  ", ";\n\n  & {\n    ", ";\n  }\n\n  & {\n    ", ";\n  }\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      margin-left: -", "rem;\n      margin-right: -", "rem;\n      margin-top: -", "rem;\n\n      &:last-child {\n        margin-bottom: -", "rem;\n      }\n    "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  ", ";\n\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var Columns = function Columns(styleProps) {
  return css(_templateObject(), !styleProps.isGapless && css$1(_templateObject2(), space(styleProps.spacing)(styleProps) / 2, space(styleProps.spacing)(styleProps) / 2, space(styleProps.spacing)(styleProps) / 2, space(styleProps.spacing)(styleProps) / 2), getWrapProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var Column = function Column(styleProps) {
  return css(_templateObject3(), !styleProps.isGapless && css$1(_templateObject4(), space(styleProps.spacing)(styleProps) / 2), getSpreadProperties(styleProps), getSpreadOffsetProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var marginAutoOffsets = {
  left: css$1(_templateObject5()),
  both: css$1(_templateObject6()),
  right: css$1(_templateObject7())
};
var getWidth = function getWidth(spread) {
  return spread / 12 * 100 + "%";
};
function getWrapProperties(styleProps) {
  var isOneLine = styleProps.isOneLine,
      minBreakpoint = styleProps.minBreakpoint;

  if (isOneLine) {
    if (minBreakpoint !== 'tablet' && minBreakpoint !== 'mobile') {
      return breakpoint('max-tablet', css$1(_templateObject8()))(styleProps);
    }

    if (minBreakpoint !== 'mobile') {
      return breakpoint('max-mobile', css$1(_templateObject9()))(styleProps);
    }

    return null;
  } else {
    return css$1(_templateObject10());
  }
}
function getSpreadProperties(styleProps) {
  var minBreakpoint = styleProps.minBreakpoint,
      spread = styleProps.spread,
      spreadMobile = styleProps.spreadMobile,
      spreadTablet = styleProps.spreadTablet,
      spreadDesktop = styleProps.spreadDesktop,
      spreadWidescreen = styleProps.spreadWidescreen,
      spreadFullHD = styleProps.spreadFullHD;

  if (!minBreakpoint && !spread && !spreadMobile && !spreadTablet && !spreadDesktop && !spreadWidescreen && !spreadFullHD) {
    return css$1(_templateObject11(), theme('breakpoints', 'tablet')(styleProps));
  }

  var getProperties = function getProperties(_ref) {
    var _breakpoint = _ref.breakpoint,
        spread = _ref.spread;
    var properties = css$1(_templateObject12(), getWidth(spread));
    if (!spread) return null;

    if (_breakpoint) {
      return breakpoint("max-" + _breakpoint, css$1(_templateObject13(), properties))(styleProps);
    }

    return properties;
  };

  return css$1(_templateObject14(), getProperties({
    spread: spread
  }), getProperties({
    spread: spreadFullHD,
    breakpoint: 'fullHD'
  }), getProperties({
    spread: spreadWidescreen,
    breakpoint: 'widescreen'
  }), getProperties({
    spread: spreadDesktop,
    breakpoint: 'desktop'
  }), minBreakpoint !== 'tablet' && minBreakpoint !== 'mobile' && !spreadTablet && !spreadMobile && breakpoint("max-tablet", css$1(_templateObject15()))(styleProps), getProperties({
    spread: spreadTablet,
    breakpoint: 'tablet'
  }), minBreakpoint !== 'mobile' && !spreadMobile && breakpoint("max-mobile", css$1(_templateObject16()))(styleProps), getProperties({
    spread: spreadMobile,
    breakpoint: 'mobile'
  }));
}
function getSpreadOffsetProperties(styleProps) {
  var spreadOffset = styleProps.spreadOffset,
      spreadMobileOffset = styleProps.spreadMobileOffset,
      spreadTabletOffset = styleProps.spreadTabletOffset,
      spreadDesktopOffset = styleProps.spreadDesktopOffset,
      spreadWidescreenOffset = styleProps.spreadWidescreenOffset,
      spreadFullHDOffset = styleProps.spreadFullHDOffset;

  if (!spreadOffset && !spreadMobileOffset && !spreadTabletOffset && !spreadDesktopOffset && !spreadWidescreenOffset && !spreadFullHDOffset) {
    return null;
  }

  var getProperties = function getProperties(_ref2) {
    var _breakpoint = _ref2.breakpoint,
        spreadOffset = _ref2.spreadOffset;
    var properties = css$1(_templateObject17(), getWidth(spreadOffset));
    if (!spreadOffset) return null;

    if (_breakpoint) {
      return breakpoint("max-" + _breakpoint, css$1(_templateObject18(), properties))(styleProps);
    }

    return properties;
  };

  if (typeof spreadOffset === 'number') {
    return css$1(_templateObject19(), getProperties({
      spreadOffset: spreadOffset
    }), getProperties({
      spreadOffset: spreadFullHDOffset,
      breakpoint: 'fullHD'
    }), getProperties({
      spreadOffset: spreadWidescreenOffset,
      breakpoint: 'widescreen'
    }), getProperties({
      spreadOffset: spreadDesktopOffset,
      breakpoint: 'desktop'
    }), !spreadTabletOffset && !spreadMobileOffset && breakpoint("max-tablet", css$1(_templateObject20()))(styleProps), getProperties({
      spreadOffset: spreadTabletOffset,
      breakpoint: 'tablet'
    }), !spreadMobileOffset && breakpoint("max-mobile", css$1(_templateObject21()))(styleProps), getProperties({
      spreadOffset: spreadMobileOffset,
      breakpoint: 'mobile'
    }));
  }

  return marginAutoOffsets[spreadOffset];
}

var styles = /*#__PURE__*/Object.freeze({
  Columns: Columns,
  Column: Column,
  marginAutoOffsets: marginAutoOffsets,
  getWidth: getWidth,
  getWrapProperties: getWrapProperties,
  getSpreadProperties: getSpreadProperties,
  getSpreadOffsetProperties: getSpreadOffsetProperties
});

export { Columns as C, Column as a, getWrapProperties as b, getSpreadProperties as c, getSpreadOffsetProperties as d, getWidth as g, marginAutoOffsets as m, styles as s };