@class101/cdn-ui-system 0.0.7 → 0.0.8

package/@types/image.d.js

@@ -1,2 +1,6 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import {
+  init_react_shim
+} from "../chunk-CPDZ2HQZ.js";
+
+// libs/shared/ui-system/src/@types/image.d.ts
+init_react_shim();

package/@types/theme.d.js

@@ -1,5 +1,8 @@
-// tools/builders/framer-esm/build/react-shim.js
-import * as React from "react";
+import "../chunk-UAWCTQGC.js";
+import "../chunk-QN5Q5NTF.js";
+import {
+  init_react_shim
+} from "../chunk-CPDZ2HQZ.js";
 
 // libs/shared/ui-system/src/@types/theme.d.ts
-import "https://jspm.dev/@emotion/react@11.1.5";
+init_react_shim();

package/chunk-2VS4JN2V.js

@@ -0,0 +1,254 @@
+import {
+  canUseDOM
+} from "./chunk-FRNHAL35.js";
+import {
+  __commonJS,
+  __toModule,
+  init_react_shim
+} from "./chunk-CPDZ2HQZ.js";
+
+// node_modules/react-fast-compare/index.js
+var require_react_fast_compare = __commonJS({
+  "node_modules/react-fast-compare/index.js"(exports, module) {
+    init_react_shim();
+    var hasElementType = typeof Element !== "undefined";
+    var hasMap = typeof Map === "function";
+    var hasSet = typeof Set === "function";
+    var hasArrayBuffer = typeof ArrayBuffer === "function" && !!ArrayBuffer.isView;
+    function equal(a, b) {
+      if (a === b)
+        return true;
+      if (a && b && typeof a == "object" && typeof b == "object") {
+        if (a.constructor !== b.constructor)
+          return false;
+        var length, i, keys;
+        if (Array.isArray(a)) {
+          length = a.length;
+          if (length != b.length)
+            return false;
+          for (i = length; i-- !== 0; )
+            if (!equal(a[i], b[i]))
+              return false;
+          return true;
+        }
+        var it;
+        if (hasMap && a instanceof Map && b instanceof Map) {
+          if (a.size !== b.size)
+            return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!b.has(i.value[0]))
+              return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!equal(i.value[1], b.get(i.value[0])))
+              return false;
+          return true;
+        }
+        if (hasSet && a instanceof Set && b instanceof Set) {
+          if (a.size !== b.size)
+            return false;
+          it = a.entries();
+          while (!(i = it.next()).done)
+            if (!b.has(i.value[0]))
+              return false;
+          return true;
+        }
+        if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+          length = a.length;
+          if (length != b.length)
+            return false;
+          for (i = length; i-- !== 0; )
+            if (a[i] !== b[i])
+              return false;
+          return true;
+        }
+        if (a.constructor === RegExp)
+          return a.source === b.source && a.flags === b.flags;
+        if (a.valueOf !== Object.prototype.valueOf)
+          return a.valueOf() === b.valueOf();
+        if (a.toString !== Object.prototype.toString)
+          return a.toString() === b.toString();
+        keys = Object.keys(a);
+        length = keys.length;
+        if (length !== Object.keys(b).length)
+          return false;
+        for (i = length; i-- !== 0; )
+          if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+            return false;
+        if (hasElementType && a instanceof Element)
+          return false;
+        for (i = length; i-- !== 0; ) {
+          if ((keys[i] === "_owner" || keys[i] === "__v" || keys[i] === "__o") && a.$$typeof) {
+            continue;
+          }
+          if (!equal(a[keys[i]], b[keys[i]]))
+            return false;
+        }
+        return true;
+      }
+      return a !== a && b !== b;
+    }
+    module.exports = function isEqual2(a, b) {
+      try {
+        return equal(a, b);
+      } catch (error) {
+        if ((error.message || "").match(/stack|recursion/i)) {
+          console.warn("react-fast-compare cannot handle circular refs");
+          return false;
+        }
+        throw error;
+      }
+    };
+  }
+});
+
+// libs/shared/utils-hooks/src/lib/useDeepCompareMemo/useDeepCompareMemo.ts
+init_react_shim();
+import {useMemo} from "react";
+
+// libs/shared/utils-hooks/src/lib/useDeepCompareDeps/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/lib/useDeepCompareDeps/useDeepCompareDeps.ts
+init_react_shim();
+var import_react_fast_compare = __toModule(require_react_fast_compare());
+import {useRef} from "react";
+function useDeepCompareDeps(value) {
+  const ref = useRef(value);
+  if (!(0, import_react_fast_compare.default)(value, ref.current)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+
+// libs/shared/utils-hooks/src/lib/useDeepCompareMemo/useDeepCompareMemo.ts
+function useDeepCompareMemo(factory, deps) {
+  return useMemo(factory, useDeepCompareDeps(deps));
+}
+
+// libs/shared/utils-hooks/src/lib/useDeepCompareMemo/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/lib/useInView/useInView.tsx
+init_react_shim();
+import {useCallback as useCallback2, useState} from "react";
+
+// libs/shared/utils-hooks/src/lib/useIntersectionObserver/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/lib/useIntersectionObserver/useIntersectionObserver.ts
+init_react_shim();
+import {useCallback, useEffect, useRef as useRef2} from "react";
+var useIntersectionObserver = (callback, options) => {
+  const observerRef = useRef2();
+  const handleIntersection = useCallback(([entry]) => {
+    callback(entry);
+  }, [callback]);
+  const observe = useCallback((node) => {
+    if (!node) {
+      return;
+    }
+    observerRef.current = new IntersectionObserver(handleIntersection, options);
+    observerRef.current.observe(node);
+  }, [handleIntersection, options]);
+  const unobserve = useCallback(() => {
+    observerRef.current?.disconnect();
+    observerRef.current = void 0;
+  }, []);
+  const ref = useCallback((node) => {
+    unobserve();
+    observe(node);
+  }, [observe, unobserve]);
+  useEffect(() => unobserve, [unobserve]);
+  return {ref};
+};
+
+// libs/shared/utils-hooks/src/lib/useInView/useInView.tsx
+var useInView = (initialInView, options) => {
+  const [isInView, setIsInView] = useState(initialInView);
+  const callback = useCallback2((entry) => {
+    if (entry.isIntersecting) {
+      setIsInView(true);
+    } else {
+      setIsInView(false);
+    }
+  }, []);
+  const {ref} = useIntersectionObserver(callback, options);
+  return {ref, isInView};
+};
+
+// libs/shared/utils-hooks/src/lib/useInView/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/lib/useLazyUnmount/useLazyUnmount.ts
+init_react_shim();
+import {useEffect as useEffect2, useState as useState2} from "react";
+var useLazyUnmount = (state, delay) => {
+  const [isMounted, setIsMounted] = useState2(state);
+  useEffect2(() => {
+    if (state) {
+      setIsMounted(state);
+      return void 0;
+    }
+    const timer = setTimeout(() => {
+      setIsMounted(false);
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [delay, state]);
+  return isMounted;
+};
+
+// libs/shared/utils-hooks/src/lib/useLazyUnmount/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/lib/useLockBodyScroll/useLockBodyScroll.ts
+init_react_shim();
+import {useEffect as useEffect3, useRef as useRef3} from "react";
+var useLockBodyScroll = (locked = false) => {
+  const bodyStyleRef = useRef3({paddingRight: "", overflow: ""});
+  const lockBodyScroll = () => {
+    if (!canUseDOM) {
+      return;
+    }
+    bodyStyleRef.current = {
+      paddingRight: document.body.style.paddingRight,
+      overflow: document.body.style.overflow
+    };
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.paddingRight = `${scrollBarWidth}px`;
+    document.body.style.overflow = "hidden";
+  };
+  const unlockBodyScroll = () => {
+    if (!canUseDOM) {
+      return;
+    }
+    document.body.style.paddingRight = bodyStyleRef.current.paddingRight;
+    document.body.style.overflow = bodyStyleRef.current.overflow;
+  };
+  useEffect3(() => {
+    if (locked) {
+      lockBodyScroll();
+    } else {
+      unlockBodyScroll();
+    }
+    return () => {
+      unlockBodyScroll();
+    };
+  }, [locked]);
+};
+
+// libs/shared/utils-hooks/src/lib/useLockBodyScroll/index.ts
+init_react_shim();
+
+// libs/shared/utils-hooks/src/index.ts
+init_react_shim();
+
+export {
+  useDeepCompareMemo,
+  useInView,
+  useLazyUnmount,
+  useLockBodyScroll
+};

package/chunk-44GVNF2V.js

@@ -0,0 +1,39 @@
+import {
+  React,
+  init_react_shim
+} from "./chunk-CPDZ2HQZ.js";
+
+// libs/shared/ui-system/src/lib/Menu/MenuText/MenuText.stories.tsx
+init_react_shim();
+import {VStack} from "../../Layout/VStack/index.js";
+import {MenuText} from "./MenuText.js";
+var MenuText_stories_default = {
+  title: "ui-system/Menu/MenuText",
+  component: MenuText,
+  argTypes: {
+    label: {
+      control: {type: "text"},
+      defaultValue: "\uB9AC\uC2A4\uD2B8 \uC774\uB984\uC744 \uC801\uC5B4\uC8FC\uC138\uC694"
+    },
+    description: {
+      control: {type: "text"},
+      defaultValue: "\uB3C4\uC6C0 \uC124\uBA85\uAE00\uC774 \uD544\uC694\uD55C \uACBD\uC6B0, \uCD5C\uB300 \uB450 \uC904\uB85C \uC791\uC131\uD574\uC8FC\uC138\uC694"
+    },
+    state: {
+      control: {
+        type: "select",
+        options: ["default", "active", "warning", "disabled"]
+      },
+      defaultValue: "default"
+    }
+  }
+};
+var Template = (props) => /* @__PURE__ */ React.createElement(VStack, null, /* @__PURE__ */ React.createElement(MenuText, {
+  ...props
+}));
+var BasicUsage = Template.bind({});
+
+export {
+  MenuText_stories_default,
+  BasicUsage
+};

package/chunk-5UMHOQ7R.js

@@ -0,0 +1,38 @@
+import {
+  TextButton_stories_default
+} from "./chunk-UMKGAET2.js";
+import {
+  React,
+  init_react_shim
+} from "./chunk-CPDZ2HQZ.js";
+
+// libs/shared/ui-system/src/lib/Menu/MenuTextButton/MenuTextButton.stories.tsx
+init_react_shim();
+import {Icon} from "../../Icon/index.js";
+import {MenuTextButton} from "./MenuTextButton.js";
+var MenuTextButton_stories_default = {
+  title: "ui-system/Menu/MenuTextButton",
+  component: MenuTextButton,
+  argTypes: {
+    state: {
+      control: {
+        type: "select",
+        options: ["default", "active", "warning", "disabled"]
+      },
+      defaultValue: "active"
+    },
+    size: {...TextButton_stories_default.argTypes}.size,
+    icon: {
+      defaultValue: Icon.Regular.ChevronRight
+    }
+  }
+};
+var Template = (props) => /* @__PURE__ */ React.createElement(MenuTextButton, {
+  ...props
+}, "\uBC84\uD2BC");
+var BasicUsage = Template.bind({});
+
+export {
+  MenuTextButton_stories_default,
+  BasicUsage
+};

package/chunk-7BJXCATJ.js

@@ -0,0 +1,959 @@
+import {
+  require_object_assign
+} from "./chunk-AXJOQSVO.js";
+import {
+  __toModule,
+  init_react_shim
+} from "./chunk-CPDZ2HQZ.js";
+
+// node_modules/@class101/styled-system__core/dist/index.esm.js
+init_react_shim();
+var import_object_assign = __toModule(require_object_assign());
+var merge = function merge2(a, b) {
+  var result = (0, import_object_assign.default)({}, a, b);
+  for (var key in a) {
+    var _assign;
+    if (!a[key] || typeof b[key] !== "object")
+      continue;
+    (0, import_object_assign.default)(result, (_assign = {}, _assign[key] = (0, import_object_assign.default)(a[key], b[key]), _assign));
+  }
+  return result;
+};
+var sort = function sort2(obj) {
+  var next = {};
+  Object.keys(obj).sort(function(a, b) {
+    return a.localeCompare(b, void 0, {
+      numeric: true,
+      sensitivity: "base"
+    });
+  }).forEach(function(key) {
+    next[key] = obj[key];
+  });
+  return next;
+};
+var defaults = {
+  breakpoints: [40, 52, 64].map(function(n) {
+    return n + "em";
+  })
+};
+var createMediaQuery = function createMediaQuery2(n) {
+  return "@media screen and (min-width: " + n + ")";
+};
+var getValue = function getValue2(n, scale) {
+  return get(scale, n, n);
+};
+var get = function get2(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var createParser = function createParser2(config9) {
+  var cache = {};
+  var parse = function parse2(props) {
+    var styles = {};
+    var shouldSort = false;
+    var isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+    for (var _key in props) {
+      if (!config9[_key])
+        continue;
+      var sx = config9[_key];
+      var raw = props[_key];
+      var scale = get(props.theme, sx.scale, sx.defaults);
+      if (typeof raw === "object" && Array.isArray(raw)) {
+        cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+        cache.media = !isCacheDisabled && cache.media || [null].concat(cache.breakpoints.map(createMediaQuery));
+        styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+        continue;
+      }
+      (0, import_object_assign.default)(styles, sx(raw, scale, props));
+    }
+    if (shouldSort) {
+      styles = sort(styles);
+    }
+    var sortedStyles = {};
+    var mediaQueryStyles = {};
+    for (var key in styles) {
+      if (key.startsWith("@media")) {
+        mediaQueryStyles[key] = styles[key];
+        continue;
+      }
+      sortedStyles[key] = styles[key];
+    }
+    return merge(sortedStyles, mediaQueryStyles);
+  };
+  parse.config = config9;
+  parse.propNames = Object.keys(config9);
+  parse.cache = cache;
+  var keys = Object.keys(config9).filter(function(k) {
+    return k !== "config";
+  });
+  if (keys.length > 1) {
+    keys.forEach(function(key) {
+      var _createParser;
+      parse[key] = createParser2((_createParser = {}, _createParser[key] = config9[key], _createParser));
+    });
+  }
+  return parse;
+};
+var parseResponsiveStyle = function parseResponsiveStyle2(mediaQueries, sx, scale, raw, _props) {
+  var styles = {};
+  raw.slice(0, mediaQueries.length).forEach(function(value, i) {
+    var media = mediaQueries[i];
+    var style = sx(value, scale, _props);
+    if (!media) {
+      (0, import_object_assign.default)(styles, style);
+    } else {
+      var _assign2;
+      (0, import_object_assign.default)(styles, (_assign2 = {}, _assign2[media] = (0, import_object_assign.default)({}, styles[media], style), _assign2));
+    }
+  });
+  return styles;
+};
+var createStyleFunction = function createStyleFunction2(_ref) {
+  var properties = _ref.properties, property = _ref.property, scale = _ref.scale, _ref$transform = _ref.transform, transform = _ref$transform === void 0 ? getValue : _ref$transform, defaultScale = _ref.defaultScale;
+  properties = properties || [property];
+  var sx = function sx2(value, scale2, _props) {
+    var result = {};
+    var n = transform(value, scale2, _props);
+    if (n === null)
+      return;
+    properties.forEach(function(prop) {
+      result[prop] = n;
+    });
+    return result;
+  };
+  sx.scale = scale;
+  sx.defaults = defaultScale;
+  return sx;
+};
+var system = function system2(args) {
+  if (args === void 0) {
+    args = {};
+  }
+  var config9 = {};
+  Object.keys(args).forEach(function(key) {
+    var conf = args[key];
+    if (conf === true) {
+      config9[key] = createStyleFunction({
+        property: key,
+        scale: key
+      });
+      return;
+    }
+    if (typeof conf === "function") {
+      config9[key] = conf;
+      return;
+    }
+    config9[key] = createStyleFunction(conf);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+var compose = function compose2() {
+  var config9 = {};
+  for (var _len = arguments.length, parsers = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
+    parsers[_key2] = arguments[_key2];
+  }
+  parsers.forEach(function(parser2) {
+    if (!parser2 || !parser2.config)
+      return;
+    (0, import_object_assign.default)(config9, parser2.config);
+  });
+  var parser = createParser(config9);
+  return parser;
+};
+
+// node_modules/@class101/styled-system__layout/dist/index.esm.js
+init_react_shim();
+var isNumber = function isNumber2(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getWidth = function getWidth2(n, scale) {
+  return get(scale, n, !isNumber(n) || n > 1 ? n : n * 100 + "%");
+};
+var config = {
+  width: {
+    property: "width",
+    scale: "sizes",
+    transform: getWidth
+  },
+  height: {
+    property: "height",
+    scale: "sizes"
+  },
+  minWidth: {
+    property: "minWidth",
+    scale: "sizes"
+  },
+  minHeight: {
+    property: "minHeight",
+    scale: "sizes"
+  },
+  maxWidth: {
+    property: "maxWidth",
+    scale: "sizes"
+  },
+  maxHeight: {
+    property: "maxHeight",
+    scale: "sizes"
+  },
+  size: {
+    properties: ["width", "height"],
+    scale: "sizes"
+  },
+  overflow: true,
+  overflowX: true,
+  overflowY: true,
+  display: true,
+  verticalAlign: true
+};
+var layout = system(config);
+var index_esm_default = layout;
+
+// node_modules/@class101/styled-system__color/dist/index.esm.js
+init_react_shim();
+var config2 = {
+  color: {
+    property: "color",
+    scale: "colors"
+  },
+  backgroundColor: {
+    property: "backgroundColor",
+    scale: "colors"
+  },
+  opacity: true
+};
+config2.bg = config2.backgroundColor;
+var color = system(config2);
+var index_esm_default2 = color;
+
+// node_modules/@class101/styled-system__typography/dist/index.esm.js
+init_react_shim();
+var defaults2 = {
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var config3 = {
+  fontFamily: {
+    property: "fontFamily",
+    scale: "fonts"
+  },
+  fontSize: {
+    property: "fontSize",
+    scale: "fontSizes",
+    defaultScale: defaults2.fontSizes
+  },
+  fontWeight: {
+    property: "fontWeight",
+    scale: "fontWeights"
+  },
+  lineHeight: {
+    property: "lineHeight",
+    scale: "lineHeights"
+  },
+  letterSpacing: {
+    property: "letterSpacing",
+    scale: "letterSpacings"
+  },
+  textAlign: true,
+  fontStyle: true
+};
+var typography = system(config3);
+var index_esm_default3 = typography;
+
+// node_modules/@class101/styled-system__flexbox/dist/index.esm.js
+init_react_shim();
+var config4 = {
+  alignItems: true,
+  alignContent: true,
+  justifyItems: true,
+  justifyContent: true,
+  flexWrap: true,
+  flexDirection: true,
+  flex: true,
+  flexGrow: true,
+  flexShrink: true,
+  flexBasis: true,
+  justifySelf: true,
+  alignSelf: true,
+  order: true
+};
+var flexbox = system(config4);
+var index_esm_default4 = flexbox;
+
+// node_modules/@class101/styled-system__border/dist/index.esm.js
+init_react_shim();
+var config5 = {
+  border: {
+    property: "border",
+    scale: "borders"
+  },
+  borderWidth: {
+    property: "borderWidth",
+    scale: "borderWidths"
+  },
+  borderStyle: {
+    property: "borderStyle",
+    scale: "borderStyles"
+  },
+  borderColor: {
+    property: "borderColor",
+    scale: "colors"
+  },
+  borderRadius: {
+    property: "borderRadius",
+    scale: "radii"
+  },
+  borderTop: {
+    property: "borderTop",
+    scale: "borders"
+  },
+  borderTopLeftRadius: {
+    property: "borderTopLeftRadius",
+    scale: "radii"
+  },
+  borderTopRightRadius: {
+    property: "borderTopRightRadius",
+    scale: "radii"
+  },
+  borderRight: {
+    property: "borderRight",
+    scale: "borders"
+  },
+  borderBottom: {
+    property: "borderBottom",
+    scale: "borders"
+  },
+  borderBottomLeftRadius: {
+    property: "borderBottomLeftRadius",
+    scale: "radii"
+  },
+  borderBottomRightRadius: {
+    property: "borderBottomRightRadius",
+    scale: "radii"
+  },
+  borderLeft: {
+    property: "borderLeft",
+    scale: "borders"
+  },
+  borderX: {
+    properties: ["borderLeft", "borderRight"],
+    scale: "borders"
+  },
+  borderY: {
+    properties: ["borderTop", "borderBottom"],
+    scale: "borders"
+  }
+};
+config5.borderTopWidth = {
+  property: "borderTopWidth",
+  scale: "borderWidths"
+};
+config5.borderTopColor = {
+  property: "borderTopColor",
+  scale: "colors"
+};
+config5.borderTopStyle = {
+  property: "borderTopStyle",
+  scale: "borderStyles"
+};
+config5.borderTopLeftRadius = {
+  property: "borderTopLeftRadius",
+  scale: "radii"
+};
+config5.borderTopRightRadius = {
+  property: "borderTopRightRadius",
+  scale: "radii"
+};
+config5.borderBottomWidth = {
+  property: "borderBottomWidth",
+  scale: "borderWidths"
+};
+config5.borderBottomColor = {
+  property: "borderBottomColor",
+  scale: "colors"
+};
+config5.borderBottomStyle = {
+  property: "borderBottomStyle",
+  scale: "borderStyles"
+};
+config5.borderBottomLeftRadius = {
+  property: "borderBottomLeftRadius",
+  scale: "radii"
+};
+config5.borderBottomRightRadius = {
+  property: "borderBottomRightRadius",
+  scale: "radii"
+};
+config5.borderLeftWidth = {
+  property: "borderLeftWidth",
+  scale: "borderWidths"
+};
+config5.borderLeftColor = {
+  property: "borderLeftColor",
+  scale: "colors"
+};
+config5.borderLeftStyle = {
+  property: "borderLeftStyle",
+  scale: "borderStyles"
+};
+config5.borderRightWidth = {
+  property: "borderRightWidth",
+  scale: "borderWidths"
+};
+config5.borderRightColor = {
+  property: "borderRightColor",
+  scale: "colors"
+};
+config5.borderRightStyle = {
+  property: "borderRightStyle",
+  scale: "borderStyles"
+};
+var border = system(config5);
+var index_esm_default5 = border;
+
+// node_modules/@class101/styled-system__background/dist/index.esm.js
+init_react_shim();
+var config6 = {
+  background: true,
+  backgroundImage: true,
+  backgroundSize: true,
+  backgroundPosition: true,
+  backgroundRepeat: true
+};
+config6.bgImage = config6.backgroundImage;
+config6.bgSize = config6.backgroundSize;
+config6.bgPosition = config6.backgroundPosition;
+config6.bgRepeat = config6.backgroundRepeat;
+var background = system(config6);
+var index_esm_default6 = background;
+
+// node_modules/@class101/styled-system__position/dist/index.esm.js
+init_react_shim();
+var defaults3 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config7 = {
+  position: true,
+  zIndex: {
+    property: "zIndex",
+    scale: "zIndices"
+  },
+  top: {
+    property: "top",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  right: {
+    property: "right",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  bottom: {
+    property: "bottom",
+    scale: "space",
+    defaultScale: defaults3.space
+  },
+  left: {
+    property: "left",
+    scale: "space",
+    defaultScale: defaults3.space
+  }
+};
+var position = system(config7);
+var index_esm_default7 = position;
+
+// node_modules/@class101/styled-system__space/dist/index.esm.js
+init_react_shim();
+var defaults4 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var isNumber3 = function isNumber4(n) {
+  return typeof n === "number" && !isNaN(n);
+};
+var getMargin = function getMargin2(n, scale) {
+  if (!isNumber3(n)) {
+    return get(scale, n, n);
+  }
+  var isNegative = n < 0;
+  var absolute = Math.abs(n);
+  var value = get(scale, absolute, absolute);
+  if (!isNumber3(value)) {
+    return isNegative ? "-" + value : value;
+  }
+  return value * (isNegative ? -1 : 1);
+};
+var configs = {};
+configs.margin = {
+  margin: {
+    property: "margin",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginTop: {
+    property: "marginTop",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginRight: {
+    property: "marginRight",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginBottom: {
+    property: "marginBottom",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginLeft: {
+    property: "marginLeft",
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginX: {
+    properties: ["marginLeft", "marginRight"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  },
+  marginY: {
+    properties: ["marginTop", "marginBottom"],
+    scale: "space",
+    transform: getMargin,
+    defaultScale: defaults4.space
+  }
+};
+configs.margin.m = configs.margin.margin;
+configs.margin.mt = configs.margin.marginTop;
+configs.margin.mr = configs.margin.marginRight;
+configs.margin.mb = configs.margin.marginBottom;
+configs.margin.ml = configs.margin.marginLeft;
+configs.margin.mx = configs.margin.marginX;
+configs.margin.my = configs.margin.marginY;
+configs.padding = {
+  padding: {
+    property: "padding",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingTop: {
+    property: "paddingTop",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingRight: {
+    property: "paddingRight",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingBottom: {
+    property: "paddingBottom",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingLeft: {
+    property: "paddingLeft",
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingX: {
+    properties: ["paddingLeft", "paddingRight"],
+    scale: "space",
+    defaultScale: defaults4.space
+  },
+  paddingY: {
+    properties: ["paddingTop", "paddingBottom"],
+    scale: "space",
+    defaultScale: defaults4.space
+  }
+};
+configs.padding.p = configs.padding.padding;
+configs.padding.pt = configs.padding.paddingTop;
+configs.padding.pr = configs.padding.paddingRight;
+configs.padding.pb = configs.padding.paddingBottom;
+configs.padding.pl = configs.padding.paddingLeft;
+configs.padding.px = configs.padding.paddingX;
+configs.padding.py = configs.padding.paddingY;
+var margin = system(configs.margin);
+var padding = system(configs.padding);
+var space = compose(margin, padding);
+
+// node_modules/@class101/styled-system__shadow/dist/index.esm.js
+init_react_shim();
+var shadow = system({
+  boxShadow: {
+    property: "boxShadow",
+    scale: "shadows"
+  },
+  textShadow: {
+    property: "textShadow",
+    scale: "shadows"
+  }
+});
+
+// node_modules/@class101/styled-system__variant/dist/index.esm.js
+init_react_shim();
+
+// node_modules/@class101/styled-system__css/dist/index.esm.js
+init_react_shim();
+function _extends() {
+  _extends = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var get3 = function get4(obj, key, def, p, undef) {
+  key = key && key.split ? key.split(".") : [key];
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+  return obj === undef ? def : obj;
+};
+var defaultBreakpoints = [40, 52, 64].map(function(n) {
+  return n + "em";
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
+};
+var aliases = {
+  bg: "backgroundColor",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mx: "marginX",
+  my: "marginY",
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  px: "paddingX",
+  py: "paddingY"
+};
+var multiples = {
+  marginX: ["marginLeft", "marginRight"],
+  marginY: ["marginTop", "marginBottom"],
+  paddingX: ["paddingLeft", "paddingRight"],
+  paddingY: ["paddingTop", "paddingBottom"],
+  size: ["width", "height"]
+};
+var scales = {
+  color: "colors",
+  backgroundColor: "colors",
+  borderColor: "colors",
+  margin: "space",
+  marginTop: "space",
+  marginRight: "space",
+  marginBottom: "space",
+  marginLeft: "space",
+  marginX: "space",
+  marginY: "space",
+  padding: "space",
+  paddingTop: "space",
+  paddingRight: "space",
+  paddingBottom: "space",
+  paddingLeft: "space",
+  paddingX: "space",
+  paddingY: "space",
+  top: "space",
+  right: "space",
+  bottom: "space",
+  left: "space",
+  gridGap: "space",
+  gridColumnGap: "space",
+  gridRowGap: "space",
+  gap: "space",
+  columnGap: "space",
+  rowGap: "space",
+  fontFamily: "fonts",
+  fontSize: "fontSizes",
+  fontWeight: "fontWeights",
+  lineHeight: "lineHeights",
+  letterSpacing: "letterSpacings",
+  border: "borders",
+  borderTop: "borders",
+  borderRight: "borders",
+  borderBottom: "borders",
+  borderLeft: "borders",
+  borderWidth: "borderWidths",
+  borderStyle: "borderStyles",
+  borderRadius: "radii",
+  borderTopRightRadius: "radii",
+  borderTopLeftRadius: "radii",
+  borderBottomRightRadius: "radii",
+  borderBottomLeftRadius: "radii",
+  borderTopWidth: "borderWidths",
+  borderTopColor: "colors",
+  borderTopStyle: "borderStyles",
+  borderBottomWidth: "borderWidths",
+  borderBottomColor: "colors",
+  borderBottomStyle: "borderStyles",
+  borderLeftWidth: "borderWidths",
+  borderLeftColor: "colors",
+  borderLeftStyle: "borderStyles",
+  borderRightWidth: "borderWidths",
+  borderRightColor: "colors",
+  borderRightStyle: "borderStyles",
+  outlineColor: "colors",
+  boxShadow: "shadows",
+  textShadow: "shadows",
+  zIndex: "zIndices",
+  width: "sizes",
+  minWidth: "sizes",
+  maxWidth: "sizes",
+  height: "sizes",
+  minHeight: "sizes",
+  maxHeight: "sizes",
+  flexBasis: "sizes",
+  size: "sizes",
+  fill: "colors",
+  stroke: "colors"
+};
+var positiveOrNegative = function positiveOrNegative2(scale, value) {
+  if (typeof value !== "number" || value >= 0) {
+    return get3(scale, value, value);
+  }
+  var absolute = Math.abs(value);
+  var n = get3(scale, absolute, absolute);
+  if (typeof n === "string")
+    return "-" + n;
+  return n * -1;
+};
+var transforms = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(acc, curr) {
+  var _extends2;
+  return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
+}, {});
+var responsive = function responsive2(styles) {
+  return function(theme) {
+    var next = {};
+    var breakpoints = get3(theme, "breakpoints", defaultBreakpoints);
+    var mediaQueries = [null].concat(breakpoints.map(function(n) {
+      return "@media screen and (min-width: " + n + ")";
+    }));
+    for (var key in styles) {
+      var value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
+      if (value == null)
+        continue;
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+      for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        var media = mediaQueries[i];
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+        next[media] = next[media] || {};
+        if (value[i] == null)
+          continue;
+        next[media][key] = value[i];
+      }
+    }
+    return next;
+  };
+};
+var css = function css2(args) {
+  return function(props) {
+    if (props === void 0) {
+      props = {};
+    }
+    var theme = _extends({}, defaultTheme, props.theme || props);
+    var result = {};
+    var obj = typeof args === "function" ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+    for (var key in styles) {
+      var x = styles[key];
+      var val = typeof x === "function" ? x(theme) : x;
+      if (key === "variant") {
+        var variant3 = css2(get3(theme, val))(theme);
+        result = _extends({}, result, variant3);
+        continue;
+      }
+      if (val && typeof val === "object") {
+        result[key] = css2(val)(theme);
+        continue;
+      }
+      var prop = get3(aliases, key, key);
+      var scaleName = get3(scales, prop);
+      var scale = get3(theme, scaleName, get3(theme, prop, {}));
+      var transform = get3(transforms, prop, get3);
+      var value = transform(scale, val, val);
+      if (multiples[prop]) {
+        var dirs = multiples[prop];
+        for (var i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+    return result;
+  };
+};
+var index_esm_default8 = css;
+
+// node_modules/@class101/styled-system__variant/dist/index.esm.js
+var variant = function variant2(_ref) {
+  var _config;
+  var scale = _ref.scale, _ref$prop = _ref.prop, prop = _ref$prop === void 0 ? "variant" : _ref$prop, _ref$variants = _ref.variants, variants = _ref$variants === void 0 ? {} : _ref$variants, key = _ref.key;
+  var sx;
+  if (Object.keys(variants).length) {
+    sx = function sx2(value, scale2, props) {
+      return index_esm_default8(get(scale2, value, null))(props.theme);
+    };
+  } else {
+    sx = function sx2(value, scale2) {
+      return get(scale2, value, null);
+    };
+  }
+  sx.scale = scale || key;
+  sx.defaults = variants;
+  var config9 = (_config = {}, _config[prop] = sx, _config);
+  var parser = createParser(config9);
+  return parser;
+};
+var buttonStyle = variant({
+  key: "buttons"
+});
+var textStyle = variant({
+  key: "textStyles",
+  prop: "textStyle"
+});
+var colorStyle = variant({
+  key: "colorStyles",
+  prop: "colors"
+});
+
+// node_modules/@class101/styled-system/dist/index.esm.js
+init_react_shim();
+
+// node_modules/@class101/styled-system__grid/dist/index.esm.js
+init_react_shim();
+var defaults5 = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512]
+};
+var config8 = {
+  gridGap: {
+    property: "gridGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridColumnGap: {
+    property: "gridColumnGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridRowGap: {
+    property: "gridRowGap",
+    scale: "space",
+    defaultScale: defaults5.space
+  },
+  gridColumn: true,
+  gridRow: true,
+  gridAutoFlow: true,
+  gridAutoColumns: true,
+  gridAutoRows: true,
+  gridTemplateColumns: true,
+  gridTemplateRows: true,
+  gridTemplateAreas: true,
+  gridArea: true
+};
+var grid = system(config8);
+var index_esm_default9 = grid;
+
+// node_modules/@class101/styled-system/dist/index.esm.js
+var width = index_esm_default.width;
+var height = index_esm_default.height;
+var minWidth = index_esm_default.minWidth;
+var minHeight = index_esm_default.minHeight;
+var maxWidth = index_esm_default.maxWidth;
+var maxHeight = index_esm_default.maxHeight;
+var size = index_esm_default.size;
+var verticalAlign = index_esm_default.verticalAlign;
+var display = index_esm_default.display;
+var overflow = index_esm_default.overflow;
+var overflowX = index_esm_default.overflowX;
+var overflowY = index_esm_default.overflowY;
+var opacity = index_esm_default2.opacity;
+var fontSize = index_esm_default3.fontSize;
+var fontFamily = index_esm_default3.fontFamily;
+var fontWeight = index_esm_default3.fontWeight;
+var lineHeight = index_esm_default3.lineHeight;
+var textAlign = index_esm_default3.textAlign;
+var fontStyle = index_esm_default3.fontStyle;
+var letterSpacing = index_esm_default3.letterSpacing;
+var alignItems = index_esm_default4.alignItems;
+var alignContent = index_esm_default4.alignContent;
+var justifyItems = index_esm_default4.justifyItems;
+var justifyContent = index_esm_default4.justifyContent;
+var flexWrap = index_esm_default4.flexWrap;
+var flexDirection = index_esm_default4.flexDirection;
+var flex = index_esm_default4.flex;
+var flexGrow = index_esm_default4.flexGrow;
+var flexShrink = index_esm_default4.flexShrink;
+var flexBasis = index_esm_default4.flexBasis;
+var justifySelf = index_esm_default4.justifySelf;
+var alignSelf = index_esm_default4.alignSelf;
+var order = index_esm_default4.order;
+var gridGap = index_esm_default9.gridGap;
+var gridColumnGap = index_esm_default9.gridColumnGap;
+var gridRowGap = index_esm_default9.gridRowGap;
+var gridColumn = index_esm_default9.gridColumn;
+var gridRow = index_esm_default9.gridRow;
+var gridAutoFlow = index_esm_default9.gridAutoFlow;
+var gridAutoColumns = index_esm_default9.gridAutoColumns;
+var gridAutoRows = index_esm_default9.gridAutoRows;
+var gridTemplateColumns = index_esm_default9.gridTemplateColumns;
+var gridTemplateRows = index_esm_default9.gridTemplateRows;
+var gridTemplateAreas = index_esm_default9.gridTemplateAreas;
+var gridArea = index_esm_default9.gridArea;
+var borderWidth = index_esm_default5.borderWidth;
+var borderStyle = index_esm_default5.borderStyle;
+var borderColor = index_esm_default5.borderColor;
+var borderTop = index_esm_default5.borderTop;
+var borderRight = index_esm_default5.borderRight;
+var borderBottom = index_esm_default5.borderBottom;
+var borderLeft = index_esm_default5.borderLeft;
+var borderRadius = index_esm_default5.borderRadius;
+var backgroundImage = index_esm_default6.backgroundImage;
+var backgroundSize = index_esm_default6.backgroundSize;
+var backgroundPosition = index_esm_default6.backgroundPosition;
+var backgroundRepeat = index_esm_default6.backgroundRepeat;
+var zIndex = index_esm_default7.zIndex;
+var top = index_esm_default7.top;
+var right = index_esm_default7.right;
+var bottom = index_esm_default7.bottom;
+var left = index_esm_default7.left;
+
+export {
+  system,
+  compose,
+  layout,
+  color,
+  typography,
+  flexbox,
+  border,
+  background,
+  position,
+  space,
+  shadow,
+  variant
+};