@janbox/storefront-ui 1.0.0

package/dist/lib/container/container.js

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

package/dist/lib/container/helpers.cjs

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/container/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAUzC,eAAO,MAAM,iBAAiB,aAAc,cAAc,KAAG,cAE5D,CAAC"}

package/dist/lib/container/helpers.js

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../types';
+export type ContainerPosition = 'center' | 'start' | 'end';
+export interface ContainerResponsiveProps extends PropsWithCSS {
+    position?: ContainerPosition;
+}
+type ContainerExtendedProps = ResponsiveDesign<ContainerResponsiveProps> & {};
+export type ContainerProps = ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/container/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAEzE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAE3D,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,KAAK,sBAAsB,GAAG,gBAAgB,CAAC,wBAAwB,CAAC,GAAG,EAE1E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,CAAC"}

package/dist/lib/count-up/count-up.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const react$1 = require("@floating-ui/react");
+const react$2 = require("motion/react");
+const reactI18next = require("react-i18next");
+require("clsx");
+require("lodash-es");
+require("../../theme/palette.cjs");
+const common = require("../../utils/common.cjs");
+const CountUp = react.forwardRef(
+  ({ from = 0, to, duration = 2, formatNumberOptions, ...props }, ref) => {
+    const rootRef = react.useRef(null);
+    const { i18n } = reactI18next.useTranslation();
+    const mergedRef = react$1.useMergeRefs([ref, rootRef]);
+    const maximumFractionDigits = Math.max(common.getDecimalDigits(from), common.getDecimalDigits(to));
+    const count = react$2.useMotionValue(from);
+    const isInView = react$2.useInView(rootRef, { once: true });
+    const rounded = react$2.useTransform(
+      count,
+      (latest) => common.formatNumber(latest, {
+        lng: i18n.language,
+        ...formatNumberOptions,
+        maximumFractionDigits
+      })
+    );
+    react.useEffect(() => {
+      if (!isInView) return;
+      const controls = react$2.animate(count, to, { duration });
+      return () => {
+        controls.stop();
+      };
+    }, [count, duration, isInView, to]);
+    return /* @__PURE__ */ jsxRuntime.jsx(react$2.motion.span, { ...props, ref: mergedRef, children: rounded });
+  }
+);
+exports.CountUp = CountUp;

package/dist/lib/count-up/count-up.d.ts

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

package/dist/lib/count-up/count-up.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-up.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/count-up.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIvC,eAAO,MAAM,OAAO,uHAmCnB,CAAC"}

package/dist/lib/count-up/count-up.js

@@ -0,0 +1,38 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef, useEffect } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import { useMotionValue, useInView, useTransform, animate, motion } from "motion/react";
+import { useTranslation } from "react-i18next";
+import "clsx";
+import "lodash-es";
+import "../../theme/palette.js";
+import { getDecimalDigits, formatNumber } from "../../utils/common.js";
+const CountUp = forwardRef(
+  ({ from = 0, to, duration = 2, formatNumberOptions, ...props }, ref) => {
+    const rootRef = useRef(null);
+    const { i18n } = useTranslation();
+    const mergedRef = useMergeRefs([ref, rootRef]);
+    const maximumFractionDigits = Math.max(getDecimalDigits(from), getDecimalDigits(to));
+    const count = useMotionValue(from);
+    const isInView = useInView(rootRef, { once: true });
+    const rounded = useTransform(
+      count,
+      (latest) => formatNumber(latest, {
+        lng: i18n.language,
+        ...formatNumberOptions,
+        maximumFractionDigits
+      })
+    );
+    useEffect(() => {
+      if (!isInView) return;
+      const controls = animate(count, to, { duration });
+      return () => {
+        controls.stop();
+      };
+    }, [count, duration, isInView, to]);
+    return /* @__PURE__ */ jsx(motion.span, { ...props, ref: mergedRef, children: rounded });
+  }
+);
+export {
+  CountUp
+};

package/dist/lib/count-up/index.d.ts

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

package/dist/lib/count-up/index.d.ts.map

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

package/dist/lib/count-up/types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLMotionProps } from 'motion/react';
+import { FormatNumberOptions } from '../../utils';
+import { ShallowMerge } from '../../types';
+export type CountUpProps = ShallowMerge<HTMLMotionProps<'span'>, {
+    from?: number;
+    to: number;
+    duration?: number;
+    formatNumberOptions?: FormatNumberOptions;
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/count-up/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/count-up/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG,YAAY,CACrC,eAAe,CAAC,MAAM,CAAC,EACvB;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CACF,CAAC"}

package/dist/lib/countdown-timer/countdown-timer.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useCountdownTimer = require("../../hooks/use-countdown-timer.cjs");
+const CountdownTimer = ({ children, ...props }) => {
+  const timeDiff = useCountdownTimer.useCountdownTimer(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children == null ? void 0 : children(timeDiff) });
+};
+exports.CountdownTimer = CountdownTimer;

package/dist/lib/countdown-timer/countdown-timer.d.ts

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

package/dist/lib/countdown-timer/countdown-timer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown-timer.d.ts","sourceRoot":"","sources":["../../../src/lib/countdown-timer/countdown-timer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAI9C,eAAO,MAAM,cAAc,2BAA4B,mBAAmB,qDAIzE,CAAC"}

package/dist/lib/countdown-timer/countdown-timer.js

@@ -0,0 +1,9 @@
+import { jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useCountdownTimer } from "../../hooks/use-countdown-timer.js";
+const CountdownTimer = ({ children, ...props }) => {
+  const timeDiff = useCountdownTimer(props);
+  return /* @__PURE__ */ jsx(Fragment, { children: children == null ? void 0 : children(timeDiff) });
+};
+export {
+  CountdownTimer
+};

package/dist/lib/countdown-timer/index.d.ts

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

package/dist/lib/countdown-timer/index.d.ts.map

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

package/dist/lib/countdown-timer/types.d.ts

@@ -0,0 +1,5 @@
+import { TimeDiff, useCountdownTimer } from '../../hooks';
+export type CountdownTimerProps = Parameters<typeof useCountdownTimer>[0] & {
+    children?: (timeDiff: TimeDiff) => React.ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/countdown-timer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/countdown-timer/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,GAAG;IAC1E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC;CACpD,CAAC"}

package/dist/lib/date-picker/date-picker.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+require("react-date-range/dist/styles.css");
+require("react-date-range/dist/theme/default.css");
+const react = require("react");
+const dayjs = require("dayjs");
+const lodashEs = require("lodash-es");
+const reactDateRange = require("react-date-range");
+const helpers = require("./helpers.cjs");
+const calendar = require("../../assets/svg/calendar.svg.cjs");
+const utils_index = require("../../utils/index.cjs");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+const theme_palette = require("../../theme/palette.cjs");
+const timesCloseDelete = require("../../assets/svg/times-close-delete.svg.cjs");
+const timePicker = require("../time-picker/time-picker.cjs");
+const floating = require("../floating/floating/floating.cjs");
+const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
+const inputMask = require("../input-mask/input-mask.cjs");
+const floatingContent = require("../floating/floating-content/floating-content.cjs");
+const formHelperText = require("../form-helper-text/form-helper-text.cjs");
+const icon = require("../icon/icon.cjs");
+const DEFAULT_DATE_FORMAT = "MM/DD/YYYY";
+const DEFAULT_DATETIME_FORMAT = "MM/DD/YYYY HH:mm";
+const DatePicker = (_props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    icon: icon$1,
+    format,
+    minDate,
+    maxDate,
+    timePicker: timePicker$1,
+    clearable,
+    onClear,
+    helperText,
+    error,
+    containerProps,
+    open,
+    onOpenChange,
+    placement = "bottom-end",
+    ...rest
+  } = helpers.getDatePickerProps(_props);
+  const floatingRef = react.useRef(null);
+  const valueFormat = format ?? (timePicker$1 ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);
+  const [selectedDate, setSelectedDate] = useControllableState.useControllableState({
+    defaultValue,
+    value
+  });
+  const [isOpen, setIsOpen] = useControllableState.useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const handleChange = (date) => {
+    let preset = date;
+    if (timePicker$1) {
+      preset = dayjs(preset).set("hour", dayjs(selectedDate ?? /* @__PURE__ */ new Date()).hour()).set("minute", dayjs(selectedDate ?? /* @__PURE__ */ new Date()).minute()).toDate();
+    }
+    if (minDate && dayjs(preset).isBefore(minDate)) {
+      preset = minDate;
+    }
+    if (maxDate && dayjs(preset).isAfter(maxDate)) {
+      preset = maxDate;
+    }
+    setSelectedDate(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const onChangeTime = (val) => {
+    const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("hour", dayjs(val).hour()).set("minute", dayjs(val).minute()).toDate();
+    setSelectedDate(preset);
+    onChange == null ? void 0 : onChange(preset);
+  };
+  const getCss = (sizeVariant) => {
+    if (lodashEs.isNil(sizeVariant)) return {};
+    return utils_index.getSizeVariantState(sizeVariant);
+  };
+  const portalContentRenderer = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { css: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 12,
+    backgroundColor: theme_palette.getColorVar("white"),
+    fontSize: "0.875rem",
+    lineHeight: "1.25rem",
+    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    border: "1px solid",
+    borderColor: theme_palette.getColorVar("neutral.100")
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactDateRange.Calendar, { onChange: handleChange, minDate, maxDate, date: selectedDate ?? void 0 }),
+    timePicker$1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { css: { fontSize: "0.75rem", lineHeight: "1rem" }, children: "Time:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(timePicker.TimePicker, { onChange: onChangeTime, placement: "top", xs: { size: "xs" }, value: selectedDate })
+    ] })
+  ] });
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+  };
+  const getSuffix = () => {
+    var _a, _b;
+    if (icon$1) {
+      return icon$1;
+    }
+    if (selectedDate && clearable) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        icon.Icon,
+        {
+          source: timesCloseDelete,
+          css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          onClick: handleClear
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      icon.Icon,
+      {
+        source: calendar,
+        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
+        css: { color: rest.disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%", ...containerProps == null ? void 0 : containerProps.css }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      floating.Floating,
+      {
+        clickProps: {
+          enabled: true
+        },
+        dismissProps: {
+          enabled: true
+        },
+        placement,
+        open: isOpen,
+        onOpenChange: prehandleOpenChange,
+        ref: floatingRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            inputMask.InputMask,
+            {
+              type: "button",
+              error: isOpen ? false : error,
+              element: "button",
+              suffix: getSuffix(),
+              ...rest,
+              ref,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: { flex: 1, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                !selectedDate && !!placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: theme_palette.getColorVar("neutral.400") }, children: placeholder }),
+                !!selectedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: dayjs(selectedDate).format(valueFormat) })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: portalContentRenderer() })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
+  ] });
+};
+const ForwardRefDatePicker = react.forwardRef(DatePicker);
+exports.DatePicker = ForwardRefDatePicker;

package/dist/lib/date-picker/date-picker.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { DatePickerProps } from './types';
+declare const DatePicker: (_props: DatePickerProps, ref?: React.ForwardedRef<HTMLButtonElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const ForwardRefDatePicker: typeof DatePicker;
+export { ForwardRefDatePicker as DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/lib/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AAEjD,OAAO,KAAkC,MAAM,OAAO,CAAC;AAQvD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,QAAA,MAAM,UAAU,WAAY,eAAe,QAAQ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,qDAgKvF,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAwC,OAAO,UAAU,CAAC;AAEpF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,CAAC"}