@janbox/storefront-ui 1.0.0

package/dist/utils/emotion-helpers.js

@@ -0,0 +1,145 @@
+import { keyframes } from "@emotion/react";
+import { breakpoint, mediaQuery } from "../theme/screens.js";
+import { getTypographyVar } from "../theme/typography.js";
+const scrollbarNone = {
+  scrollbarWidth: "none",
+  "&::-webkit-scrollbar": { display: "none" }
+};
+const pulseKeyframes = keyframes`
+  50% { opacity: 0.5; }
+`;
+const spinKeyframes = keyframes`
+  to { transform: rotate(360deg); }
+`;
+const animatePulse = {
+  animation: `${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`
+};
+const animateSpin = {
+  animation: `${spinKeyframes} 1s linear infinite`
+};
+const ptBlock = {
+  paddingTop: "1rem",
+  [mediaQuery("sm")]: { paddingTop: "1.5rem" },
+  [mediaQuery("md")]: { paddingTop: "2rem" },
+  [mediaQuery("lg")]: { paddingTop: "2.5rem" }
+};
+const pbBlock = {
+  paddingBottom: "1rem",
+  [mediaQuery("sm")]: { paddingBottom: "1.5rem" },
+  [mediaQuery("md")]: { paddingBottom: "2rem" },
+  [mediaQuery("lg")]: { paddingBottom: "2.5rem" }
+};
+const pyBlock = {
+  paddingTop: "1rem",
+  paddingBottom: "1rem",
+  [mediaQuery("sm")]: { paddingTop: "1.5rem", paddingBottom: "1.5rem" },
+  [mediaQuery("md")]: { paddingTop: "2rem", paddingBottom: "2rem" },
+  [mediaQuery("lg")]: { paddingTop: "2.5rem", paddingBottom: "2.5rem" }
+};
+const textHeading6 = {
+  fontSize: getTypographyVar("lg").fontSize,
+  lineHeight: getTypographyVar("lg").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("xl").fontSize,
+    lineHeight: getTypographyVar("xl").lineHeight
+  }
+};
+const textHeading5 = {
+  fontSize: getTypographyVar("xl").fontSize,
+  lineHeight: getTypographyVar("xl").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("2xl").fontSize,
+    lineHeight: getTypographyVar("2xl").lineHeight
+  }
+};
+const textHeading4 = {
+  fontSize: getTypographyVar("2xl").fontSize,
+  lineHeight: getTypographyVar("2xl").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("3xl").fontSize,
+    lineHeight: getTypographyVar("3xl").lineHeight
+  }
+};
+const textHeading3 = {
+  fontSize: getTypographyVar("3xl").fontSize,
+  lineHeight: getTypographyVar("3xl").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("4xl").fontSize,
+    lineHeight: getTypographyVar("4xl").lineHeight
+  }
+};
+const textHeading2 = {
+  fontSize: getTypographyVar("4xl").fontSize,
+  lineHeight: getTypographyVar("4xl").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("5xl").fontSize,
+    lineHeight: getTypographyVar("5xl").lineHeight
+  }
+};
+const textHeading1 = {
+  fontSize: getTypographyVar("5xl").fontSize,
+  lineHeight: getTypographyVar("5xl").lineHeight,
+  [mediaQuery(breakpoint.md.minWidth)]: {
+    fontSize: getTypographyVar("6xl").fontSize,
+    lineHeight: getTypographyVar("6xl").lineHeight
+  }
+};
+const truncate = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+const pointerEventsNone = {
+  pointerEvents: "none"
+};
+const cursorPointer = {
+  cursor: "pointer"
+};
+const overflowHidden = {
+  overflow: "hidden"
+};
+const overflowAuto = {
+  overflow: "auto"
+};
+const containerStyle = {
+  width: "100%",
+  marginLeft: "auto",
+  marginRight: "auto",
+  paddingLeft: `${breakpoint.xs.padding}px`,
+  paddingRight: `${breakpoint.xs.padding}px`,
+  [mediaQuery("sm")]: {
+    maxWidth: `${breakpoint.sm.minWidth}px`,
+    paddingLeft: `${breakpoint.sm.padding}px`,
+    paddingRight: `${breakpoint.sm.padding}px`
+  },
+  [mediaQuery("md")]: {
+    maxWidth: `${breakpoint.md.minWidth}px`,
+    paddingLeft: `${breakpoint.md.padding}px`,
+    paddingRight: `${breakpoint.md.padding}px`
+  },
+  [mediaQuery("lg")]: {
+    maxWidth: `${breakpoint.lg.minWidth}px`,
+    paddingLeft: `${breakpoint.lg.padding}px`,
+    paddingRight: `${breakpoint.lg.padding}px`
+  }
+};
+export {
+  animatePulse,
+  animateSpin,
+  containerStyle,
+  cursorPointer,
+  overflowAuto,
+  overflowHidden,
+  pbBlock,
+  pointerEventsNone,
+  ptBlock,
+  pyBlock,
+  scrollbarNone,
+  textHeading1,
+  textHeading2,
+  textHeading3,
+  textHeading4,
+  textHeading5,
+  textHeading6,
+  truncate
+};

package/dist/utils/index.cjs

@@ -0,0 +1,233 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const clsx = require("clsx");
+const lodashEs = require("lodash-es");
+const theme_index = require("../theme/index.cjs");
+const common = require("./common.cjs");
+const stylesheet = require("./stylesheet.cjs");
+const queryParams = require("./query-params.cjs");
+const emotionHelpers = require("./emotion-helpers.cjs");
+const theme_palette = require("../theme/palette.cjs");
+const theme_screens = require("../theme/screens.cjs");
+const makeCxClassName = (...parts) => {
+  return parts.map((part) => `${theme_index.PREFIX}-${lodashEs.kebabCase(part)}`).join(" ");
+};
+const makeClassList = (...parts) => {
+  return clsx.clsx(parts.map((part) => `${theme_index.PREFIX}-${lodashEs.kebabCase(part)}`));
+};
+const getColorShadesByVariant = (variant) => {
+  switch (variant) {
+    case "primary":
+      return {
+        main: theme_palette.getColorVar("primary.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("primary.700"),
+        light: theme_palette.getColorVar("primary.100"),
+        placeholder: theme_palette.getColorVar("primary.400"),
+        disabledSurface: theme_palette.getColorVar("primary.300"),
+        disabledText: theme_palette.getColorVar("primary.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("primary.300"),
+        ariaDisabledText: theme_palette.getColorVar("primary.300")
+      };
+    case "secondary":
+      return {
+        main: theme_palette.getColorVar("secondary.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("secondary.700"),
+        light: theme_palette.getColorVar("secondary.100"),
+        placeholder: theme_palette.getColorVar("secondary.400"),
+        disabledSurface: theme_palette.getColorVar("secondary.300"),
+        disabledText: theme_palette.getColorVar("secondary.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("secondary.300"),
+        ariaDisabledText: theme_palette.getColorVar("secondary.300")
+      };
+    case "green":
+      return {
+        main: theme_palette.getColorVar("green.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("green.700"),
+        light: theme_palette.getColorVar("green.100"),
+        placeholder: theme_palette.getColorVar("green.400"),
+        disabledSurface: theme_palette.getColorVar("green.300"),
+        disabledText: theme_palette.getColorVar("green.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("green.300"),
+        ariaDisabledText: theme_palette.getColorVar("green.300")
+      };
+    case "orange":
+      return {
+        main: theme_palette.getColorVar("orange.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("orange.700"),
+        light: theme_palette.getColorVar("orange.100"),
+        placeholder: theme_palette.getColorVar("orange.400"),
+        disabledSurface: theme_palette.getColorVar("orange.300"),
+        disabledText: theme_palette.getColorVar("orange.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("orange.300"),
+        ariaDisabledText: theme_palette.getColorVar("orange.300")
+      };
+    case "red":
+      return {
+        main: theme_palette.getColorVar("red.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("red.700"),
+        light: theme_palette.getColorVar("red.100"),
+        placeholder: theme_palette.getColorVar("red.400"),
+        disabledSurface: theme_palette.getColorVar("red.300"),
+        disabledText: theme_palette.getColorVar("red.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("red.300"),
+        ariaDisabledText: theme_palette.getColorVar("red.300")
+      };
+    case "blue":
+      return {
+        main: theme_palette.getColorVar("blue.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("blue.700"),
+        light: theme_palette.getColorVar("blue.100"),
+        placeholder: theme_palette.getColorVar("blue.400"),
+        disabledSurface: theme_palette.getColorVar("blue.300"),
+        disabledText: theme_palette.getColorVar("blue.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("blue.300"),
+        ariaDisabledText: theme_palette.getColorVar("blue.300")
+      };
+    case "neutral":
+      return {
+        main: theme_palette.getColorVar("neutral.600"),
+        contrastText: theme_palette.getColorVar("white"),
+        dark: theme_palette.getColorVar("neutral.700"),
+        light: theme_palette.getColorVar("neutral.100"),
+        placeholder: theme_palette.getColorVar("neutral.400"),
+        disabledSurface: theme_palette.getColorVar("neutral.300"),
+        disabledText: theme_palette.getColorVar("neutral.500"),
+        ariaDisabledSurface: theme_palette.getColorVar("neutral.300"),
+        ariaDisabledText: theme_palette.getColorVar("neutral.300")
+      };
+    default:
+      return {};
+  }
+};
+const mergeComponentProps = (...args) => {
+  const source = {};
+  while (args.length) {
+    const next = args.shift();
+    if (next) {
+      const extended = typeof next === "function" ? next(source) : next;
+      lodashEs.mergeWith(source, extended, (_, srcValue) => {
+        if (react.isValidElement(srcValue)) {
+          return srcValue;
+        }
+      });
+    }
+  }
+  return source;
+};
+const omitResponsiveProps = (props) => {
+  return lodashEs.omit(props, theme_screens.screens);
+};
+const flattenChildren = (children) => {
+  return react.Children.toArray(children).reduce((acc, child) => {
+    if (react.isValidElement(child)) {
+      if (child.type === react.Fragment) {
+        return [
+          ...acc,
+          ...flattenChildren(
+            child.props.children
+          )
+        ];
+      }
+      return [...acc, child];
+    }
+    return acc;
+  }, []);
+};
+const getSizeVariantState = (size) => {
+  switch (size) {
+    case "xs":
+      return {
+        iconSize: 20,
+        inputSize: 24,
+        inputPaddingX: 8,
+        textVariant: "xs"
+      };
+    case "sm":
+      return {
+        iconSize: 20,
+        inputSize: 32,
+        inputPaddingX: 12,
+        textVariant: "sm"
+      };
+    case "md":
+      return {
+        iconSize: 24,
+        inputSize: 40,
+        inputPaddingX: 12,
+        textVariant: "sm"
+      };
+    case "lg":
+      return {
+        iconSize: 24,
+        inputSize: 48,
+        inputPaddingX: 16,
+        textVariant: "base"
+      };
+    default:
+      return {};
+  }
+};
+const getResponsiveProp = (record, field, screen, options) => {
+  const condition = (options == null ? void 0 : options.condition) ?? ((value) => !lodashEs.isUndefined(value));
+  const getByScreen = (bp) => lodashEs.get(record == null ? void 0 : record[bp], field);
+  const currentVal = getByScreen(screen);
+  if (condition(currentVal)) {
+    return currentVal;
+  }
+  const smallerScreen = theme_screens.getSmallerScreens(screen).find((bp) => {
+    return condition(getByScreen(bp));
+  });
+  return getByScreen(smallerScreen ?? screen);
+};
+exports.createSlug = common.createSlug;
+exports.ensureArray = common.ensureArray;
+exports.ensureBoolean = common.ensureBoolean;
+exports.formatNumber = common.formatNumber;
+exports.getDecimalDigits = common.getDecimalDigits;
+exports.getEnumValues = common.getEnumValues;
+exports.matchSearch = common.matchSearch;
+exports.normalizeSearchText = common.normalizeSearchText;
+exports.omitEmpty = common.omitEmpty;
+exports.parseNumber = common.parseNumber;
+exports.parseSvgString = common.parseSvgString;
+exports.cn = stylesheet.cn;
+exports.ArrayParamParser = queryParams.ArrayParamParser;
+exports.BooleanParamParser = queryParams.BooleanParamParser;
+exports.DateParamParser = queryParams.DateParamParser;
+exports.EnumParamParser = queryParams.EnumParamParser;
+exports.NumberParamParser = queryParams.NumberParamParser;
+exports.StringParamParser = queryParams.StringParamParser;
+exports.simplifyQueryParams = queryParams.simplifyQueryParams;
+exports.animatePulse = emotionHelpers.animatePulse;
+exports.animateSpin = emotionHelpers.animateSpin;
+exports.containerStyle = emotionHelpers.containerStyle;
+exports.cursorPointer = emotionHelpers.cursorPointer;
+exports.overflowAuto = emotionHelpers.overflowAuto;
+exports.overflowHidden = emotionHelpers.overflowHidden;
+exports.pbBlock = emotionHelpers.pbBlock;
+exports.pointerEventsNone = emotionHelpers.pointerEventsNone;
+exports.ptBlock = emotionHelpers.ptBlock;
+exports.pyBlock = emotionHelpers.pyBlock;
+exports.scrollbarNone = emotionHelpers.scrollbarNone;
+exports.textHeading1 = emotionHelpers.textHeading1;
+exports.textHeading2 = emotionHelpers.textHeading2;
+exports.textHeading3 = emotionHelpers.textHeading3;
+exports.textHeading4 = emotionHelpers.textHeading4;
+exports.textHeading5 = emotionHelpers.textHeading5;
+exports.textHeading6 = emotionHelpers.textHeading6;
+exports.truncate = emotionHelpers.truncate;
+exports.flattenChildren = flattenChildren;
+exports.getColorShadesByVariant = getColorShadesByVariant;
+exports.getResponsiveProp = getResponsiveProp;
+exports.getSizeVariantState = getSizeVariantState;
+exports.makeClassList = makeClassList;
+exports.makeCxClassName = makeCxClassName;
+exports.mergeComponentProps = mergeComponentProps;
+exports.omitResponsiveProps = omitResponsiveProps;

package/dist/utils/index.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { FieldPath, FieldPathValue } from 'react-hook-form';
+import { Screen, TypographySizeVariant } from '../theme';
+import { SizeVariant, ColorVariant, ResponsiveDesign } from '../types';
+export * from './common';
+export * from './stylesheet';
+export * from './query-params';
+export * from './emotion-helpers';
+export declare const makeCxClassName: (...parts: string[]) => string;
+export declare const makeClassList: (...parts: string[]) => string;
+export declare const getColorShadesByVariant: (variant?: ColorVariant) => {
+    main: string;
+    contrastText: string;
+    dark: string;
+    light: string;
+    placeholder: string;
+    disabledSurface: string;
+    disabledText: string;
+    ariaDisabledSurface: string;
+    ariaDisabledText: string;
+} | {
+    main?: undefined;
+    contrastText?: undefined;
+    dark?: undefined;
+    light?: undefined;
+    placeholder?: undefined;
+    disabledSurface?: undefined;
+    disabledText?: undefined;
+    ariaDisabledSurface?: undefined;
+    ariaDisabledText?: undefined;
+};
+export declare const mergeComponentProps: <T extends object>(...args: Array<T | object | ((current: T) => T | object)>) => T;
+export declare const omitResponsiveProps: <T extends ResponsiveDesign>(props: T) => Omit<T, Screen>;
+export declare const flattenChildren: (children: React.ReactNode) => ReactElement[];
+export type SizeVariantState = Partial<{
+    iconSize: number;
+    inputSize: number;
+    inputPaddingX: number;
+    textVariant: TypographySizeVariant;
+}>;
+export declare const getSizeVariantState: (size?: SizeVariant) => SizeVariantState;
+export declare const getResponsiveProp: <O extends object, P extends FieldPath<O>, R = FieldPathValue<O, P>>(record: ResponsiveDesign<O>, field: P, screen: Screen, options?: {
+    condition?: (value?: R) => boolean;
+}) => R;
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,YAAY,EACb,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAGL,MAAM,EAGN,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvE,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,eAAe,aAAc,MAAM,EAAE,WAEjD,CAAC;AAEF,eAAO,MAAM,aAAa,aAAc,MAAM,EAAE,WAE/C,CAAC;AAcF,eAAO,MAAM,uBAAuB,aAAc,YAAY;;;;;;;;;;;;;;;;;;;;CAyF7D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,MAAM,WACzC,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,CAAC,MAkB1D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,gBAAgB,SAAS,CAAC,KAAG,IAAI,CAAC,CAAC,EAAE,MAAM,CAExF,CAAC;AAEF,eAAO,MAAM,eAAe,aAAc,KAAK,CAAC,SAAS,KAAG,YAAY,EAiBvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,qBAAqB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,UAAW,WAAW,KAAG,gBAiCxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,CAAC,SAAS,MAAM,EAChB,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,EACtB,CAAC,iCAEO,gBAAgB,CAAC,CAAC,CAAC,SACpB,CAAC,UACA,MAAM,YACJ;IACR,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC;CACpC,KACA,CAgBF,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,233 @@
+import { Children, isValidElement, Fragment } from "react";
+import { clsx } from "clsx";
+import { isUndefined, kebabCase, mergeWith, omit, get } from "lodash-es";
+import { PREFIX } from "../theme/index.js";
+import { createSlug, ensureArray, ensureBoolean, formatNumber, getDecimalDigits, getEnumValues, matchSearch, normalizeSearchText, omitEmpty, parseNumber, parseSvgString } from "./common.js";
+import { cn } from "./stylesheet.js";
+import { ArrayParamParser, BooleanParamParser, DateParamParser, EnumParamParser, NumberParamParser, StringParamParser, simplifyQueryParams } from "./query-params.js";
+import { animatePulse, animateSpin, containerStyle, cursorPointer, overflowAuto, overflowHidden, pbBlock, pointerEventsNone, ptBlock, pyBlock, scrollbarNone, textHeading1, textHeading2, textHeading3, textHeading4, textHeading5, textHeading6, truncate } from "./emotion-helpers.js";
+import { getColorVar } from "../theme/palette.js";
+import { getSmallerScreens, screens } from "../theme/screens.js";
+const makeCxClassName = (...parts) => {
+  return parts.map((part) => `${PREFIX}-${kebabCase(part)}`).join(" ");
+};
+const makeClassList = (...parts) => {
+  return clsx(parts.map((part) => `${PREFIX}-${kebabCase(part)}`));
+};
+const getColorShadesByVariant = (variant) => {
+  switch (variant) {
+    case "primary":
+      return {
+        main: getColorVar("primary.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("primary.700"),
+        light: getColorVar("primary.100"),
+        placeholder: getColorVar("primary.400"),
+        disabledSurface: getColorVar("primary.300"),
+        disabledText: getColorVar("primary.500"),
+        ariaDisabledSurface: getColorVar("primary.300"),
+        ariaDisabledText: getColorVar("primary.300")
+      };
+    case "secondary":
+      return {
+        main: getColorVar("secondary.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("secondary.700"),
+        light: getColorVar("secondary.100"),
+        placeholder: getColorVar("secondary.400"),
+        disabledSurface: getColorVar("secondary.300"),
+        disabledText: getColorVar("secondary.500"),
+        ariaDisabledSurface: getColorVar("secondary.300"),
+        ariaDisabledText: getColorVar("secondary.300")
+      };
+    case "green":
+      return {
+        main: getColorVar("green.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("green.700"),
+        light: getColorVar("green.100"),
+        placeholder: getColorVar("green.400"),
+        disabledSurface: getColorVar("green.300"),
+        disabledText: getColorVar("green.500"),
+        ariaDisabledSurface: getColorVar("green.300"),
+        ariaDisabledText: getColorVar("green.300")
+      };
+    case "orange":
+      return {
+        main: getColorVar("orange.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("orange.700"),
+        light: getColorVar("orange.100"),
+        placeholder: getColorVar("orange.400"),
+        disabledSurface: getColorVar("orange.300"),
+        disabledText: getColorVar("orange.500"),
+        ariaDisabledSurface: getColorVar("orange.300"),
+        ariaDisabledText: getColorVar("orange.300")
+      };
+    case "red":
+      return {
+        main: getColorVar("red.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("red.700"),
+        light: getColorVar("red.100"),
+        placeholder: getColorVar("red.400"),
+        disabledSurface: getColorVar("red.300"),
+        disabledText: getColorVar("red.500"),
+        ariaDisabledSurface: getColorVar("red.300"),
+        ariaDisabledText: getColorVar("red.300")
+      };
+    case "blue":
+      return {
+        main: getColorVar("blue.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("blue.700"),
+        light: getColorVar("blue.100"),
+        placeholder: getColorVar("blue.400"),
+        disabledSurface: getColorVar("blue.300"),
+        disabledText: getColorVar("blue.500"),
+        ariaDisabledSurface: getColorVar("blue.300"),
+        ariaDisabledText: getColorVar("blue.300")
+      };
+    case "neutral":
+      return {
+        main: getColorVar("neutral.600"),
+        contrastText: getColorVar("white"),
+        dark: getColorVar("neutral.700"),
+        light: getColorVar("neutral.100"),
+        placeholder: getColorVar("neutral.400"),
+        disabledSurface: getColorVar("neutral.300"),
+        disabledText: getColorVar("neutral.500"),
+        ariaDisabledSurface: getColorVar("neutral.300"),
+        ariaDisabledText: getColorVar("neutral.300")
+      };
+    default:
+      return {};
+  }
+};
+const mergeComponentProps = (...args) => {
+  const source = {};
+  while (args.length) {
+    const next = args.shift();
+    if (next) {
+      const extended = typeof next === "function" ? next(source) : next;
+      mergeWith(source, extended, (_, srcValue) => {
+        if (isValidElement(srcValue)) {
+          return srcValue;
+        }
+      });
+    }
+  }
+  return source;
+};
+const omitResponsiveProps = (props) => {
+  return omit(props, screens);
+};
+const flattenChildren = (children) => {
+  return Children.toArray(children).reduce((acc, child) => {
+    if (isValidElement(child)) {
+      if (child.type === Fragment) {
+        return [
+          ...acc,
+          ...flattenChildren(
+            child.props.children
+          )
+        ];
+      }
+      return [...acc, child];
+    }
+    return acc;
+  }, []);
+};
+const getSizeVariantState = (size) => {
+  switch (size) {
+    case "xs":
+      return {
+        iconSize: 20,
+        inputSize: 24,
+        inputPaddingX: 8,
+        textVariant: "xs"
+      };
+    case "sm":
+      return {
+        iconSize: 20,
+        inputSize: 32,
+        inputPaddingX: 12,
+        textVariant: "sm"
+      };
+    case "md":
+      return {
+        iconSize: 24,
+        inputSize: 40,
+        inputPaddingX: 12,
+        textVariant: "sm"
+      };
+    case "lg":
+      return {
+        iconSize: 24,
+        inputSize: 48,
+        inputPaddingX: 16,
+        textVariant: "base"
+      };
+    default:
+      return {};
+  }
+};
+const getResponsiveProp = (record, field, screen, options) => {
+  const condition = (options == null ? void 0 : options.condition) ?? ((value) => !isUndefined(value));
+  const getByScreen = (bp) => get(record == null ? void 0 : record[bp], field);
+  const currentVal = getByScreen(screen);
+  if (condition(currentVal)) {
+    return currentVal;
+  }
+  const smallerScreen = getSmallerScreens(screen).find((bp) => {
+    return condition(getByScreen(bp));
+  });
+  return getByScreen(smallerScreen ?? screen);
+};
+export {
+  ArrayParamParser,
+  BooleanParamParser,
+  DateParamParser,
+  EnumParamParser,
+  NumberParamParser,
+  StringParamParser,
+  animatePulse,
+  animateSpin,
+  cn,
+  containerStyle,
+  createSlug,
+  cursorPointer,
+  ensureArray,
+  ensureBoolean,
+  flattenChildren,
+  formatNumber,
+  getColorShadesByVariant,
+  getDecimalDigits,
+  getEnumValues,
+  getResponsiveProp,
+  getSizeVariantState,
+  makeClassList,
+  makeCxClassName,
+  matchSearch,
+  mergeComponentProps,
+  normalizeSearchText,
+  omitEmpty,
+  omitResponsiveProps,
+  overflowAuto,
+  overflowHidden,
+  parseNumber,
+  parseSvgString,
+  pbBlock,
+  pointerEventsNone,
+  ptBlock,
+  pyBlock,
+  scrollbarNone,
+  simplifyQueryParams,
+  textHeading1,
+  textHeading2,
+  textHeading3,
+  textHeading4,
+  textHeading5,
+  textHeading6,
+  truncate
+};