@janbox/storefront-ui 1.0.1 → 1.0.3

package/dist/lib/drawer/drawer/drawer.cjs

@@ -1,100 +0,0 @@
-"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");
-const theme_index = require("../../../theme/index.cjs");
-const floating = require("../../floating/floating/floating.cjs");
-const floatingContent = require("../../floating/floating-content/floating-content.cjs");
-const Drawer = ({ children, placement = "left", ...props }) => {
-  const initial = react.useMemo(() => {
-    switch (placement) {
-      case "left":
-        return { x: "-100%" };
-      case "right":
-        return { x: "100%" };
-      case "top":
-        return { y: "-100%" };
-      case "bottom":
-        return { y: "100%" };
-    }
-  }, [placement]);
-  const animate = react.useMemo(() => {
-    switch (placement) {
-      case "left":
-      case "right":
-        return { x: 0 };
-      case "top":
-      case "bottom":
-        return { y: 0 };
-    }
-  }, [placement]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    floating.Floating,
-    {
-      dismissProps: {
-        enabled: true
-      },
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        floatingContent.FloatingContent,
-        {
-          floatingOverlayProps: {
-            disabled: false,
-            lockScroll: true,
-            style: {
-              zIndex: theme_index.FLOATING_Z_INDEX
-            }
-          },
-          css: {
-            maxHeight: "100%",
-            maxWidth: "100%",
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                css: {
-                  position: "fixed",
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  left: 0,
-                  backgroundColor: "rgba(0, 0, 0, 0.4)",
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react$1.motion.div,
-              {
-                initial,
-                animate,
-                exit: initial,
-                transition: {
-                  duration: 0.2,
-                  ease: "easeInOut"
-                },
-                css: [
-                  {
-                    position: "fixed",
-                    backgroundColor: "white"
-                  },
-                  placement === "left" && { top: 0, bottom: 0, left: 0 },
-                  placement === "right" && { top: 0, bottom: 0, right: 0 },
-                  placement === "top" && { left: 0, right: 0, top: 0 },
-                  placement === "bottom" && { left: 0, right: 0, bottom: 0 }
-                ],
-                children
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-exports.Drawer = Drawer;

package/dist/lib/drawer/drawer/helpers.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const helpers = require("../../floating/floating/helpers.cjs");
-const useDrawerContext = () => {
-  return helpers.useFloatingContext();
-};
-exports.useDrawerContext = useDrawerContext;

package/dist/lib/drawer/drawer-close/drawer-close.cjs

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const floatingClose = require("../../floating/floating-close/floating-close.cjs");
-const DrawerClose = floatingClose.FloatingClose;
-exports.DrawerClose = DrawerClose;

package/dist/lib/filter-panel/checkbox-filter-panel.cjs

@@ -1,107 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const lodashEs = require("lodash-es");
-const virtualizedList = require("../../components/virtualized-list.cjs");
-const useQueryParams = require("../../hooks/use-query-params.cjs");
-require("clsx");
-require("../../theme/palette.cjs");
-const common = require("../../utils/common.cjs");
-const queryParams = require("../../utils/query-params.cjs");
-const checkbox = require("../checkbox/checkbox.cjs");
-const input = require("../input/input.cjs");
-const ROW_HEIGHT = 32;
-const DISPLAY_ROW_COUNT = 5;
-const CheckboxFilterPanel = ({
-  value,
-  options,
-  inputSearchProps: _inputSearchProps,
-  onChange,
-  queryParam,
-  name,
-  listProps
-}) => {
-  const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
-  const [inputValue, setInputValue] = react.useState("");
-  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams(
-    queryParam ? {
-      [queryParam.key]: {
-        parser(value2) {
-          return new queryParams.ArrayParamParser(value2).parse();
-        }
-      }
-    } : {}
-  );
-  const valueSet = react.useMemo(() => {
-    const queryParamKey = queryParam == null ? void 0 : queryParam.key;
-    const valueByQueryParam = queryParamKey ? queryParams$1[queryParamKey] : void 0;
-    return new Set(value ?? valueByQueryParam ?? []);
-  }, [queryParam == null ? void 0 : queryParam.key, queryParams$1, value]);
-  const onSearchChange = (e) => {
-    var _a;
-    e.target.value = lodashEs.trimStart(e.target.value);
-    setInputValue(e.target.value);
-    (_a = inputSearchProps.onChange) == null ? void 0 : _a.call(inputSearchProps, e);
-  };
-  const displayOptions = react.useMemo(() => {
-    if (!inputValue) {
-      return options;
-    }
-    return options.filter((option) => common.matchSearch(option.searchLabel ?? String(option.label), inputValue));
-  }, [inputValue, options]);
-  const RowComponent = ({ row }) => {
-    const rowData = displayOptions.at(row.index);
-    const onCheckboxChange = (e) => {
-      if (queryParam) {
-        const currentList = queryParams$1[queryParam.key] ?? [];
-        const targetValue = e.currentTarget.value;
-        const nextList = e.target.checked ? [...currentList, targetValue] : currentList.filter((value2) => value2 !== targetValue);
-        setQueryParams(
-          {
-            [queryParam.key]: nextList.length ? nextList : void 0
-          },
-          {
-            preventScrollReset: true
-          }
-        );
-      }
-      onChange == null ? void 0 : onChange(e);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      checkbox.Checkbox,
-      {
-        containerProps: {
-          style: {
-            width: "100%"
-          }
-        },
-        name,
-        checked: rowData ? rowData.isChecked ?? valueSet.has(rowData.value) : false,
-        value: rowData == null ? void 0 : rowData.value,
-        onChange: onCheckboxChange,
-        children: rowData == null ? void 0 : rowData.label
-      }
-    ) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      virtualizedList.VirtualizedList,
-      {
-        options: {
-          count: displayOptions.length,
-          estimateSize: () => ROW_HEIGHT
-        },
-        RowComponent,
-        style: {
-          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT,
-          ...listProps == null ? void 0 : listProps.style
-        },
-        css: { paddingLeft: 8, paddingRight: 8 },
-        ...listProps
-      }
-    )
-  ] });
-};
-exports.CheckboxFilterPanel = CheckboxFilterPanel;

package/dist/lib/filter-panel/filter-panel.cjs

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const usehooksTs = require("usehooks-ts");
-const checkboxFilterPanel = require("./checkbox-filter-panel.cjs");
-const inputRangeFilterPanel = require("./input-range-filter-panel.cjs");
-const inputTextFilterPanel = require("./input-text-filter-panel.cjs");
-const radioFilterPanel = require("./radio-filter-panel.cjs");
-const arrowDown = require("../../assets/svg/arrow-down.svg.cjs");
-const collapse = require("../collapse/collapse.cjs");
-const icon = require("../icon/icon.cjs");
-const FilterPanel = ({ label, defaultOpen = true, className, ...props }) => {
-  const [open, toggle] = usehooksTs.useToggle(defaultOpen);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 }, children: react.isValidElement(label) ? label : /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        icon.Icon,
-        {
-          css: {
-            transition: "transform 150ms",
-            ...open ? { transform: "rotate(-180deg)" } : {}
-          },
-          source: arrowDown
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(collapse.Collapse, { open, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      props.fieldType === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(checkboxFilterPanel.CheckboxFilterPanel, { ...props }),
-      props.fieldType === "radio" && /* @__PURE__ */ jsxRuntime.jsx(radioFilterPanel.RadioFilterPanel, { ...props }),
-      props.fieldType === "input-range" && /* @__PURE__ */ jsxRuntime.jsx(inputRangeFilterPanel.InputRangeFilterPanel, { ...props }),
-      props.fieldType === "input-text" && /* @__PURE__ */ jsxRuntime.jsx(inputTextFilterPanel.InputTextFilterPanel, { ...props })
-    ] }) })
-  ] });
-};
-exports.FilterPanel = FilterPanel;

package/dist/lib/filter-panel/input-range-filter-panel.cjs

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const constants_index = require("../../constants/index.cjs");
-const useQueryParams = require("../../hooks/use-query-params.cjs");
-require("react");
-require("clsx");
-require("lodash-es");
-require("../../theme/palette.cjs");
-const queryParams = require("../../utils/query-params.cjs");
-const inputRange = require("../input-range/input-range.cjs");
-const InputRangeFilterPanel = ({ value, queryParam, placeholder, onChange }) => {
-  var _a, _b, _c, _d;
-  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams({
-    ...((_a = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a.key) ? {
-      [queryParam.from.key]: {
-        parser(value2) {
-          return new queryParams.NumberParamParser(value2).parse();
-        }
-      }
-    } : {},
-    ...((_b = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b.key) ? {
-      [queryParam.to.key]: {
-        parser(value2) {
-          return new queryParams.NumberParamParser(value2).parse();
-        }
-      }
-    } : {}
-  });
-  const finalValue = {
-    from: (value == null ? void 0 : value.from) ?? (((_c = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _c.key) ? queryParams$1[queryParam.from.key] : void 0),
-    to: (value == null ? void 0 : value.to) ?? (((_d = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _d.key) ? queryParams$1[queryParam.to.key] : void 0)
-  };
-  const onInputRangeChange = (event, edge) => {
-    var _a2, _b2;
-    const valueAsNumber = event.target.valueAsNumber;
-    if (edge === "from" && ((_a2 = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a2.key)) {
-      setQueryParams(
-        {
-          [queryParam.from.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
-        },
-        {
-          preventScrollReset: true
-        }
-      );
-    }
-    if (edge === "to" && ((_b2 = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b2.key)) {
-      setQueryParams(
-        {
-          [queryParam.to.key]: isNaN(valueAsNumber) ? void 0 : valueAsNumber
-        },
-        {
-          preventScrollReset: true
-        }
-      );
-    }
-    onChange == null ? void 0 : onChange(event, edge);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    inputRange.InputRange,
-    {
-      onChange: onInputRangeChange,
-      inputs: [
-        {
-          debounce: constants_index.TYPING_DEBOUNCE,
-          value: finalValue.from ?? "",
-          placeholder: placeholder == null ? void 0 : placeholder.from
-        },
-        {
-          debounce: constants_index.TYPING_DEBOUNCE,
-          value: finalValue.to ?? "",
-          placeholder: placeholder == null ? void 0 : placeholder.to
-        }
-      ]
-    }
-  );
-};
-exports.InputRangeFilterPanel = InputRangeFilterPanel;

package/dist/lib/filter-panel/input-text-filter-panel.cjs

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-const useQueryParams = require("../../hooks/use-query-params.cjs");
-require("react");
-require("clsx");
-require("../../theme/palette.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const queryParams = require("../../utils/query-params.cjs");
-const input = require("../input/input.cjs");
-const InputTextFilterPanel = ({ queryParam, fieldType, ...props }) => {
-  const queryParamKey = queryParam == null ? void 0 : queryParam.key;
-  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams(
-    queryParamKey ? {
-      [queryParamKey]: {
-        parser(value) {
-          return new queryParams.StringParamParser(value).parse();
-        }
-      }
-    } : {}
-  );
-  const finalValue = (() => {
-    if (lodashEs.isString(props.value)) {
-      return props.value;
-    }
-    if (queryParamKey) {
-      return queryParams$1[queryParamKey] ?? "";
-    }
-    return "";
-  })();
-  const onChange = (e) => {
-    var _a;
-    (_a = props.onChange) == null ? void 0 : _a.call(props, e);
-    if (queryParamKey) {
-      setQueryParams(
-        {
-          [queryParamKey]: e.target.value
-        },
-        {
-          preventScrollReset: true
-        }
-      );
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    input.Input,
-    {
-      name: queryParamKey,
-      ...props,
-      value: finalValue,
-      onChange,
-      className: stylesheet.cn(fieldType, props.className)
-    }
-  );
-};
-exports.InputTextFilterPanel = InputTextFilterPanel;

package/dist/lib/filter-panel/radio-filter-panel.cjs

@@ -1,95 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const lodashEs = require("lodash-es");
-const virtualizedList = require("../../components/virtualized-list.cjs");
-const useQueryParams = require("../../hooks/use-query-params.cjs");
-require("clsx");
-require("../../theme/palette.cjs");
-const common = require("../../utils/common.cjs");
-const queryParams = require("../../utils/query-params.cjs");
-const radioButton = require("../radio-button/radio-button.cjs");
-const input = require("../input/input.cjs");
-const ROW_HEIGHT = 32;
-const DISPLAY_ROW_COUNT = 5;
-const RadioFilterPanel = ({
-  options,
-  inputSearchProps: _inputSearchProps,
-  value,
-  onChange,
-  queryParam,
-  fallbackValue
-}) => {
-  const { enabled: searchEnabled = false, ...inputSearchProps } = _inputSearchProps ?? {};
-  const uniqueId = react.useId();
-  const [inputValue, setInputValue] = react.useState("");
-  const { queryParams: queryParams$1, setQueryParams } = useQueryParams.useQueryParams(
-    queryParam ? {
-      [queryParam.key]: {
-        parser(value2) {
-          return new queryParams.StringParamParser(value2).parse();
-        }
-      }
-    } : {}
-  );
-  const valueByQueryParam = queryParam ? queryParams$1[queryParam.key] : void 0;
-  const finalValue = value ?? valueByQueryParam ?? fallbackValue;
-  const onInputChange = (e) => {
-    var _a;
-    e.target.value = lodashEs.trimStart(e.target.value);
-    setInputValue(e.target.value);
-    (_a = inputSearchProps.onChange) == null ? void 0 : _a.call(inputSearchProps, e);
-  };
-  const displayOptions = react.useMemo(() => {
-    if (!inputValue) {
-      return options;
-    }
-    return options.filter((option) => common.matchSearch(option.searchLabel ?? String(option.label), inputValue));
-  }, [inputValue, options]);
-  const RowComponent = ({ row }) => {
-    const rowData = displayOptions.at(row.index);
-    const onRadioChange = (e) => {
-      if (lodashEs.isNil(rowData)) return;
-      if (queryParam) {
-        setQueryParams(
-          {
-            [queryParam.key]: queryParam.transform ? queryParam.transform(rowData.value) : rowData.value
-          },
-          {
-            preventScrollReset: true
-          }
-        );
-      }
-      onChange == null ? void 0 : onChange(e);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { paddingTop: "0.25rem", paddingBottom: "0.25rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      radioButton.RadioButton,
-      {
-        name: uniqueId,
-        checked: (rowData == null ? void 0 : rowData.isChecked) ?? finalValue === (rowData == null ? void 0 : rowData.value),
-        value: rowData == null ? void 0 : rowData.value,
-        onChange: onRadioChange,
-        children: rowData == null ? void 0 : rowData.label
-      }
-    ) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    searchEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      virtualizedList.VirtualizedList,
-      {
-        css: { paddingLeft: "0.5rem", paddingRight: "0.5rem" },
-        options: {
-          count: displayOptions.length,
-          estimateSize: () => ROW_HEIGHT
-        },
-        RowComponent,
-        style: {
-          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT
-        }
-      }
-    )
-  ] });
-};
-exports.RadioFilterPanel = RadioFilterPanel;

package/dist/lib/flag/flag.cjs

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const helpers = require("./helpers.cjs");
-const earthHomeWorld = require("../../assets/svg/earth-home-world.svg.cjs");
-const image = require("../image/image.cjs");
-const Flag = ({ ref, ..._props }) => {
-  const { countryCode, fallback = earthHomeWorld, ...props } = helpers.getFlagProps(_props);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    image.Image,
-    {
-      src: countryCode ? `https://flagcdn.com/${countryCode.toLowerCase()}.svg` : void 0,
-      alt: "VN",
-      fallback,
-      ref,
-      ...props
-    }
-  );
-};
-exports.Flag = Flag;

package/dist/lib/flag/helpers.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_index = require("../../utils/index.cjs");
-const defaultProps = {
-  xs: {
-    css: {
-      width: 24,
-      aspectRatio: "4 / 3",
-      objectFit: "contain"
-    }
-  }
-};
-const getFlagProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getFlagProps = getFlagProps;

package/dist/lib/flexbox/flex-item/flex-item.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const helpers = require("./helpers.cjs");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const FlexItem = ({ children, ref, ...rest }) => {
-  const { xs, sm, md, lg, ...props } = helpers.getFlexItemProps(rest);
-  const css = [
-    {
-      maxWidth: "100%"
-    },
-    xs == null ? void 0 : xs.css,
-    {
-      [theme_screens.mediaQuery("sm")]: sm == null ? void 0 : sm.css,
-      [theme_screens.mediaQuery("md")]: md == null ? void 0 : md.css,
-      [theme_screens.mediaQuery("lg")]: lg == null ? void 0 : lg.css
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { css, ...props, ref, children });
-};
-exports.FlexItem = FlexItem;

package/dist/lib/flexbox/flex-item/helpers.cjs

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

package/dist/lib/flexbox/flexbox/flexbox.cjs

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const helpers = require("./helpers.cjs");
-require("react");
-require("clsx");
-require("lodash-es");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const stylesheet = require("../../../utils/stylesheet.cjs");
-const Flexbox = ({ children, container, ref, ..._props }) => {
-  const { xs, sm, md, lg, className, ...rest } = helpers.getFlexboxProps(_props);
-  const css = [
-    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,
-      className: stylesheet.cn(
-        {
-          container
-        },
-        className
-      ),
-      ...rest,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: { display: "flex", width: "100%", height: "100%" }, children })
-    }
-  );
-};
-const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
-  return [
-    {
-      width,
-      height,
-      "& > *": css
-    }
-  ];
-};
-exports.Flexbox = Flexbox;

package/dist/lib/flexbox/flexbox/helpers.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_index = require("../../../utils/index.cjs");
-const defaultProps = {
-  xs: {
-    css: {
-      flexDirection: "row",
-      alignItems: "flex-start",
-      justifyContent: "flex-start"
-    }
-  }
-};
-const getFlexboxProps = (extended) => {
-  return utils_index.mergeComponentProps(defaultProps, extended);
-};
-exports.getFlexboxProps = getFlexboxProps;