@janbox/storefront-ui 1.0.0

package/dist/lib/checkbox/checkbox.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const checkbox_module = require("./checkbox.module.scss.cjs");
+const svgLoader = require("../../components/svg-loader.cjs");
+const utils_index = require("../../utils/index.cjs");
+const doneCheck = require("../../assets/svg/done-check.svg.cjs");
+const minus = require("../../assets/svg/minus.svg.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const Checkbox = ({
+  children,
+  indeterminate,
+  color = "primary",
+  className,
+  ref,
+  containerProps,
+  ...props
+}) => {
+  const { main, contrastText } = utils_index.getColorShadesByVariant(color);
+  const inputRef = react.useRef(null);
+  const mergedRefs = react$1.useMergeRefs([ref, inputRef]);
+  react.useEffect(() => {
+    const inputEl = inputRef.current;
+    if (inputEl) {
+      inputEl.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      ...containerProps,
+      className: stylesheet.cn(checkbox_module.default.checkbox__container, containerProps == null ? void 0 : containerProps.className),
+      css: {
+        "--checkbox-color": main,
+        "--checkbox-contrast-text": contrastText
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: checkbox_module.default.checkbox__main, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, type: "checkbox", className: stylesheet.cn(checkbox_module.default.checkbox__input, className), ref: mergedRefs }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: checkbox_module.default.checkbox__checkmark, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(svgLoader.SvgLoader, { className: checkbox_module.default.checkbox__icon_checked, width: 18, height: 18, source: doneCheck }),
+            /* @__PURE__ */ jsxRuntime.jsx(svgLoader.SvgLoader, { className: checkbox_module.default.checkbox__icon_indeterminate, width: 18, height: 18, source: minus })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+exports.Checkbox = Checkbox;

package/dist/lib/checkbox/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps } from './types';
+export declare const Checkbox: ({ children, indeterminate, color, className, ref, containerProps, ...props }: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/lib/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQxC,eAAO,MAAM,QAAQ,iFAQlB,aAAa,qDAiCf,CAAC"}

package/dist/lib/checkbox/checkbox.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import classes from "./checkbox.module.scss.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import MinusIcon from "../../assets/svg/minus.svg.js";
+import { cn } from "../../utils/stylesheet.js";
+const Checkbox = ({
+  children,
+  indeterminate,
+  color = "primary",
+  className,
+  ref,
+  containerProps,
+  ...props
+}) => {
+  const { main, contrastText } = getColorShadesByVariant(color);
+  const inputRef = useRef(null);
+  const mergedRefs = useMergeRefs([ref, inputRef]);
+  useEffect(() => {
+    const inputEl = inputRef.current;
+    if (inputEl) {
+      inputEl.indeterminate = indeterminate ?? false;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...containerProps,
+      className: cn(classes.checkbox__container, containerProps == null ? void 0 : containerProps.className),
+      css: {
+        "--checkbox-color": main,
+        "--checkbox-contrast-text": contrastText
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: classes.checkbox__main, children: [
+          /* @__PURE__ */ jsx("input", { ...props, type: "checkbox", className: cn(classes.checkbox__input, className), ref: mergedRefs }),
+          /* @__PURE__ */ jsxs("span", { className: classes.checkbox__checkmark, children: [
+            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_checked, width: 18, height: 18, source: CheckIcon }),
+            /* @__PURE__ */ jsx(SvgLoader, { className: classes.checkbox__icon_indeterminate, width: 18, height: 18, source: MinusIcon })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  Checkbox
+};

package/dist/lib/checkbox/checkbox.module.scss.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const checkbox__container = "_checkbox__container_1rrv2_1";
+const checkbox__input = "_checkbox__input_1rrv2_10";
+const checkbox__main = "_checkbox__main_1rrv2_15";
+const checkbox__checkmark = "_checkbox__checkmark_1rrv2_32";
+const checkbox__icon_checked = "_checkbox__icon_checked_1rrv2_43";
+const checkbox__icon_indeterminate = "_checkbox__icon_indeterminate_1rrv2_43";
+const classes = {
+  checkbox__container,
+  checkbox__input,
+  checkbox__main,
+  checkbox__checkmark,
+  checkbox__icon_checked,
+  checkbox__icon_indeterminate
+};
+exports.checkbox__checkmark = checkbox__checkmark;
+exports.checkbox__container = checkbox__container;
+exports.checkbox__icon_checked = checkbox__icon_checked;
+exports.checkbox__icon_indeterminate = checkbox__icon_indeterminate;
+exports.checkbox__input = checkbox__input;
+exports.checkbox__main = checkbox__main;
+exports.default = classes;

package/dist/lib/checkbox/checkbox.module.scss.js

@@ -0,0 +1,23 @@
+const checkbox__container = "_checkbox__container_1rrv2_1";
+const checkbox__input = "_checkbox__input_1rrv2_10";
+const checkbox__main = "_checkbox__main_1rrv2_15";
+const checkbox__checkmark = "_checkbox__checkmark_1rrv2_32";
+const checkbox__icon_checked = "_checkbox__icon_checked_1rrv2_43";
+const checkbox__icon_indeterminate = "_checkbox__icon_indeterminate_1rrv2_43";
+const classes = {
+  checkbox__container,
+  checkbox__input,
+  checkbox__main,
+  checkbox__checkmark,
+  checkbox__icon_checked,
+  checkbox__icon_indeterminate
+};
+export {
+  checkbox__checkmark,
+  checkbox__container,
+  checkbox__icon_checked,
+  checkbox__icon_indeterminate,
+  checkbox__input,
+  checkbox__main,
+  classes as default
+};

package/dist/lib/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/lib/checkbox/types.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { Interpolation } from '@emotion/react';
+import { ColorVariant, ShallowMerge } from '../../types';
+export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
+    color?: ColorVariant;
+    /**
+     * using this prop will make the checkbox indeterminate
+     * and the checked prop will be ignored
+     * see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/indeterminate
+     */
+    indeterminate?: boolean;
+    containerProps?: JSX.IntrinsicElements['label'] & {
+        css?: Interpolation;
+    };
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/checkbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B;IACE,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG;QAChD,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;CACH,CACF,CAAC"}

package/dist/lib/chip/chip.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const helpers = require("./helpers.cjs");
+const utils_index = require("../../utils/index.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const Chip = ({ children, ..._props }) => {
+  const { xs, sm, md, lg, color = "green", ...rest } = helpers.getChipProps(_props);
+  const { light, main } = utils_index.getColorShadesByVariant(color);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      className: stylesheet.cn(rest.className),
+      css: [
+        {
+          width: "fit-content",
+          maxWidth: "100%",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: light,
+          borderTopWidth: 1,
+          borderRightWidth: 1,
+          borderBottomWidth: 1,
+          borderLeftWidth: 1,
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          borderBottomLeftRadius: 8,
+          borderBottomRightRadius: 8,
+          borderColor: main,
+          color: main
+        },
+        createStyle(xs),
+        {
+          [theme_screens.mediaQuery("sm")]: createStyle(sm),
+          [theme_screens.mediaQuery("md")]: createStyle(md),
+          [theme_screens.mediaQuery("lg")]: createStyle(lg)
+        }
+      ],
+      children
+    }
+  );
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputSize, inputPaddingX, textVariant } = utils_index.getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      minHeight: inputSize,
+      fontSize: textVariant ? theme_typography.getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? theme_typography.getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+exports.Chip = Chip;

package/dist/lib/chip/chip.d.ts

@@ -0,0 +1,3 @@
+import { ChipProps } from './types';
+export declare const Chip: ({ children, ..._props }: ChipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chip.d.ts.map

package/dist/lib/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/chip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,SAAS,CAAC;AAOzD,eAAO,MAAM,IAAI,4BAA6B,SAAS,qDAsCtD,CAAC"}

package/dist/lib/chip/chip.js

@@ -0,0 +1,60 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getChipProps } from "./helpers.js";
+import { getColorShadesByVariant, getSizeVariantState } from "../../utils/index.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { cn } from "../../utils/stylesheet.js";
+const Chip = ({ children, ..._props }) => {
+  const { xs, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
+  const { light, main } = getColorShadesByVariant(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(rest.className),
+      css: [
+        {
+          width: "fit-content",
+          maxWidth: "100%",
+          display: "flex",
+          alignItems: "center",
+          backgroundColor: light,
+          borderTopWidth: 1,
+          borderRightWidth: 1,
+          borderBottomWidth: 1,
+          borderLeftWidth: 1,
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          borderBottomLeftRadius: 8,
+          borderBottomRightRadius: 8,
+          borderColor: main,
+          color: main
+        },
+        createStyle(xs),
+        {
+          [mediaQuery("sm")]: createStyle(sm),
+          [mediaQuery("md")]: createStyle(md),
+          [mediaQuery("lg")]: createStyle(lg)
+        }
+      ],
+      children
+    }
+  );
+};
+const createStyle = ({ css, size } = {}) => {
+  const { inputSize, inputPaddingX, textVariant } = getSizeVariantState(size);
+  return [
+    {
+      paddingLeft: inputPaddingX,
+      paddingRight: inputPaddingX,
+      minHeight: inputSize,
+      fontSize: textVariant ? getTypographyVar(textVariant).fontSize : void 0,
+      lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : void 0
+    },
+    css
+  ];
+};
+export {
+  Chip
+};

package/dist/lib/chip/helpers.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_index = require("../../utils/index.cjs");
+const defaultProps = {
+  xs: {
+    css: {},
+    size: "md"
+  },
+  color: "primary"
+};
+const getChipProps = (extended) => {
+  return utils_index.mergeComponentProps(defaultProps, extended);
+};
+exports.getChipProps = getChipProps;

package/dist/lib/chip/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ChipProps } from './types';
+export declare const getChipProps: (extended: ChipProps) => ChipProps;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/chip/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAYpC,eAAO,MAAM,YAAY,aAAc,SAAS,cAE/C,CAAC"}

package/dist/lib/chip/helpers.js

@@ -0,0 +1,14 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  xs: {
+    css: {},
+    size: "md"
+  },
+  color: "primary"
+};
+const getChipProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getChipProps
+};

package/dist/lib/chip/index.d.ts

@@ -0,0 +1,4 @@
+export * from './chip';
+export * from './types';
+export * from './helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/chip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}

package/dist/lib/chip/types.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { ColorVariant, SizeVariant, ResponsiveDesign, ShallowMerge, PropsWithCSS } from '../../types';
+export interface ChipResponsiveProps extends PropsWithCSS {
+    size?: SizeVariant;
+}
+type ChipExtendedProps = ResponsiveDesign<ChipResponsiveProps> & {
+    color?: ColorVariant;
+};
+export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEpG,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,GAAG;IAC/D,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,iBAAiB,CAAC,CAAC"}

package/dist/lib/collapse/collapse.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("motion/react");
+require("clsx");
+require("lodash-es");
+require("../../theme/palette.cjs");
+const stylesheet = require("../../utils/stylesheet.cjs");
+const Collapse = react.forwardRef(
+  ({ children, open = true, collapsedSize = 0, orientation = "vertical", className, ...props }, ref) => {
+    const defaultOpen = react.useRef(open);
+    const initial = react.useMemo(() => {
+      const css = {};
+      if (defaultOpen.current) {
+        css.width = orientation === "horizontal" ? "auto" : void 0;
+        css.height = orientation === "vertical" ? "auto" : void 0;
+      } else {
+        css.width = orientation === "horizontal" ? collapsedSize : void 0;
+        css.height = orientation === "vertical" ? collapsedSize : void 0;
+      }
+      return css;
+    }, [collapsedSize, orientation]);
+    const animate = react.useMemo(() => {
+      const css = {};
+      if (open) {
+        css.width = orientation === "horizontal" ? "auto" : void 0;
+        css.height = orientation === "vertical" ? "auto" : void 0;
+      } else {
+        css.width = orientation === "horizontal" ? collapsedSize : void 0;
+        css.height = orientation === "vertical" ? collapsedSize : void 0;
+      }
+      return css;
+    }, [collapsedSize, open, orientation]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.div,
+      {
+        css: { overflow: "hidden" },
+        className: stylesheet.cn(className),
+        animate,
+        initial,
+        ...props,
+        transition: { duration: 0.15, ...props.transition },
+        ref,
+        children
+      }
+    );
+  }
+);
+exports.Collapse = Collapse;

package/dist/lib/collapse/collapse.d.ts

@@ -0,0 +1,3 @@
+import { CollapseProps } from './types';
+export declare const Collapse: import('react').ForwardRefExoticComponent<Omit<CollapseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=collapse.d.ts.map

package/dist/lib/collapse/collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/collapse.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIxC,eAAO,MAAM,QAAQ,uHA8CpB,CAAC"}

package/dist/lib/collapse/collapse.js

@@ -0,0 +1,50 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from "react";
+import { motion } from "motion/react";
+import "clsx";
+import "lodash-es";
+import "../../theme/palette.js";
+import { cn } from "../../utils/stylesheet.js";
+const Collapse = forwardRef(
+  ({ children, open = true, collapsedSize = 0, orientation = "vertical", className, ...props }, ref) => {
+    const defaultOpen = useRef(open);
+    const initial = useMemo(() => {
+      const css = {};
+      if (defaultOpen.current) {
+        css.width = orientation === "horizontal" ? "auto" : void 0;
+        css.height = orientation === "vertical" ? "auto" : void 0;
+      } else {
+        css.width = orientation === "horizontal" ? collapsedSize : void 0;
+        css.height = orientation === "vertical" ? collapsedSize : void 0;
+      }
+      return css;
+    }, [collapsedSize, orientation]);
+    const animate = useMemo(() => {
+      const css = {};
+      if (open) {
+        css.width = orientation === "horizontal" ? "auto" : void 0;
+        css.height = orientation === "vertical" ? "auto" : void 0;
+      } else {
+        css.width = orientation === "horizontal" ? collapsedSize : void 0;
+        css.height = orientation === "vertical" ? collapsedSize : void 0;
+      }
+      return css;
+    }, [collapsedSize, open, orientation]);
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        css: { overflow: "hidden" },
+        className: cn(className),
+        animate,
+        initial,
+        ...props,
+        transition: { duration: 0.15, ...props.transition },
+        ref,
+        children
+      }
+    );
+  }
+);
+export {
+  Collapse
+};

package/dist/lib/collapse/index.d.ts

@@ -0,0 +1,3 @@
+export * from './collapse';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/collapse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/collapse/types.d.ts

@@ -0,0 +1,8 @@
+import { HTMLMotionProps } from 'motion/react';
+import { ShallowMerge } from '../../types';
+export type CollapseProps = ShallowMerge<HTMLMotionProps<'div'>, {
+    open?: boolean;
+    collapsedSize?: number;
+    orientation?: 'horizontal' | 'vertical';
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/collapse/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,aAAa,GAAG,YAAY,CACtC,eAAe,CAAC,KAAK,CAAC,EACtB;IACE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,CACF,CAAC"}

package/dist/lib/container/container.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const lodashEs = require("lodash-es");
+const helpers = require("./helpers.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const CONTAINER_PADDING_VAR_NAME = "--container-padding";
+const CONTAINER_PADDING_VAR = `var(${CONTAINER_PADDING_VAR_NAME})`;
+const getContainerPaddingCSS = (position) => {
+  return lodashEs.isNil(position) ? {} : {
+    paddingLeft: position === "start" ? 0 : CONTAINER_PADDING_VAR,
+    paddingRight: position === "end" ? 0 : CONTAINER_PADDING_VAR
+  };
+};
+const CONTAINER_CONTENT_PADDING_VAR_NAME = "--container-content-padding";
+const CONTAINER_CONTENT_PADDING_VAR = `var(${CONTAINER_CONTENT_PADDING_VAR_NAME}, 0)`;
+const getContainerContentPaddingCSS = (position) => {
+  return lodashEs.isNil(position) ? {} : {
+    paddingLeft: position === "start" ? 0 : CONTAINER_CONTENT_PADDING_VAR,
+    paddingRight: position === "end" ? 0 : CONTAINER_CONTENT_PADDING_VAR
+  };
+};
+const Container = ({ children, ref, ..._props }) => {
+  const { xs, sm, md, lg, ...rest } = helpers.getContainerProps(_props);
+  const css = [
+    {
+      width: "100%"
+    },
+    createStyle(xs),
+    {
+      [theme_screens.mediaQuery("sm")]: createStyle(sm),
+      [theme_screens.mediaQuery("md")]: createStyle(md),
+      [theme_screens.mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css, ...rest, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: [
+        {
+          width: "100%",
+          [CONTAINER_PADDING_VAR_NAME]: "0px",
+          ...getContainerPaddingCSS(xs == null ? void 0 : xs.position)
+        },
+        {
+          [theme_screens.mediaQuery("sm")]: {
+            width: "100%",
+            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${theme_screens.breakpoint.sm.minWidth}px) / 2)`,
+            ...getContainerPaddingCSS(sm == null ? void 0 : sm.position)
+          },
+          [theme_screens.mediaQuery("md")]: {
+            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${theme_screens.breakpoint.md.minWidth}px) / 2)`,
+            ...getContainerPaddingCSS(md == null ? void 0 : md.position)
+          },
+          [theme_screens.mediaQuery("lg")]: {
+            [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${theme_screens.breakpoint.lg.minWidth}px) / 2)`,
+            ...getContainerPaddingCSS(lg == null ? void 0 : lg.position)
+          }
+        }
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          css: [
+            {
+              width: "100%",
+              [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${theme_screens.breakpoint.xs.padding}px`,
+              ...getContainerContentPaddingCSS(xs == null ? void 0 : xs.position)
+            },
+            {
+              [theme_screens.mediaQuery("sm")]: [
+                {
+                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${theme_screens.breakpoint.sm.padding}px`,
+                  ...getContainerContentPaddingCSS(sm == null ? void 0 : sm.position)
+                }
+              ],
+              [theme_screens.mediaQuery("md")]: [
+                {
+                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${theme_screens.breakpoint.md.padding}px`,
+                  ...getContainerContentPaddingCSS(md == null ? void 0 : md.position)
+                }
+              ],
+              [theme_screens.mediaQuery("lg")]: [
+                {
+                  [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${theme_screens.breakpoint.lg.padding}px`,
+                  ...getContainerContentPaddingCSS(lg == null ? void 0 : lg.position)
+                }
+              ]
+            }
+          ],
+          children
+        }
+      )
+    }
+  ) });
+};
+const createStyle = ({ css } = {}) => {
+  return [css];
+};
+exports.Container = Container;

package/dist/lib/container/container.d.ts

@@ -0,0 +1,3 @@
+import { ContainerProps } from './types';
+export declare const Container: ({ children, ref, ..._props }: ContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=container.d.ts.map

package/dist/lib/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/lib/container/container.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqB,cAAc,EAA4B,MAAM,SAAS,CAAC;AA2BtF,eAAO,MAAM,SAAS,iCAAkC,cAAc,qDA2ErE,CAAC"}