@janbox/storefront-ui 1.0.0

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

@@ -0,0 +1,95 @@
+"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/filter-panel/radio-filter-panel.d.ts

@@ -0,0 +1,3 @@
+import { RadioFilterPanelProps } from './types';
+export declare const RadioFilterPanel: ({ options, inputSearchProps: _inputSearchProps, value, onChange, queryParam, fallbackValue, }: RadioFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radio-filter-panel.d.ts.map

package/dist/lib/filter-panel/radio-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/radio-filter-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAYhD,eAAO,MAAM,gBAAgB,kGAO1B,qBAAqB,qDAyFvB,CAAC"}

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

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useId, useState, useMemo } from "react";
+import { trimStart, isNil } from "lodash-es";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "clsx";
+import "../../theme/palette.js";
+import { matchSearch } from "../../utils/common.js";
+import { StringParamParser } from "../../utils/query-params.js";
+import { RadioButton } from "../radio-button/radio-button.js";
+import { Input } from "../input/input.js";
+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 = useId();
+  const [inputValue, setInputValue] = useState("");
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParam ? {
+      [queryParam.key]: {
+        parser(value2) {
+          return new StringParamParser(value2).parse();
+        }
+      }
+    } : {}
+  );
+  const valueByQueryParam = queryParam ? queryParams[queryParam.key] : void 0;
+  const finalValue = value ?? valueByQueryParam ?? fallbackValue;
+  const onInputChange = (e) => {
+    var _a;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a = inputSearchProps.onChange) == null ? void 0 : _a.call(inputSearchProps, e);
+  };
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return options;
+    }
+    return options.filter((option) => matchSearch(option.searchLabel ?? String(option.label), inputValue));
+  }, [inputValue, options]);
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    const onRadioChange = (e) => {
+      if (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__ */ jsx("div", { css: { paddingTop: "0.25rem", paddingBottom: "0.25rem" }, children: /* @__PURE__ */ jsx(
+      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__ */ jsxs("div", { children: [
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onInputChange }) }),
+    /* @__PURE__ */ jsx(
+      VirtualizedList,
+      {
+        css: { paddingLeft: "0.5rem", paddingRight: "0.5rem" },
+        options: {
+          count: displayOptions.length,
+          estimateSize: () => ROW_HEIGHT
+        },
+        RowComponent,
+        style: {
+          maxHeight: ROW_HEIGHT * DISPLAY_ROW_COUNT
+        }
+      }
+    )
+  ] });
+};
+export {
+  RadioFilterPanel
+};

package/dist/lib/filter-panel/types.d.ts

@@ -0,0 +1,75 @@
+import { JSX, ReactNode, PropsWithoutRef } from 'react';
+import { InputProps } from '../input';
+import { InputRangeProps } from '../input-range/types';
+import { ShallowMerge } from '../../types';
+export type CheckboxFilterPanelProps = {
+    fieldType: 'checkbox';
+    queryParam?: {
+        key: string;
+    };
+    options: {
+        label: ReactNode;
+        searchLabel?: string | string[];
+        value: string;
+        isChecked?: boolean;
+    }[];
+    value?: string[];
+    inputSearchProps?: ShallowMerge<InputProps, {
+        enabled?: boolean;
+    }>;
+    name?: string;
+    listProps?: PropsWithoutRef<JSX.IntrinsicElements['div']>;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export type RadioFilterPanelProps = {
+    fieldType: 'radio';
+    queryParam?: {
+        key: string;
+        transform?: (value: string) => string | undefined;
+    };
+    options: {
+        label: ReactNode;
+        searchLabel?: string | string[];
+        value: string;
+        isChecked?: boolean;
+    }[];
+    inputSearchProps?: ShallowMerge<InputProps, {
+        enabled?: boolean;
+    }>;
+    value?: string;
+    fallbackValue?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export type InputRangeFilterPanelProps<T = {
+    from?: number;
+    to?: number;
+}> = {
+    fieldType: 'input-range';
+    queryParam?: {
+        from?: {
+            key: string;
+        };
+        to?: {
+            key: string;
+        };
+    };
+    value?: T;
+    onChange?: InputRangeProps['onChange'];
+    placeholder?: {
+        from?: string;
+        to?: string;
+    };
+};
+export type InputTextFilterPanelProps = {
+    fieldType: 'input-text';
+    queryParam?: {
+        key: string;
+    };
+} & InputProps;
+export type FilterPanelProps = {
+    label: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    isLoading?: boolean;
+} & (CheckboxFilterPanelProps | RadioFilterPanelProps | InputRangeFilterPanelProps | InputTextFilterPanelProps);
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/filter-panel/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/types.ts"],"names":[],"mappings":"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"}

package/dist/lib/flag/flag.cjs

@@ -0,0 +1,20 @@
+"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/flag.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"flag.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/flag.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,eAAO,MAAM,IAAI,uBAAwB,SAAS,qDAYjD,CAAC"}

package/dist/lib/flag/flag.js

@@ -0,0 +1,20 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getFlagProps } from "./helpers.js";
+import EarthIcon from "../../assets/svg/earth-home-world.svg.js";
+import { Image } from "../image/image.js";
+const Flag = ({ ref, ..._props }) => {
+  const { countryCode, fallback = EarthIcon, ...props } = getFlagProps(_props);
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      src: countryCode ? `https://flagcdn.com/${countryCode.toLowerCase()}.svg` : void 0,
+      alt: "VN",
+      fallback,
+      ref,
+      ...props
+    }
+  );
+};
+export {
+  Flag
+};

package/dist/lib/flag/helpers.cjs

@@ -0,0 +1,16 @@
+"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/flag/helpers.d.ts

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

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

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

package/dist/lib/flag/helpers.js

@@ -0,0 +1,16 @@
+import { mergeComponentProps } from "../../utils/index.js";
+const defaultProps = {
+  xs: {
+    css: {
+      width: 24,
+      aspectRatio: "4 / 3",
+      objectFit: "contain"
+    }
+  }
+};
+const getFlagProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getFlagProps
+};

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ImageProps } from '../image';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+export type FlagExtendedProps = ResponsiveDesign<PropsWithCSS> & {
+    countryCode?: string;
+    fallback?: string;
+};
+export type FlagProps = ShallowMerge<ImageProps, {
+    countryCode?: string;
+    fallback?: string;
+}>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/flag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,YAAY,CAAC,GAAG;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,YAAY,CAClC,UAAU,EACV;IACE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC"}

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

@@ -0,0 +1,22 @@
+"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/flex-item.d.ts

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

package/dist/lib/flexbox/flex-item/flex-item.d.ts.map

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

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

@@ -0,0 +1,22 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getFlexItemProps } from "./helpers.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const FlexItem = ({ children, ref, ...rest }) => {
+  const { xs, sm, md, lg, ...props } = getFlexItemProps(rest);
+  const css = [
+    {
+      maxWidth: "100%"
+    },
+    xs == null ? void 0 : xs.css,
+    {
+      [mediaQuery("sm")]: sm == null ? void 0 : sm.css,
+      [mediaQuery("md")]: md == null ? void 0 : md.css,
+      [mediaQuery("lg")]: lg == null ? void 0 : lg.css
+    }
+  ];
+  return /* @__PURE__ */ jsx("div", { css, ...props, ref, children });
+};
+export {
+  FlexItem
+};

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

@@ -0,0 +1,10 @@
+"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/flex-item/helpers.d.ts

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

package/dist/lib/flexbox/flex-item/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flex-item/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQxC,eAAO,MAAM,gBAAgB,aAAc,aAAa,kBAEvD,CAAC"}

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

@@ -0,0 +1,10 @@
+import { mergeComponentProps } from "../../../utils/index.js";
+const defaultProps = {
+  xs: {}
+};
+const getFlexItemProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getFlexItemProps
+};

package/dist/lib/flexbox/flex-item/index.d.ts

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

package/dist/lib/flexbox/flex-item/index.d.ts.map

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

package/dist/lib/flexbox/flex-item/types.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+export interface FlexItemExtendedProps extends ResponsiveDesign<PropsWithCSS> {
+}
+export type FlexItemProps = ShallowMerge<JSX.IntrinsicElements['div'], FlexItemExtendedProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/flexbox/flex-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flex-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,YAAY,CAAC;CAAG;AAEhF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,CAAC"}

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

@@ -0,0 +1,46 @@
+"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/flexbox.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../../../src/lib/flexbox/flexbox/flexbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAMvC,eAAO,MAAM,OAAO,4CAA6C,YAAY,qDA2B5E,CAAC"}

package/dist/lib/flexbox/flexbox/flexbox.js

@@ -0,0 +1,46 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { getFlexboxProps } from "./helpers.js";
+import "react";
+import "clsx";
+import "lodash-es";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+import { cn } from "../../../utils/stylesheet.js";
+const Flexbox = ({ children, container, ref, ..._props }) => {
+  const { xs, sm, md, lg, className, ...rest } = getFlexboxProps(_props);
+  const css = [
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md),
+      [mediaQuery("lg")]: createStyle(lg)
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      css,
+      className: cn(
+        {
+          container
+        },
+        className
+      ),
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", height: "100%" }, children })
+    }
+  );
+};
+const createStyle = ({ css: { width, height, ...css } = {} } = {}) => {
+  return [
+    {
+      width,
+      height,
+      "& > *": css
+    }
+  ];
+};
+export {
+  Flexbox
+};

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

@@ -0,0 +1,16 @@
+"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;

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

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

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

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