softable-pixels-web 1.1.15 → 1.1.16

package/dist/{Select-R22kJLFr.js → Select-DFPwAzYG.js}

@@ -102,7 +102,6 @@ function createSelectStyles(props) {
 			display: "flex",
 			flexDirection: "column",
 			position: "relative",
-			isolation: "isolate",
 			rowGap: "0.375rem"
 		},
 		content: {
@@ -240,4 +239,4 @@ const Select = (props) => {
 
 //#endregion
 export { Select as t };
-//# sourceMappingURL=Select-R22kJLFr.js.map
+//# sourceMappingURL=Select-DFPwAzYG.js.map

package/dist/Select-DFPwAzYG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-DFPwAzYG.js","names":["OptionItem: React.FC<OptionItemProps>","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\nimport type { OptionItemProps } from './types'\n\nexport function createOptionsStyles(_props: OptionItemProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      textAlign: 'left',\n\n      borderRadius: '0.25rem',\n      padding: '0.5rem 0.75rem',\n\n      cursor: 'pointer',\n      transition: 'background-color 0.2s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--px-background-card-hover)'\n        },\n\n        '&:focus': {\n          outlineOffset: '-1px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      fontSize: '1rem',\n      fontWeight: 500,\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\nexport const OptionItem: React.FC<OptionItemProps> = props => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n  // Functions\n  function handleClick() {\n    props.onClick(props.option.value)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      style={styles.container}\n      className={classes.container}\n      aria-label={props.option.label}\n      aria-selected={props.isSelected}\n      onClick={handleClick}\n    >\n      <span style={styles.text}>{props.option.label}</span>\n    </button>\n  )\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\n\nexport function useSelect({\n  value,\n  multiple,\n  canClear,\n  onChange\n}: SelectProps) {\n  // States\n  const [open, setOpen] = useState(false)\n\n  // Functions\n  function handleOptionClick(option: string) {\n    const isAlreadySelected = value.includes(option)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange([])\n      } else onChange([option])\n\n      setOpen(false)\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange([])\n      } else onChange(value.filter(v => v !== option))\n    } else onChange([...value, option])\n  }\n\n  function togglePanel() {\n    setOpen(prev => !prev)\n  }\n\n  function closePanel() {\n    setOpen(false)\n  }\n\n  return { open, togglePanel, closePanel, handleOptionClick }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      position: 'relative',\n\n      rowGap: '0.375rem'\n    },\n\n    content: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      textAlign: 'left',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      fontWeight: props.value.length ? 500 : 400,\n      color: props.value.length\n        ? 'var(--px-text-primary)'\n        : 'var(--px-text-secondary)'\n    },\n\n    error: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    },\n\n    panel: {\n      width: '100%',\n      height: '12rem',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      position: 'absolute',\n      top: 'calc(100% + 0.25rem)',\n      left: '0',\n      zIndex: 10,\n\n      overflowY: 'auto',\n      overscrollBehavior: 'contain',\n\n      borderWidth: 1,\n      rowGap: '0.25rem',\n      padding: '0.25rem',\n      borderRadius: '0.5rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\n\n// Styles\nimport { createSelectStyles } from './styles'\n\nexport const Select: React.FC<SelectProps> = props => {\n  // Hooks\n  const { open, togglePanel, handleOptionClick } = useSelect(props)\n  const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n    pick: p => [p.disabled, p.errorMessage, p.value],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Constants\n  const maxVisible = props.maxVisibleItems ?? Infinity\n  const optionsMap = useMemo(\n    () => new Map(props.options.map(option => [option.value, option.label])),\n    [props.options]\n  )\n\n  // Functions\n  function renderContent() {\n    if (!props.value?.length) return props.placeholder\n\n    const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n\n    const visibleItems = resolvedValues.slice(0, maxVisible)\n    const hiddenCount = resolvedValues.length - visibleItems.length\n\n    let result = visibleItems.join(', ')\n    if (hiddenCount > 0) result += ` +${hiddenCount}`\n\n    return result\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <button\n        dir=\"ltr\"\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        style={styles.content}\n        aria-autocomplete=\"none\"\n        aria-label={props.label}\n        className={classes.content}\n        onClick={togglePanel}\n      >\n        {props.startIcon}\n\n        <span id=\"text-content\" style={styles.text}>\n          {renderContent()}\n        </span>\n\n        <Icon size=\"sm\" name=\"chevrons-down\" />\n      </button>\n\n      {open ? (\n        <div style={styles.panel}>\n          {props.options.map(option => (\n            <OptionItem\n              key={option.value}\n              option={option}\n              isSelected={props.value.includes(option.value)}\n              onClick={handleOptionClick}\n            />\n          ))}\n        </div>\n      ) : null}\n\n      {props.errorMessage ? (\n        <span style={styles.error}>{props.errorMessage}</span>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/context-menu.d.ts

@@ -1,2 +1,2 @@
-import { n as types_d_exports, t as ContextMenu } from "./index-liMvHPFh.js";
+import { n as types_d_exports, t as ContextMenu } from "./index-C5I_cIP2.js";
 export { ContextMenu, types_d_exports as T };

package/dist/{index-Rsf19S6N.d.ts → index-B96rw-7n.d.ts}

@@ -9,7 +9,6 @@ declare function createSelectStyles(props: SelectProps): {
     display: "flex";
     flexDirection: "column";
     position: "relative";
-    isolation: "isolate";
     rowGap: string;
   };
   content: {
@@ -101,4 +100,4 @@ interface SelectOption {
 declare const Select: React$1.FC<SelectProps>;
 //#endregion
 export { Select as t };
-//# sourceMappingURL=index-Rsf19S6N.d.ts.map
+//# sourceMappingURL=index-B96rw-7n.d.ts.map

package/dist/{index-liMvHPFh.d.ts → index-C5I_cIP2.d.ts}

@@ -1,6 +1,6 @@
 import { n as Placement } from "./types-CGI_6rDa.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region rolldown:runtime
 //#endregion
@@ -69,7 +69,7 @@ interface ContextMenuProps<T> {
 }
 //#endregion
 //#region src/components/commons/toolkit/ContextMenu/index.d.ts
-declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime2.JSX.Element;
+declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { types_d_exports as n, ContextMenu as t };
-//# sourceMappingURL=index-liMvHPFh.d.ts.map
+//# sourceMappingURL=index-C5I_cIP2.d.ts.map

package/dist/{index-CvSwNc4e.d.ts → index-C9q8d9Md.d.ts}

@@ -1,6 +1,6 @@
 import { t as CommonStyleProps } from "./styleProps-DEmfU40p.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/commons/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -41,7 +41,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/commons/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-CvSwNc4e.d.ts.map
+//# sourceMappingURL=index-C9q8d9Md.d.ts.map

package/dist/index.d.ts

@@ -1,16 +1,16 @@
-import { n as types_d_exports, t as ContextMenu } from "./index-liMvHPFh.js";
+import { n as types_d_exports, t as ContextMenu } from "./index-C5I_cIP2.js";
 import "./types-0c2OAbj2.js";
 import { t as Button } from "./index-Cz1S_fwn.js";
 import { t as IconButton } from "./index-DDvfWEcX.js";
 import { t as Input } from "./index-ZGo_xs-Q.js";
-import { t as Select } from "./index-Rsf19S6N.js";
+import { t as Select } from "./index-B96rw-7n.js";
 import { t as TextArea } from "./index--Oqbm-1T.js";
 import { t as CheckItem } from "./index-CM9BXEm3.js";
 import { t as Checkbox } from "./index-jLN0CEbk.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
 import { t as Popover } from "./index-CQWwox_y.js";
 import { t as Switch } from "./index-Bw_XZiTz.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CvSwNc4e.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-C9q8d9Md.js";
 import { Typography } from "./typography.js";
 import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-BLvNLvv2.js";
 import { useDismiss } from "./use-dismiss.js";

package/dist/index.js

@@ -15,7 +15,7 @@ import { t as Button } from "./Button-DOEMYhEA.js";
 import { t as IconButton } from "./IconButton-DZjuxp2Q.js";
 import "./Label-BVkidQlv.js";
 import { t as Input } from "./Input-B0J7yEux.js";
-import { t as Select } from "./Select-R22kJLFr.js";
+import { t as Select } from "./Select-DFPwAzYG.js";
 import { t as TextArea } from "./TextArea-DGCFyZrW.js";
 import { useVirtualAnchor } from "./use-virtual-anchor.js";
 

package/dist/select.d.ts

@@ -1,2 +1,2 @@
-import { t as Select } from "./index-Rsf19S6N.js";
+import { t as Select } from "./index-B96rw-7n.js";
 export { Select };

package/dist/select.js

@@ -2,6 +2,6 @@ import "./useThemedStyles-D4si38PM.js";
 import "./Icon-kjpHbCbF.js";
 import "./Typography-CHkdzH2K.js";
 import "./Label-BVkidQlv.js";
-import { t as Select } from "./Select-R22kJLFr.js";
+import { t as Select } from "./Select-DFPwAzYG.js";
 
 export { Select };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CvSwNc4e.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-C9q8d9Md.js";
 export { SwitchOption, TabSwitch, TabSwitchProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/Select-R22kJLFr.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select-R22kJLFr.js","names":["OptionItem: React.FC<OptionItemProps>","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\nimport type { OptionItemProps } from './types'\n\nexport function createOptionsStyles(_props: OptionItemProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      alignItems: 'center',\n      textAlign: 'left',\n\n      borderRadius: '0.25rem',\n      padding: '0.5rem 0.75rem',\n\n      cursor: 'pointer',\n      transition: 'background-color 0.2s ease-out',\n\n      __rules: {\n        '&:hover': {\n          backgroundColor: 'var(--px-background-card-hover)'\n        },\n\n        '&:focus': {\n          outlineOffset: '-1px',\n          outline: '2px solid var(--px-color-primary)'\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      fontSize: '1rem',\n      fontWeight: 500,\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-primary)',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\nexport const OptionItem: React.FC<OptionItemProps> = props => {\n  // Hooks\n  const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n  // Functions\n  function handleClick() {\n    props.onClick(props.option.value)\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      style={styles.container}\n      className={classes.container}\n      aria-label={props.option.label}\n      aria-selected={props.isSelected}\n      onClick={handleClick}\n    >\n      <span style={styles.text}>{props.option.label}</span>\n    </button>\n  )\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\n\nexport function useSelect({\n  value,\n  multiple,\n  canClear,\n  onChange\n}: SelectProps) {\n  // States\n  const [open, setOpen] = useState(false)\n\n  // Functions\n  function handleOptionClick(option: string) {\n    const isAlreadySelected = value.includes(option)\n\n    if (!multiple) {\n      if (isAlreadySelected) {\n        if (canClear) onChange([])\n      } else onChange([option])\n\n      setOpen(false)\n      return\n    }\n\n    if (isAlreadySelected) {\n      if (value.length === 1) {\n        if (canClear) onChange([])\n      } else onChange(value.filter(v => v !== option))\n    } else onChange([...value, option])\n  }\n\n  function togglePanel() {\n    setOpen(prev => !prev)\n  }\n\n  function closePanel() {\n    setOpen(false)\n  }\n\n  return { open, togglePanel, closePanel, handleOptionClick }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      position: 'relative',\n      isolation: 'isolate',\n\n      rowGap: '0.375rem'\n    },\n\n    content: {\n      width: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n\n      borderWidth: 1,\n      columnGap: '0.25rem',\n      borderRadius: '0.5rem',\n      padding: '0.625rem 0.875rem',\n\n      opacity: props.disabled ? 0.5 : 1,\n      cursor: props.disabled ? 'not-allowed' : 'pointer',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n\n      __rules: {\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    },\n\n    text: {\n      flex: 1,\n\n      textAlign: 'left',\n\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      textOverflow: 'ellipsis',\n\n      fontSize: '1rem',\n      lineHeight: '1.5rem',\n      fontFamily: 'inherit',\n      fontWeight: props.value.length ? 500 : 400,\n      color: props.value.length\n        ? 'var(--px-text-primary)'\n        : 'var(--px-text-secondary)'\n    },\n\n    error: {\n      display: 'block',\n      fontWeight: 400,\n      lineHeight: '1rem',\n      fontSize: '0.75rem',\n      fontFamily: 'inherit',\n      color: 'var(--px-text-error)'\n    },\n\n    panel: {\n      width: '100%',\n      height: '12rem',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      position: 'absolute',\n      top: 'calc(100% + 0.25rem)',\n      left: '0',\n      zIndex: 10,\n\n      overflowY: 'auto',\n      overscrollBehavior: 'contain',\n\n      borderWidth: 1,\n      rowGap: '0.25rem',\n      padding: '0.25rem',\n      borderRadius: '0.5rem',\n\n      backgroundColor: 'var(--px-bg)',\n      boxShadow: 'var(--px-shadow-default)',\n      borderColor: 'var(--px-border-primary)'\n    }\n  })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { Label } from '@components/commons/Label'\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\n\n// Styles\nimport { createSelectStyles } from './styles'\n\nexport const Select: React.FC<SelectProps> = props => {\n  // Hooks\n  const { open, togglePanel, handleOptionClick } = useSelect(props)\n  const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n    pick: p => [p.disabled, p.errorMessage, p.value],\n    override: props.styles,\n    applyCommonProps: true,\n    commonSlot: 'container'\n  })\n\n  // Constants\n  const maxVisible = props.maxVisibleItems ?? Infinity\n  const optionsMap = useMemo(\n    () => new Map(props.options.map(option => [option.value, option.label])),\n    [props.options]\n  )\n\n  // Functions\n  function renderContent() {\n    if (!props.value?.length) return props.placeholder\n\n    const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n\n    const visibleItems = resolvedValues.slice(0, maxVisible)\n    const hiddenCount = resolvedValues.length - visibleItems.length\n\n    let result = visibleItems.join(', ')\n    if (hiddenCount > 0) result += ` +${hiddenCount}`\n\n    return result\n  }\n\n  return (\n    <div style={styles.container}>\n      {props.hideLabel ? null : (\n        <Label\n          label={props.label}\n          required={props.required}\n          requiredColor={props.requiredColor}\n          {...props.labelConfig}\n        />\n      )}\n\n      <button\n        dir=\"ltr\"\n        type=\"button\"\n        role=\"combobox\"\n        aria-expanded={open}\n        style={styles.content}\n        aria-autocomplete=\"none\"\n        aria-label={props.label}\n        className={classes.content}\n        onClick={togglePanel}\n      >\n        {props.startIcon}\n\n        <span id=\"text-content\" style={styles.text}>\n          {renderContent()}\n        </span>\n\n        <Icon size=\"sm\" name=\"chevrons-down\" />\n      </button>\n\n      {open ? (\n        <div style={styles.panel}>\n          {props.options.map(option => (\n            <OptionItem\n              key={option.value}\n              option={option}\n              isSelected={props.value.includes(option.value)}\n              onClick={handleOptionClick}\n            />\n          ))}\n        </div>\n      ) : null}\n\n      {props.errorMessage ? (\n        <span style={styles.error}>{props.errorMessage}</span>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}