'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled$1 = require('styled-components');
var core = require('@xstyled/core');
var system = require('@xstyled/system');
var util = require('@xstyled/util');
var isPropValid = require('@emotion/is-prop-valid');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$1);
var isPropValid__default = /*#__PURE__*/_interopDefaultLegacy(isPropValid);

const ColorModeStyle = styled$1.createGlobalStyle`${(p) => core.createColorStyles(p.theme, { targetSelector: p.targetSelector })}`;
const ColorModeProvider = core.createColorModeProvider({
  ThemeContext: styled$1.ThemeContext,
  ThemeProvider: styled$1.ThemeProvider,
  ColorModeStyle
});

const useTh = core.createUseGetter(system.th, styled$1.useTheme);
const useAngle = core.createUseGetter(system.th.angle, styled$1.useTheme);
const useAnimation = core.createUseGetter(system.th.animation, styled$1.useTheme);
const useBorder = core.createUseGetter(system.th.border, styled$1.useTheme);
const useBorderColor = core.createUseGetter(system.th.borderColor, styled$1.useTheme);
const useBorderStyle = core.createUseGetter(system.th.borderStyle, styled$1.useTheme);
const useBorderWidth = core.createUseGetter(system.th.borderWidth, styled$1.useTheme);
const useColor = core.createUseGetter(system.th.color, styled$1.useTheme);
const useDuration = core.createUseGetter(system.th.duration, styled$1.useTheme);
const useFont = core.createUseGetter(system.th.font, styled$1.useTheme);
const useFontSize = core.createUseGetter(system.th.fontSize, styled$1.useTheme);
const useFontWeight = core.createUseGetter(system.th.fontWeight, styled$1.useTheme);
const useInset = core.createUseGetter(system.th.inset, styled$1.useTheme);
const useLetterSpacing = core.createUseGetter(system.th.letterSpacing, styled$1.useTheme);
const useLineHeight = core.createUseGetter(system.th.lineHeight, styled$1.useTheme);
const usePercent = core.createUseGetter(system.th.percent, styled$1.useTheme);
const usePx = core.createUseGetter(system.th.px, styled$1.useTheme);
const useRadius = core.createUseGetter(system.th.radius, styled$1.useTheme);
const useRingWidth = core.createUseGetter(system.th.ringWidth, styled$1.useTheme);
const useShadow = core.createUseGetter(system.th.shadow, styled$1.useTheme);
const useSize = core.createUseGetter(system.th.size, styled$1.useTheme);
const useSpace = core.createUseGetter(system.th.space, styled$1.useTheme);
const useTimingFunction = core.createUseGetter(system.th.timingFunction, styled$1.useTheme);
const useTransform = core.createUseGetter(system.th.transform, styled$1.useTheme);
const useTransition = core.createUseGetter(system.th.transition, styled$1.useTheme);
const useTransitionProperty = core.createUseGetter(
  system.th.transitionProperty,
  styled$1.useTheme
);
const useZIndex = core.createUseGetter(system.th.zIndex, styled$1.useTheme);

const useScreens = () => {
  return core.useThemeScreens(styled$1.useTheme());
};
const useBreakpoint = () => {
  return core.useThemeBreakpoint(styled$1.useTheme());
};
const useUp = (key) => {
  return core.useThemeUp(styled$1.useTheme(), key);
};
const useDown = (key) => {
  return core.useThemeDown(styled$1.useTheme(), key);
};

const Preflight = styled$1.createGlobalStyle(
  ({ theme }) => system.getPreflightStyles(theme)
);

const createCssFunction = (generator) => {
  const transform = core.createTransform(generator);
  return (...args) => {
    const scCssArgs = styled$1.css(...args);
    const flattenedArgs = util.flattenStrings(scCssArgs);
    return flattenedArgs.map(transform);
  };
};

const createCreateGlobalStyle = (generator) => {
  const css = createCssFunction(generator);
  return (...args) => styled$1.createGlobalStyle([css(...args)]);
};

const scStyled = typeof styled__default["default"] === "function" ? styled__default["default"] : styled__default["default"].default;

const getCreateStyle = (baseCreateStyle, css, generator) => {
  const createStyle = (...args) => baseCreateStyle`${css(...args)}${generator}`;
  createStyle.attrs = (attrs) => getCreateStyle(baseCreateStyle.attrs(attrs), css, generator);
  createStyle.withConfig = (config) => getCreateStyle(baseCreateStyle.withConfig(config), css, generator);
  return createStyle;
};
const createShouldForwardProp = (generator) => {
  const propSet = new Set(generator.meta.props);
  return (prop, elementToBeCreated) => {
    if (util.string(prop) && propSet.has(prop)) {
      return false;
    }
    if (typeof elementToBeCreated === "string") {
      return isPropValid__default["default"](prop);
    }
    return true;
  };
};
const createBaseStyled = (css, generator) => {
  const config = generator ? {
    shouldForwardProp: createShouldForwardProp(generator)
  } : {};
  return (component) => {
    const baseStyled = scStyled(component);
    return getCreateStyle(
      config ? baseStyled.withConfig(config) : baseStyled,
      css,
      generator
    );
  };
};
const createStyled = (generator) => {
  const css = createCssFunction(generator);
  const styled = createBaseStyled(css);
  const xstyled = createBaseStyled(css, generator);
  styled.box = xstyled("div");
  Object.keys(scStyled).forEach((key) => {
    styled[key] = styled(key);
    styled[`${key}Box`] = xstyled(key);
  });
  return styled;
};

const createX = (generator) => {
  const xstyled = createBaseStyled(
    createCssFunction(generator),
    generator
  );
  const x = {};
  Object.keys(scStyled).forEach((tag) => {
    x[tag] = xstyled(tag)({});
  });
  return x;
};

const createCss = (generator) => {
  return {
    css: createCssFunction(generator),
    x: createX(generator),
    styled: createStyled(generator),
    createGlobalStyle: createCreateGlobalStyle(generator)
  };
};

const { css, styled, x, createGlobalStyle } = createCss(system.system);

Object.defineProperty(exports, 'ServerStyleSheet', {
  enumerable: true,
  get: function () { return styled$1.ServerStyleSheet; }
});
Object.defineProperty(exports, 'StyleSheetManager', {
  enumerable: true,
  get: function () { return styled$1.StyleSheetManager; }
});
Object.defineProperty(exports, 'ThemeConsumer', {
  enumerable: true,
  get: function () { return styled$1.ThemeConsumer; }
});
Object.defineProperty(exports, 'ThemeContext', {
  enumerable: true,
  get: function () { return styled$1.ThemeContext; }
});
Object.defineProperty(exports, 'ThemeProvider', {
  enumerable: true,
  get: function () { return styled$1.ThemeProvider; }
});
Object.defineProperty(exports, 'isStyledComponent', {
  enumerable: true,
  get: function () { return styled$1.isStyledComponent; }
});
Object.defineProperty(exports, 'keyframes', {
  enumerable: true,
  get: function () { return styled$1.keyframes; }
});
Object.defineProperty(exports, 'useTheme', {
  enumerable: true,
  get: function () { return styled$1.useTheme; }
});
Object.defineProperty(exports, 'withTheme', {
  enumerable: true,
  get: function () { return styled$1.withTheme; }
});
Object.defineProperty(exports, 'getColorModeInitScriptElement', {
  enumerable: true,
  get: function () { return core.getColorModeInitScriptElement; }
});
Object.defineProperty(exports, 'getColorModeInitScriptTag', {
  enumerable: true,
  get: function () { return core.getColorModeInitScriptTag; }
});
Object.defineProperty(exports, 'useColorMode', {
  enumerable: true,
  get: function () { return core.useColorMode; }
});
Object.defineProperty(exports, 'useViewportWidth', {
  enumerable: true,
  get: function () { return core.useViewportWidth; }
});
exports.ColorModeProvider = ColorModeProvider;
exports.Preflight = Preflight;
exports.createCss = createCss;
exports.createGlobalStyle = createGlobalStyle;
exports.css = css;
exports["default"] = styled;
exports.styled = styled;
exports.useAngle = useAngle;
exports.useAnimation = useAnimation;
exports.useBorder = useBorder;
exports.useBorderColor = useBorderColor;
exports.useBorderStyle = useBorderStyle;
exports.useBorderWidth = useBorderWidth;
exports.useBreakpoint = useBreakpoint;
exports.useColor = useColor;
exports.useDown = useDown;
exports.useDuration = useDuration;
exports.useFont = useFont;
exports.useFontSize = useFontSize;
exports.useFontWeight = useFontWeight;
exports.useInset = useInset;
exports.useLetterSpacing = useLetterSpacing;
exports.useLineHeight = useLineHeight;
exports.usePercent = usePercent;
exports.usePx = usePx;
exports.useRadius = useRadius;
exports.useRingWidth = useRingWidth;
exports.useScreens = useScreens;
exports.useShadow = useShadow;
exports.useSize = useSize;
exports.useSpace = useSpace;
exports.useTh = useTh;
exports.useTimingFunction = useTimingFunction;
exports.useTransform = useTransform;
exports.useTransition = useTransition;
exports.useTransitionProperty = useTransitionProperty;
exports.useUp = useUp;
exports.useZIndex = useZIndex;
exports.x = x;
Object.keys(system).forEach(function (k) {
  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
    enumerable: true,
    get: function () { return system[k]; }
  });
});
//# sourceMappingURL=index.cjs.map