@janbox/storefront-ui 1.0.24 → 1.0.25

package/dist/lib/drawer/drawer-close/index.d.ts

@@ -1,2 +1,3 @@
-export * from './drawer-close.jsx';
-export * from './types.js';
+export * from './drawer-close';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/drawer/drawer-close/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer-close/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC"}

package/dist/lib/drawer/drawer-close/types.d.ts

@@ -1,2 +1,3 @@
-import { FloatingCloseProps } from '../../floating/index.js';
+import { FloatingCloseProps } from '../../floating';
 export type DrawerCloseProps = FloatingCloseProps;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/drawer/drawer-close/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/drawer/drawer-close/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC"}

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

@@ -1,2 +1,3 @@
-export * from './drawer/index.js';
-export * from './drawer-close/index.js';
+export * from './drawer';
+export * from './drawer-close';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

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

@@ -1,2 +1,3 @@
-import { CheckboxFilterPanelProps } from './types.js';
+import { CheckboxFilterPanelProps } from './types';
 export declare const CheckboxFilterPanel: ({ value, options, inputSearchProps: _inputSearchProps, onChange, queryParam, name, listProps, }: CheckboxFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-filter-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/checkbox-filter-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAYnD,eAAO,MAAM,mBAAmB,oGAQ7B,wBAAwB,qDAwG1B,CAAC"}

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

@@ -0,0 +1,106 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { trimStart } from "lodash-es";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "../../theme/palette.js";
+import { matchSearch } from "../../utils/common.js";
+import { ArrayParamParser } from "../../utils/query-params.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { Input } from "../input/input.js";
+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] = useState("");
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParam ? {
+      [queryParam.key]: {
+        parser(value2) {
+          return new ArrayParamParser(value2).parse();
+        }
+      }
+    } : {}
+  );
+  const valueSet = useMemo(() => {
+    const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+    const valueByQueryParam = queryParamKey ? queryParams[queryParamKey] : void 0;
+    return new Set(value ?? valueByQueryParam ?? []);
+  }, [queryParam == null ? void 0 : queryParam.key, queryParams, value]);
+  const onSearchChange = (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 onCheckboxChange = (e) => {
+      if (queryParam) {
+        const currentList = queryParams[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__ */ jsx("div", { css: { paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ jsx(
+      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__ */ jsxs("div", { children: [
+    searchEnabled && /* @__PURE__ */ jsx("div", { css: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Input, { xs: { ...inputSearchProps.xs }, value: inputValue, ...inputSearchProps, onChange: onSearchChange }) }),
+    /* @__PURE__ */ jsx(
+      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
+      }
+    )
+  ] });
+};
+export {
+  CheckboxFilterPanel
+};

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

@@ -1,2 +1,3 @@
-import { FilterPanelProps } from './types.js';
+import { FilterPanelProps } from './types';
 export declare const FilterPanel: ({ label, defaultOpen, ...props }: FilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/filter-panel.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3C,eAAO,MAAM,WAAW,qCAA6C,gBAAgB,qDA2BpF,CAAC"}

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

@@ -0,0 +1,37 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { isValidElement } from "react";
+import { useToggle } from "../../hooks/use-toggle/index.js";
+import { CheckboxFilterPanel } from "./checkbox-filter-panel.js";
+import { InputRangeFilterPanel } from "./input-range-filter-panel.js";
+import { InputTextFilterPanel } from "./input-text-filter-panel.js";
+import { RadioFilterPanel } from "./radio-filter-panel.js";
+import ArrowDownIcon from "../../assets/svg/arrow-down.svg.js";
+import { Collapse } from "../collapse/collapse.js";
+import { Icon } from "../icon/icon.js";
+const FilterPanel = ({ label, defaultOpen = true, ...props }) => {
+  const [open, toggle] = useToggle(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsxs("button", { css: { display: "flex", alignItems: "center", gap: 8, textAlign: "left" }, onClick: toggle, children: [
+      /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: 500 }, children: isValidElement(label) ? label : /* @__PURE__ */ jsx("span", { children: label }) }),
+      /* @__PURE__ */ jsx(
+        Icon,
+        {
+          css: {
+            transition: "transform 150ms",
+            ...open ? { transform: "rotate(-180deg)" } : {}
+          },
+          source: ArrowDownIcon
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      props.fieldType === "checkbox" && /* @__PURE__ */ jsx(CheckboxFilterPanel, { ...props }),
+      props.fieldType === "radio" && /* @__PURE__ */ jsx(RadioFilterPanel, { ...props }),
+      props.fieldType === "input-range" && /* @__PURE__ */ jsx(InputRangeFilterPanel, { ...props }),
+      props.fieldType === "input-text" && /* @__PURE__ */ jsx(InputTextFilterPanel, { ...props })
+    ] }) })
+  ] });
+};
+export {
+  FilterPanel
+};

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

@@ -1 +1,2 @@
-export * from './filter-panel.jsx';
+export * from './filter-panel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/lib/filter-panel/input-range-filter-panel.d.ts

@@ -1,2 +1,3 @@
-import { InputRangeFilterPanelProps } from './types.js';
-export declare const InputRangeFilterPanel: ({ value, queryParam, placeholder, onChange }: InputRangeFilterPanelProps) => import("react").JSX.Element;
+import { InputRangeFilterPanelProps } from './types';
+export declare const InputRangeFilterPanel: ({ value, queryParam, placeholder, onChange }: InputRangeFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-range-filter-panel.d.ts.map

package/dist/lib/filter-panel/input-range-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/input-range-filter-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AASrD,eAAO,MAAM,qBAAqB,iDAAkD,0BAA0B,qDAuE7G,CAAC"}

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

@@ -0,0 +1,77 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { TYPING_DEBOUNCE } from "../../constants/index.js";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "react";
+import "lodash-es";
+import "../../theme/palette.js";
+import { NumberParamParser } from "../../utils/query-params.js";
+import { InputRange } from "../input-range/input-range.js";
+const InputRangeFilterPanel = ({ value, queryParam, placeholder, onChange }) => {
+  var _a, _b, _c, _d;
+  const { queryParams, setQueryParams } = useQueryParams({
+    ...((_a = queryParam == null ? void 0 : queryParam.from) == null ? void 0 : _a.key) ? {
+      [queryParam.from.key]: {
+        parser(value2) {
+          return new NumberParamParser(value2).parse();
+        }
+      }
+    } : {},
+    ...((_b = queryParam == null ? void 0 : queryParam.to) == null ? void 0 : _b.key) ? {
+      [queryParam.to.key]: {
+        parser(value2) {
+          return new 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[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[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__ */ jsx(
+    InputRange,
+    {
+      onChange: onInputRangeChange,
+      inputs: [
+        {
+          debounce: TYPING_DEBOUNCE,
+          value: finalValue.from ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.from
+        },
+        {
+          debounce: TYPING_DEBOUNCE,
+          value: finalValue.to ?? "",
+          placeholder: placeholder == null ? void 0 : placeholder.to
+        }
+      ]
+    }
+  );
+};
+export {
+  InputRangeFilterPanel
+};

package/dist/lib/filter-panel/input-text-filter-panel.d.ts

@@ -1,2 +1,3 @@
-import { InputTextFilterPanelProps } from './types.js';
-export declare const InputTextFilterPanel: ({ queryParam, fieldType: _fieldType, ...props }: InputTextFilterPanelProps) => import("react").JSX.Element;
+import { InputTextFilterPanelProps } from './types';
+export declare const InputTextFilterPanel: ({ queryParam, fieldType: _fieldType, ...props }: InputTextFilterPanelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-text-filter-panel.d.ts.map

package/dist/lib/filter-panel/input-text-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-text-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-panel/input-text-filter-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAOpD,eAAO,MAAM,oBAAoB,oDAAqD,yBAAyB,qDAwC9G,CAAC"}

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

@@ -0,0 +1,46 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { isString } from "lodash-es";
+import { useQueryParams } from "../../hooks/use-query-params.js";
+import "react";
+import "../../theme/palette.js";
+import { StringParamParser } from "../../utils/query-params.js";
+import { Input } from "../input/input.js";
+const InputTextFilterPanel = ({ queryParam, fieldType: _fieldType, ...props }) => {
+  const queryParamKey = queryParam == null ? void 0 : queryParam.key;
+  const { queryParams, setQueryParams } = useQueryParams(
+    queryParamKey ? {
+      [queryParamKey]: {
+        parser(value) {
+          return new StringParamParser(value).parse();
+        }
+      }
+    } : {}
+  );
+  const finalValue = (() => {
+    if (isString(props.value)) {
+      return props.value;
+    }
+    if (queryParamKey) {
+      return queryParams[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__ */ jsx(Input, { name: queryParamKey, ...props, value: finalValue, onChange });
+};
+export {
+  InputTextFilterPanel
+};

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

@@ -1,2 +1,3 @@
-import { RadioFilterPanelProps } from './types.js';
+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,94 @@
+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 "../../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

@@ -1,7 +1,7 @@
 import { JSX, ReactNode, PropsWithoutRef } from 'react';
-import { InputProps } from '../input/index.js';
-import { InputRangeProps } from '../input-range/types.js';
-import { ShallowMerge } from '../../types/index.js';
+import { InputProps } from '../input';
+import { InputRangeProps } from '../input-range/types';
+import { ShallowMerge } from '../../types';
 export type CheckboxFilterPanelProps = {
     fieldType: 'checkbox';
     queryParam?: {
@@ -72,3 +72,4 @@ export type FilterPanelProps = {
     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.d.ts

@@ -1,2 +1,3 @@
-import { FlagProps } from './types.js';
-export declare const Flag: ({ ref, ..._props }: FlagProps) => import("react").JSX.Element;
+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.d.ts

@@ -1,2 +1,3 @@
-import { FlagProps } from './types.js';
+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

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

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

@@ -1,3 +1,4 @@
-export * from './flag.jsx';
-export * from './types.js';
-export * from './helpers.js';
+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

@@ -1,5 +1,5 @@
-import { ImageProps } from '../image/index.js';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types/index.js';
+import { ImageProps } from '../image';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
 export type FlagExtendedProps = ResponsiveDesign<PropsWithCSS> & {
     countryCode?: string;
     fallback?: string;
@@ -8,3 +8,4 @@ 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,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvE,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.d.ts

@@ -1,2 +1,3 @@
-import { FlexItemProps } from './types.js';
+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.d.ts

@@ -1,2 +1,3 @@
-import { FlexItemProps } from './types.js';
+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

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