fannypack-v5/es/Container/styles-68381625.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 { theme } 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 _templateObject10() {
  var data = _taggedTemplateLiteralLoose(["\n    @media (max-width: ", "px) {\n      max-width: ", "px;\n    }\n\n    @media (max-width: ", "px) {\n      max-width: ", "px;\n    }\n\n    @media (max-width: ", "px) {\n      max-width: ", "px;\n    }\n  "]);

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

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteralLoose(["\n      & {\n        max-width: ", "px;\n      }\n    "]);

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

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

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n      @media (max-width: ", "px) {\n        padding-left: ", "rem;\n        padding-right: ", "rem;\n      }\n    "]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n      padding-left: ", "rem;\n      padding-right: ", "rem;\n\n      & {\n        ", ";\n      }\n    "]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n      max-width: ", "px;\n    "]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n  ", ";\n\n  & {\n    ", ";\n  }\n"]);

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

  return data;
}
var Container = function Container(styleProps) {
  return css(_templateObject(), !styleProps.isFluid && css$1(_templateObject2(), theme('breakpoints', 'fullHD')(styleProps)), styleProps.isFluid && css$1(_templateObject3(), theme(styleProps.themeKey, 'fluidMargin')(styleProps), theme(styleProps.themeKey, 'fluidMargin')(styleProps), theme(styleProps.themeKey, 'css.fluid')(styleProps)), (styleProps.isLayout || styleProps.isFluid) && css$1(_templateObject4(), theme('breakpoints.tablet')(styleProps), theme(styleProps.themeKey, 'tabletMargin')(styleProps), theme(styleProps.themeKey, 'tabletMargin')(styleProps)), styleProps.isLayout && css$1(_templateObject5(), theme(styleProps.themeKey, 'css.layout')(styleProps)), getResponsiveProperties(styleProps), styleProps.align && !styleProps.isFluid ? alignProperties[styleProps.align] : null, theme(styleProps.themeKey, 'css.root')(styleProps));
};
var alignProperties = {
  left: css$1(_templateObject6()),
  center: css$1(_templateObject7()),
  right: css$1(_templateObject8())
};
function getResponsiveProperties(styleProps) {
  var breakpoint = styleProps.breakpoint,
      isFluid = styleProps.isFluid;
  if (isFluid) return;

  if (breakpoint) {
    return css$1(_templateObject9(), theme('breakpoints', breakpoint)(styleProps));
  }

  return css$1(_templateObject10(), theme('breakpoints', 'fullHD')(styleProps) + 128, theme('breakpoints', 'widescreen')(styleProps), theme('breakpoints', 'widescreen')(styleProps) + 128, theme('breakpoints', 'desktop')(styleProps), theme('breakpoints', 'desktop')(styleProps) + 128, theme('breakpoints', 'tablet')(styleProps));
}

var styles = /*#__PURE__*/Object.freeze({
  Container: Container,
  alignProperties: alignProperties,
  getResponsiveProperties: getResponsiveProperties
});

export { Container as C, alignProperties as a, getResponsiveProperties as g, styles as s };