@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/select/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["import { type JSX, Show, splitProps, createContext, useContext, createUniqueId } from \"solid-js\";\nimport {\n  Select as HeadlessSelect,\n  SelectTrigger as HeadlessSelectTrigger,\n  SelectValue as HeadlessSelectValue,\n  SelectListBox as HeadlessSelectListBox,\n  SelectOption as HeadlessSelectOption,\n  type SelectProps as HeadlessSelectProps,\n  type SelectTriggerProps as HeadlessSelectTriggerProps,\n  type SelectValueProps as HeadlessSelectValueProps,\n  type SelectListBoxProps as HeadlessSelectListBoxProps,\n  type SelectOptionProps as HeadlessSelectOptionProps,\n  type SelectRenderProps,\n  type SelectTriggerRenderProps,\n  type SelectValueRenderProps,\n  type SelectListBoxRenderProps,\n  type SelectOptionRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\n\nexport interface SelectProps<T> extends Omit<HeadlessSelectProps<T>, \"class\" | \"style\"> {\n  /** The size of the select. */\n  size?: SelectSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Label for the select. */\n  label?: string;\n  /** Description for the select. */\n  description?: string;\n  /** Error message when invalid. */\n  errorMessage?: string;\n  /** Whether the select is invalid. */\n  isInvalid?: boolean;\n}\n\nexport interface SelectTriggerProps extends Omit<HeadlessSelectTriggerProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectValueProps<T> extends Omit<HeadlessSelectValueProps<T>, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectListBoxProps<T> extends Omit<\n  HeadlessSelectListBoxProps<T>,\n  \"class\" | \"style\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectOptionProps<T> extends Omit<\n  HeadlessSelectOptionProps<T>,\n  \"class\" | \"style\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// All styling flows through the build-time S2 style() macro so the atomic CSS\n// ships in the package bundle for installed consumers, rather than relying on\n// Tailwind utility strings the package ships no CSS for. Interactive state\n// (hover/open/focus/selected/disabled) is driven by the collection render props.\n\nconst rootStyles = style<{ isDisabled?: boolean }>({\n  position: \"relative\",\n  display: \"inline-flex\",\n  flexDirection: \"column\",\n  gap: \"[6px]\",\n  opacity: { default: 1, isDisabled: 0.5 },\n});\n\nconst labelStyles = style<{ size: SelectSize }>({\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  fontWeight: \"medium\",\n  color: \"neutral\",\n});\n\nconst descriptionStyles = style({\n  font: \"ui-sm\",\n  color: \"neutral-subdued\",\n});\n\nconst errorStyles = style({\n  font: \"ui-sm\",\n  color: \"negative\",\n});\n\nconst triggerStyles = style<SelectTriggerRenderProps & { size: SelectSize }>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  width: \"full\",\n  borderRadius: \"panel\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  cursor: \"default\",\n  transition: \"default\",\n  height: { size: { sm: 32, md: 40, lg: 48 } },\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  paddingX: { size: { sm: 12, md: 16, lg: 20 } },\n  gap: { size: { sm: 8, md: 8, lg: 12 } },\n  borderColor: {\n    default: \"gray-300\",\n    isHovered: \"gray-400\",\n    isOpen: \"accent-900\",\n    isDisabled: \"gray-200\",\n  },\n  backgroundColor: {\n    default: \"gray-25\",\n    isDisabled: \"gray-100\",\n  },\n  color: {\n    default: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst chevronStyles = style<{ size: SelectSize; isOpen?: boolean }>({\n  flexShrink: 0,\n  transition: \"default\",\n  width: { size: { sm: 16, md: 20, lg: 24 } },\n  height: { size: { sm: 16, md: 20, lg: 24 } },\n  rotate: { default: 0, isOpen: 180 },\n});\n\nconst valueStyles = style<{ isSelected?: boolean }>({\n  flexGrow: 1,\n  textAlign: \"start\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  color: { default: \"gray-500\", isSelected: \"neutral\" },\n});\n\nconst listBoxStyles = style({\n  position: \"absolute\",\n  zIndex: 50,\n  marginTop: 4,\n  width: \"full\",\n  borderRadius: \"panel\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"gray-300\",\n  backgroundColor: \"layer-2\",\n  paddingY: 4,\n  boxShadow: \"elevated\",\n  maxHeight: 240,\n  overflow: \"auto\",\n});\n\nconst optionStyles = style<SelectOptionRenderProps & { size: SelectSize }>({\n  ...focusRing(),\n  outlineOffset: -2,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n  cursor: \"default\",\n  transition: \"default\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  paddingX: { size: { sm: 12, md: 16, lg: 20 } },\n  paddingY: { size: { sm: \"[6px]\", md: 8, lg: \"[10px]\" } },\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: \"gray-100\",\n    isFocused: \"gray-100\",\n    isSelected: \"accent-subtle\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isFocused: \"neutral\",\n    isSelected: \"accent\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst checkmarkStyles = style<{ size: SelectSize }>({\n  flexShrink: 0,\n  color: \"accent\",\n  width: { size: { sm: 16, md: 20, lg: 24 } },\n  height: { size: { sm: 16, md: 20, lg: 24 } },\n});\n\n// The label indents past the checkmark column when unselected; selected rows\n// show the checkmark and drop the indent.\nconst optionLabelStyles = style<{ size: SelectSize; isSelected?: boolean }>({\n  flexGrow: 1,\n  paddingStart: {\n    default: { size: { sm: 24, md: 28, lg: 36 } },\n    isSelected: 0,\n  },\n});\n\n/**\n * A select displays a collapsible list of options and allows a user to select one of them.\n */\nexport function Select<T>(props: SelectProps<T>): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const descriptionId = createUniqueId();\n  const errorId = createUniqueId();\n\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n  ]);\n\n  const size = local.size ?? \"md\";\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectRenderProps): string =>\n    [rootStyles({ isDisabled: renderProps.isDisabled }), customClass].filter(Boolean).join(\" \");\n\n  const mergedAriaLabel = (headlessProps as { \"aria-label\"?: string })[\"aria-label\"];\n\n  const styledLabel = () =>\n    local.label ? <span class={labelStyles({ size })}>{local.label}</span> : undefined;\n\n  const describedByIds =\n    [\n      (headlessProps as { \"aria-describedby\"?: string })[\"aria-describedby\"],\n      local.description && !local.isInvalid ? descriptionId : undefined,\n      local.errorMessage && local.isInvalid ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <SelectSizeContext.Provider value={size}>\n      <HeadlessSelect\n        {...headlessProps}\n        label={styledLabel()}\n        aria-label={mergedAriaLabel}\n        aria-describedby={describedByIds}\n        class={getClassName}\n      >\n        {props.children as JSX.Element}\n        <Show when={local.description && !local.isInvalid}>\n          <span id={descriptionId} class={descriptionStyles}>\n            {local.description}\n          </span>\n        </Show>\n        <Show when={local.errorMessage && local.isInvalid}>\n          <span id={errorId} class={errorStyles}>\n            {local.errorMessage}\n          </span>\n        </Show>\n      </HeadlessSelect>\n    </SelectSizeContext.Provider>\n  );\n}\n\n/**\n * The trigger button for a select.\n */\nexport function SelectTrigger(props: SelectTriggerProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n  const size = useContext(SelectSizeContext);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectTriggerRenderProps): string =>\n    [triggerStyles({ ...renderProps, size }), customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectTrigger {...headlessProps} class={getClassName}>\n      {(renderProps) => (\n        <>\n          {props.children as JSX.Element}\n          <ChevronIcon class={chevronStyles({ size, isOpen: renderProps.isOpen })} />\n        </>\n      )}\n    </HeadlessSelectTrigger>\n  );\n}\n\n/**\n * Displays the selected value in a select.\n */\nexport function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectValueRenderProps<T>): string =>\n    [valueStyles({ isSelected: renderProps.isSelected }), customClass].filter(Boolean).join(\" \");\n\n  return <HeadlessSelectValue {...headlessProps} class={getClassName} children={props.children} />;\n}\n\n/**\n * The listbox popup for a select.\n */\nexport function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (_renderProps: SelectListBoxRenderProps): string =>\n    [listBoxStyles, customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectListBox {...headlessProps} class={getClassName} children={props.children} />\n  );\n}\n\n/**\n * An option in a select listbox.\n */\nexport function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const size = useContext(SelectSizeContext);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectOptionRenderProps): string =>\n    [optionStyles({ ...renderProps, size }), customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectOption {...headlessProps} class={getClassName}>\n      {(renderProps) => (\n        <>\n          <Show when={renderProps.isSelected}>\n            <CheckIcon class={checkmarkStyles({ size })} />\n          </Show>\n          <span class={optionLabelStyles({ size, isSelected: renderProps.isSelected })}>\n            {props.children as JSX.Element}\n          </span>\n        </>\n      )}\n    </HeadlessSelectOption>\n  );\n}\n\nfunction ChevronIcon(props: { class?: string }): JSX.Element {\n  return (\n    <svg class={props.class} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(props: { class?: string }): JSX.Element {\n  return (\n    <svg class={props.class} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n    </svg>\n  );\n}\n\nSelect.Trigger = SelectTrigger;\nSelect.Value = SelectValue;\nSelect.ListBox = SelectListBox;\nSelect.Option = SelectOption;\n\nexport type { Key };\n"],"mappings":"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"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/select/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Picker.tsx\n\n// Port of packages/@react-spectrum/s2/src/Picker.tsx.\n\nimport { Show, createContext, useContext, createUniqueId } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Select as HeadlessSelect,\n  SelectTrigger as HeadlessSelectTrigger,\n  SelectValue as HeadlessSelectValue,\n  SelectListBox as HeadlessSelectListBox,\n  SelectOption as HeadlessSelectOption,\n  type SelectProps as HeadlessSelectProps,\n  type SelectTriggerProps as HeadlessSelectTriggerProps,\n  type SelectValueProps as HeadlessSelectValueProps,\n  type SelectListBoxProps as HeadlessSelectListBoxProps,\n  type SelectOptionProps as HeadlessSelectOptionProps,\n  type SelectRenderProps,\n  type SelectTriggerRenderProps,\n  type SelectValueRenderProps,\n  type SelectListBoxRenderProps,\n  type SelectOptionRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { useProviderProps } from \"../provider\";\nimport { style, focusRing } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type SelectSize = \"sm\" | \"md\" | \"lg\";\n\nconst SelectSizeContext = createContext<SelectSize>(\"md\");\n\nexport interface SelectProps<T> extends Omit<HeadlessSelectProps<T>, \"class\" | \"style\"> {\n  /** The size of the select. */\n  size?: SelectSize;\n  /** Additional CSS class name. */\n  class?: string;\n  /** Label for the select. */\n  label?: string;\n  /** Description for the select. */\n  description?: string;\n  /** Error message when invalid. */\n  errorMessage?: string;\n  /** Whether the select is invalid. */\n  isInvalid?: boolean;\n}\n\nexport interface SelectTriggerProps extends Omit<HeadlessSelectTriggerProps, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectValueProps<T> extends Omit<HeadlessSelectValueProps<T>, \"class\" | \"style\"> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectListBoxProps<T> extends Omit<\n  HeadlessSelectListBoxProps<T>,\n  \"class\" | \"style\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\nexport interface SelectOptionProps<T> extends Omit<\n  HeadlessSelectOptionProps<T>,\n  \"class\" | \"style\"\n> {\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// All styling flows through the build-time S2 style() macro so the atomic CSS\n// ships in the package bundle for installed consumers, rather than relying on\n// Tailwind utility strings the package ships no CSS for. Interactive state\n// (hover/open/focus/selected/disabled) is driven by the collection render props.\n\nconst rootStyles = style<{ isDisabled?: boolean }>({\n  position: \"relative\",\n  display: \"inline-flex\",\n  flexDirection: \"column\",\n  gap: \"[6px]\",\n  opacity: { default: 1, isDisabled: 0.5 },\n});\n\nconst labelStyles = style<{ size: SelectSize }>({\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  fontWeight: \"medium\",\n  color: \"neutral\",\n});\n\nconst descriptionStyles = style({\n  font: \"ui-sm\",\n  color: \"neutral-subdued\",\n});\n\nconst errorStyles = style({\n  font: \"ui-sm\",\n  color: \"negative\",\n});\n\nconst triggerStyles = style<SelectTriggerRenderProps & { size: SelectSize }>({\n  ...focusRing(),\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  width: \"full\",\n  borderRadius: \"panel\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  cursor: \"default\",\n  transition: \"default\",\n  height: { size: { sm: 32, md: 40, lg: 48 } },\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  paddingX: { size: { sm: 12, md: 16, lg: 20 } },\n  gap: { size: { sm: 8, md: 8, lg: 12 } },\n  borderColor: {\n    default: \"gray-300\",\n    isHovered: \"gray-400\",\n    isOpen: \"accent-900\",\n    isDisabled: \"gray-200\",\n  },\n  backgroundColor: {\n    default: \"gray-25\",\n    isDisabled: \"gray-100\",\n  },\n  color: {\n    default: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst chevronStyles = style<{ size: SelectSize; isOpen?: boolean }>({\n  flexShrink: 0,\n  transition: \"default\",\n  width: { size: { sm: 16, md: 20, lg: 24 } },\n  height: { size: { sm: 16, md: 20, lg: 24 } },\n  rotate: { default: 0, isOpen: 180 },\n});\n\nconst valueStyles = style<{ isSelected?: boolean }>({\n  flexGrow: 1,\n  textAlign: \"start\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  color: { default: \"gray-500\", isSelected: \"neutral\" },\n});\n\nconst listBoxStyles = style({\n  position: \"absolute\",\n  zIndex: 50,\n  marginTop: 4,\n  width: \"full\",\n  borderRadius: \"panel\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"gray-300\",\n  backgroundColor: \"layer-2\",\n  paddingY: 4,\n  boxShadow: \"elevated\",\n  maxHeight: 240,\n  overflow: \"auto\",\n});\n\nconst optionStyles = style<SelectOptionRenderProps & { size: SelectSize }>({\n  ...focusRing(),\n  outlineOffset: -2,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n  cursor: \"default\",\n  transition: \"default\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n  paddingX: { size: { sm: 12, md: 16, lg: 20 } },\n  paddingY: { size: { sm: \"[6px]\", md: 8, lg: \"[10px]\" } },\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: \"gray-100\",\n    isFocused: \"gray-100\",\n    isSelected: \"accent-subtle\",\n    isDisabled: \"transparent\",\n  },\n  color: {\n    default: \"neutral-subdued\",\n    isHovered: \"neutral\",\n    isFocused: \"neutral\",\n    isSelected: \"accent\",\n    isDisabled: \"disabled\",\n  },\n});\n\nconst checkmarkStyles = style<{ size: SelectSize }>({\n  flexShrink: 0,\n  color: \"accent\",\n  width: { size: { sm: 16, md: 20, lg: 24 } },\n  height: { size: { sm: 16, md: 20, lg: 24 } },\n});\n\n// The label indents past the checkmark column when unselected; selected rows\n// show the checkmark and drop the indent.\nconst optionLabelStyles = style<{ size: SelectSize; isSelected?: boolean }>({\n  flexGrow: 1,\n  paddingStart: {\n    default: { size: { sm: 24, md: 28, lg: 36 } },\n    isSelected: 0,\n  },\n});\n\n/**\n * A select displays a collapsible list of options and allows a user to select one of them.\n */\nexport function Select<T>(props: SelectProps<T>): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const descriptionId = createUniqueId();\n  const errorId = createUniqueId();\n\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"isInvalid\",\n  ]);\n\n  const size = local.size ?? \"md\";\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectRenderProps): string =>\n    [rootStyles({ isDisabled: renderProps.isDisabled }), customClass].filter(Boolean).join(\" \");\n\n  const mergedAriaLabel = (headlessProps as { \"aria-label\"?: string })[\"aria-label\"];\n\n  const styledLabel = () =>\n    local.label ? <span class={labelStyles({ size })}>{local.label}</span> : undefined;\n\n  const describedByIds =\n    [\n      (headlessProps as { \"aria-describedby\"?: string })[\"aria-describedby\"],\n      local.description && !local.isInvalid ? descriptionId : undefined,\n      local.errorMessage && local.isInvalid ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  return (\n    <SelectSizeContext value={size}>\n      <HeadlessSelect\n        {...headlessProps}\n        label={styledLabel()}\n        aria-label={mergedAriaLabel}\n        aria-describedby={describedByIds}\n        class={getClassName}\n      >\n        {props.children as JSX.Element}\n        <Show when={local.description && !local.isInvalid}>\n          <span id={descriptionId} class={descriptionStyles}>\n            {local.description}\n          </span>\n        </Show>\n        <Show when={local.errorMessage && local.isInvalid}>\n          <span id={errorId} class={errorStyles}>\n            {local.errorMessage}\n          </span>\n        </Show>\n      </HeadlessSelect>\n    </SelectSizeContext>\n  );\n}\n\n/**\n * The trigger button for a select.\n */\nexport function SelectTrigger(props: SelectTriggerProps): JSX.Element {\n  const mergedProps = useProviderProps(props);\n  const [local, headlessProps] = splitProps(mergedProps, [\"class\"]);\n  const size = useContext(SelectSizeContext);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectTriggerRenderProps): string =>\n    [triggerStyles({ ...renderProps, size }), customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectTrigger {...headlessProps} class={getClassName}>\n      {(renderProps) => (\n        <>\n          {props.children as JSX.Element}\n          <ChevronIcon class={chevronStyles({ size, isOpen: renderProps.isOpen })} />\n        </>\n      )}\n    </HeadlessSelectTrigger>\n  );\n}\n\n/**\n * Displays the selected value in a select.\n */\nexport function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectValueRenderProps<T>): string =>\n    [valueStyles({ isSelected: renderProps.isSelected }), customClass].filter(Boolean).join(\" \");\n\n  return <HeadlessSelectValue {...headlessProps} class={getClassName} children={props.children} />;\n}\n\n/**\n * The listbox popup for a select.\n */\nexport function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (_renderProps: SelectListBoxRenderProps): string =>\n    [listBoxStyles, customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectListBox {...headlessProps} class={getClassName} children={props.children} />\n  );\n}\n\n/**\n * An option in a select listbox.\n */\nexport function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"class\"]);\n  const size = useContext(SelectSizeContext);\n  const customClass = local.class ?? \"\";\n\n  const getClassName = (renderProps: SelectOptionRenderProps): string =>\n    [optionStyles({ ...renderProps, size }), customClass].filter(Boolean).join(\" \");\n\n  return (\n    <HeadlessSelectOption {...headlessProps} class={getClassName}>\n      {(renderProps) => (\n        <>\n          <Show when={renderProps.isSelected}>\n            <CheckIcon class={checkmarkStyles({ size })} />\n          </Show>\n          <span class={optionLabelStyles({ size, isSelected: renderProps.isSelected })}>\n            {props.children as JSX.Element}\n          </span>\n        </>\n      )}\n    </HeadlessSelectOption>\n  );\n}\n\nfunction ChevronIcon(props: { class?: string }): JSX.Element {\n  return (\n    <svg class={props.class} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon(props: { class?: string }): JSX.Element {\n  return (\n    <svg class={props.class} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n    </svg>\n  );\n}\n\nSelect.Trigger = SelectTrigger;\nSelect.Value = SelectValue;\nSelect.ListBox = SelectListBox;\nSelect.Option = SelectOption;\n\nexport type { Key };\n"],"mappings":"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"}

package/dist/selectboxgroup/index.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ListBoxOptionProps as HeadlessListBoxOptionProps, type ListBoxProps as HeadlessListBoxProps } from "@proyecto-viviana/solidaria-components";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import type { StyleString } from "../style";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/selectboxgroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EAOT,MAAM,UAAU,CAAC;AAClB,OAAO,EAGL,KAAK,kBAAkB,IAAI,0BAA0B,EAErD,KAAK,YAAY,IAAI,oBAAoB,EAE1C,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAClD,oBAAoB,CAAC,CAAC,CAAC,EACvB,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,aAAa,GAAG,MAAM,GAAG,KAAK,CAC3E;IACC,kEAAkE;IAClE,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IACnD,iFAAiF;IACjF,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,0BAA0B,CAAC,OAAO,CAAC,EACnC,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,sCAAsC;IACtC,EAAE,EAAE,GAAG,CAAC;IACR,qCAAqC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuBD,eAAO,MAAM,qBAAqB,gFACuC,CAAC;AA0P1E;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAmI5E;AA8ED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAgG5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/selectboxgroup/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAGL,KAAK,kBAAkB,IAAI,0BAA0B,EAErD,KAAK,YAAY,IAAI,oBAAoB,EAE1C,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAClD,oBAAoB,CAAC,CAAC,CAAC,EACvB,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,aAAa,GAAG,MAAM,GAAG,KAAK,CAC3E;IACC,kEAAkE;IAClE,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IACnD,iFAAiF;IACjF,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,0BAA0B,CAAC,OAAO,CAAC,EACnC,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,sCAAsC;IACtC,EAAE,EAAE,GAAG,CAAC;IACR,qCAAqC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuBD,eAAO,MAAM,qBAAqB,gFACuC,CAAC;AAgR1E;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA6I5E;AA8ED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAsG5D"}

package/dist/selectboxgroup/index.js

@@ -1,216 +1,242 @@
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { useProviderProps } from "../provider/index.js";
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
 import { pressScale } from "../pressScale.js";
 import { t as Checkmark } from "../_chunk/Checkmark.js";
-import { className, createComponent, effect, getNextElement, insert, memo, mergeProps, template } from "solid-js/web";
-import { Show, children, createContext, createEffect, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, splitProps, useContext } from "solid-js";
+import { className, createComponent, effect, getNextElement, insert, memo, mergeProps, readShallow, template } from "@solidjs/web";
+import { Show, children, createContext, createMemo, createSignal, createTrackedEffect, onCleanup, useContext } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
 import { ListBox, ListBoxOption } from "@proyecto-viviana/solidaria-components";
 //#region src/selectboxgroup/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div data-rsp-slot=selection-indicator>`), _tmpl$2 = /*#__PURE__*/ template(`<div class=" _Pa151 WJ151 _AI151 _Ob151"aria-hidden=true>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div data-rsp-slot=selection-indicator>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class=" _Pa17 WJ17 _AI17 _Ob17"aria-hidden=true>`);
 const SelectBoxContext = createContext({ orientation: "vertical" });
 const StaticSelectBoxCollectionContext = createContext(null);
 const SelectBoxGroupContext = createContext(null);
 const selectBoxGroupStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " se151";
-	rules += " __yM8Mfn151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " _Gc151";
-	rules += " Uj151";
-	rules += " qj151";
-	rules += " _Ca151";
-	if (props.orientation === "horizontal") rules += " DMvye4c151";
-	else if (props.orientation === "vertical") rules += " DbNECGe151";
+	rules += " se17";
+	rules += " __yM8Mfn17";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	rules += " Td17";
+	rules += " Qd17";
+	rules += " Sd17";
+	rules += " Rd17";
+	rules += " _Gc17";
+	rules += " Uj17";
+	rules += " qj17";
+	rules += " _Ca17";
+	if (props.orientation === "horizontal") rules += " DMvye4c17";
+	else if (props.orientation === "vertical") rules += " DbNECGe17";
 	return rules;
 };
 const selectBoxStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " se151";
-	rules += " __yM8Mfn151";
-	rules += " _Pc151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	rules += " _oa151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	if (props.orientation === "horizontal") rules += " ZAK24ue151";
-	else rules += " Z75oWv151";
-	if (props.orientation === "horizontal") rules += " Fd151";
-	else rules += " F75oWv151";
-	if (props.orientation === "horizontal") rules += " NBzUiud151";
-	else rules += " NQGV3L151";
-	if (props.orientation === "horizontal") rules += " -_5yLdZ-ZILqIYb151";
-	else rules += " -_5yLdZ-Z75oWv151";
-	rules += " L0TTrwb151";
-	if (props.orientation === "horizontal") rules += " MKniM151";
-	else rules += " MQGV3L151";
-	if (props.orientation === "horizontal") rules += " KDvO7ld151";
-	else rules += " K75oWv151";
-	if (props.orientation === "horizontal") rules += " Tf151";
-	else rules += " Th151";
-	if (props.orientation === "horizontal") rules += " Qf151";
-	else rules += " Qh151";
-	if (props.orientation === "horizontal") rules += " Sk151";
-	if (props.orientation === "horizontal") rules += " Rh151";
-	if (props.orientation === "vertical") rules += " C586wNb151";
-	if (props.orientation === "vertical") rules += " EY7ZLHe151";
-	if (props.orientation === "horizontal") rules += " DJSAqje151";
-	if (props.orientation === "vertical") rules += " _cb151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " _jf151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	if (props.isDisabled) rules += " iA151";
-	else if (props.isSelected) rules += " iI9Ko6c151";
-	else if (props.isHovered) rules += " ivsWZX151";
-	else rules += " irHHOgb151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " g9ORGnd151";
-	if (props.isDisabled) rules += " _nd151";
-	else rules += " _neYWWze151";
-	if (props.isDisabled) rules += " ru151";
-	else rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " oQvqurc17";
+	rules += " nQvqurc17";
+	rules += " kQvqurc17";
+	rules += " jQvqurc17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else rules += " g9ORGnd17";
+	rules += " -Jvcevd-Nbc1hc17";
+	if (props.isDisabled) rules += " _nd17";
+	else rules += " _nPP9Zse17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " _jf17";
+	if (props.isDisabled) rules += " iA17";
+	else if (props.isSelected) rules += " iQWM1Qc17";
+	else if (props.isHovered) rules += " ivsWZX17";
+	else rules += " irHHOgb17";
+	rules += " se17";
+	rules += " __yM8Mfn17";
+	rules += " _Pc17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	rules += " _oa17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	if (props.orientation === "horizontal") rules += " ZAK24ue17";
+	else rules += " Z75oWv17";
+	if (props.orientation === "horizontal") rules += " Fd17";
+	else rules += " F75oWv17";
+	if (props.orientation === "horizontal") rules += " NBzUiud17";
+	else rules += " NQGV3L17";
+	if (props.orientation === "horizontal") rules += " -_5yLdZ-ZILqIYb17";
+	else rules += " -_5yLdZ-Z75oWv17";
+	rules += " L0TTrwb17";
+	if (props.orientation === "horizontal") rules += " MKniM17";
+	else rules += " MQGV3L17";
+	if (props.orientation === "horizontal") rules += " KDvO7ld17";
+	else rules += " K75oWv17";
+	if (props.orientation === "horizontal") rules += " Tf17";
+	else rules += " Th17";
+	if (props.orientation === "horizontal") rules += " Qf17";
+	else rules += " Qh17";
+	if (props.orientation === "horizontal") rules += " Sk17";
+	if (props.orientation === "horizontal") rules += " Rh17";
+	if (props.orientation === "vertical") rules += " C586wNb17";
+	if (props.orientation === "vertical") rules += " EY7ZLHe17";
+	if (props.orientation === "horizontal") rules += " DJSAqje17";
+	if (props.orientation === "vertical") rules += " _cb17";
+	if (props.isDisabled) rules += " ru17";
+	else rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
 	return rules;
 };
 const selectBoxCheckboxBox = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " Zu151";
-	rules += " Ft151";
-	rules += " _va151";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " _oa151";
-	rules += " _jf151";
-	rules += " oa151";
-	rules += " na151";
-	rules += " ka151";
-	rules += " ja151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " _yb151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.isSelected) rules += " gHKLAu151";
-	else rules += " gX151";
-	if (props.isSelected) rules += " iA151";
-	else if (props.isDisabled) rules += " ifbAdGe151";
-	else rules += " iv151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " Zk17";
+	rules += " Fl17";
+	rules += " _va17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " _kc17";
+	rules += " hc17";
+	rules += " mc17";
+	rules += " lc17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _yb17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.isSelected) {
+		if (props.isPressed) rules += " g7mEcOd17";
+		else if (props.isFocusVisible) rules += " g7mEcOd17";
+		else if (props.isHovered) rules += " g7mEcOd17";
+		else rules += " gwOLUue17";
+	} else rules += " gHPXipd17";
+	if (props.isSelected) rules += " iA17";
+	else if (props.isDisabled) rules += " iSNu3ze17";
+	else rules += " iAv83Hb17";
 	return rules;
 };
-const selectBoxCheckboxIcon = " _Ob151";
+const selectBoxCheckboxIcon = " _Ob17";
 const selectBoxIllustration = function anonymous(props) {
 	let rules = " ";
-	rules += " zTZ8xtd151";
-	rules += " yTZ8xtd151";
-	rules += " BTZ8xtd151";
-	rules += " ATZ8xtd151";
-	rules += " _dc151";
-	rules += " __Ab151";
-	rules += " Nl151";
-	rules += " Mk151";
-	if (props.isDisabled) rules += " -_8sjo0b-pUvnvv151";
-	else if (props.isPressed) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isFocusVisible) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isHovered) rules += " -_8sjo0b-pMwyHo151";
-	else rules += " -_8sjo0b-pHKLAu151";
+	rules += " zTZ8xtd17";
+	rules += " yTZ8xtd17";
+	rules += " BTZ8xtd17";
+	rules += " ATZ8xtd17";
+	rules += " _dc17";
+	rules += " __Ab17";
+	rules += " Nl17";
+	rules += " Mk17";
+	if (props.isDisabled) rules += " -_8sjo0b-p8H6Pad17";
+	else if (props.isPressed) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isFocusVisible) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isHovered) rules += " -_8sjo0b-pBJTC6c17";
+	else rules += " -_8sjo0b-pmiKvLd17";
 	return rules;
 };
 const selectBoxDescription = function anonymous(props) {
 	let rules = " ";
-	rules += " z9u7zPc151";
-	rules += " y9u7zPc151";
-	rules += " B9u7zPc151";
-	rules += " A9u7zPc151";
-	rules += " _dc151";
-	if (props.orientation === "vertical") rules += " sk151";
-	else rules += " sb151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	if (props.orientation === "horizontal") rules += " _Wd151";
-	else rules += " _Wa151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
+	rules += " z9u7zPc17";
+	rules += " y9u7zPc17";
+	rules += " B9u7zPc17";
+	rules += " A9u7zPc17";
+	rules += " _dc17";
+	if (props.orientation === "vertical") rules += " sk17";
+	else rules += " sb17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	if (props.orientation === "horizontal") rules += " _Wd17";
+	else rules += " _Wa17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
 	return rules;
 };
 const selectBoxLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " _dc151";
-	if (props.orientation === "horizontal") rules += " __Ad151";
-	else rules += " __Ab151";
-	rules += " Za151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " Na151";
-	if (props.orientation === "horizontal") rules += " _Wd151";
-	else rules += " _Wa151";
-	rules += " _7c151";
-	rules += " _Yb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " _dc17";
+	if (props.orientation === "horizontal") rules += " __Ad17";
+	else rules += " __Ab17";
+	rules += " Za17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " Na17";
+	if (props.orientation === "horizontal") rules += " _Wd17";
+	else rules += " _Wa17";
+	rules += " _7c17";
+	rules += " _Yb17";
 	if (props.orientation === "horizontal") {
-		rules += " xd151";
-		rules += " _xa151";
-		rules += " xX0cczbc151";
-		rules += " _xX0cczba151";
+		rules += " xd17";
+		rules += " _xa17";
+		rules += " xX0cczbc17";
+		rules += " _xX0cczba17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
 	return rules;
 };
 /**
 * SelectBoxGroup allows users to select one or more options from a list.
-*/
-function SelectBoxGroup(props) {
+*/ function SelectBoxGroup(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(SelectBoxGroupContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const mergedProps = mergeProps$1(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"children",
 		"orientation",
 		"isDisabled",
@@ -224,7 +250,7 @@ function SelectBoxGroup(props) {
 	]);
 	const orientation = () => local.orientation ?? "vertical";
 	const selectionMode = () => local.selectionMode === "multiple" ? "multiple" : "single";
-	const [staticItems, setStaticItems] = createSignal([]);
+	const [staticItems, setStaticItems] = createSignal([], { ownedWrite: true });
 	const staticItemMap = /* @__PURE__ */ new Map();
 	const usesStaticChildren = () => headlessProps.items == null;
 	const syncStaticItems = () => setStaticItems(Array.from(staticItemMap.values()));
@@ -263,15 +289,17 @@ function SelectBoxGroup(props) {
 	const getKey = () => usesStaticChildren() ? (item) => item.id : headlessProps.getKey;
 	const getTextValue = () => usesStaticChildren() ? (item) => item.textValue ?? String(item.id) : headlessProps.getTextValue;
 	const getDisabled = () => usesStaticChildren() ? (item) => Boolean(item.isDisabled) : headlessProps.getDisabled;
-	const renderItem = (item) => usesStaticChildren() ? createComponent(SelectBox, mergeProps(() => item.props)) : typeof local.children === "function" ? local.children(item) : null;
+	const renderItem = (item) => usesStaticChildren() ? createComponent(SelectBox, mergeProps(() => {
+		return item.props;
+	})) : typeof local.children === "function" ? local.children(item) : null;
 	const staticRegistrationChildren = () => {
 		if (!usesStaticChildren()) return null;
 		return children(() => local.children)();
 	};
-	return createComponent(SelectBoxContext.Provider, {
+	return createComponent(SelectBoxContext, {
 		value: contextValue,
 		get children() {
-			return [createComponent(StaticSelectBoxCollectionContext.Provider, {
+			return [createComponent(StaticSelectBoxCollectionContext, {
 				get value() {
 					return usesStaticChildren() ? staticCollectionContext : null;
 				},
@@ -305,14 +333,14 @@ function SelectBoxGroup(props) {
 				get slot() {
 					return local.slot ?? void 0;
 				},
-				"class": className,
+				class: className,
 				get style() {
 					return mergedUnsafeStyle();
 				},
-				get ["data-orientation"]() {
+				get "data-orientation"() {
 					return orientation();
 				},
-				get ["data-disabled"]() {
+				get "data-disabled"() {
 					return local.isDisabled ? "true" : void 0;
 				},
 				children: (item) => renderItem(item)
@@ -360,8 +388,7 @@ function applySlotClasses(root, renderProps, orientation, isDisabled) {
 }
 /**
 * SelectBox is a single selectable item in a SelectBoxGroup.
-*/
-function SelectBox(props) {
+*/ function SelectBox(props) {
 	const context = useContext(SelectBoxContext);
 	const staticCollection = useContext(StaticSelectBoxCollectionContext);
 	const [local, headlessProps] = splitProps(props, [
@@ -372,7 +399,7 @@ function SelectBox(props) {
 		"class",
 		"ref"
 	]);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (!staticCollection) return;
 		staticCollection.registerItem({
 			id: props.id,
@@ -402,25 +429,29 @@ function SelectBox(props) {
 	const getStyle = (renderProps) => pressScale(() => optionElement, local.UNSAFE_style)(renderProps);
 	function SelectBoxContent(renderProps) {
 		const resolvedChildren = children(() => local.children);
-		createEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));
+		createTrackedEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));
 		return [(() => {
 			var _el$ = getNextElement(_tmpl$2);
 			insert(_el$, createComponent(Show, {
 				get when() {
-					return memo(() => !!!renderProps.isDisabled)() && selectionMode() === "multiple";
+					return memo(() => {
+						return !renderProps.isDisabled;
+					})() && selectionMode() === "multiple";
 				},
 				get children() {
 					var _el$2 = getNextElement(_tmpl$);
 					insert(_el$2, createComponent(Checkmark, {
 						size: "S",
-						"class": selectBoxCheckboxIcon,
+						class: selectBoxCheckboxIcon,
 						style: {
-							"--iconPrimary": "var(--s2-container-bg, white)",
+							"--iconPrimary": "var(--surface-well-deep)",
 							width: "10px",
 							height: "10px"
 						}
 					}));
-					effect(() => className(_el$2, selectBoxCheckboxBox(renderProps)));
+					effect(() => readShallow(selectBoxCheckboxBox(renderProps)), (_v$, _$p) => {
+						className(_el$2, _v$, _$p);
+					});
 					return _el$2;
 				}
 			}));
@@ -435,7 +466,7 @@ function SelectBox(props) {
 			optionElement = element;
 			assignOptionRef(element);
 		},
-		"class": getClassName,
+		class: getClassName,
 		style: getStyle,
 		"data-select-box": "",
 		children: (renderProps) => createComponent(SelectBoxContent, renderProps)