@okta/odyssey-react-mui 1.22.0 → 1.24.0

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","children","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { TestSelector } from \"./test-selectors\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/Stack.js

@@ -0,0 +1,32 @@
+import _Stack from "@mui/material/Stack";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (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.
+ */
+
+import { memo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+export const stackDirectionValues = ["row", "row-reverse", "column", "column-reverse"];
+const Stack = ({
+  children,
+  direction = "column",
+  spacing = 2
+}) => {
+  return _jsx(_Stack, {
+    direction: direction,
+    spacing: spacing,
+    children: children
+  });
+};
+const MemoizedStack = memo(Stack);
+MemoizedStack.displayName = "Stack";
+export { MemoizedStack as Stack };
+//# sourceMappingURL=Stack.js.map

package/dist/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":["memo","jsx","_jsx","stackSpacingValues","stackDirectionValues","Stack","children","direction","spacing","_Stack","MemoizedStack","displayName"],"sources":["../src/Stack.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\nimport { Stack as MuiStack, StackProps as MuiStackProps } from \"@mui/material\";\n\nexport const stackSpacingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\nexport const stackDirectionValues = [\n  \"row\",\n  \"row-reverse\",\n  \"column\",\n  \"column-reverse\",\n] as const;\n\nexport type OdysseyStackProps = {\n  children?: MuiStackProps[\"children\"];\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: MuiStackProps[\"component\"];\n  /**\n   * Defines the flex-direction style property. It is applied for all screen sizes.\n   */\n  direction?: (typeof stackDirectionValues)[number];\n  /**\n   * Defines the space between immediate children.\n   */\n  spacing?: (typeof stackSpacingValues)[number];\n  sx?: MuiStackProps[\"sx\"];\n};\n\nconst Stack = ({\n  children,\n  direction = \"column\",\n  spacing = 2,\n}: OdysseyStackProps) => {\n  return (\n    <MuiStack direction={direction} spacing={spacing}>\n      {children}\n    </MuiStack>\n  );\n};\n\nconst MemoizedStack = memo(Stack);\nMemoizedStack.displayName = \"Stack\";\n\nexport { MemoizedStack as Stack };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG7B,OAAO,MAAMC,kBAAkB,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAU;AACzE,OAAO,MAAMC,oBAAoB,GAAG,CAClC,KAAK,EACL,aAAa,EACb,QAAQ,EACR,gBAAgB,CACR;AAmBV,MAAMC,KAAK,GAAGA,CAAC;EACbC,QAAQ;EACRC,SAAS,GAAG,QAAQ;EACpBC,OAAO,GAAG;AACO,CAAC,KAAK;EACvB,OACEN,IAAA,CAAAO,MAAA;IAAUF,SAAS,EAAEA,SAAU;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,EAC9CA;EAAQ,CACD,CAAC;AAEf,CAAC;AAED,MAAMI,aAAa,GAAGV,IAAI,CAACK,KAAK,CAAC;AACjCK,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIL,KAAK"}

package/dist/{labs/Switch.js → Switch.js}

@@ -14,13 +14,13 @@ import _FormLabel from "@mui/material/FormLabel";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { Box } from "../Box.js";
-import { FieldHint } from "../FieldHint.js";
-import { CheckIcon } from "../icons.generated/index.js";
-import { ComponentControlledState, getControlState } from "../inputUtils.js";
-import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
-import { stripRem, toRem } from "../remUtils.js";
-import { useUniqueId } from "../useUniqueId.js";
+import { Box } from "./Box.js";
+import { FieldHint } from "./FieldHint.js";
+import { CheckIcon } from "./icons.generated/index.js";
+import { ComponentControlledState, getControlState } from "./inputUtils.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { stripRem, toRem } from "./remUtils.js";
+import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useTranslation","styled","Box","FieldHint","CheckIcon","ComponentControlledState","getControlState","useOdysseyDesignTokens","stripRem","toRem","useUniqueId","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CONTROLLED","nonForwardedProps","SwitchAndLabelContainer","shouldForwardProp","prop","includes","isFullWidth","odysseyDesignTokens","display","alignItems","justifyContent","maxWidth","TypographyLineLengthMax","SwitchContainer","div","position","StyledSwitchLabel","_FormLabel","isDisabled","isReadOnly","margin","color","PaletteNeutralDark","TypographyColorDisabled","p","a","HueNeutral700","SwitchTrack","isChecked","width","Spacing7","height","Spacing4","Spacing1","borderRadius","BorderRadiusOuter","backgroundColor","HueNeutral300","transition","TransitionDurationMain","HueNeutral200","HueNeutral600","PaletteSuccessLight","SwitchThumb","thumbOffset","trackWidth","thumbWidth","transformDistance","top","left","BorderRadiusRound","HueNeutralWhite","transform","HueNeutral50","HueNeutral400","SwitchCheckMark","opacity","path","fill","HiddenCheckbox","input","cursor","zIndex","boxShadow","PalettePrimaryMain","SwitchLabel","hint","hintId","HintLinkComponent","inputId","label","children","htmlFor","id","text","LinkComponent","MemoizedSwitchLabel","displayName","Switch","idProp","isDefaultChecked","name","onChange","testId","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","checked","defaultChecked","internalSwitchChecked","setInternalSwitchChecked","Boolean","undefined","labelElementId","handleOnChange","event","preventDefault","target","sx","marginBlockEnd","Spacing2","disabled","type","readOnly","MemoizedSwitch"],"sources":["../src/Switch.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ChangeEventHandler,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { SwitchProps as MuiSwitchProps, FormLabel } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"./Box\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { FieldHint } from \"./FieldHint\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { stripRem, toRem } from \"./remUtils\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nconst { CONTROLLED } = ComponentControlledState;\n\nconst nonForwardedProps = [\n  \"isChecked\",\n  \"isDisabled\",\n  \"isFullWidth\",\n  \"isReadOnly\",\n  \"odysseyDesignTokens\",\n];\n\nconst SwitchAndLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isFullWidth\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isFullWidth, odysseyDesignTokens }) => ({\n  display: \"flex\",\n  alignItems: \"flex-start\",\n  justifyContent: \"space-between\",\n  maxWidth: isFullWidth ? \"100%\" : odysseyDesignTokens.TypographyLineLengthMax,\n}));\n\nconst SwitchContainer = styled.div({\n  position: \"relative\",\n});\n\nconst StyledSwitchLabel = styled(FormLabel, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchLabelComponentProps, \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isDisabled, isReadOnly, odysseyDesignTokens }) => ({\n  display: \"block\",\n  margin: 0,\n  color: odysseyDesignTokens.PaletteNeutralDark,\n\n  ...(isDisabled && {\n    color: odysseyDesignTokens.TypographyColorDisabled,\n    p: {\n      color: odysseyDesignTokens.TypographyColorDisabled,\n    },\n    a: {\n      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n    },\n  }),\n\n  ...(isReadOnly && {\n    color: odysseyDesignTokens.HueNeutral700,\n    p: {\n      color: odysseyDesignTokens.HueNeutral700,\n    },\n    a: {\n      color: `${odysseyDesignTokens.HueNeutral700} !important`,\n    },\n  }),\n}));\n\nconst SwitchTrack = styled(\"div\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => ({\n  position: \"relative\",\n  width: odysseyDesignTokens.Spacing7,\n  height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n  borderRadius: odysseyDesignTokens.BorderRadiusOuter,\n  backgroundColor: odysseyDesignTokens.HueNeutral300,\n  transition: `background-color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n  ...(isDisabled && {\n    backgroundColor: odysseyDesignTokens.HueNeutral200,\n  }),\n\n  ...(isReadOnly && {\n    backgroundColor: odysseyDesignTokens.HueNeutral600,\n  }),\n\n  ...(isChecked &&\n    !isDisabled &&\n    !isReadOnly && {\n      backgroundColor: odysseyDesignTokens.PaletteSuccessLight,\n    }),\n}));\n\nconst SwitchThumb = styled(\"span\", {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => {\n  const thumbOffset = toRem(3);\n  const trackWidth = stripRem(odysseyDesignTokens.Spacing7);\n  const thumbWidth = stripRem(odysseyDesignTokens.Spacing4) - toRem(2);\n  const transformDistance = trackWidth - thumbWidth - thumbOffset * 2;\n\n  return {\n    position: \"absolute\",\n    top: \"50%\",\n    left: `${thumbOffset}rem`,\n    width: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    height: `calc(${odysseyDesignTokens.Spacing4} - ${toRem(2)}rem)`,\n    borderRadius: odysseyDesignTokens.BorderRadiusRound,\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    transform: \"translate3d(0, -50%, 0)\",\n    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    ...(isDisabled && {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n    }),\n\n    ...(isReadOnly && {\n      backgroundColor: odysseyDesignTokens.HueNeutral400,\n    }),\n\n    ...(isChecked && {\n      transform: `translate3d(${transformDistance}rem, -50%, 0)`,\n    }),\n  };\n});\n\nconst SwitchCheckMark = styled(CheckIcon, {\n  shouldForwardProp: (prop) => !nonForwardedProps.includes(prop),\n})<\n  Pick<SwitchProps, \"isChecked\" | \"isDisabled\" | \"isReadOnly\"> & {\n    odysseyDesignTokens: DesignTokens;\n  }\n>(({ isChecked, isDisabled, isReadOnly, odysseyDesignTokens }) => ({\n  position: \"absolute\",\n  top: \"50%\",\n  left: 3,\n  width: odysseyDesignTokens.Spacing4,\n  transform: \"translateY(-50%)\",\n  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}`,\n  opacity: 0,\n  path: {\n    fill: odysseyDesignTokens.HueNeutralWhite,\n  },\n\n  ...(isChecked && {\n    opacity: 1,\n  }),\n\n  ...((isDisabled || isReadOnly) && {\n    path: {\n      fill: odysseyDesignTokens.HueNeutral50,\n    },\n  }),\n}));\n\nconst HiddenCheckbox = styled.input<{\n  odysseyDesignTokens: DesignTokens;\n  isReadOnly?: boolean;\n}>(({ odysseyDesignTokens, isReadOnly }) => ({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"100%\",\n  height: \"100%\",\n  margin: 0,\n  opacity: 0,\n  cursor: isReadOnly ? \"default\" : \"pointer\",\n  zIndex: 2,\n\n  \"&:focus-visible\": {\n    \"~ [data-switch-track='true']\": {\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    },\n  },\n}));\n\ntype OnChangeCallbackArguments = {\n  checked: boolean;\n  value: string;\n};\n\nexport type SwitchProps = {\n  /**\n   * The label text for the Switch\n   */\n  label: string;\n  /**\n   * The change event handler for the Switch\n   */\n  onChange?: ({ checked, value }: OnChangeCallbackArguments) => void;\n  /**\n   * The value attribute of the Switch\n   */\n  value: string;\n  /**\n   * Determines whether the Switch is read-only\n   */\n  isReadOnly?: boolean;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"HintLinkComponent\" | \"id\" | \"isFullWidth\" | \"isDisabled\" | \"name\"\n> &\n  Pick<CheckedFieldProps<MuiSwitchProps>, \"isChecked\" | \"isDefaultChecked\"> &\n  Pick<HtmlProps, \"testId\">;\n\ntype SwitchLabelComponentProps = {\n  hint: SwitchProps[\"hint\"];\n  hintId?: string;\n  HintLinkComponent: SwitchProps[\"HintLinkComponent\"];\n  inputId: string;\n  isDisabled: SwitchProps[\"isDisabled\"];\n  isFullWidth: SwitchProps[\"isFullWidth\"];\n  label: SwitchProps[\"label\"];\n  isReadOnly: SwitchProps[\"isReadOnly\"];\n};\n\nconst SwitchLabel = ({\n  hint,\n  hintId,\n  HintLinkComponent,\n  inputId,\n  isDisabled,\n  label,\n  isReadOnly,\n}: SwitchLabelComponentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      <StyledSwitchLabel\n        htmlFor={inputId}\n        isDisabled={isDisabled}\n        isReadOnly={isReadOnly}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        {label}\n        {hint && (\n          <FieldHint\n            id={hintId}\n            text={hint}\n            LinkComponent={HintLinkComponent}\n          />\n        )}\n      </StyledSwitchLabel>\n    </>\n  );\n};\n\nconst MemoizedSwitchLabel = memo(SwitchLabel);\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst Switch = ({\n  hint,\n  HintLinkComponent,\n  id: idProp,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isFullWidth = false,\n  isReadOnly = false,\n  label,\n  name,\n  onChange,\n  testId,\n  value,\n}: SwitchProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const [internalSwitchChecked, setInternalSwitchChecked] = useState(\n    controlledStateRef.current === CONTROLLED\n      ? Boolean(isChecked)\n      : Boolean(isDefaultChecked),\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSwitchChecked(Boolean(isChecked));\n    }\n  }, [isChecked]);\n\n  const inputId = useUniqueId(idProp);\n\n  const hintId = hint ? `${inputId}-hint` : undefined;\n  const labelElementId = `${inputId}-label`;\n\n  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (event) => {\n      if (isReadOnly) {\n        event.preventDefault();\n        return;\n      }\n      const target = event.target;\n      const { checked, value } = target;\n      setInternalSwitchChecked(checked);\n      onChange?.({ checked, value });\n    },\n    [onChange, setInternalSwitchChecked, isReadOnly],\n  );\n\n  return (\n    <Box\n      sx={{\n        marginBlockEnd: odysseyDesignTokens.Spacing2,\n        \"&:last-child\": {\n          marginBlockEnd: 0,\n        },\n      }}\n    >\n      <SwitchAndLabelContainer\n        isFullWidth={isFullWidth}\n        odysseyDesignTokens={odysseyDesignTokens}\n      >\n        <MemoizedSwitchLabel\n          hint={hint}\n          hintId={hintId}\n          HintLinkComponent={HintLinkComponent}\n          inputId={inputId}\n          isDisabled={isDisabled}\n          isFullWidth={isFullWidth}\n          label={label}\n          isReadOnly={isReadOnly}\n        />\n        <SwitchContainer>\n          <HiddenCheckbox\n            {...inputValues}\n            aria-checked={internalSwitchChecked}\n            aria-describedby={hintId}\n            aria-label={\n              internalSwitchChecked\n                ? `${label}: ${t(\"switch.active\")}`\n                : `${label}: ${t(\"switch.inactive\")}`\n            }\n            aria-labelledby={labelElementId}\n            data-se={testId}\n            disabled={isDisabled}\n            id={inputId}\n            name={name ?? inputId}\n            onChange={handleOnChange}\n            odysseyDesignTokens={odysseyDesignTokens}\n            type=\"checkbox\"\n            value={value}\n            readOnly={isReadOnly}\n            isReadOnly={isReadOnly}\n          />\n          <SwitchTrack\n            data-switch-track\n            isChecked={internalSwitchChecked}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <SwitchThumb\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n            <SwitchCheckMark\n              isChecked={internalSwitchChecked}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              odysseyDesignTokens={odysseyDesignTokens}\n            />\n          </SwitchTrack>\n        </SwitchContainer>\n      </SwitchAndLabelContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSwitch = memo(Switch);\nMemoizedSwitch.displayName = \"Switch\";\n\nexport { MemoizedSwitch as Switch };\n"],"mappings":"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"}

package/dist/Tabs.js

@@ -19,26 +19,24 @@ import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const TabsTestSelectors = {
-  feature: {
+export const TabsTestSelector = {
+  children: {
     tabItem: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${label}"
+          label: "name"
         },
-        templateVariableNames: ["label"],
         role: "tab"
       }
     }
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${ariaLabel}"
+      label: "name"
     },
-    role: "tablist",
-    templateVariableNames: ["ariaLabel"]
+    role: "tablist"
   }
 };
 const TabLabel = ({

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["memo","useCallback","useEffect","useState","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","Badge","Box","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TabsTestSelectors","feature","tabItem","selector","method","options","name","templateVariableNames","role","TabLabel","label","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","children","undefined","sx","marginInlineStart","Spacing2","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","scrollButtons","setScrollButtons","event","animationFrame","cleanup","cancelAnimationFrame","document","removeEventListener","refreshScrollButtons","requestAnimationFrame","addEventListener","renderTab","tab","index","testId","isDisabled","startIcon","_Tab","disabled","icon","tabIndex","toString","variant","map","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Box } from \"./Box\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\nimport { type FeatureTestSelector } from \"./test-selectors\";\n\nexport const TabsTestSelectors = {\n  feature: {\n    tabItem: {\n      selector: {\n        method: \"ByRole\",\n        options: {\n          name: \"${label}\",\n        },\n        templateVariableNames: [\"label\"],\n        role: \"tab\",\n      },\n    },\n  },\n  selector: {\n    method: \"ByRole\",\n    options: {\n      name: \"${ariaLabel}\",\n    },\n    role: \"tablist\",\n    templateVariableNames: [\"ariaLabel\"],\n  },\n} as const satisfies FeatureTestSelector;\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & {\n  notificationCount?: BadgeProps[\"badgeContent\"];\n  notificationCountMax?: BadgeProps[\"badgeContentMax\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type TabsProps = {\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst TabLabel = ({\n  label,\n  notificationCount,\n  notificationCountMax,\n  tabState,\n  value,\n}: Pick<\n  TabItemProps,\n  \"label\" | \"notificationCount\" | \"notificationCountMax\" | \"value\"\n> & {\n  tabState: string;\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      {label}\n      {notificationCount !== undefined && notificationCount > 0 && (\n        <Box\n          sx={{\n            marginInlineStart: notificationCount\n              ? odysseyDesignTokens.Spacing2\n              : 0,\n          }}\n        >\n          <Badge\n            badgeContent={notificationCount}\n            badgeContentMax={notificationCountMax}\n            type={value === tabState ? \"attention\" : \"default\"}\n          />\n        </Box>\n      )}\n    </>\n  );\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps & Pick<HtmlProps, \"ariaLabel\">) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n  /*\n    The scrollButtons prop is initially set to `false`.\n    It's then reset to `auto` when the document is visible.\n    This prevents a rare bug where scroll buttons appear\n    when the component is rendered while hidden and the\n    screen is wide enough to not need scroll buttons.\n  */\n  const [scrollButtons, setScrollButtons] =\n    useState<MuiTabListProps[\"scrollButtons\"]>(false);\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  // listen for visibility change to reset scroll buttons override\n  useEffect(() => {\n    // keep track of animation frame to cancel when needed\n    let animationFrame: number;\n\n    // called when unmounted or scroll buttons is reset\n    const cleanup = () => {\n      cancelAnimationFrame(animationFrame);\n      document.removeEventListener(\"visibilitychange\", refreshScrollButtons);\n    };\n\n    // Reset the scroll buttons override when the document becomes visible.\n    // If called, then the document is hidden because the event listener\n    // is only registered if the document is hidden\n    function refreshScrollButtons() {\n      animationFrame = requestAnimationFrame(() => {\n        cleanup();\n        setScrollButtons(\"auto\");\n      });\n    }\n\n    // don't override scroll buttons if it's already set to \"auto\"\n    if (scrollButtons !== \"auto\") {\n      document.addEventListener(\"visibilitychange\", refreshScrollButtons);\n    }\n    return () => {\n      cleanup();\n    };\n  }, [scrollButtons]);\n\n  const renderTab = useCallback(\n    (tab: TabItemProps, index: number) => {\n      const {\n        testId,\n        isDisabled,\n        label,\n        startIcon,\n        value,\n        notificationCount,\n        notificationCountMax,\n      } = tab;\n\n      return (\n        <MuiTab\n          data-se={testId}\n          disabled={isDisabled}\n          icon={startIcon}\n          tabIndex={0}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          value={value ? value : index.toString()}\n          key={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        onChange={onChange}\n        aria-label={ariaLabel}\n        variant=\"scrollable\"\n        scrollButtons={scrollButtons}\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["memo","useCallback","useEffect","useState","TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","Badge","Box","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","TabsTestSelector","children","tabItem","elementSelector","method","options","label","role","TabLabel","notificationCount","notificationCountMax","tabState","value","odysseyDesignTokens","undefined","sx","marginInlineStart","Spacing2","badgeContent","badgeContentMax","type","Tabs","ariaLabel","initialValue","tabs","onChange","onChangeProp","setTabState","scrollButtons","setScrollButtons","event","animationFrame","cleanup","cancelAnimationFrame","document","removeEventListener","refreshScrollButtons","requestAnimationFrame","addEventListener","renderTab","tab","index","testId","isDisabled","startIcon","_Tab","disabled","icon","tabIndex","toString","variant","map","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { Badge, BadgeProps } from \"./Badge\";\nimport { Box } from \"./Box\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\nimport { type TestSelector } from \"./test-selectors\";\n\nexport const TabsTestSelector = {\n  children: {\n    tabItem: {\n      elementSelector: {\n        method: \"ByRole\",\n        options: {\n          label: \"name\",\n        },\n        role: \"tab\",\n      },\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"tablist\",\n  },\n} as const satisfies TestSelector;\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & {\n  notificationCount?: BadgeProps[\"badgeContent\"];\n  notificationCountMax?: BadgeProps[\"badgeContentMax\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type TabsProps = {\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst TabLabel = ({\n  label,\n  notificationCount,\n  notificationCountMax,\n  tabState,\n  value,\n}: Pick<\n  TabItemProps,\n  \"label\" | \"notificationCount\" | \"notificationCountMax\" | \"value\"\n> & {\n  tabState: string;\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <>\n      {label}\n      {notificationCount !== undefined && notificationCount > 0 && (\n        <Box\n          sx={{\n            marginInlineStart: notificationCount\n              ? odysseyDesignTokens.Spacing2\n              : 0,\n          }}\n        >\n          <Badge\n            badgeContent={notificationCount}\n            badgeContentMax={notificationCountMax}\n            type={value === tabState ? \"attention\" : \"default\"}\n          />\n        </Box>\n      )}\n    </>\n  );\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps & Pick<HtmlProps, \"ariaLabel\">) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n  /*\n    The scrollButtons prop is initially set to `false`.\n    It's then reset to `auto` when the document is visible.\n    This prevents a rare bug where scroll buttons appear\n    when the component is rendered while hidden and the\n    screen is wide enough to not need scroll buttons.\n  */\n  const [scrollButtons, setScrollButtons] =\n    useState<MuiTabListProps[\"scrollButtons\"]>(false);\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  // listen for visibility change to reset scroll buttons override\n  useEffect(() => {\n    // keep track of animation frame to cancel when needed\n    let animationFrame: number;\n\n    // called when unmounted or scroll buttons is reset\n    const cleanup = () => {\n      cancelAnimationFrame(animationFrame);\n      document.removeEventListener(\"visibilitychange\", refreshScrollButtons);\n    };\n\n    // Reset the scroll buttons override when the document becomes visible.\n    // If called, then the document is hidden because the event listener\n    // is only registered if the document is hidden\n    function refreshScrollButtons() {\n      animationFrame = requestAnimationFrame(() => {\n        cleanup();\n        setScrollButtons(\"auto\");\n      });\n    }\n\n    // don't override scroll buttons if it's already set to \"auto\"\n    if (scrollButtons !== \"auto\") {\n      document.addEventListener(\"visibilitychange\", refreshScrollButtons);\n    }\n    return () => {\n      cleanup();\n    };\n  }, [scrollButtons]);\n\n  const renderTab = useCallback(\n    (tab: TabItemProps, index: number) => {\n      const {\n        testId,\n        isDisabled,\n        label,\n        startIcon,\n        value,\n        notificationCount,\n        notificationCountMax,\n      } = tab;\n\n      return (\n        <MuiTab\n          data-se={testId}\n          disabled={isDisabled}\n          icon={startIcon}\n          tabIndex={0}\n          label={\n            <TabLabel\n              label={label}\n              notificationCount={notificationCount}\n              notificationCountMax={notificationCountMax}\n              tabState={tabState}\n              value={value}\n            />\n          }\n          value={value ? value : index.toString()}\n          key={value ? value : index.toString()}\n        />\n      );\n    },\n    [tabState],\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList\n        onChange={onChange}\n        aria-label={ariaLabel}\n        variant=\"scrollable\"\n        scrollButtons={scrollButtons}\n      >\n        {tabs.map((tab, index) => renderTab(tab, index))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":"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"}

package/dist/Tag.js

@@ -11,10 +11,142 @@ import _Chip from "@mui/material/Chip";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import { memo, useCallback, useContext } from "react";
+import styled from "@emotion/styled";
 import { TagListContext } from "./TagListContext.js";
 import { MuiPropsContext } from "./MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { CloseCircleFilledIcon } from "./icons.generated/index.js";
+import { useContrastContext } from "./ContrastModeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const tagColorVariants = ["default", "info", "accentOne", "accentTwo", "accentThree", "accentFour"];
+const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
+  const colors = {
+    default: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueNeutral200,
+        text: odysseyDesignTokens.HueNeutral700
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueNeutral100,
+        text: odysseyDesignTokens.HueNeutral700
+      }),
+      hover: odysseyDesignTokens.HueNeutral200,
+      active: odysseyDesignTokens.HueNeutral300,
+      border: odysseyDesignTokens.HueNeutral200,
+      deleteIcon: odysseyDesignTokens.HueNeutral500,
+      deleteIconHover: odysseyDesignTokens.HueNeutral700
+    },
+    info: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueBlue200,
+        text: odysseyDesignTokens.HueBlue700
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueBlue100,
+        text: odysseyDesignTokens.HueBlue700
+      }),
+      hover: odysseyDesignTokens.HueBlue200,
+      active: odysseyDesignTokens.HueBlue300,
+      border: odysseyDesignTokens.HueBlue200,
+      deleteIcon: odysseyDesignTokens.HueBlue500,
+      deleteIconHover: odysseyDesignTokens.HueBlue700
+    },
+    accentOne: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentOne200,
+        text: odysseyDesignTokens.HueAccentOne700
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentOne100,
+        text: odysseyDesignTokens.HueAccentOne700
+      }),
+      hover: odysseyDesignTokens.HueAccentOne200,
+      active: odysseyDesignTokens.HueAccentOne300,
+      border: odysseyDesignTokens.HueAccentOne200,
+      deleteIcon: odysseyDesignTokens.HueAccentOne500,
+      deleteIconHover: odysseyDesignTokens.HueAccentOne700
+    },
+    accentTwo: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo200,
+        text: odysseyDesignTokens.HueAccentTwo800
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentTwo100,
+        text: odysseyDesignTokens.HueAccentTwo700
+      }),
+      hover: odysseyDesignTokens.HueAccentTwo200,
+      active: odysseyDesignTokens.HueAccentTwo300,
+      border: odysseyDesignTokens.HueAccentTwo200,
+      deleteIcon: odysseyDesignTokens.HueAccentTwo500,
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo700
+    },
+    accentThree: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentThree200,
+        text: odysseyDesignTokens.HueAccentThree700
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentThree100,
+        text: odysseyDesignTokens.HueAccentThree700
+      }),
+      hover: odysseyDesignTokens.HueAccentThree200,
+      active: odysseyDesignTokens.HueAccentThree300,
+      border: odysseyDesignTokens.HueAccentThree200,
+      deleteIcon: odysseyDesignTokens.HueAccentThree500,
+      deleteIconHover: odysseyDesignTokens.HueAccentThree700
+    },
+    accentFour: {
+      ...(contrastMode === "lowContrast" && {
+        background: odysseyDesignTokens.HueAccentFour200,
+        text: odysseyDesignTokens.HueAccentFour700
+      }),
+      ...(contrastMode === "highContrast" && {
+        background: odysseyDesignTokens.HueAccentFour100,
+        text: odysseyDesignTokens.HueAccentFour700
+      }),
+      hover: odysseyDesignTokens.HueAccentFour200,
+      active: odysseyDesignTokens.HueAccentFour300,
+      border: odysseyDesignTokens.HueAccentFour200,
+      deleteIcon: odysseyDesignTokens.HueAccentFour500,
+      deleteIconHover: odysseyDesignTokens.HueAccentFour700
+    }
+  };
+  return colors[colorVariant] || colors.default;
+};
+const StyledTag = styled(_Chip, {
+  shouldForwardProp: prop => !["colorVariant", "contrastMode", "odysseyDesignTokens"].includes(prop)
+})(({
+  colorVariant,
+  contrastMode,
+  odysseyDesignTokens
+}) => {
+  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
+  return {
+    backgroundColor: colors.background,
+    color: colors.text,
+    borderColor: colors.border,
+    "&.MuiChip-clickable:hover": {
+      backgroundColor: colors.hover
+    },
+    "&.MuiChip-clickable:active": {
+      backgroundColor: colors.active
+    },
+    "&.Mui-disabled": {
+      "& .MuiChip-deleteIcon": {
+        color: odysseyDesignTokens.HueNeutral300
+      }
+    },
+    "& .MuiChip-deleteIcon": {
+      color: colors.deleteIcon,
+      "&:hover": {
+        color: colors.deleteIconHover
+      }
+    }
+  };
+});
 const Tag = ({
+  colorVariant = "default",
   icon,
   isDisabled,
   label,
@@ -23,22 +155,30 @@ const Tag = ({
   testId,
   translate
 }) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const {
     chipElementType
   } = useContext(TagListContext);
-  const renderTag = useCallback(muiProps => _jsx(_Chip, {
+  const {
+    contrastMode
+  } = useContrastContext();
+  const renderTag = useCallback(muiProps => _jsx(StyledTag, {
     ...muiProps,
+    as: chipElementType,
     "aria-disabled": isDisabled,
-    clickable: onClick ? true : false,
-    component: chipElementType,
+    clickable: Boolean(onClick),
     "data-se": testId,
+    colorVariant: colorVariant,
+    odysseyDesignTokens: odysseyDesignTokens,
+    contrastMode: contrastMode,
     disabled: isDisabled,
     icon: icon,
     label: label,
     onClick: onClick,
     onDelete: onRemove,
+    deleteIcon: _jsx(CloseCircleFilledIcon, {}),
     translate: translate
-  }), [chipElementType, icon, isDisabled, label, onClick, onRemove, testId, translate]);
+  }), [chipElementType, icon, isDisabled, label, onClick, onRemove, testId, translate, colorVariant, odysseyDesignTokens, contrastMode]);
   return _jsx(MuiPropsContext.Consumer, {
     children: renderTag
   });

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","TagListContext","MuiPropsContext","jsx","_jsx","Tag","icon","isDisabled","label","onClick","onRemove","testId","translate","chipElementType","renderTag","muiProps","_Chip","clickable","component","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext, MuiPropsContextType } from \"./MuiPropsContext\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Tag = ({\n  icon,\n  isDisabled,\n  label,\n  onClick,\n  onRemove,\n  testId,\n  translate,\n}: TagProps) => {\n  const { chipElementType } = useContext(TagListContext);\n\n  const renderTag = useCallback(\n    (muiProps: MuiPropsContextType) => (\n      <MuiChip\n        {...muiProps}\n        aria-disabled={isDisabled}\n        clickable={onClick ? true : false}\n        component={chipElementType}\n        data-se={testId}\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        onClick={onClick}\n        onDelete={onRemove}\n        translate={translate}\n      />\n    ),\n    [\n      chipElementType,\n      icon,\n      isDisabled,\n      label,\n      onClick,\n      onRemove,\n      testId,\n      translate,\n    ],\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAAC,SAC3DC,cAAc;AAAA,SACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoBxB,MAAMC,GAAG,GAAGA,CAAC;EACXC,IAAI;EACJC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC;AACQ,CAAC,KAAK;EACd,MAAM;IAAEC;EAAgB,CAAC,GAAGb,UAAU,CAACC,cAAc,CAAC;EAEtD,MAAMa,SAAS,GAAGf,WAAW,CAC1BgB,QAA6B,IAC5BX,IAAA,CAAAY,KAAA;IAAA,GACMD,QAAQ;IACZ,iBAAeR,UAAW;IAC1BU,SAAS,EAAER,OAAO,GAAG,IAAI,GAAG,KAAM;IAClCS,SAAS,EAAEL,eAAgB;IAC3B,WAASF,MAAO;IAChBQ,QAAQ,EAAEZ,UAAW;IACrBD,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBW,QAAQ,EAAEV,QAAS;IACnBE,SAAS,EAAEA;EAAU,CACtB,CACF,EACD,CACEC,eAAe,EACfP,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,SAAS,CAEb,CAAC;EAED,OAAOR,IAAA,CAACF,eAAe,CAACmB,QAAQ;IAAAC,QAAA,EAAER;EAAS,CAA2B,CAAC;AACzE,CAAC;AAED,MAAMS,WAAW,GAAGzB,IAAI,CAACO,GAAG,CAAC;AAC7BkB,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIlB,GAAG"}
+{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","styled","TagListContext","MuiPropsContext","useOdysseyDesignTokens","CloseCircleFilledIcon","useContrastContext","jsx","_jsx","tagColorVariants","getChipColors","colorVariant","odysseyDesignTokens","contrastMode","colors","default","background","HueNeutral200","text","HueNeutral700","HueNeutral100","hover","active","HueNeutral300","border","deleteIcon","HueNeutral500","deleteIconHover","info","HueBlue200","HueBlue700","HueBlue100","HueBlue300","HueBlue500","accentOne","HueAccentOne200","HueAccentOne700","HueAccentOne100","HueAccentOne300","HueAccentOne500","accentTwo","HueAccentTwo200","HueAccentTwo800","HueAccentTwo100","HueAccentTwo700","HueAccentTwo300","HueAccentTwo500","accentThree","HueAccentThree200","HueAccentThree700","HueAccentThree100","HueAccentThree300","HueAccentThree500","accentFour","HueAccentFour200","HueAccentFour700","HueAccentFour100","HueAccentFour300","HueAccentFour500","StyledTag","_Chip","shouldForwardProp","prop","includes","backgroundColor","color","borderColor","Tag","icon","isDisabled","label","onClick","onRemove","testId","translate","chipElementType","renderTag","muiProps","as","clickable","Boolean","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext, MuiPropsContextType } from \"./MuiPropsContext\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { CloseCircleFilledIcon } from \"./icons.generated\";\nimport { useContrastContext, ContrastMode } from \"./ContrastModeProvider\";\n\nexport const tagColorVariants = [\n  \"default\",\n  \"info\",\n  \"accentOne\",\n  \"accentTwo\",\n  \"accentThree\",\n  \"accentFour\",\n] as const;\n\ntype TagColorVariant = (typeof tagColorVariants)[number];\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n  /**\n   * Color variant of the Tag, affecting its appearance\n   */\n  colorVariant?: TagColorVariant;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst getChipColors = (\n  colorVariant: TagColorVariant,\n  odysseyDesignTokens: DesignTokens,\n  contrastMode: ContrastMode,\n) => {\n  const colors = {\n    default: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueNeutral200,\n        text: odysseyDesignTokens.HueNeutral700,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueNeutral100,\n        text: odysseyDesignTokens.HueNeutral700,\n      }),\n      hover: odysseyDesignTokens.HueNeutral200,\n      active: odysseyDesignTokens.HueNeutral300,\n      border: odysseyDesignTokens.HueNeutral200,\n      deleteIcon: odysseyDesignTokens.HueNeutral500,\n      deleteIconHover: odysseyDesignTokens.HueNeutral700,\n    },\n    info: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueBlue200,\n        text: odysseyDesignTokens.HueBlue700,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueBlue100,\n        text: odysseyDesignTokens.HueBlue700,\n      }),\n      hover: odysseyDesignTokens.HueBlue200,\n      active: odysseyDesignTokens.HueBlue300,\n      border: odysseyDesignTokens.HueBlue200,\n      deleteIcon: odysseyDesignTokens.HueBlue500,\n      deleteIconHover: odysseyDesignTokens.HueBlue700,\n    },\n    accentOne: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne200,\n        text: odysseyDesignTokens.HueAccentOne700,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentOne100,\n        text: odysseyDesignTokens.HueAccentOne700,\n      }),\n      hover: odysseyDesignTokens.HueAccentOne200,\n      active: odysseyDesignTokens.HueAccentOne300,\n      border: odysseyDesignTokens.HueAccentOne200,\n      deleteIcon: odysseyDesignTokens.HueAccentOne500,\n      deleteIconHover: odysseyDesignTokens.HueAccentOne700,\n    },\n    accentTwo: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo200,\n        text: odysseyDesignTokens.HueAccentTwo800,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentTwo100,\n        text: odysseyDesignTokens.HueAccentTwo700,\n      }),\n      hover: odysseyDesignTokens.HueAccentTwo200,\n      active: odysseyDesignTokens.HueAccentTwo300,\n      border: odysseyDesignTokens.HueAccentTwo200,\n      deleteIcon: odysseyDesignTokens.HueAccentTwo500,\n      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,\n    },\n    accentThree: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree200,\n        text: odysseyDesignTokens.HueAccentThree700,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentThree100,\n        text: odysseyDesignTokens.HueAccentThree700,\n      }),\n      hover: odysseyDesignTokens.HueAccentThree200,\n      active: odysseyDesignTokens.HueAccentThree300,\n      border: odysseyDesignTokens.HueAccentThree200,\n      deleteIcon: odysseyDesignTokens.HueAccentThree500,\n      deleteIconHover: odysseyDesignTokens.HueAccentThree700,\n    },\n    accentFour: {\n      ...(contrastMode === \"lowContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour200,\n        text: odysseyDesignTokens.HueAccentFour700,\n      }),\n      ...(contrastMode === \"highContrast\" && {\n        background: odysseyDesignTokens.HueAccentFour100,\n        text: odysseyDesignTokens.HueAccentFour700,\n      }),\n      hover: odysseyDesignTokens.HueAccentFour200,\n      active: odysseyDesignTokens.HueAccentFour300,\n      border: odysseyDesignTokens.HueAccentFour200,\n      deleteIcon: odysseyDesignTokens.HueAccentFour500,\n      deleteIconHover: odysseyDesignTokens.HueAccentFour700,\n    },\n  };\n\n  return colors[colorVariant] || colors.default;\n};\n\nconst StyledTag = styled(MuiChip, {\n  shouldForwardProp: (prop) =>\n    ![\"colorVariant\", \"contrastMode\", \"odysseyDesignTokens\"].includes(\n      prop as string,\n    ),\n})<{\n  colorVariant: TagColorVariant;\n  contrastMode: ContrastMode;\n  odysseyDesignTokens: DesignTokens;\n  as?: React.ElementType; // Allow the 'as' prop to be forwarded\n}>(({ colorVariant, contrastMode, odysseyDesignTokens }) => {\n  const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);\n\n  return {\n    backgroundColor: colors.background,\n    color: colors.text,\n    borderColor: colors.border,\n\n    \"&.MuiChip-clickable:hover\": {\n      backgroundColor: colors.hover,\n    },\n\n    \"&.MuiChip-clickable:active\": {\n      backgroundColor: colors.active,\n    },\n\n    \"&.Mui-disabled\": {\n      \"& .MuiChip-deleteIcon\": {\n        color: odysseyDesignTokens.HueNeutral300,\n      },\n    },\n\n    \"& .MuiChip-deleteIcon\": {\n      color: colors.deleteIcon,\n\n      \"&:hover\": {\n        color: colors.deleteIconHover,\n      },\n    },\n  };\n});\n\nconst Tag = ({\n  colorVariant = \"default\",\n  icon,\n  isDisabled,\n  label,\n  onClick,\n  onRemove,\n  testId,\n  translate,\n}: TagProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { chipElementType } = useContext(TagListContext);\n  const { contrastMode } = useContrastContext();\n\n  const renderTag = useCallback(\n    (muiProps: MuiPropsContextType) => (\n      <StyledTag\n        {...muiProps}\n        as={chipElementType}\n        aria-disabled={isDisabled}\n        clickable={Boolean(onClick)}\n        data-se={testId}\n        colorVariant={colorVariant}\n        odysseyDesignTokens={odysseyDesignTokens}\n        contrastMode={contrastMode}\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        onClick={onClick}\n        onDelete={onRemove}\n        deleteIcon={<CloseCircleFilledIcon />}\n        translate={translate}\n      />\n    ),\n    [\n      chipElementType,\n      icon,\n      isDisabled,\n      label,\n      onClick,\n      onRemove,\n      testId,\n      translate,\n      colorVariant,\n      odysseyDesignTokens,\n      contrastMode,\n    ],\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":"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"}