@janbox/storefront-ui 1.0.0 → 1.0.2

package/dist/lib/tabs/tabs/tabs.cjs

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const helpers = require("./helpers.cjs");
-const useControllableState = require("../../../hooks/use-controllable-state.cjs");
-const theme_screens = require("../../../theme/screens.cjs");
-require("../../../theme/palette.cjs");
-const Tabs = react.forwardRef((_props, ref) => {
-  const {
-    defaultActiveIndex,
-    xs,
-    sm,
-    md,
-    lg,
-    activeIndex,
-    children,
-    onTabChange,
-    tabProps,
-    tabIndicatorProps,
-    tabPanelProps,
-    preventActiveTabChange = true,
-    ...rest
-  } = helpers.getTabsProps(_props);
-  const [activeTabIndex, setActiveTabIndex] = useControllableState.useControllableState({
-    defaultValue: defaultActiveIndex ?? 0,
-    value: activeIndex
-  });
-  const onTabChangeRef = react.useRef(onTabChange);
-  onTabChangeRef.current = onTabChange;
-  const contextValue = react.useMemo(() => {
-    return {
-      activeIndex: activeTabIndex,
-      focusTab: (tabIndex) => {
-        var _a;
-        setActiveTabIndex(tabIndex);
-        (_a = onTabChangeRef.current) == null ? void 0 : _a.call(onTabChangeRef, tabIndex);
-      },
-      tabProps,
-      tabIndicatorProps,
-      tabPanelProps,
-      preventActiveTabChange
-    };
-  }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
-  const css = [
-    {
-      display: "flex",
-      flexDirection: "column"
-    },
-    createStyle(xs),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md),
-      [theme_screens.mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx(helpers.TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { css, ...rest, ref, children }) });
-});
-const createStyle = ({ css } = {}) => {
-  return [css];
-};
-exports.Tabs = Tabs;

package/dist/lib/text/helpers.cjs

@@ -1,140 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("lodash-es");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const utils_index = require("../../utils/index.cjs");
-const getTextCssByVariant = (variant) => {
-  switch (variant) {
-    case "heading-1":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("4xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("4xl").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("5xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("5xl").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("6xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("6xl").lineHeight
-        }
-      };
-    case "heading-2":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("3xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("3xl").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("4xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("4xl").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("5xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("5xl").lineHeight
-        }
-      };
-    case "heading-3":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("2xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("2xl").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("3xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("3xl").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("4xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("4xl").lineHeight
-        }
-      };
-    case "heading-4":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("xl").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("2xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("2xl").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("3xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("3xl").lineHeight
-        }
-      };
-    case "heading-5":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("lg").fontSize,
-          lineHeight: theme_typography.getTypographyVar("lg").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("xl").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("2xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("2xl").lineHeight
-        }
-      };
-    case "heading-6":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("base").fontSize,
-          lineHeight: theme_typography.getTypographyVar("base").lineHeight
-        },
-        sm: {
-          fontSize: theme_typography.getTypographyVar("lg").fontSize,
-          lineHeight: theme_typography.getTypographyVar("lg").lineHeight
-        },
-        md: {
-          fontSize: theme_typography.getTypographyVar("xl").fontSize,
-          lineHeight: theme_typography.getTypographyVar("xl").lineHeight
-        }
-      };
-    case "large":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("lg").fontSize,
-          lineHeight: theme_typography.getTypographyVar("lg").lineHeight
-        }
-      };
-    case "base":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("base").fontSize,
-          lineHeight: theme_typography.getTypographyVar("base").lineHeight
-        }
-      };
-    case "small":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("sm").fontSize,
-          lineHeight: theme_typography.getTypographyVar("sm").lineHeight
-        }
-      };
-    case "extra-small":
-      return {
-        xs: {
-          fontSize: theme_typography.getTypographyVar("xs").fontSize,
-          lineHeight: theme_typography.getTypographyVar("xs").lineHeight
-        }
-      };
-    default:
-      return {};
-  }
-};
-const getTextProps = (extended) => {
-  return utils_index.mergeComponentProps(
-    {
-      element: "p"
-    },
-    extended
-  );
-};
-exports.getTextCssByVariant = getTextCssByVariant;
-exports.getTextProps = getTextProps;

package/dist/lib/text/text.cjs

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const lodashEs = require("lodash-es");
-const helpers = require("./helpers.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const genericElement = require("../generic-element/generic-element.cjs");
-const Text = ({ children, ref, ..._props }) => {
-  const { xs, sm, md, lg, element = "p", dangerouslySetInnerHTML, ...rest } = helpers.getTextProps(_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(
-    genericElement.GenericElement,
-    {
-      element,
-      css,
-      dangerouslySetInnerHTML: lodashEs.isNil(children) ? dangerouslySetInnerHTML : void 0,
-      ...rest,
-      ref,
-      children: lodashEs.isNil(dangerouslySetInnerHTML) ? children : null
-    }
-  );
-};
-const createStyle = ({ css, sizeVariant } = {}) => {
-  return [
-    sizeVariant && {
-      fontSize: theme_typography.getTypographyVar(sizeVariant).fontSize,
-      lineHeight: theme_typography.getTypographyVar(sizeVariant).lineHeight
-    },
-    css
-  ];
-};
-exports.Text = Text;

package/dist/lib/textarea/helpers.cjs

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

package/dist/lib/textarea/textarea.cjs

@@ -1,122 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const react$1 = require("@floating-ui/react");
-const lodashEs = require("lodash-es");
-const helpers = require("./helpers.cjs");
-const textarea_module = require("./textarea.module.scss.cjs");
-const utils_index = require("../../utils/index.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const formHelperText = require("../form-helper-text/form-helper-text.cjs");
-const Textarea = ({ ref, ..._props }) => {
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    containerProps,
-    className,
-    helperText,
-    error,
-    onChange: onChangeProp,
-    debounce = 0,
-    mode = "onChange",
-    value,
-    ...rest
-  } = helpers.getTextareaProps(_props);
-  const textareaRef = react.useRef(null);
-  const [typingValue, setTypingValue] = react.useState();
-  const timeoutFn = react.useRef(null);
-  const beforeChangeValue = react.useRef("");
-  const mergedRefs = react$1.useMergeRefs([ref, textareaRef]);
-  const onChange = (e, force = false) => {
-    if (timeoutFn.current) {
-      clearTimeout(timeoutFn.current);
-    }
-    if (force) {
-      onChangeProp == null ? void 0 : onChangeProp(e);
-      return;
-    }
-    if (mode === "onBlur") {
-      if (lodashEs.isString(value)) {
-        setTypingValue(e.target.value);
-      }
-      return;
-    }
-    if (debounce > 0) {
-      if (lodashEs.isString(value)) {
-        setTypingValue(e.target.value);
-      }
-      timeoutFn.current = setTimeout(() => {
-        onChangeProp == null ? void 0 : onChangeProp(e);
-      }, debounce);
-      return;
-    }
-    onChangeProp == null ? void 0 : onChangeProp(e);
-  };
-  const onFocus = (e) => {
-    var _a;
-    beforeChangeValue.current = e.target.value;
-    (_a = rest.onFocus) == null ? void 0 : _a.call(rest, e);
-  };
-  const onBlur = (e) => {
-    var _a;
-    if (beforeChangeValue.current !== e.target.value) {
-      if (mode === "onBlur" || debounce > 0) {
-        onChange(e, true);
-      }
-    }
-    (_a = rest.onBlur) == null ? void 0 : _a.call(rest, e);
-    setTimeout(() => {
-      setTypingValue(void 0);
-    }, debounce);
-  };
-  const css = [
-    {
-      paddingTop: 8,
-      paddingBottom: 8
-    },
-    createStyle(xs),
-    {
-      [theme_screens.mediaQuery("sm")]: createStyle(sm),
-      [theme_screens.mediaQuery("md")]: createStyle(md),
-      [theme_screens.mediaQuery("lg")]: createStyle(lg)
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, className: stylesheet.cn(textarea_module.default.textarea__container, containerProps == null ? void 0 : containerProps.className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css, className: textarea_module.default.textarea__main, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        "aria-invalid": error,
-        className: stylesheet.cn(
-          textarea_module.default.textarea__control,
-          className
-        ),
-        ...rest,
-        value: typingValue ?? value,
-        ref: mergedRefs,
-        onChange,
-        onBlur,
-        onFocus
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(formHelperText.FormHelperText, { error, children: helperText })
-  ] });
-};
-const createStyle = ({ css, size } = {}) => {
-  const { inputPaddingX, textVariant } = utils_index.getSizeVariantState(size);
-  return [
-    {
-      paddingLeft: inputPaddingX,
-      paddingRight: inputPaddingX,
-      fontSize: textVariant ? theme_typography.getTypographyVar(textVariant).fontSize : void 0,
-      lineHeight: textVariant ? theme_typography.getTypographyVar(textVariant).lineHeight : void 0
-    },
-    css
-  ];
-};
-exports.Textarea = Textarea;

package/dist/lib/textarea/textarea.module.scss.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const textarea__container = "_textarea__container_bs49u_1";
-const textarea__main = "_textarea__main_bs49u_6";
-const textarea__control = "_textarea__control_bs49u_34";
-const classes = {
-  textarea__container,
-  textarea__main,
-  textarea__control
-};
-exports.default = classes;
-exports.textarea__container = textarea__container;
-exports.textarea__control = textarea__control;
-exports.textarea__main = textarea__main;

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

@@ -1,305 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const dayjs = require("dayjs");
-const lodashEs = require("lodash-es");
-const index = require("../../hooks/use-window-screen/index.cjs");
-const useControllableState = require("../../hooks/use-controllable-state.cjs");
-const utils_index = require("../../utils/index.cjs");
-const virtualizedList = require("../../components/virtualized-list.cjs");
-const timesCloseDelete = require("../../assets/svg/times-close-delete.svg.cjs");
-const clockTime = require("../../assets/svg/clock-time.svg.cjs");
-const theme_screens = require("../../theme/screens.cjs");
-require("../../theme/palette.cjs");
-const theme_typography = require("../../theme/typography.cjs");
-const floating = require("../floating/floating/floating.cjs");
-const floatingTrigger = require("../floating/floating-trigger/floating-trigger.cjs");
-const floatingContent = require("../floating/floating-content/floating-content.cjs");
-const stylesheet = require("../../utils/stylesheet.cjs");
-const icon = require("../icon/icon.cjs");
-const TIME_FORMAT = "HH:mm";
-const TimePicker = ({
-  placeholder = "--:--",
-  onChange,
-  defaultValue,
-  value,
-  clearable,
-  onClear,
-  containerProps,
-  placement = "bottom-start",
-  open,
-  onOpenChange,
-  disabled,
-  ...rest
-}) => {
-  const floatingRef = react.useRef(null);
-  const windowScreen = index.useWindowScreen();
-  const responsiveSize = lodashEs.isNil(windowScreen.name) ? void 0 : utils_index.getResponsiveProp(rest, "size", windowScreen.name);
-  const rowMinHeight = utils_index.getSizeVariantState(responsiveSize).inputSize ?? 0;
-  const [isOpen, setIsOpen] = useControllableState.useControllableState({
-    defaultValue: open ?? false,
-    value: open
-  });
-  const [selectedDate, setSelectedDate] = useControllableState.useControllableState({
-    defaultValue,
-    value
-  });
-  const [hours] = react.useState(
-    Array.from({ length: 24 }, (_, index2) => ({
-      value: index2,
-      label: index2.toString().padStart(2, "0")
-    }))
-  );
-  const [minutes] = react.useState(
-    Array.from({ length: 60 }, (_, index2) => ({
-      value: index2,
-      label: index2.toString().padStart(2, "0")
-    }))
-  );
-  const prehandleOpenChange = (nextOpen, event, reason) => {
-    setIsOpen(nextOpen);
-    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
-  };
-  const estimateSize = react.useCallback(
-    (_index) => {
-      return rowMinHeight ?? 0;
-    },
-    [rowMinHeight]
-  );
-  const getItemKeyHour = react.useCallback(
-    (index2) => {
-      const option = hours.at(index2);
-      return option ? option.value.toString() : `${lodashEs.uniqueId}-${index2}`;
-    },
-    [hours, lodashEs.uniqueId]
-  );
-  const getItemKeyMinute = react.useCallback(
-    (index2) => {
-      const option = minutes.at(index2);
-      return option ? option.value.toString() : `${lodashEs.uniqueId}-${index2}`;
-    },
-    [hours, lodashEs.uniqueId]
-  );
-  const sizeOptions = {
-    apply({ elements }) {
-      const { width } = elements.reference.getBoundingClientRect();
-      Object.assign(elements.floating.style, {
-        minWidth: `${width}px`
-      });
-    }
-  };
-  const RowComponentHour = ({ row }) => {
-    const rowData = hours.at(row.index);
-    const onClick = (e) => {
-      e.preventDefault();
-      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("hour", rowData == null ? void 0 : rowData.value).toDate();
-      setSelectedDate(preset);
-      onChange == null ? void 0 : onChange(preset);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick,
-        css: {
-          paddingLeft: "0.5rem",
-          paddingRight: "0.5rem",
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem",
-          borderRadius: "0.25rem",
-          width: "100%",
-          height: "100%",
-          "&:hover": { backgroundColor: "var(--ic-light)" },
-          ...dayjs(selectedDate).hour() === (rowData == null ? void 0 : rowData.value) ? {
-            backgroundColor: "var(--ic-blue-1s)",
-            fontWeight: 500,
-            color: "var(--ic-blue-6s)",
-            borderWidth: 1,
-            borderStyle: "solid",
-            borderColor: "var(--ic-blue-2s)"
-          } : {}
-        },
-        children: rowData == null ? void 0 : rowData.label
-      }
-    );
-  };
-  const RowComponentMinute = ({ row }) => {
-    const rowData = minutes.at(row.index);
-    const onClick = (e) => {
-      e.preventDefault();
-      const preset = dayjs(selectedDate ?? /* @__PURE__ */ new Date()).set("minute", rowData == null ? void 0 : rowData.value).toDate();
-      setSelectedDate(preset);
-      onChange == null ? void 0 : onChange(preset);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onClick,
-        css: {
-          paddingLeft: "0.5rem",
-          paddingRight: "0.5rem",
-          paddingTop: "0.25rem",
-          paddingBottom: "0.25rem",
-          borderRadius: "0.25rem",
-          width: "100%",
-          height: "100%",
-          "&:hover": { backgroundColor: "var(--ic-light)" },
-          ...dayjs(selectedDate).minute() === (rowData == null ? void 0 : rowData.value) ? {
-            backgroundColor: "var(--ic-blue-1s)",
-            fontWeight: 500,
-            color: "var(--ic-blue-6s)",
-            borderWidth: 1,
-            borderStyle: "solid",
-            borderColor: "var(--ic-blue-2s)"
-          } : {}
-        },
-        children: rowData == null ? void 0 : rowData.label
-      }
-    );
-  };
-  const portalContentRenderer = () => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      css: {
-        display: "flex",
-        borderRadius: "0.5rem",
-        padding: "0.5rem",
-        backgroundColor: "var(--ic-white-6s)",
-        fontSize: theme_typography.getTypographyVar("sm").fontSize,
-        lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
-        boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: "var(--ic-ink-1s)",
-        gap: "0.5rem"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              virtualizedList.VirtualizedList,
-              {
-                RowComponent: RowComponentHour,
-                options: {
-                  count: hours.length,
-                  estimateSize,
-                  getItemKey: getItemKeyHour
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: { display: "flex", flexDirection: "column", flex: "1 1 0%" },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              virtualizedList.VirtualizedList,
-              {
-                RowComponent: RowComponentMinute,
-                options: {
-                  count: hours.length,
-                  estimateSize,
-                  getItemKey: getItemKeyMinute
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-  const handleClear = (e) => {
-    e.stopPropagation();
-    onClear == null ? void 0 : onClear();
-  };
-  const getCss = (sizeVariant) => {
-    if (lodashEs.isNil(sizeVariant)) return {};
-    return utils_index.getSizeVariantState(sizeVariant);
-  };
-  const createStyle = (screen) => {
-    const { css } = rest[screen] ?? {};
-    return {
-      ...css
-    };
-  };
-  const getIcon = () => {
-    var _a, _b;
-    if (selectedDate && clearable) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        icon.Icon,
-        {
-          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
-          source: timesCloseDelete,
-          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
-          onClick: handleClear
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      icon.Icon,
-      {
-        source: clockTime,
-        xs: { size: getCss((_b = rest.xs) == null ? void 0 : _b.size).iconSize },
-        css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" }
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, className: stylesheet.cn(containerProps == null ? void 0 : containerProps.className), children: /* @__PURE__ */ jsxRuntime.jsxs(
-    floating.Floating,
-    {
-      clickProps: {
-        enabled: true
-      },
-      dismissProps: {
-        enabled: true
-      },
-      sizeOptions,
-      placement,
-      open: isOpen,
-      onOpenChange: prehandleOpenChange,
-      ref: floatingRef,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(floatingTrigger.FloatingTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            css: [
-              createStyle("sm"),
-              {
-                [theme_screens.mediaQuery("xs")]: createStyle("xs"),
-                [theme_screens.mediaQuery("sm")]: createStyle("sm"),
-                [theme_screens.mediaQuery("md")]: createStyle("md"),
-                [theme_screens.mediaQuery("lg")]: createStyle("lg")
-              }
-            ],
-            children: [
-              !selectedDate && !!placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
-              !!selectedDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
-              getIcon()
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(floatingContent.FloatingContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            css: {
-              paddingTop: "0.5rem",
-              paddingBottom: "0.5rem",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderRadius: "0.5rem",
-              boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-              fontSize: theme_typography.getTypographyVar("sm").fontSize,
-              lineHeight: theme_typography.getTypographyVar("sm").lineHeight,
-              backgroundColor: "var(--color-surface-default)"
-            },
-            children: portalContentRenderer()
-          }
-        ) })
-      ]
-    }
-  ) });
-};
-exports.TimePicker = TimePicker;