@janbox/storefront-ui 1.0.24 → 1.0.25

package/dist/lib/button/helpers.js

@@ -1,63 +1,74 @@
-import { getTypographyVar, screens } from '../../theme/index.js';
-import { getSizeVariantState, mergeComponentProps } from '../../utils/index.js';
+import { screens } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { mergeComponentProps, getSizeVariantState } from "../../utils/index.js";
 const defaultProps = {
-    xs: {
-        css: {
-            borderTopLeftRadius: 8,
-            borderBottomLeftRadius: 8,
-            borderTopRightRadius: 8,
-            borderBottomRightRadius: 8,
-            columnGap: 8,
-        },
-        size: 'md',
+  xs: {
+    css: {
+      borderTopLeftRadius: 8,
+      borderBottomLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      columnGap: 8
     },
-    variant: 'contained',
-    color: 'primary',
-    type: 'button',
+    size: "md"
+  },
+  variant: "contained",
+  color: "primary",
+  type: "button"
 };
 const getButtonResponsiveCssBySize = (size) => {
-    const { inputSize, inputPaddingX } = getSizeVariantState(size);
-    switch (size) {
-        case 'sm':
-            return {
-                paddingLeft: inputPaddingX,
-                paddingRight: inputPaddingX,
-                minHeight: inputSize,
-                fontWeight: 400,
-                fontSize: getTypographyVar('sm').fontSize,
-                lineHeight: getTypographyVar('sm').lineHeight,
-            };
-        case 'md':
-            return {
-                paddingLeft: inputPaddingX,
-                paddingRight: inputPaddingX,
-                minHeight: inputSize,
-                fontWeight: 500,
-                fontSize: getTypographyVar('sm').fontSize,
-                lineHeight: getTypographyVar('sm').lineHeight,
-            };
-        case 'lg':
-            return {
-                paddingLeft: inputPaddingX,
-                paddingRight: inputPaddingX,
-                minHeight: inputSize,
-                fontWeight: 600,
-                fontSize: getTypographyVar('base').fontSize,
-                lineHeight: getTypographyVar('base').lineHeight,
-            };
-        default:
-            return {};
-    }
+  const { inputSize, inputPaddingX } = getSizeVariantState(size);
+  switch (size) {
+    case "sm":
+      return {
+        paddingLeft: inputPaddingX,
+        paddingRight: inputPaddingX,
+        minHeight: inputSize,
+        fontWeight: 400,
+        fontSize: getTypographyVar("sm").fontSize,
+        lineHeight: getTypographyVar("sm").lineHeight
+      };
+    case "md":
+      return {
+        paddingLeft: inputPaddingX,
+        paddingRight: inputPaddingX,
+        minHeight: inputSize,
+        fontWeight: 500,
+        fontSize: getTypographyVar("sm").fontSize,
+        lineHeight: getTypographyVar("sm").lineHeight
+      };
+    case "lg":
+      return {
+        paddingLeft: inputPaddingX,
+        paddingRight: inputPaddingX,
+        minHeight: inputSize,
+        fontWeight: 600,
+        fontSize: getTypographyVar("base").fontSize,
+        lineHeight: getTypographyVar("base").lineHeight
+      };
+    default:
+      return {};
+  }
 };
-export const getButtonProps = (extended) => {
-    return mergeComponentProps(defaultProps, extended, ...screens.map((screen) => {
-        return (current) => {
-            const size = current[screen]?.size;
-            const propsBySize = {};
-            propsBySize[screen] = {
-                css: getButtonResponsiveCssBySize(size),
-            };
-            return propsBySize;
+const getButtonProps = (extended) => {
+  return mergeComponentProps(
+    defaultProps,
+    extended,
+    ...screens.map((screen) => {
+      return (current) => {
+        var _a;
+        const size = (_a = current[screen]) == null ? void 0 : _a.size;
+        const propsBySize = {};
+        propsBySize[screen] = {
+          css: getButtonResponsiveCssBySize(size)
         };
-    }), extended);
+        return propsBySize;
+      };
+    }),
+    extended
+  );
+};
+export {
+  getButtonProps
 };

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { JSX } from 'react';
 import { RouterNavigateOptions } from 'react-router';
-import { IconProps } from '../icon/index.js';
-import { LinkProps } from '../link/index.js';
-import { ButtonVariant, ColorVariant, PropsWithCSS, ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types/index.js';
+import { IconProps } from '../icon';
+import { LinkProps } from '../link';
+import { ButtonVariant, ColorVariant, PropsWithCSS, ResponsiveDesign, SizeVariant, ShallowMerge } from '../../types';
 export type ButtonSizeVariant = Exclude<SizeVariant, 'xs'>;
 export type ButtonResponsiveProps = PropsWithCSS<{
     size?: ButtonSizeVariant;
@@ -22,3 +22,4 @@ type ButtonExtendedProps = ResponsiveDesign<ButtonResponsiveProps> & {
 };
 export type ButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], ButtonExtendedProps>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEjH,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC;IAC/C,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC,CAAC;AAEH,KAAK,mBAAmB,GAAG,gBAAgB,CAAC,qBAAqB,CAAC,GAAG;IACnE,MAAM,CAAC,EAAE,qBAAqB,GAAG;QAC/B,EAAE,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;QACrB,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;KAC9B,CAAC;IAEF,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/lib/cascader/cascader-floating-content.d.ts

@@ -1,8 +1,7 @@
-/** @jsxImportSource @emotion/react */
 import { HTMLAttributes } from 'react';
-import { CascaderOption } from './types.js';
-import { InputProps } from '../input/index.js';
-import { SizeVariant } from '../../types/index.js';
+import { CascaderOption } from './types';
+import { InputProps } from '../input';
+import { SizeVariant } from '../../types';
 type CascaderFloatingContentProps = {
     searchable: boolean;
     selectedPath: string[];
@@ -28,3 +27,4 @@ type CascaderFloatingContentProps = {
 };
 export declare const CascaderFloatingContent: ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, xs, sm, md, lg, }: CascaderFloatingContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=cascader-floating-content.d.ts.map

package/dist/lib/cascader/cascader-floating-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cascader-floating-content.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader-floating-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA4D,MAAM,OAAO,CAAC;AAKjG,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAU7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMtC,KAAK,4BAA4B,GAAG;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACxE,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;IAC5B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAA;KAAE,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,0HAcjC,4BAA4B,qDAsa9B,CAAC"}

package/dist/lib/cascader/cascader-floating-content.js

@@ -0,0 +1,394 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useId, useState, useEffect, useMemo, useCallback } from "react";
+import { isString, isNil, trimStart } from "lodash-es";
+import { findOptionPath, isExpandable, hasChildren } from "./helpers.js";
+import ArrowRightIcon from "../../assets/svg/arrow-right.svg.js";
+import CheckIcon from "../../assets/svg/done-check.svg.js";
+import { SvgLoader } from "../../components/svg-loader.js";
+import { VirtualizedList } from "../../components/virtualized-list.js";
+import { truncateStyle } from "../../constants/emotion.js";
+import { getResponsiveProp, getSizeVariantState } from "../../utils/index.js";
+import { useWindowScreen } from "../../hooks/use-window-screen/index.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { getColorVar } from "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { useFloatingContext } from "../floating/floating/helpers.js";
+import { ensureArray, matchSearch } from "../../utils/common.js";
+import { Input } from "../input/input.js";
+import { TextSkeleton } from "../loading/text-skeleton/text-skeleton.js";
+const DEFAULT_DISPLAY_ROW_COUNT = 5;
+const CascaderFloatingContent = ({
+  searchable,
+  selectedPath,
+  options,
+  loadOptions,
+  onChange,
+  inputProps,
+  listProps,
+  separator,
+  lazy,
+  xs,
+  sm,
+  md,
+  lg
+}) => {
+  const { context } = useFloatingContext();
+  const searchInputRef = useRef(null);
+  const uniqueId = useId();
+  const [inputValue, setInputValue] = useControllableState({
+    defaultValue: (inputProps == null ? void 0 : inputProps.defaultValue) ?? "",
+    value: inputProps == null ? void 0 : inputProps.value
+  });
+  const windowScreen = useWindowScreen();
+  const [expandedPath, setExpandedPath] = useState([]);
+  const [dynamicChildren, setDynamicChildren] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (selectedPath.length === 0) return;
+    const resolveExpandedPath = (fullPath, opts) => {
+      const pathOptions = findOptionPath(opts, fullPath);
+      const lastOption = pathOptions[pathOptions.length - 1];
+      if (lastOption && !isExpandable(lastOption)) {
+        return fullPath.slice(0, -1);
+      }
+      return fullPath;
+    };
+    if (!loadOptions) {
+      setExpandedPath(resolveExpandedPath(selectedPath, options));
+      return;
+    }
+    let cancelled = false;
+    const loadAlongPath = async () => {
+      var _a;
+      setIsLoading(true);
+      try {
+        let currentOpts = options;
+        const loadedChildren = {};
+        const pathSoFar = [];
+        const targetPath = resolveExpandedPath(selectedPath, options);
+        const existingPath = findOptionPath(options, targetPath);
+        if (existingPath.length === targetPath.length) {
+          if (!cancelled) setExpandedPath(targetPath);
+          return;
+        }
+        for (let i = 0; i < targetPath.length; i++) {
+          if (cancelled) return;
+          const value = targetPath[i];
+          const found = currentOpts.find((opt) => opt.value === value);
+          if (!found) break;
+          pathSoFar.push(found);
+          if (isExpandable(found) && !hasChildren(found)) {
+            const children = await loadOptions(pathSoFar);
+            if (cancelled) return;
+            const cacheKey = targetPath.slice(0, i + 1).join("/");
+            loadedChildren[cacheKey] = children;
+            currentOpts = children;
+          } else if ((_a = found.children) == null ? void 0 : _a.length) {
+            currentOpts = found.children;
+          } else {
+            break;
+          }
+        }
+        if (!cancelled) {
+          if (Object.keys(loadedChildren).length > 0) {
+            setDynamicChildren((prev) => ({ ...prev, ...loadedChildren }));
+          }
+          setExpandedPath(targetPath);
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    };
+    loadAlongPath();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const mergedOptions = useMemo(() => {
+    if (!loadOptions || Object.keys(dynamicChildren).length === 0) return options;
+    const mergeRecursive = (opts, parentKey) => {
+      return opts.map((opt) => {
+        const key = parentKey ? `${parentKey}/${opt.value}` : opt.value;
+        const loaded = dynamicChildren[key];
+        const children = loaded ?? opt.children;
+        return {
+          ...opt,
+          children: children ? mergeRecursive(children, key) : void 0
+        };
+      });
+    };
+    return mergeRecursive(options, "");
+  }, [options, dynamicChildren, loadOptions]);
+  const handleBreadcrumbClick = (e) => {
+    const level = Number(e.currentTarget.dataset.index);
+    if (level < 0) {
+      setExpandedPath([]);
+    } else {
+      setExpandedPath(expandedPath.slice(0, level + 1));
+    }
+  };
+  const expandedOptions = useMemo(() => {
+    return findOptionPath(mergedOptions, expandedPath);
+  }, [mergedOptions, expandedPath]);
+  const currentOptions = useMemo(() => {
+    var _a;
+    if (expandedPath.length === 0) {
+      return mergedOptions;
+    }
+    let current = mergedOptions;
+    for (const value of expandedPath) {
+      const found = current.find((opt) => opt.value === value);
+      if ((_a = found == null ? void 0 : found.children) == null ? void 0 : _a.length) {
+        current = found.children;
+      } else {
+        break;
+      }
+    }
+    return current;
+  }, [mergedOptions, expandedPath]);
+  const displayOptions = useMemo(() => {
+    if (!inputValue) {
+      return currentOptions;
+    }
+    return currentOptions.filter((option) => {
+      const searchLabels = ensureArray(option.searchLabel ?? []);
+      if (!searchLabels.length && isString(option.label)) {
+        searchLabels.push(option.label);
+      }
+      return matchSearch(searchLabels, inputValue);
+    });
+  }, [inputValue, currentOptions]);
+  const responsiveSize = isNil(windowScreen.name) ? void 0 : getResponsiveProp({ xs, sm, md, lg }, "size", windowScreen.name);
+  const { inputSize: rowMinHeight = 0, inputPaddingX } = getSizeVariantState(responsiveSize);
+  const onInputChange = (e) => {
+    var _a;
+    e.target.value = trimStart(e.target.value);
+    setInputValue(e.target.value);
+    (_a = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a.call(inputProps, e);
+  };
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      var _a;
+      (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+  const estimateSize = useCallback(
+    (_index) => {
+      return rowMinHeight ?? 0;
+    },
+    [rowMinHeight]
+  );
+  const getItemKey = useCallback(
+    (index) => {
+      const option = displayOptions.at(index);
+      return option ? option.value : `${uniqueId}-${index}`;
+    },
+    [displayOptions, uniqueId]
+  );
+  const renderBreadcrumbs = () => {
+    if (expandedPath.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        css: {
+          paddingLeft: inputPaddingX,
+          paddingRight: inputPaddingX,
+          minHeight: rowMinHeight,
+          borderTop: `1px solid ${getColorVar("neutral.200")}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "0.25rem",
+          flexWrap: "wrap",
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-index": -1,
+              type: "button",
+              onClick: handleBreadcrumbClick,
+              css: {
+                color: getColorVar("neutral.500"),
+                transition: "color 150ms",
+                "&:hover": { color: getColorVar("primary.600") }
+              },
+              children: "All"
+            }
+          ),
+          expandedOptions.map((opt, idx) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              css: { display: "flex", alignItems: "center", gap: "0.25rem" },
+              children: [
+                /* @__PURE__ */ jsx("span", { css: { color: getColorVar("neutral.400") }, children: separator }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "data-index": idx,
+                    type: "button",
+                    onClick: handleBreadcrumbClick,
+                    css: {
+                      color: idx === expandedOptions.length - 1 ? getColorVar("primary.600") : getColorVar("neutral.600"),
+                      fontWeight: idx === expandedOptions.length - 1 ? 500 : void 0,
+                      transition: "color 150ms",
+                      "&:hover": { color: getColorVar("primary.600") }
+                    },
+                    children: opt.breadcrumbLabel ?? opt.label
+                  }
+                )
+              ]
+            },
+            `${uniqueId}-breadcrumb-${opt.value}`
+          ))
+        ]
+      }
+    );
+  };
+  const RowComponent = ({ row }) => {
+    const rowData = displayOptions.at(row.index);
+    if (isNil(rowData)) return /* @__PURE__ */ jsx(Fragment, {});
+    const isSelected = selectedPath.includes(rowData.value);
+    const handleSelect = async () => {
+      var _a, _b;
+      if (rowData.disabled || isLoading) return;
+      const parentPath = [];
+      let current = mergedOptions;
+      for (const value of expandedPath) {
+        const found = current.find((opt) => opt.value === value);
+        if ((_a = found == null ? void 0 : found.children) == null ? void 0 : _a.length) {
+          parentPath.push(value);
+          current = found.children;
+        } else {
+          break;
+        }
+      }
+      const newPath = [...parentPath, rowData.value];
+      const newSelectedOptions = findOptionPath(mergedOptions, newPath);
+      if (isExpandable(rowData)) {
+        if (!hasChildren(rowData) && loadOptions) {
+          const cacheKey = newPath.join("/");
+          setIsLoading(true);
+          try {
+            const children = await loadOptions(newSelectedOptions);
+            setDynamicChildren((prev) => ({ ...prev, [cacheKey]: children }));
+            setExpandedPath(newPath);
+          } finally {
+            setIsLoading(false);
+          }
+        } else {
+          setExpandedPath(newPath);
+        }
+      } else {
+        onChange == null ? void 0 : onChange(newPath, newSelectedOptions);
+        (_b = context.onOpenChange) == null ? void 0 : _b.call(context, false);
+      }
+      setInputValue("");
+      setTimeout(() => {
+        var _a2;
+        (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+      });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        role: "button",
+        onClick: handleSelect,
+        css: {
+          minHeight: rowMinHeight,
+          paddingLeft: inputPaddingX,
+          paddingRight: inputPaddingX,
+          paddingTop: "0.25rem",
+          paddingBottom: "0.25rem",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          borderRadius: "0.5rem",
+          transition: "background-color 150ms, color 150ms",
+          "&:hover": { backgroundColor: getColorVar("neutral.100") },
+          ...isSelected && !isExpandable(rowData) ? {
+            color: getColorVar("primary.600"),
+            backgroundColor: getColorVar("primary.100")
+          } : {},
+          ...rowData.disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}
+        },
+        children: isLoading ? /* @__PURE__ */ jsx(TextSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, ...truncateStyle }, children: rowData.label }),
+          isExpandable(rowData) ? /* @__PURE__ */ jsx(SvgLoader, { source: ArrowRightIcon, width: 20, height: 20, css: { color: getColorVar("neutral.400") } }) : isSelected && /* @__PURE__ */ jsx(SvgLoader, { source: CheckIcon, width: 20, height: 20, css: { color: getColorVar("primary.600") } })
+        ] })
+      },
+      `${uniqueId}-option-${rowData.value}`
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      css: {
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        border: `1px solid ${getColorVar("border.default")}`,
+        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: getColorVar("surface.default")
+      },
+      children: [
+        !searchable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            css: {
+              paddingLeft: "0.5rem",
+              paddingRight: "0.5rem",
+              paddingTop: "0.5rem",
+              paddingBottom: "0.5rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                xs: { size: xs == null ? void 0 : xs.size },
+                sm: { size: sm == null ? void 0 : sm.size },
+                md: { size: md == null ? void 0 : md.size },
+                lg: { size: lg == null ? void 0 : lg.size },
+                value: inputValue,
+                placeholder: "Search...",
+                ...inputProps,
+                onChange: onInputChange,
+                ref: searchInputRef
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          VirtualizedList,
+          {
+            ...listProps,
+            css: {
+              paddingLeft: 4,
+              paddingRight: 4,
+              ...isLoading ? { cursor: "wait", pointerEvents: "none" } : {}
+            },
+            options: {
+              count: displayOptions.length,
+              estimateSize,
+              getItemKey,
+              overscan: lazy ? void 0 : currentOptions.length
+            },
+            style: {
+              maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
+              ...listProps == null ? void 0 : listProps.style
+            },
+            RowComponent
+          }
+        ),
+        renderBreadcrumbs()
+      ]
+    }
+  );
+};
+export {
+  CascaderFloatingContent
+};

package/dist/lib/cascader/cascader.d.ts

@@ -1,2 +1,3 @@
-import { CascaderProps } from './types.js';
+import { CascaderProps } from './types';
 export declare const Cascader: ({ ref, ..._props }: CascaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=cascader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cascader.d.ts","sourceRoot":"","sources":["../../../src/lib/cascader/cascader.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBxC,eAAO,MAAM,QAAQ,uBAAwB,aAAa,qDAwJzD,CAAC"}