@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/pagination/helpers.js

@@ -1,66 +1,57 @@
-import { mergeComponentProps } from '../../utils';
-// Default values for the pagination component
+import { mergeComponentProps } from "../../utils/index.js";
 const DEFAULT_SIBLING_COUNT = 2;
-export const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
-    // Calculate range based on siblingCount
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    // Always show at least 1 + 2*siblingCount pages (if available)
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
-    // Output array with page numbers and dots
-    const result = [];
-    // Always include page 1
-    result.push({ type: 'page', page: 1 });
-    // Add left dots if needed
-    if (shouldShowLeftDots) {
-        result.push({ type: 'ellipsis' });
+const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+  const shouldShowLeftDots = leftSiblingIndex > 2;
+  const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+  const result = [];
+  result.push({ type: "page", page: 1 });
+  if (shouldShowLeftDots) {
+    result.push({ type: "ellipsis" });
+  } else if (leftSiblingIndex > 1) {
+    for (let i = 2; i < leftSiblingIndex; i++) {
+      result.push({ type: "page", page: i });
     }
-    else if (leftSiblingIndex > 1) {
-        // Fill in numbers between 1 and leftSiblingIndex if no dots
-        for (let i = 2; i < leftSiblingIndex; i++) {
-            result.push({ type: 'page', page: i });
-        }
+  }
+  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+    if (i !== 1 && i !== totalPages) {
+      result.push({ type: "page", page: i });
     }
-    // Add main page numbers
-    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-        if (i !== 1 && i !== totalPages) {
-            result.push({ type: 'page', page: i });
-        }
+  }
+  if (shouldShowRightDots) {
+    result.push({ type: "ellipsis" });
+  } else if (rightSiblingIndex < totalPages) {
+    for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+      result.push({ type: "page", page: i });
     }
-    // Add right dots if needed
-    if (shouldShowRightDots) {
-        result.push({ type: 'ellipsis' });
-    }
-    else if (rightSiblingIndex < totalPages) {
-        // Fill in numbers between rightSiblingIndex and totalPages if no dots
-        for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
-            result.push({ type: 'page', page: i });
-        }
-    }
-    // Always include last page if more than 1 page
-    if (totalPages > 1) {
-        result.push({ type: 'page', page: totalPages });
-    }
-    return result;
+  }
+  if (totalPages > 1) {
+    result.push({ type: "page", page: totalPages });
+  }
+  return result;
 };
 const defaultProps = {
-    xs: {
-        size: 'sm',
-    },
-    showPrevPageButton: true,
-    showNextPageButton: true,
-    states: {
-        normal: {
-            color: 'neutral',
-            variant: 'outlined',
-        },
-        active: {
-            color: 'primary',
-            variant: 'outlined',
-        },
+  xs: {
+    size: "sm"
+  },
+  showPrevPageButton: true,
+  showNextPageButton: true,
+  states: {
+    normal: {
+      color: "neutral",
+      variant: "outlined"
     },
+    active: {
+      color: "primary",
+      variant: "outlined"
+    }
+  }
+};
+const getPaginationProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
 };
-export const getPaginationProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+export {
+  getPageRange,
+  getPaginationProps
 };

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

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

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

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

package/dist/lib/pagination/pagination.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAY1C,eAAO,MAAM,UAAU,yHAgMrB,CAAC"}

package/dist/lib/pagination/pagination.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, Fragment } from "react";
+import { getPaginationProps, getPageRange } from "./helpers.js";
+import ArrowLeftIcon from "../../assets/svg/arrow-left.svg.js";
+import ArrowForwardIcon from "../../assets/svg/arrow-forward.svg.js";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
+import "lodash-es";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { getSizeVariantState } from "../../utils/index.js";
+import { Text } from "../text/text.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { Icon } from "../icon/icon.js";
+const Pagination = forwardRef((_props, ref) => {
+  var _a, _b, _c, _d;
+  const {
+    page = 1,
+    count = 1,
+    onChange,
+    disabled,
+    showFirstPageButton,
+    showLastPageButton,
+    showNextPageButton,
+    showPrevPageButton,
+    siblingCount,
+    states,
+    xs,
+    sm,
+    md,
+    lg,
+    ...rest
+  } = getPaginationProps(_props);
+  const sizeVariantState = {
+    xs: getSizeVariantState(xs == null ? void 0 : xs.size),
+    sm: getSizeVariantState(sm == null ? void 0 : sm.size),
+    md: getSizeVariantState(md == null ? void 0 : md.size),
+    lg: getSizeVariantState(lg == null ? void 0 : lg.size)
+  };
+  const pageRange = getPageRange(page, count, siblingCount);
+  const css = [
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 4
+    }
+  ];
+  const handlePageClick = (e) => {
+    const newPage = Number(e.currentTarget.value);
+    if (disabled || newPage === page) return;
+    if (onChange) onChange(newPage);
+  };
+  const handlePrevClick = (_e) => {
+    if (disabled || page <= 1) return;
+    if (onChange) onChange(page - 1);
+  };
+  const handleNextClick = (_e) => {
+    if (disabled || page >= count) return;
+    if (onChange) onChange(page + 1);
+  };
+  const handleFirstClick = (_e) => {
+    if (disabled || page <= 1) return;
+    if (onChange) onChange(1);
+  };
+  const handleLastClick = (_e) => {
+    if (disabled || page >= count) return;
+    if (onChange) onChange(count);
+  };
+  const PaginationButton = (buttonProps) => {
+    var _a2;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        disabled,
+        variant: (_a2 = states == null ? void 0 : states.normal) == null ? void 0 : _a2.variant,
+        ...buttonProps,
+        xs: { size: xs == null ? void 0 : xs.size, ...buttonProps.xs },
+        sm: { size: sm == null ? void 0 : sm.size, ...buttonProps.sm },
+        md: { size: md == null ? void 0 : md.size, ...buttonProps.md },
+        lg: { size: lg == null ? void 0 : lg.size, ...buttonProps.lg }
+      }
+    );
+  };
+  const PaginationIcon = (iconProps) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        xs: {
+          size: getSizeVariantState(xs == null ? void 0 : xs.size).iconSize
+        },
+        sm: {
+          size: getSizeVariantState(sm == null ? void 0 : sm.size).iconSize
+        },
+        md: {
+          size: getSizeVariantState(md == null ? void 0 : md.size).iconSize
+        },
+        lg: {
+          size: getSizeVariantState(lg == null ? void 0 : lg.size).iconSize
+        },
+        ...iconProps
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { css, ...rest, ref, children: [
+    showFirstPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_a = states == null ? void 0 : states.normal) == null ? void 0 : _a.color, onClick: handleFirstClick, children: /* @__PURE__ */ jsx(PaginationIcon, { css: { transform: "rotate(180deg)" }, source: ArrowForwardIcon }) }),
+    showPrevPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page <= 1, color: (_b = states == null ? void 0 : states.normal) == null ? void 0 : _b.color, onClick: handlePrevClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowLeftIcon }) }),
+    pageRange.map((pageItem, index) => {
+      var _a2, _b2, _c2, _d2, _e;
+      const isActive = pageItem.type === "page" && pageItem.page === page;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        pageItem.type === "ellipsis" && /* @__PURE__ */ jsx(PaginationButton, { color: (_a2 = states == null ? void 0 : states.normal) == null ? void 0 : _a2.color, children: "..." }),
+        pageItem.type === "page" && /* @__PURE__ */ jsx(
+          PaginationButton,
+          {
+            color: isActive ? (_b2 = states == null ? void 0 : states.active) == null ? void 0 : _b2.color : (_c2 = states == null ? void 0 : states.normal) == null ? void 0 : _c2.color,
+            value: pageItem.page,
+            variant: isActive ? (_d2 = states == null ? void 0 : states.active) == null ? void 0 : _d2.variant : (_e = states == null ? void 0 : states.normal) == null ? void 0 : _e.variant,
+            onClick: handlePageClick,
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                xs: {
+                  css: {
+                    paddingLeft: 2,
+                    paddingRight: 2,
+                    ...sizeVariantState.xs.textVariant ? {
+                      fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
+                      lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight
+                    } : {}
+                  }
+                },
+                sm: {
+                  css: sizeVariantState.sm.textVariant ? {
+                    fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
+                    lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight
+                  } : {}
+                },
+                md: {
+                  css: sizeVariantState.md.textVariant ? {
+                    fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
+                    lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight
+                  } : {}
+                },
+                lg: {
+                  css: sizeVariantState.lg.textVariant ? {
+                    fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
+                    lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight
+                  } : {}
+                },
+                children: pageItem.page
+              }
+            )
+          }
+        )
+      ] }, index);
+    }),
+    showNextPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= count, color: (_c = states == null ? void 0 : states.normal) == null ? void 0 : _c.color, onClick: handleNextClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowRightIcon }) }),
+    showLastPageButton && /* @__PURE__ */ jsx(PaginationButton, { "aria-disabled": page >= count, color: (_d = states == null ? void 0 : states.normal) == null ? void 0 : _d.color, onClick: handleLastClick, children: /* @__PURE__ */ jsx(PaginationIcon, { source: ArrowForwardIcon }) })
+  ] });
+});
+export {
+  Pagination
+};

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

@@ -22,3 +22,4 @@ type PaginationExtendedProps = ResponsiveDesign<PaginationResponsiveProps> & {
 };
 export type PaginationProps = ShallowMerge<JSX.IntrinsicElements['div'], PaginationExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/pagination/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;CAKpB;AAED,KAAK,uBAAuB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,GAAG;IAE3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CACd,MAAM,CACJ,eAAe,EACf;QACE,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;QACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACtC,CACF,CACF,CAAC;CAGH,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,uBAAuB,CAAC,CAAC"}

package/dist/lib/phone-input/index.d.ts

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

package/dist/lib/phone-input/index.d.ts.map

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

package/dist/lib/phone-input/phone-input.d.ts

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

package/dist/lib/phone-input/phone-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/phone-input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAsD3D,eAAO,MAAM,UAAU,yHAqJtB,CAAC"}

package/dist/lib/phone-input/phone-input.js

@@ -0,0 +1,202 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { isNil } from "lodash-es";
+import { phone } from "phone";
+import countries from "../../assets/json/countries.json.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
+import { getColorVar } from "../../theme/palette.js";
+import { Select } from "../select/select.js";
+import { Flag } from "../flag/flag.js";
+import { InputMask as ForwardRefInputMask } from "../input-mask/input-mask.js";
+import { Input } from "../input/input.js";
+import { FormHelperText } from "../form-helper-text/form-helper-text.js";
+const CountryRowLabel = ({ code, name, dial_code }) => {
+  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Flag, { countryCode: code }),
+    /* @__PURE__ */ jsxs("span", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+      dial_code,
+      " (",
+      name,
+      ")"
+    ] })
+  ] });
+};
+const SelectedRenderer = ({ code, dial_code }) => {
+  return /* @__PURE__ */ jsxs("div", { css: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsx(Flag, { countryCode: code }),
+    /* @__PURE__ */ jsx("span", { css: { flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: dial_code })
+  ] });
+};
+const parsePhoneInputValue = (value) => {
+  var _a, _b;
+  if (isNil(value)) {
+    return value;
+  }
+  if (value.countryCode) {
+    return {
+      ...value,
+      dialCode: value.dialCode ?? ((_a = countries.find((country) => country.code === value.countryCode)) == null ? void 0 : _a.dial_code)
+    };
+  }
+  const { countryIso2 } = phone([value.dialCode, value.nationalNumber].filter(Boolean).join(""));
+  return {
+    ...value,
+    countryCode: countryIso2 ?? ((_b = countries.find((country) => country.dial_code === value.dialCode)) == null ? void 0 : _b.code)
+  };
+};
+const PhoneInput = forwardRef(
+  ({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ...props }, ref) => {
+    var _a;
+    const [selectOpen, setSelectOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const mergedRefs = useMergeRefs([ref, wrapperRef]);
+    const [wrapperWidth, setWrapperWidth] = useState(0);
+    useEffect(() => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        var _a2;
+        const domRect = (_a2 = entries.at(0)) == null ? void 0 : _a2.target.getBoundingClientRect();
+        if (domRect) {
+          setWrapperWidth(domRect.width);
+        }
+      });
+      if (wrapperRef.current) {
+        resizeObserver.observe(wrapperRef.current);
+      }
+      return () => resizeObserver.disconnect();
+    }, []);
+    const [internalValue, setInternalValue] = useControllableState({
+      defaultValue: parsePhoneInputValue(defaultValue) ?? {
+        countryCode: (_a = countries.at(0)) == null ? void 0 : _a.code
+      },
+      value: parsePhoneInputValue(value)
+    });
+    const triggerChange = (next) => {
+      setInternalValue(next);
+      onChange == null ? void 0 : onChange(next);
+    };
+    const onDialCodeChange = (_, option) => {
+      var _a2;
+      triggerChange({
+        ...internalValue,
+        dialCode: option.dial_code,
+        countryCode: option.code
+      });
+      (_a2 = inputRef.current) == null ? void 0 : _a2.select();
+    };
+    const onNationalNumberChange = (e) => {
+      e.target.value = e.target.value.replace(/[^0-9]/g, "");
+      triggerChange({
+        ...internalValue,
+        nationalNumber: e.target.value
+      });
+    };
+    const inputDisplayValue = (() => {
+      const originalValue = internalValue.nationalNumber ?? "";
+      return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, "$1 $2 $3");
+    })();
+    return /* @__PURE__ */ jsxs("div", { ...containerProps, css: [{ display: "flex", flexDirection: "column", width: "100%" }, containerProps == null ? void 0 : containerProps.css], children: [
+      /* @__PURE__ */ jsx(
+        ForwardRefInputMask,
+        {
+          ...props,
+          css: [
+            error && !selectOpen && {
+              "&::after": { borderColor: getColorVar("red.600") }
+            },
+            inputFocused && {
+              "&::after": { borderColor: getColorVar("primary.600") },
+              boxShadow: `0 0 0 3px ${getColorVar("primary.300")}`
+            },
+            disabled && {
+              backgroundColor: getColorShadesByVariant("neutral").disabledSurface,
+              pointerEvents: "none"
+            },
+            props.css
+          ],
+          ref: mergedRefs,
+          children: /* @__PURE__ */ jsxs("div", { css: { position: "absolute", inset: 0, display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                containerProps: {
+                  css: { width: "fit-content", minWidth: 80 }
+                },
+                css: {
+                  paddingRight: 0
+                },
+                xs: {
+                  outline: {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                  }
+                },
+                listProps: {
+                  style: {
+                    width: wrapperWidth
+                  }
+                },
+                value: internalValue.countryCode ?? null,
+                onChange: onDialCodeChange,
+                options: countries,
+                disabled,
+                selectedRenderer: SelectedRenderer,
+                optionLabel: CountryRowLabel,
+                optionValue: "code",
+                optionSearchLabel: ["name", "dial_code", "code"],
+                open: selectOpen,
+                onOpenChange: setSelectOpen
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  borderRight: "1px solid",
+                  borderColor: getColorVar("border.default"),
+                  height: "66.666667%",
+                  marginLeft: 8,
+                  marginRight: 8
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: inputDisplayValue,
+                disabled,
+                containerProps: {
+                  css: { flex: 1 }
+                },
+                mainProps: {
+                  style: {
+                    paddingLeft: 0,
+                    boxShadow: "none"
+                  }
+                },
+                onChange: onNationalNumberChange,
+                xs: {
+                  css: {
+                    borderWidth: 0
+                  }
+                },
+                onFocus: () => setInputFocused(true),
+                onBlur: () => setInputFocused(false),
+                ref: inputRef
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(FormHelperText, { error, children: helperText })
+    ] });
+  }
+);
+export {
+  PhoneInput
+};

package/dist/lib/phone-input/types.d.ts

@@ -21,3 +21,4 @@ export type PhoneInputProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     };
     disabled?: boolean;
 } & ResponsiveDesign<PhoneInputResponsiveProps>>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/phone-input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/phone-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,CACxC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B;IACE,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG;QAC9C,GAAG,CAAC,EAAE,aAAa,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,yBAAyB,CAAC,CAChD,CAAC"}

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

@@ -2,3 +2,4 @@ export * from './popover';
 export * from './popover-trigger';
 export * from './popover-content';
 export * from './popover-close';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}

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

@@ -1 +1,2 @@
-export declare const usePopoverContext: () => import("../../floating").FloatingContextValue;
+export declare const usePopoverContext: () => import('../../floating').FloatingContextValue;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/popover/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,qDAE7B,CAAC"}

package/dist/lib/popover/popover/helpers.js

@@ -1,4 +1,7 @@
-import { useFloatingContext } from '../../floating';
-export const usePopoverContext = () => {
-    return useFloatingContext();
+import { useFloatingContext } from "../../floating/floating/helpers.js";
+const usePopoverContext = () => {
+  return useFloatingContext();
+};
+export {
+  usePopoverContext
 };

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

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

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

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

package/dist/lib/popover/popover/popover.d.ts

@@ -1,2 +1,3 @@
 import { PopoverProps } from './types';
 export declare const Popover: ({ ...props }: PopoverProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAKvC,eAAO,MAAM,OAAO,iBAAkB,YAAY,qDAwBjD,CAAC"}

package/dist/lib/popover/popover/popover.js

@@ -0,0 +1,31 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useControllableState } from "../../../hooks/use-controllable-state.js";
+import { Floating } from "../../floating/floating/floating.js";
+const Popover = ({ ...props }) => {
+  const [open, setOpen] = useControllableState({
+    defaultValue: false,
+    value: props.open
+  });
+  const onOpenChange = (open2, event, reason) => {
+    var _a;
+    setOpen(open2);
+    (_a = props.onOpenChange) == null ? void 0 : _a.call(props, open2, event, reason);
+  };
+  return /* @__PURE__ */ jsx(
+    Floating,
+    {
+      dismissProps: {
+        enabled: true
+      },
+      clickProps: {
+        enabled: true
+      },
+      ...props,
+      open,
+      onOpenChange
+    }
+  );
+};
+export {
+  Popover
+};

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

@@ -1,2 +1,3 @@
 import { FloatingProps } from '../../..';
 export type PopoverProps = FloatingProps;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/popover/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC"}

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

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

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

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

package/dist/lib/popover/popover-close/popover-close.d.ts

@@ -1 +1,2 @@
-export declare const PopoverClose: import("react").ForwardRefExoticComponent<Omit<import("../../floating").FloatingCloseProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverClose: import('react').ForwardRefExoticComponent<Omit<import('../../floating').FloatingCloseProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=popover-close.d.ts.map

package/dist/lib/popover/popover-close/popover-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-close.d.ts","sourceRoot":"","sources":["../../../../src/lib/popover/popover-close/popover-close.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,qJAAgB,CAAC"}