@janbox/storefront-ui 1.0.14 → 1.0.16

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/time-picker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,UAAU,yIAapB,eAAe,qDA2RjB,CAAC"}

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

@@ -0,0 +1,292 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useRef, useState, useCallback } from "react";
+import dayjs from "dayjs";
+import { isNil, uniqueId } from "lodash-es";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import CloseIcon from "../../assets/svg/times-close-delete.svg.js";
+import ClockIcon from "../../assets/svg/clock-time.svg.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Floating } from "../floating/floating/floating.js";
+import { FloatingTrigger } from "../floating/floating-trigger/floating-trigger.js";
+import { FloatingContent } from "../floating/floating-content/floating-content.js";
+import { Icon } from "../icon/icon.js";
+const TIME_FORMAT = "HH:mm";
+const TimePicker = ({
+  placeholder = "--:--",
+  onChange,
+  defaultValue,
+  value,
+  clearable,
+  onClear,
+  containerProps,
+  placement = "bottom-start",
+  open,
+  onOpenChange,
+  disabled,
+  ...rest
+}) => {
+  const floatingRef = useRef(null);
+  const windowScreen = useWindowScreen();
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp(rest, "size", windowScreen.name);
+  const rowMinHeight = getSizeVariantState(responsiveSize).inputSize ?? 0;
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultValue: open ?? false,
+    value: open
+  });
+  const [selectedDate, setSelectedDate] = useControllableState({
+    defaultValue,
+    value
+  });
+  const [hours] = useState(
+    Array.from({ length: 24 }, (_, index) => ({
+      value: index,
+      label: index.toString().padStart(2, "0")
+    }))
+  );
+  const [minutes] = useState(
+    Array.from({ length: 60 }, (_, index) => ({
+      value: index,
+      label: index.toString().padStart(2, "0")
+    }))
+  );
+  const prehandleOpenChange = (nextOpen, event, reason) => {
+    setIsOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen, event, reason);
+  };
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKeyHour = useCallback(
+    (index) => {
+      const option = hours.at(index);
+      return option ? option.value.toString() : `${uniqueId}-${index}`;
+    },
+    [hours, uniqueId]
+  );
+  const getItemKeyMinute = useCallback(
+    (index) => {
+      const option = minutes.at(index);
+      return option ? option.value.toString() : `${uniqueId}-${index}`;
+    },
+    [hours, 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__ */ 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__ */ 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__ */ jsxs(
+    "div",
+    {
+      css: {
+        display: "flex",
+        borderRadius: "0.5rem",
+        padding: "0.5rem",
+        backgroundColor: "var(--ic-white-6s)",
+        fontSize: getTypographyVar("sm").fontSize,
+        lineHeight: 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__ */ jsx("div", { css: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
+          VirtualizedList,
+          {
+            RowComponent: RowComponentHour,
+            options: {
+              count: hours.length,
+              estimateSize,
+              getItemKey: getItemKeyHour
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { css: { display: "flex", flexDirection: "column", flex: "1 1 0%" }, children: /* @__PURE__ */ jsx(
+          VirtualizedList,
+          {
+            RowComponent: RowComponentMinute,
+            options: {
+              count: hours.length,
+              estimateSize,
+              getItemKey: getItemKeyMinute
+            }
+          }
+        ) })
+      ]
+    }
+  );
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onClear == null ? void 0 : onClear();
+  };
+  const getCss = (sizeVariant) => {
+    if (isNil(sizeVariant)) return {};
+    return getSizeVariantState(sizeVariant);
+  };
+  const createStyle = (screen) => {
+    const { css } = rest[screen] ?? {};
+    return {
+      ...css
+    };
+  };
+  const getIcon = () => {
+    var _a, _b;
+    if (selectedDate && clearable) {
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          xs: { size: getCss((_a = rest.xs) == null ? void 0 : _a.size).iconSize },
+          source: CloseIcon,
+          css: { color: disabled ? "var(--ic-ink-4s)" : "var(--ic-ink-5s)" },
+          onClick: handleClear
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        source: ClockIcon,
+        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__ */ jsx("div", { ...containerProps, css: { display: "flex", flexDirection: "column", width: "100%" }, children: /* @__PURE__ */ jsxs(
+    Floating,
+    {
+      clickProps: {
+        enabled: true
+      },
+      dismissProps: {
+        enabled: true
+      },
+      sizeOptions,
+      placement,
+      open: isOpen,
+      onOpenChange: prehandleOpenChange,
+      ref: floatingRef,
+      children: [
+        /* @__PURE__ */ jsx(FloatingTrigger, { children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            css: [
+              createStyle("sm"),
+              {
+                [mediaQuery("xs")]: createStyle("xs"),
+                [mediaQuery("sm")]: createStyle("sm"),
+                [mediaQuery("md")]: createStyle("md"),
+                [mediaQuery("lg")]: createStyle("lg")
+              }
+            ],
+            children: [
+              !selectedDate && !!placeholder && /* @__PURE__ */ jsx("span", { css: { color: "var(--ic-ink-4s)" }, children: placeholder }),
+              !!selectedDate && /* @__PURE__ */ jsx("span", { children: dayjs(selectedDate).format(TIME_FORMAT) }),
+              getIcon()
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FloatingContent, { children: /* @__PURE__ */ 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: getTypographyVar("sm").fontSize,
+              lineHeight: getTypographyVar("sm").lineHeight,
+              backgroundColor: "var(--color-surface-default)"
+            },
+            children: portalContentRenderer()
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+export {
+  TimePicker
+};

package/dist/lib/time-picker/types.d.ts

@@ -19,3 +19,4 @@ type TimePickerBaseProps = {
 };
 export type TimePickerProps = TimePickerBaseProps & ResponsiveDesign<TimeResponsiveProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/time-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/time-picker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;CACnC;AAED,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,mBAAmB,CAAC,CAAC"}

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

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

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

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

package/dist/lib/tooltip/tooltip.d.ts

@@ -3,3 +3,4 @@ import { TooltipOptions } from './types';
 export declare function Tooltip({ children, defaultOpen, placement, open, onOpenChange, content, contentWidth, enable, handleClose, arrowProps, }: {
     children: ReactNode;
 } & TooltipOptions): import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAuBvE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,WAAmB,EACnB,SAAiB,EACjB,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,MAAa,EACb,WAAW,EACX,UAAU,GACX,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,cAAc,oDA2G1C"}

package/dist/lib/tooltip/tooltip.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, cloneElement } from "react";
+import { useFloating, autoUpdate, offset, flip, shift, arrow, size, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions, useMergeRefs, FloatingPortal, FloatingArrow } from "@floating-ui/react";
+import { isUndefined, get } from "lodash-es";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+function Tooltip({
+  children,
+  defaultOpen = false,
+  placement = "top",
+  open,
+  onOpenChange,
+  content,
+  contentWidth,
+  enable = true,
+  handleClose,
+  arrowProps
+}) {
+  const [visible, setVisible] = useControllableState({
+    defaultValue: defaultOpen,
+    value: open
+  });
+  const triggerRef = useRef(null);
+  const arrowRef = useRef(null);
+  const handleOpenChange = (val, event, reason) => {
+    if (enable === "truncated" && (event == null ? void 0 : event.target)) {
+      const target = event.target;
+      const { width, height } = target.getBoundingClientRect();
+      const fullWidth = Math.max(target.scrollWidth, target.clientWidth) + (width - target.clientWidth);
+      const fullHeight = Math.max(target.scrollHeight, target.clientHeight) + (height - target.clientHeight);
+      if ([fullWidth <= width, fullHeight <= height].every(Boolean)) return;
+    }
+    setVisible(val);
+    onOpenChange == null ? void 0 : onOpenChange(val, event, reason);
+  };
+  const { refs, floatingStyles, context } = useFloating({
+    placement,
+    open: visible,
+    onOpenChange: handleOpenChange,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: 5
+      }),
+      shift({ padding: 5 }),
+      arrow({ element: arrowRef }),
+      size({
+        apply({ elements }) {
+          const { width } = elements.reference.getBoundingClientRect();
+          const styledWidth = contentWidth === "fit-parent" ? width : contentWidth;
+          const styles = {
+            maxWidth: isUndefined(styledWidth) ? "" : `${styledWidth}px`
+          };
+          Object.assign(elements.floating.style, styles);
+        }
+      })
+    ]
+  });
+  const hover = useHover(context, {
+    move: false,
+    handleClose: handleClose === "safe-polygon" ? safePolygon() : handleClose
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+  const ref = useMergeRefs([refs.setReference, get(children, "ref"), triggerRef]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    cloneElement(
+      children,
+      getReferenceProps({
+        ref,
+        ...children == null ? void 0 : children.props,
+        "data-state": visible ? "open" : "closed"
+      })
+    ),
+    /* @__PURE__ */ jsx(FloatingPortal, { children: visible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...floatingStyles
+        },
+        ref: refs.setFloating,
+        css: {
+          borderRadius: "0.5rem",
+          backgroundColor: "var(--color-neutral-600)",
+          paddingLeft: "0.75rem",
+          paddingRight: "0.75rem",
+          paddingTop: "0.5rem",
+          paddingBottom: "0.5rem",
+          fontSize: getTypographyVar("sm").fontSize,
+          lineHeight: getTypographyVar("sm").lineHeight,
+          fontWeight: 400,
+          color: "white"
+        },
+        ...getFloatingProps(),
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ...arrowProps,
+              css: { fill: "var(--color-neutral-600)" },
+              ref: arrowRef,
+              context
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Tooltip
+};

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

@@ -12,3 +12,4 @@ export type TooltipOptions = {
     handleClose?: UseHoverProps['handleClose'] | 'safe-polygon';
     arrowProps?: Partial<FloatingArrowProps>;
 };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEtG,MAAM,MAAM,cAAc,GAAG;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC,MAAM,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;CAC1C,CAAC"}

package/dist/lib/unordered-list/index.d.ts

@@ -1,2 +1,3 @@
 export * from './unordered-list';
 export * from './list-item';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/unordered-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/unordered-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC"}

package/dist/lib/unordered-list/list-item/helpers.d.ts

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

package/dist/lib/unordered-list/list-item/helpers.d.ts.map

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

package/dist/lib/unordered-list/list-item/helpers.js

@@ -1,11 +1,14 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-    xs: {
-        css: {
-            alignItems: 'flex-start',
-        },
-    },
+  xs: {
+    css: {
+      alignItems: "flex-start"
+    }
+  }
 };
-export const getListItemProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getListItemProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getListItemProps
 };

package/dist/lib/unordered-list/list-item/index.d.ts

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

package/dist/lib/unordered-list/list-item/index.d.ts.map

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

package/dist/lib/unordered-list/list-item/list-item.d.ts

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

package/dist/lib/unordered-list/list-item/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/list-item.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAA2B,MAAM,SAAS,CAAC;AAIjE,eAAO,MAAM,QAAQ,sHAyBnB,CAAC"}

package/dist/lib/unordered-list/list-item/list-item.js

@@ -0,0 +1,36 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNil } from "lodash-es";
+import { getListItemProps } from "./helpers.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const ListItem = forwardRef((_props, ref) => {
+  const { xs, sm, md, children, dangerouslySetInnerHTML, ...rest } = getListItemProps(_props);
+  const css = [
+    {
+      display: "inline-flex"
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md)
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      css,
+      suppressContentEditableWarning: true,
+      dangerouslySetInnerHTML: isNil(children) ? dangerouslySetInnerHTML : void 0,
+      ...rest,
+      ref,
+      children: isNil(dangerouslySetInnerHTML) ? children : null
+    }
+  );
+});
+const createStyle = ({ css } = {}) => {
+  return [css];
+};
+export {
+  ListItem
+};

package/dist/lib/unordered-list/list-item/types.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "react";
-import { PropsWithCSS, ResponsiveDesign } from "../../../types";
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign } from '../../../types';
 export type ListItemResponsiveProps = PropsWithCSS;
 export type ListItemProps = JSX.IntrinsicElements["li"] & ResponsiveDesign<ListItemResponsiveProps>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/unordered-list/list-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/list-item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEhE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC;AAEnD,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GACrD,gBAAgB,CAAC,uBAAuB,CAAC,CAAC"}

package/dist/lib/unordered-list/unordered-list/helpers.d.ts

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

package/dist/lib/unordered-list/unordered-list/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAY7C,eAAO,MAAM,qBAAqB,aAAc,kBAAkB,uBAEjE,CAAC"}

package/dist/lib/unordered-list/unordered-list/helpers.js

@@ -1,11 +1,14 @@
-import { mergeComponentProps } from '../../../utils';
+import { mergeComponentProps } from "../../../utils/index.js";
 const defaultProps = {
-    xs: {
-        css: {
-            alignItems: 'flex-start',
-        },
-    },
+  xs: {
+    css: {
+      alignItems: "flex-start"
+    }
+  }
 };
-export const getUnorderedListProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended);
+const getUnorderedListProps = (extended) => {
+  return mergeComponentProps(defaultProps, extended);
+};
+export {
+  getUnorderedListProps
 };

package/dist/lib/unordered-list/unordered-list/index.d.ts

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

package/dist/lib/unordered-list/unordered-list/index.d.ts.map

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

package/dist/lib/unordered-list/unordered-list/types.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "react";
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
+import { JSX } from 'react';
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
 export type UnorderedListResponsiveProps = PropsWithCSS;
 export type UnorderedListProps = ShallowMerge<JSX.IntrinsicElements["ul"], ResponsiveDesign<UnorderedListResponsiveProps>>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/unordered-list/unordered-list/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAC3C,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC3B,gBAAgB,CAAC,4BAA4B,CAAC,CAC/C,CAAC"}

package/dist/lib/unordered-list/unordered-list/unordered-list.d.ts

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

package/dist/lib/unordered-list/unordered-list/unordered-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unordered-list.d.ts","sourceRoot":"","sources":["../../../../src/lib/unordered-list/unordered-list/unordered-list.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAgC,MAAM,SAAS,CAAC;AAI3E,eAAO,MAAM,aAAa,8HAiBxB,CAAC"}

package/dist/lib/unordered-list/unordered-list/unordered-list.js

@@ -0,0 +1,27 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { getUnorderedListProps } from "./helpers.js";
+import { mediaQuery } from "../../../theme/screens.js";
+import "../../../theme/palette.js";
+const UnorderedList = forwardRef((_props, ref) => {
+  const { xs, sm, md, ...rest } = getUnorderedListProps(_props);
+  const css = [
+    {
+      display: "inline-flex",
+      flexDirection: "column",
+      verticalAlign: "top"
+    },
+    createStyle(xs),
+    {
+      [mediaQuery("sm")]: createStyle(sm),
+      [mediaQuery("md")]: createStyle(md)
+    }
+  ];
+  return /* @__PURE__ */ jsx("ul", { css, ...rest, ref });
+});
+const createStyle = ({ css } = {}) => {
+  return [css];
+};
+export {
+  UnorderedList
+};