@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Select/customReactSelectStyles.js

@@ -0,0 +1,300 @@
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import numberFromDimension from "../utils/numberFromDimension/index.js";
+const getBorderColor = ({
+  errored,
+  disabled,
+  isOpen,
+  isFocused,
+  theme
+}) => {
+  const { red, lightGrey, blue, grey } = theme.colors;
+  if (errored) return red;
+  if (disabled) return lightGrey;
+  if (isOpen || isFocused) return blue;
+  return grey;
+};
+const getShadow = ({ errored, isOpen, theme }) => {
+  if (!isOpen) return null;
+  const { focus, error } = theme.shadows;
+  if (errored) {
+    return error;
+  } else {
+    return focus;
+  }
+};
+function getControlBorderRadius({
+  border,
+  isMenuOpen,
+  menuLength,
+  menuPlacement,
+  theme
+}) {
+  const isMenuEmpty = menuLength === 0;
+  if (!isMenuOpen || isMenuEmpty || border !== menuPlacement) return theme.radii.medium;
+  return 0;
+}
+function getMenuBorderRadius({
+  border,
+  menuPlacement,
+  theme
+}) {
+  return border === menuPlacement ? { radius: theme.radii.medium, style: "solid" } : { radius: 0, style: "none" };
+}
+function stylesForVariant(config, variant = "desktop") {
+  return config[variant];
+}
+function showIndicatorSeparator({ hasValue, isClearable, isMulti }) {
+  return hasValue && (isMulti || isClearable);
+}
+const customStyles = ({
+  theme,
+  error,
+  maxHeight,
+  windowed,
+  hasIcon,
+  variant,
+  hasDefaultOptions = true
+}) => {
+  return {
+    option: () => ({
+      height: 38
+    }),
+    clearIndicator: (provided) => ({
+      ...provided,
+      color: theme.colors.midGrey
+    }),
+    control: (provided, state) => ({
+      ...provided,
+      display: "flex",
+      minHeight: theme.space.x5,
+      paddingLeft: theme.space.x1,
+      position: "relative",
+      width: "100%",
+      fontSize: theme.fontSizes.base,
+      lineHeight: theme.lineHeights.base,
+      color: state.isDisabled ? curriedTransparentize$1(0.6667, theme.colors.black) : theme.colors.black,
+      background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,
+      borderColor: getBorderColor({
+        errored: error,
+        disabled: state.isDisabled,
+        isOpen: state.selectProps.menuIsOpen,
+        isFocused: state.isFocused,
+        theme
+      }),
+      boxSizing: "border-box",
+      boxShadow: getShadow({
+        errored: error,
+        isOpen: state.selectProps.menuIsOpen,
+        theme
+      }),
+      borderRadius: theme.radii.medium,
+      borderBottomLeftRadius: getControlBorderRadius({
+        border: "bottom",
+        isMenuOpen: state.selectProps.menuIsOpen,
+        menuLength: state.selectProps.options.length,
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }),
+      borderBottomRightRadius: getControlBorderRadius({
+        border: "bottom",
+        isMenuOpen: state.selectProps.menuIsOpen,
+        menuLength: state.selectProps.options.length,
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }),
+      borderTopRightRadius: getControlBorderRadius({
+        border: "top",
+        isMenuOpen: state.selectProps.menuIsOpen,
+        menuLength: state.selectProps.options.length,
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }),
+      borderTopLeftRadius: getControlBorderRadius({
+        border: "top",
+        isMenuOpen: state.selectProps.menuIsOpen,
+        menuLength: state.selectProps.options.length,
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }),
+      "&:hover, &:focus": {
+        borderColor: getBorderColor({
+          errored: error,
+          disabled: state.isDisabled,
+          isOpen: state.selectProps.menuIsOpen,
+          isFocused: true,
+          theme
+        })
+      },
+      ...hasIcon && {
+        paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`
+      }
+    }),
+    dropdownIndicator: (provided) => ({
+      ...provided,
+      ...!hasDefaultOptions && { display: "none" },
+      color: theme.colors.midGrey
+    }),
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      color: theme.colors.midGrey
+    }),
+    singleValue: (provided) => ({
+      ...provided,
+      marginLeft: 2,
+      marginRight: 2,
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)"
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      padding: 0,
+      display: "flex",
+      overflow: "auto",
+      maxHeight: "150px",
+      gap: theme.space.half,
+      paddingTop: theme.space.none,
+      paddingBottom: theme.space.none,
+      ...stylesForVariant(
+        {
+          touch: {
+            fontSize: "md",
+            lineHeight: "base"
+          }
+        },
+        variant
+      )
+    }),
+    menu: (provided, state) => ({
+      ...provided,
+      marginTop: 0,
+      marginBottom: 0,
+      position: "absolute",
+      overflowX: "auto",
+      zIndex: 100,
+      width: "100%",
+      background: theme.colors.white,
+      borderWidth: "1px",
+      borderColor: getBorderColor({
+        errored: error,
+        isOpen: true,
+        isFocused: false,
+        theme
+      }),
+      borderLeftStyle: "solid",
+      borderRightStyle: "solid",
+      borderBottomStyle: getMenuBorderRadius({
+        border: "bottom",
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }).style,
+      borderTopStyle: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme }).style,
+      borderBottomLeftRadius: getMenuBorderRadius({
+        border: "bottom",
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }).radius,
+      borderBottomRightRadius: getMenuBorderRadius({
+        border: "bottom",
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }).radius,
+      borderTopLeftRadius: getMenuBorderRadius({ border: "top", menuPlacement: state.selectProps.menuPlacement, theme }).radius,
+      borderTopRightRadius: getMenuBorderRadius({
+        border: "top",
+        menuPlacement: state.selectProps.menuPlacement,
+        theme
+      }).radius,
+      boxShadow: getShadow({ errored: error, isOpen: true, theme })
+    }),
+    menuList: (provided) => ({
+      ...provided,
+      minWidth: "fit-content",
+      padding: 0,
+      maxHeight: numberFromDimension(maxHeight),
+      borderRadius: theme.radii.medium,
+      marginTop: windowed ? "-4px" : 0,
+      marginBottom: windowed ? "-4px" : 0
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      background: theme.colors.lightGrey,
+      color: theme.colors.black,
+      margin: 0
+    }),
+    multiValueLabel: () => ({
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      color: theme.colors.black,
+      borderRadius: theme.radii.small,
+      fontSize: theme.fontSizes.small,
+      padding: theme.space.half,
+      paddingLeft: theme.space.x1,
+      ...stylesForVariant(
+        {
+          touch: {
+            fontSize: "md",
+            lineHeight: "base"
+          }
+        },
+        variant
+      )
+    }),
+    multiValueRemove: (provided) => ({
+      ...provided,
+      svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 },
+      borderBottomLeftRadius: 0,
+      borderTopLeftRadius: 0,
+      padding: theme.space.half,
+      paddingLeft: theme.space.x1,
+      "&:hover": {
+        background: theme.colors.darkGrey,
+        cursor: "pointer",
+        svg: { fill: theme.colors.white }
+      },
+      ...stylesForVariant(
+        {
+          touch: {
+            fontSize: "md",
+            lineHeight: "base"
+          }
+        },
+        variant
+      )
+    }),
+    noOptionsMessage: (provided) => ({
+      ...provided,
+      color: theme.colors.black,
+      fontSize: theme.fontSizes.small
+    }),
+    indicatorSeparator: (provided, state) => ({
+      ...provided,
+      display: showIndicatorSeparator({
+        hasValue: state.hasValue,
+        isClearable: state.selectProps.isClearable,
+        isMulti: state.isMulti
+      }) ? "block" : "none",
+      borderLeft: `1px solid ${theme.colors.grey}`
+    }),
+    placeholder: (state) => {
+      return {
+        label: "placeholder",
+        marginLeft: 2,
+        marginRight: 2,
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        color: state.isDisabled ? curriedTransparentize$1(0.7, theme.colors.midGrey) : theme.colors.midGrey
+      };
+    }
+  };
+};
+export {
+  customStyles as default,
+  getControlBorderRadius,
+  getMenuBorderRadius,
+  showIndicatorSeparator,
+  stylesForVariant
+};
+//# sourceMappingURL=customReactSelectStyles.js.map

package/dist/esm/Select/customReactSelectStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customReactSelectStyles.js","sources":["../../../src/Select/customReactSelectStyles.tsx"],"sourcesContent":["import { transparentize } from \"polished\";\nimport type { GroupBase, MenuPlacement, StylesConfig } from \"react-select\";\nimport type { CSSProperties } from \"react\";\nimport type { DefaultNDSThemeType } from \"../theme\";\nimport type { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport numberFromDimension from \"../utils/numberFromDimension\";\n\nconst getBorderColor = ({\n  errored,\n  disabled,\n  isOpen,\n  isFocused,\n  theme,\n}: {\n  errored: boolean;\n  disabled?: boolean;\n  isOpen: boolean;\n  isFocused: boolean;\n  theme: DefaultNDSThemeType;\n}) => {\n  const { red, lightGrey, blue, grey } = theme.colors;\n\n  if (errored) return red;\n  if (disabled) return lightGrey;\n  if (isOpen || isFocused) return blue;\n\n  return grey;\n};\n\nconst getShadow = ({ errored, isOpen, theme }: { errored: boolean; isOpen: boolean; theme: DefaultNDSThemeType }) => {\n  if (!isOpen) return null;\n\n  const { focus, error } = theme.shadows;\n\n  if (errored) {\n    return error;\n  } else {\n    return focus;\n  }\n};\n\ntype Placement = \"top\" | \"bottom\";\n\nexport function getControlBorderRadius({\n  border,\n  isMenuOpen,\n  menuLength,\n  menuPlacement,\n  theme,\n}: {\n  border: Placement;\n  isMenuOpen: boolean;\n  menuLength: number;\n  menuPlacement: MenuPlacement;\n  theme: DefaultNDSThemeType;\n}) {\n  const isMenuEmpty = menuLength === 0;\n\n  if (!isMenuOpen || isMenuEmpty || border !== menuPlacement) return theme.radii.medium;\n\n  return 0;\n}\n\nexport function getMenuBorderRadius({\n  border,\n  menuPlacement,\n  theme,\n}: {\n  border: Placement;\n  menuPlacement: MenuPlacement;\n  theme: DefaultNDSThemeType;\n}): { radius: string | number; style: CSSProperties[\"borderBottomStyle\"] } {\n  return border === menuPlacement ? { radius: theme.radii.medium, style: \"solid\" } : { radius: 0, style: \"none\" };\n}\n\ntype VariantConfig = {\n  [key in ComponentVariant]?: CSSProperties;\n};\n\nexport function stylesForVariant(config: VariantConfig, variant: ComponentVariant = \"desktop\") {\n  return config[variant];\n}\n\nexport function showIndicatorSeparator({ hasValue, isClearable, isMulti }) {\n  return hasValue && (isMulti || isClearable);\n}\n\ninterface CustomStylesArgs {\n  theme: DefaultNDSThemeType;\n  error: boolean;\n  maxHeight: string;\n  windowed: boolean;\n  variant: ComponentVariant;\n  hasIcon?: boolean;\n  hasDefaultOptions?: boolean;\n}\n\nconst customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  args: CustomStylesArgs\n) => StylesConfig<Option, IsMulti, Group> = ({\n  theme,\n  error,\n  maxHeight,\n  windowed,\n  hasIcon,\n  variant,\n  hasDefaultOptions = true,\n}) => {\n  return {\n    option: () => ({\n      height: 38,\n    }),\n    clearIndicator: (provided) => ({\n      ...provided,\n      color: theme.colors.midGrey,\n    }),\n    control: (provided, state) => ({\n      ...provided,\n      display: \"flex\",\n      minHeight: theme.space.x5,\n      paddingLeft: theme.space.x1,\n      position: \"relative\",\n      width: \"100%\",\n      fontSize: theme.fontSizes.base,\n      lineHeight: theme.lineHeights.base,\n      color: state.isDisabled ? transparentize(0.6667, theme.colors.black) : theme.colors.black,\n      background: state.isDisabled ? theme.colors.whiteGrey : theme.colors.white,\n      borderColor: getBorderColor({\n        errored: error,\n        disabled: state.isDisabled,\n        isOpen: state.selectProps.menuIsOpen,\n        isFocused: state.isFocused,\n        theme,\n      }),\n      boxSizing: \"border-box\",\n      boxShadow: getShadow({\n        errored: error,\n        isOpen: state.selectProps.menuIsOpen,\n        theme,\n      }),\n      borderRadius: theme.radii.medium,\n      borderBottomLeftRadius: getControlBorderRadius({\n        border: \"bottom\",\n        isMenuOpen: state.selectProps.menuIsOpen,\n        menuLength: state.selectProps.options.length,\n        menuPlacement: state.selectProps.menuPlacement,\n        theme: theme,\n      }),\n      borderBottomRightRadius: getControlBorderRadius({\n        border: \"bottom\",\n        isMenuOpen: state.selectProps.menuIsOpen,\n        menuLength: state.selectProps.options.length,\n        menuPlacement: state.selectProps.menuPlacement,\n        theme: theme,\n      }),\n      borderTopRightRadius: getControlBorderRadius({\n        border: \"top\",\n        isMenuOpen: state.selectProps.menuIsOpen,\n        menuLength: state.selectProps.options.length,\n        menuPlacement: state.selectProps.menuPlacement,\n        theme: theme,\n      }),\n      borderTopLeftRadius: getControlBorderRadius({\n        border: \"top\",\n        isMenuOpen: state.selectProps.menuIsOpen,\n        menuLength: state.selectProps.options.length,\n        menuPlacement: state.selectProps.menuPlacement,\n        theme: theme,\n      }),\n      \"&:hover, &:focus\": {\n        borderColor: getBorderColor({\n          errored: error,\n          disabled: state.isDisabled,\n          isOpen: state.selectProps.menuIsOpen,\n          isFocused: true,\n          theme,\n        }),\n      },\n      ...(hasIcon && {\n        paddingLeft: `calc(${theme.space.x3} + ${theme.space.x1_5})`,\n      }),\n    }),\n    dropdownIndicator: (provided) => ({\n      ...provided,\n      ...(!hasDefaultOptions && { display: \"none\" }),\n      color: theme.colors.midGrey,\n    }),\n    indicatorsContainer: (provided) => ({\n      ...provided,\n      color: theme.colors.midGrey,\n    }),\n    singleValue: (provided) => ({\n      ...provided,\n      marginLeft: 2,\n      marginRight: 2,\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n    }),\n    valueContainer: (provided) => ({\n      ...provided,\n      padding: 0,\n      display: \"flex\",\n      overflow: \"auto\",\n      maxHeight: \"150px\",\n      gap: theme.space.half,\n      paddingTop: theme.space.none,\n      paddingBottom: theme.space.none,\n      ...stylesForVariant(\n        {\n          touch: {\n            fontSize: \"md\",\n            lineHeight: \"base\",\n          },\n        },\n        variant\n      ),\n    }),\n    menu: (provided, state) => ({\n      ...provided,\n      marginTop: 0,\n      marginBottom: 0,\n      position: \"absolute\",\n      overflowX: \"auto\",\n      zIndex: 100,\n      width: \"100%\",\n      background: theme.colors.white,\n      borderWidth: \"1px\",\n      borderColor: getBorderColor({\n        errored: error,\n        isOpen: true,\n        isFocused: false,\n        theme,\n      }),\n      borderLeftStyle: \"solid\",\n      borderRightStyle: \"solid\",\n      borderBottomStyle: getMenuBorderRadius({\n        border: \"bottom\",\n        menuPlacement: state.selectProps.menuPlacement,\n        theme,\n      }).style,\n      borderTopStyle: getMenuBorderRadius({ border: \"top\", menuPlacement: state.selectProps.menuPlacement, theme })\n        .style,\n      borderBottomLeftRadius: getMenuBorderRadius({\n        border: \"bottom\",\n        menuPlacement: state.selectProps.menuPlacement,\n        theme,\n      }).radius,\n      borderBottomRightRadius: getMenuBorderRadius({\n        border: \"bottom\",\n        menuPlacement: state.selectProps.menuPlacement,\n        theme,\n      }).radius,\n      borderTopLeftRadius: getMenuBorderRadius({ border: \"top\", menuPlacement: state.selectProps.menuPlacement, theme })\n        .radius,\n      borderTopRightRadius: getMenuBorderRadius({\n        border: \"top\",\n        menuPlacement: state.selectProps.menuPlacement,\n        theme,\n      }).radius,\n      boxShadow: getShadow({ errored: error, isOpen: true, theme }),\n    }),\n    menuList: (provided) => ({\n      ...provided,\n      minWidth: \"fit-content\",\n      padding: 0,\n      maxHeight: numberFromDimension(maxHeight),\n      borderRadius: theme.radii.medium,\n      marginTop: windowed ? \"-4px\" : 0,\n      marginBottom: windowed ? \"-4px\" : 0,\n    }),\n    multiValue: (provided) => ({\n      ...provided,\n      background: theme.colors.lightGrey,\n      color: theme.colors.black,\n      margin: 0,\n    }),\n    multiValueLabel: () => ({\n      textOverflow: \"ellipsis\",\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      color: theme.colors.black,\n      borderRadius: theme.radii.small,\n      fontSize: theme.fontSizes.small,\n      padding: theme.space.half,\n      paddingLeft: theme.space.x1,\n      ...stylesForVariant(\n        {\n          touch: {\n            fontSize: \"md\",\n            lineHeight: \"base\",\n          },\n        },\n        variant\n      ),\n    }),\n    multiValueRemove: (provided) => ({\n      ...provided,\n      svg: { fill: theme.colors.black, height: theme.sizes.x2, width: theme.sizes.x2 },\n      borderBottomLeftRadius: 0,\n      borderTopLeftRadius: 0,\n      padding: theme.space.half,\n      paddingLeft: theme.space.x1,\n      \"&:hover\": {\n        background: theme.colors.darkGrey,\n        cursor: \"pointer\",\n        svg: { fill: theme.colors.white },\n      },\n      ...stylesForVariant(\n        {\n          touch: {\n            fontSize: \"md\",\n            lineHeight: \"base\",\n          },\n        },\n        variant\n      ),\n    }),\n    noOptionsMessage: (provided) => ({\n      ...provided,\n      color: theme.colors.black,\n      fontSize: theme.fontSizes.small,\n    }),\n    indicatorSeparator: (provided, state) => ({\n      ...provided,\n      display: showIndicatorSeparator({\n        hasValue: state.hasValue,\n        isClearable: state.selectProps.isClearable,\n        isMulti: state.isMulti,\n      })\n        ? \"block\"\n        : \"none\",\n      borderLeft: `1px solid ${theme.colors.grey}`,\n    }),\n    placeholder: (state) => {\n      return {\n        label: \"placeholder\",\n        marginLeft: 2,\n        marginRight: 2,\n        position: \"absolute\",\n        top: \"50%\",\n        transform: \"translateY(-50%)\",\n        color: state.isDisabled ? transparentize(0.7, theme.colors.midGrey) : theme.colors.midGrey,\n      };\n    },\n  };\n};\n\nexport default customStyles;\n"],"names":["transparentize"],"mappings":"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"}

package/dist/esm/Select/lib.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+function calcOptionsLength(options) {
+  options = options || [];
+  const head = options[0] || {};
+  const isGrouped = head.options !== void 0;
+  return isGrouped ? options.reduce((result, group) => result + group.options.length, 0) : options.length;
+}
+function flattenGroupedChildren(children) {
+  return children.reduce((result, child) => {
+    if (child.props.children != null && typeof child.props.children === "string") {
+      return [...result, child];
+    } else {
+      const {
+        props: { children: nestedChildren = [] }
+      } = child;
+      return [...result, React.cloneElement(child, { type: "group" }, []), ...nestedChildren];
+    }
+  }, []);
+}
+function isFocused({ props: { isFocused: isFocused2 } }) {
+  return isFocused2 === true;
+}
+function getCurrentIndex(children) {
+  return Math.max(children.findIndex(isFocused), 0);
+}
+function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }) {
+  return function getHeight(child) {
+    const {
+      props: {
+        type,
+        children,
+        inputValue,
+        selectProps: { noOptionsMessage, loadingMessage }
+      }
+    } = child;
+    if (type === "group") {
+      const { height = 25 } = groupHeadingStyles;
+      return height;
+    } else if (type === "option") {
+      const { height = 35 } = optionStyles;
+      return height;
+    } else if (typeof noOptionsMessage === "function" && children === noOptionsMessage({ inputValue })) {
+      const { height = 35 } = noOptionsMsgStyles;
+      return height;
+    } else if (typeof loadingMessage === "function" && children === loadingMessage({ inputValue })) {
+      const { height = 35 } = loadingMsgStyles;
+      return height;
+    } else {
+      return 35;
+    }
+  };
+}
+function getOption(options, value) {
+  if (Array.isArray(value)) {
+    return value.map((o) => getOption(options, o));
+  }
+  if (options.length > 0 && value !== void 0) {
+    return options.find((o) => o.value === value) ?? null;
+  }
+  return value;
+}
+function getReactSelectValue(options, input) {
+  if (Array.isArray(input)) {
+    return input.map((i) => getOption(options, i));
+  }
+  return getOption(options, input);
+}
+function extractValue(options, isMulti) {
+  if (options === null) {
+    return null;
+  }
+  if (!Array.isArray(options)) {
+    return options.value;
+  }
+  if (isMulti) {
+    return options && options.length ? options.map((o) => o.value) : [];
+  }
+  throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+}
+export {
+  calcOptionsLength,
+  createGetHeight,
+  extractValue,
+  flattenGroupedChildren,
+  getCurrentIndex,
+  getOption,
+  getReactSelectValue,
+  isFocused
+};
+//# sourceMappingURL=lib.js.map

package/dist/esm/Select/lib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.js","sources":["../../../src/Select/lib.ts"],"sourcesContent":["import * as React from \"react\";\nimport { OnChangeValue, Options, PropsValue } from \"react-select\";\nimport { NDSOption, NDSOptionValue } from \"./Select\";\n\nexport function calcOptionsLength(options) {\n  options = options || [];\n  const head = options[0] || {};\n  const isGrouped = head.options !== undefined;\n\n  return isGrouped ? options.reduce((result, group) => result + group.options.length, 0) : options.length;\n}\n\nexport function flattenGroupedChildren(children) {\n  return children.reduce((result, child) => {\n    if (child.props.children != null && typeof child.props.children === \"string\") {\n      return [...result, child];\n    } else {\n      const {\n        props: { children: nestedChildren = [] },\n      } = child;\n\n      return [...result, React.cloneElement(child, { type: \"group\" }, []), ...nestedChildren];\n    }\n  }, []);\n}\n\nexport function isFocused({ props: { isFocused } }) {\n  return isFocused === true;\n}\n\nexport function getCurrentIndex(children) {\n  return Math.max(children.findIndex(isFocused), 0);\n}\n\nexport function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }) {\n  return function getHeight(child) {\n    const {\n      props: {\n        type,\n        children,\n        inputValue,\n        selectProps: { noOptionsMessage, loadingMessage },\n      },\n    } = child;\n\n    if (type === \"group\") {\n      const { height = 25 } = groupHeadingStyles;\n      return height;\n    } else if (type === \"option\") {\n      const { height = 35 } = optionStyles;\n      return height;\n    } else if (typeof noOptionsMessage === \"function\" && children === noOptionsMessage({ inputValue })) {\n      const { height = 35 } = noOptionsMsgStyles;\n      return height;\n    } else if (typeof loadingMessage === \"function\" && children === loadingMessage({ inputValue })) {\n      const { height = 35 } = loadingMsgStyles;\n      return height;\n    } else {\n      return 35;\n    }\n  };\n}\n\nexport function checkOptionsAreValid(options: Options<NDSOption>) {\n  if (options && process.env.NODE_ENV === \"development\") {\n    const uniq = (a: unknown[]) => Array.from(new Set(a));\n\n    const uniqueValues = uniq(options.map(({ value }) => (value === null ? \"_null_\" : value)));\n\n    if (uniqueValues.length < options.length) {\n      console.warn(\"NDS: The options prop passed to Select must have unique values for each option\", options);\n    }\n  }\n}\n\nexport function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>) {\n  if (Array.isArray(value)) {\n    return value.map((o) => getOption(options, o));\n  }\n\n  if (options.length > 0 && value !== undefined) {\n    return options.find((o) => o.value === value) ?? null;\n  }\n\n  return value;\n}\n\nexport function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>) {\n  if (Array.isArray(input)) {\n    return input.map((i) => getOption(options, i));\n  }\n  return getOption(options, input);\n}\n\nexport type CustomOnChangeValue<IsMulti extends boolean> = IsMulti extends true ? NDSOptionValue[] : NDSOptionValue;\n\nexport function extractValue<IsMulti extends boolean>(\n  options: OnChangeValue<NDSOption, IsMulti>,\n  isMulti: IsMulti\n): CustomOnChangeValue<IsMulti> {\n  if (options === null) {\n    return null;\n  }\n\n  if (!Array.isArray(options)) {\n    return (options as NDSOption).value as CustomOnChangeValue<IsMulti>;\n  }\n\n  if (isMulti) {\n    return (options && options.length ? options.map((o) => o.value) : []) as CustomOnChangeValue<IsMulti>;\n  }\n\n  throw new Error(\"UNEXPECTED ERROR: don't forget to enable isMulti\");\n}\n"],"names":["isFocused"],"mappings":";AAIO,SAAS,kBAAkB,SAAS;AACzC,YAAU,WAAW,CAAA;AACrB,QAAM,OAAO,QAAQ,CAAC,KAAK,CAAA;AAC3B,QAAM,YAAY,KAAK,YAAY;AAEnC,SAAO,YAAY,QAAQ,OAAO,CAAC,QAAQ,UAAU,SAAS,MAAM,QAAQ,QAAQ,CAAC,IAAI,QAAQ;AACnG;AAEO,SAAS,uBAAuB,UAAU;AAC/C,SAAO,SAAS,OAAO,CAAC,QAAQ,UAAU;AACxC,QAAI,MAAM,MAAM,YAAY,QAAQ,OAAO,MAAM,MAAM,aAAa,UAAU;AAC5E,aAAO,CAAC,GAAG,QAAQ,KAAK;AAAA,IAC1B,OAAO;AACL,YAAM;AAAA,QACJ,OAAO,EAAE,UAAU,iBAAiB,CAAA,EAAC;AAAA,MAAE,IACrC;AAEJ,aAAO,CAAC,GAAG,QAAQ,MAAM,aAAa,OAAO,EAAE,MAAM,QAAA,GAAW,EAAE,GAAG,GAAG,cAAc;AAAA,IACxF;AAAA,EACF,GAAG,CAAA,CAAE;AACP;AAEO,SAAS,UAAU,EAAE,OAAO,EAAE,WAAAA,WAAAA,KAAe;AAClD,SAAOA,eAAc;AACvB;AAEO,SAAS,gBAAgB,UAAU;AACxC,SAAO,KAAK,IAAI,SAAS,UAAU,SAAS,GAAG,CAAC;AAClD;AAEO,SAAS,gBAAgB,EAAE,oBAAoB,oBAAoB,cAAc,oBAAoB;AAC1G,SAAO,SAAS,UAAU,OAAO;AAC/B,UAAM;AAAA,MACJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa,EAAE,kBAAkB,eAAA;AAAA,MAAe;AAAA,IAClD,IACE;AAEJ,QAAI,SAAS,SAAS;AACpB,YAAM,EAAE,SAAS,GAAA,IAAO;AACxB,aAAO;AAAA,IACT,WAAW,SAAS,UAAU;AAC5B,YAAM,EAAE,SAAS,GAAA,IAAO;AACxB,aAAO;AAAA,IACT,WAAW,OAAO,qBAAqB,cAAc,aAAa,iBAAiB,EAAE,WAAA,CAAY,GAAG;AAClG,YAAM,EAAE,SAAS,GAAA,IAAO;AACxB,aAAO;AAAA,IACT,WAAW,OAAO,mBAAmB,cAAc,aAAa,eAAe,EAAE,WAAA,CAAY,GAAG;AAC9F,YAAM,EAAE,SAAS,GAAA,IAAO;AACxB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAcO,SAAS,UAAU,SAA6B,OAAmC;AACxF,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,IAAI,CAAC,MAAM,UAAU,SAAS,CAAC,CAAC;AAAA,EAC/C;AAEA,MAAI,QAAQ,SAAS,KAAK,UAAU,QAAW;AAC7C,WAAO,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK;AAAA,EACnD;AAEA,SAAO;AACT;AAEO,SAAS,oBAAoB,SAA6B,OAAmC;AAClG,MAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,WAAO,MAAM,IAAI,CAAC,MAAM,UAAU,SAAS,CAAC,CAAC;AAAA,EAC/C;AACA,SAAO,UAAU,SAAS,KAAK;AACjC;AAIO,SAAS,aACd,SACA,SAC8B;AAC9B,MAAI,YAAY,MAAM;AACpB,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,MAAM,QAAQ,OAAO,GAAG;AAC3B,WAAQ,QAAsB;AAAA,EAChC;AAEA,MAAI,SAAS;AACX,WAAQ,WAAW,QAAQ,SAAS,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI,CAAA;AAAA,EACpE;AAEA,QAAM,IAAI,MAAM,kDAAkD;AACpE;"}

package/dist/esm/SortingTable/SortingTable.js

@@ -0,0 +1,57 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Table from "../Table/Table.js";
+const numericAlphabeticalSort = (a, b, numeric) => String(a).localeCompare(b, void 0, { numeric, sensitivity: "base" });
+function applySort(rows, sortColumn, columns) {
+  return [...rows].sort((a, b) => {
+    const column = columns.find((col) => col.dataKey === sortColumn);
+    const { numeric } = column;
+    return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);
+  });
+}
+function sortRows(rows, columns, sortState) {
+  const sortedRows = applySort(rows, sortState.sortColumn, columns);
+  return sortState.ascending ? sortedRows : sortedRows.reverse();
+}
+function SortingTable({
+  columns: incomingColumns,
+  rows: incomingRows,
+  initialSortColumn,
+  ...props
+}) {
+  const [sortState, setSortState] = useState({
+    ascending: true,
+    sortColumn: initialSortColumn
+  });
+  const [rows, setRows] = useState(() => sortRows(incomingRows, incomingColumns, sortState));
+  const onSortChange = (dataKey) => {
+    let newSortState;
+    setSortState((previousState) => {
+      const ascending = previousState.sortColumn !== dataKey || !previousState.ascending;
+      newSortState = { ascending, sortColumn: dataKey };
+      return newSortState;
+    });
+    setRows((previousState) => sortRows(previousState, incomingColumns, newSortState));
+  };
+  const transformColumn = (column) => {
+    const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;
+    return {
+      ...column,
+      headerFormatter: ({ label, dataKey }) => /* @__PURE__ */ jsx(
+        Table.SortingHeader,
+        {
+          onChange: () => onSortChange(dataKey),
+          label,
+          ascending: isAscending,
+          active: dataKey === sortState.sortColumn
+        }
+      )
+    };
+  };
+  const columns = incomingColumns.map((column) => transformColumn(column));
+  return /* @__PURE__ */ jsx(Table, { columns, rows, ...props });
+}
+export {
+  SortingTable as default
+};
+//# sourceMappingURL=SortingTable.js.map

package/dist/esm/SortingTable/SortingTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortingTable.js","sources":["../../../src/SortingTable/SortingTable.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Table } from \"../Table\";\nimport type { TableProps } from \"../Table\";\nimport type { RowType, ColumnType } from \"../Table/Table.types\";\n\ntype SortingTableProps<ColumnMetadata> = TableProps<ColumnMetadata> & {\n  initialSortColumn: string;\n};\n\ntype SortableColumnType<ColumnMetadata> = ColumnType<ColumnMetadata> & { numeric?: boolean };\n\ntype SortState = {\n  ascending: boolean;\n  sortColumn: string;\n};\n\nconst numericAlphabeticalSort = (a, b, numeric) =>\n  String(a).localeCompare(b, undefined, { numeric, sensitivity: \"base\" });\n\nfunction applySort<ColumnMetadata>(rows: RowType[], sortColumn: string, columns: SortableColumnType<ColumnMetadata>[]) {\n  return [...rows].sort((a, b) => {\n    const column = columns.find((col) => col.dataKey === sortColumn);\n    const { numeric } = column;\n\n    return numericAlphabeticalSort(a[sortColumn], b[sortColumn], numeric);\n  });\n}\n\nfunction sortRows<ColumnMetadata>(\n  rows: RowType[],\n  columns: SortableColumnType<ColumnMetadata>[],\n  sortState: SortState\n) {\n  const sortedRows = applySort(rows, sortState.sortColumn, columns);\n\n  return sortState.ascending ? sortedRows : sortedRows.reverse();\n}\n\nfunction SortingTable<ColumnMetadata>({\n  columns: incomingColumns,\n  rows: incomingRows,\n  initialSortColumn,\n  ...props\n}: SortingTableProps<ColumnMetadata>) {\n  const [sortState, setSortState] = useState<SortState>({\n    ascending: true,\n    sortColumn: initialSortColumn,\n  });\n\n  const [rows, setRows] = useState(() => sortRows(incomingRows, incomingColumns, sortState));\n\n  const onSortChange = (dataKey) => {\n    let newSortState;\n\n    setSortState((previousState) => {\n      const ascending = previousState.sortColumn !== dataKey || !previousState.ascending;\n      newSortState = { ascending, sortColumn: dataKey };\n\n      return newSortState;\n    });\n\n    setRows((previousState) => sortRows(previousState, incomingColumns, newSortState));\n  };\n\n  const transformColumn = (column) => {\n    const isAscending = sortState.ascending && column.dataKey === sortState.sortColumn;\n\n    return {\n      ...column,\n\n      headerFormatter: ({ label, dataKey }) => (\n        <Table.SortingHeader\n          onChange={() => onSortChange(dataKey)}\n          label={label}\n          ascending={isAscending}\n          active={dataKey === sortState.sortColumn}\n        />\n      ),\n    };\n  };\n\n  const columns = incomingColumns.map((column) => transformColumn(column));\n\n  return <Table columns={columns} rows={rows} {...props} />;\n}\n\nexport default SortingTable;\n"],"names":[],"mappings":";;;AAgBA,MAAM,0BAA0B,CAAC,GAAG,GAAG,YACrC,OAAO,CAAC,EAAE,cAAc,GAAG,QAAW,EAAE,SAAS,aAAa,QAAQ;AAExE,SAAS,UAA0B,MAAiB,YAAoB,SAA+C;AACrH,SAAO,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,MAAM;AAC9B,UAAM,SAAS,QAAQ,KAAK,CAAC,QAAQ,IAAI,YAAY,UAAU;AAC/D,UAAM,EAAE,YAAY;AAEpB,WAAO,wBAAwB,EAAE,UAAU,GAAG,EAAE,UAAU,GAAG,OAAO;AAAA,EACtE,CAAC;AACH;AAEA,SAAS,SACP,MACA,SACA,WACA;AACA,QAAM,aAAa,UAAU,MAAM,UAAU,YAAY,OAAO;AAEhE,SAAO,UAAU,YAAY,aAAa,WAAW,QAAA;AACvD;AAEA,SAAS,aAA6B;AAAA,EACpC,SAAS;AAAA,EACT,MAAM;AAAA,EACN;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB;AAAA,IACpD,WAAW;AAAA,IACX,YAAY;AAAA,EAAA,CACb;AAED,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,SAAS,cAAc,iBAAiB,SAAS,CAAC;AAEzF,QAAM,eAAe,CAAC,YAAY;AAChC,QAAI;AAEJ,iBAAa,CAAC,kBAAkB;AAC9B,YAAM,YAAY,cAAc,eAAe,WAAW,CAAC,cAAc;AACzE,qBAAe,EAAE,WAAW,YAAY,QAAA;AAExC,aAAO;AAAA,IACT,CAAC;AAED,YAAQ,CAAC,kBAAkB,SAAS,eAAe,iBAAiB,YAAY,CAAC;AAAA,EACnF;AAEA,QAAM,kBAAkB,CAAC,WAAW;AAClC,UAAM,cAAc,UAAU,aAAa,OAAO,YAAY,UAAU;AAExE,WAAO;AAAA,MACL,GAAG;AAAA,MAEH,iBAAiB,CAAC,EAAE,OAAO,cACzB;AAAA,QAAC,MAAM;AAAA,QAAN;AAAA,UACC,UAAU,MAAM,aAAa,OAAO;AAAA,UACpC;AAAA,UACA,WAAW;AAAA,UACX,QAAQ,YAAY,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAChC;AAAA,EAGN;AAEA,QAAM,UAAU,gBAAgB,IAAI,CAAC,WAAW,gBAAgB,MAAM,CAAC;AAEvE,SAAO,oBAAC,OAAA,EAAM,SAAkB,MAAa,GAAG,OAAO;AACzD;"}

package/dist/esm/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,78 @@
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import typography from "../node_modules/.pnpm/@styled-system_typography@5.1.2/node_modules/@styled-system/typography/dist/index.esm.js";
+import flexbox from "../node_modules/.pnpm/@styled-system_flexbox@5.1.2/node_modules/@styled-system/flexbox/dist/index.esm.js";
+const StatusIndicatorValues = {
+  neutral: "neutral",
+  dark: "dark",
+  danger: "danger",
+  informative: "informative",
+  success: "success",
+  warning: "warning",
+  quiet: "quiet"
+};
+const statusIndicatorStyles = (theme) => ({
+  [StatusIndicatorValues.neutral]: {
+    borderColor: theme.colors.lightGrey,
+    backgroundColor: theme.colors.lightGrey,
+    color: theme.colors.darkGrey
+  },
+  [StatusIndicatorValues.dark]: {
+    borderColor: theme.colors.blackBlue,
+    backgroundColor: theme.colors.blackBlue,
+    color: theme.colors.white
+  },
+  [StatusIndicatorValues.quiet]: {
+    border: "1px solid",
+    borderColor: theme.colors.grey,
+    backgroundColor: theme.colors.white,
+    color: theme.colors.darkGrey
+  },
+  [StatusIndicatorValues.danger]: {
+    borderColor: theme.colors.red,
+    backgroundColor: theme.colors.red,
+    color: theme.colors.white
+  },
+  [StatusIndicatorValues.informative]: {
+    borderColor: theme.colors.blue,
+    backgroundColor: theme.colors.blue,
+    color: theme.colors.white
+  },
+  [StatusIndicatorValues.success]: {
+    borderColor: theme.colors.green,
+    backgroundColor: theme.colors.green,
+    color: theme.colors.white
+  },
+  [StatusIndicatorValues.warning]: {
+    borderColor: theme.colors.yellow,
+    backgroundColor: theme.colors.yellow,
+    color: theme.colors.darkGrey
+  }
+});
+const StatusIndicator = styled.span(
+  ({ theme, type = StatusIndicatorValues.neutral }) => ({
+    margin: theme.space.none,
+    paddingTop: theme.space.none,
+    paddingRight: theme.space.x1,
+    paddingBottom: theme.space.none,
+    paddingLeft: theme.space.x1,
+    fontSize: theme.fontSizes.smaller,
+    lineHeight: theme.lineHeights.smallerText,
+    alignSelf: "center",
+    display: "inline-block",
+    fontWeight: theme.fontWeights.bold,
+    textTransform: "uppercase",
+    letterSpacing: ".05em",
+    borderRadius: theme.space.x1,
+    ...statusIndicatorStyles(theme)[type]
+  }),
+  space,
+  typography,
+  flexbox
+);
+export {
+  StatusIndicatorValues,
+  StatusIndicator as default
+};
+//# sourceMappingURL=StatusIndicator.js.map

package/dist/esm/StatusIndicator/StatusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../../../src/StatusIndicator/StatusIndicator.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { space, typography, flexbox, SpaceProps, TypographyProps, FlexboxProps } from \"styled-system\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\nexport const StatusIndicatorValues = {\n  neutral: \"neutral\",\n  dark: \"dark\",\n  danger: \"danger\",\n  informative: \"informative\",\n  success: \"success\",\n  warning: \"warning\",\n  quiet: \"quiet\",\n} as const;\n\nexport type StatusIndicatorType = (typeof StatusIndicatorValues)[keyof typeof StatusIndicatorValues];\n\nconst statusIndicatorStyles = (theme: DefaultNDSThemeType) => ({\n  [StatusIndicatorValues.neutral]: {\n    borderColor: theme.colors.lightGrey,\n    backgroundColor: theme.colors.lightGrey,\n    color: theme.colors.darkGrey,\n  },\n  [StatusIndicatorValues.dark]: {\n    borderColor: theme.colors.blackBlue,\n    backgroundColor: theme.colors.blackBlue,\n    color: theme.colors.white,\n  },\n  [StatusIndicatorValues.quiet]: {\n    border: \"1px solid\",\n    borderColor: theme.colors.grey,\n    backgroundColor: theme.colors.white,\n    color: theme.colors.darkGrey,\n  },\n  [StatusIndicatorValues.danger]: {\n    borderColor: theme.colors.red,\n    backgroundColor: theme.colors.red,\n    color: theme.colors.white,\n  },\n  [StatusIndicatorValues.informative]: {\n    borderColor: theme.colors.blue,\n    backgroundColor: theme.colors.blue,\n    color: theme.colors.white,\n  },\n  [StatusIndicatorValues.success]: {\n    borderColor: theme.colors.green,\n    backgroundColor: theme.colors.green,\n    color: theme.colors.white,\n  },\n  [StatusIndicatorValues.warning]: {\n    borderColor: theme.colors.yellow,\n    backgroundColor: theme.colors.yellow,\n    color: theme.colors.darkGrey,\n  },\n});\n\ninterface Props extends SpaceProps, TypographyProps, FlexboxProps {\n  type?: StatusIndicatorType;\n}\n\nconst StatusIndicator = styled.span<Props>(\n  ({ theme, type = StatusIndicatorValues.neutral }) => ({\n    margin: theme.space.none,\n    paddingTop: theme.space.none,\n    paddingRight: theme.space.x1,\n    paddingBottom: theme.space.none,\n    paddingLeft: theme.space.x1,\n    fontSize: theme.fontSizes.smaller,\n    lineHeight: theme.lineHeights.smallerText,\n    alignSelf: \"center\",\n    display: \"inline-block\",\n    fontWeight: theme.fontWeights.bold,\n    textTransform: \"uppercase\",\n    letterSpacing: \".05em\",\n    borderRadius: theme.space.x1,\n    ...statusIndicatorStyles(theme)[type],\n  }),\n  space,\n  typography,\n  flexbox\n);\n\nexport default StatusIndicator;\n"],"names":[],"mappings":";;;;;AAIO,MAAM,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAIA,MAAM,wBAAwB,CAAC,WAAgC;AAAA,EAC7D,CAAC,sBAAsB,OAAO,GAAG;AAAA,IAC/B,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,IAAI,GAAG;AAAA,IAC5B,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,KAAK,GAAG;AAAA,IAC7B,QAAQ;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,MAAM,GAAG;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,WAAW,GAAG;AAAA,IACnC,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,OAAO,GAAG;AAAA,IAC/B,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAAA,EAEtB,CAAC,sBAAsB,OAAO,GAAG;AAAA,IAC/B,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB;AAMA,MAAM,kBAAkB,OAAO;AAAA,EAC7B,CAAC,EAAE,OAAO,OAAO,sBAAsB,eAAe;AAAA,IACpD,QAAQ,MAAM,MAAM;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,eAAe,MAAM,MAAM;AAAA,IAC3B,aAAa,MAAM,MAAM;AAAA,IACzB,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY,MAAM,YAAY;AAAA,IAC9B,eAAe;AAAA,IACf,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,sBAAsB,KAAK,EAAE,IAAI;AAAA,EAAA;AAAA,EAEtC;AAAA,EACA;AAAA,EACA;AACF;"}