@drivy/cobalt 1.5.0 → 2.0.0-beta.2

package/components/ContainedIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType =\n  | Extends<\n      IconColorsType,\n      | \"base\"\n      | \"accent\"\n      | \"disabled\"\n      | \"error\"\n      | \"info\"\n      | \"success\"\n      | \"connect\"\n      | \"keyExchange\"\n      | \"rideshare\"\n      | \"accentAlt\"\n      | \"disabledAlt\"\n      | \"errorAlt\"\n      | \"infoAlt\"\n      | \"successAlt\"\n      | \"connectAlt\"\n    >\n  | \"baseAlt\"\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAkCM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: IconColorsType\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"onSurface\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAWM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,WAAW,EACnB,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}

package/components/Form/Autocomplete/index.js

@@ -139,7 +139,7 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
                         }
                     }
                 } }),
-            icon && (React.createElement(Icon, { source: icon, color: "accent", className: "cobalt-TextField__Icon" })),
+            icon && (React.createElement(Icon, { source: icon, color: "primary", className: "cobalt-TextField__Icon" })),
             value.length > 0 && !disabled && (React.createElement(Combobox.ClearTrigger, { className: "cobalt-Autocomplete__clear-button", role: "clear", onClick: () => {
                     setDefaultInputValue("");
                     setValue("");
@@ -169,7 +169,7 @@ const Autocomplete = forwardRef(({ id, className, label, hint, fullWidth, icon,
                         "cobalt-Autocomplete__item-wrapper--disabled": item.disabled,
                     }) },
                     icon && (React.createElement("span", { className: "cobalt-Autocomplete__item-icon" },
-                        React.createElement(Icon, { source: icon, color: "accent" }))),
+                        React.createElement(Icon, { source: icon, color: "primary" }))),
                     React.createElement(Combobox.ItemText, { className: "cobalt-Autocomplete__item-label" }, item.label),
                     React.createElement(Combobox.ItemIndicator, { className: "cobalt-Autocomplete_selected-item-indicator" },
                         React.createElement(CheckIcon, { size: 16 }))))))))))));

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useImperativeHandle,\n  forwardRef,\n} from \"react\"\nimport { useState } from \"react\"\nimport cx from \"classnames\"\n\nimport { CheckIcon, Icon, IconSources } from \"../../Icon\"\n\nimport { FormElement } from \"../form\"\nimport {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport { Hint } from \"../Hint\"\nimport { nanoid } from \"nanoid\"\n\nexport type AutocompleteItemInput =\n  | string\n  | {\n      [x: string]: any\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    }\n\nexport type AutocompleteItem = {\n  [x: string]: any\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n}\n\nexport type AutocompleteRefType = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput) => void\n}\n\ntype Props = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem(item: AutocompleteItemInput) {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item }\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value }\n  }\n}\n\nfunction sanitizeItems(items: AutocompleteItemInput[]) {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  return (\n    <>\n      {label.split(queryRX).map((part, i) =>\n        part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={i}>\n            {part}\n          </span>\n        ) : (\n          part\n        )\n      )}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems]\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase())\n            )\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0]\n          ? setValue((details.items[0] as AutocompleteItem).value)\n          : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue && onClearValue()\n          onQueryChange && onQueryChange(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox])\n\n    useEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    }, [])\n\n    const validItems = collection.items.filter(\n      (item) => item.value !== ignoreItemValue\n    )\n\n    useEffect(() => {\n      validItems.length === 0 && combobox.setOpen(false)\n\n      combobox.focused &&\n        collection.items.length > 0 &&\n        !combobox.open &&\n        combobox.setOpen(true)\n    }, [collection.items.length])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={\"\" + autocompleteKey}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown && onKeyDown(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem as AutocompleteItem,\n                  combobox.inputValue\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"accent\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              role=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue && onClearValue()\n                onQueryChange && onQueryChange(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item: AutocompleteItem, index: number) => (\n                <Combobox.Item\n                  key={index}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      onClick={(e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      }}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"accent\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      <>{autocomplete}</>\n    )\n  }\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useRef,\n  useMemo,\n  useImperativeHandle,\n  forwardRef,\n} from \"react\"\nimport { useState } from \"react\"\nimport cx from \"classnames\"\n\nimport { CheckIcon, Icon, IconSources } from \"../../Icon\"\n\nimport { FormElement } from \"../form\"\nimport {\n  Combobox,\n  createListCollection,\n  Portal,\n  useCombobox,\n} from \"@ark-ui/react\"\nimport { Hint } from \"../Hint\"\nimport { nanoid } from \"nanoid\"\n\nexport type AutocompleteItemInput =\n  | string\n  | {\n      [x: string]: any\n      icon?: IconSources\n      label?: string\n      value: string\n      disabled?: boolean\n    }\n\nexport type AutocompleteItem = {\n  [x: string]: any\n  icon?: IconSources\n  label: string\n  value: string\n  disabled?: boolean\n}\n\nexport type AutocompleteRefType = {\n  query: string\n  input: HTMLInputElement\n  open: () => void\n  focus: () => void\n  clearValue: () => void\n  setSelectedItem: (item: AutocompleteItemInput) => void\n}\n\ntype Props = {\n  className?: string\n  label?: string\n  hint?: string\n  fullWidth?: boolean\n  icon?: IconSources\n  items: AutocompleteItemInput[]\n  popoverClassName?: string\n  minQueryLength?: number\n  autoFilter?: boolean\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onClearValue?: () => void\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n  allowCustomValue?: boolean\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction sanitizeItem(item: AutocompleteItemInput) {\n  if (typeof item === \"string\") {\n    // If the item is a string, create an object with label and value being the string\n    return { label: item, value: item }\n  } else {\n    // If the item is an object, ensure it has a label property\n    const { value, label } = item\n    return { ...item, label: label ?? value }\n  }\n}\n\nfunction sanitizeItems(items: AutocompleteItemInput[]) {\n  return items.map((item) => sanitizeItem(item))\n}\n\nconst HIGHLIGHT_CLASSNAME = \"autocomplete_matching_query\"\nconst regExpEscape = (s: string) => s.replace(/[-\\\\^$*+?.()|[\\]{}]/g, \"\\\\$&\")\n\ntype AutocompleteMatchHighlightPropsType = {\n  label: string\n  query: string\n  matchClassName?: string\n}\n\nexport const AutocompleteMatchHighlight = ({\n  label,\n  query,\n  matchClassName = HIGHLIGHT_CLASSNAME,\n}: AutocompleteMatchHighlightPropsType) => {\n  if (query.trim().length === 0) return label\n\n  const queryRX = RegExp(`(${regExpEscape(query)})`, \"gi\")\n\n  return (\n    <>\n      {label.split(queryRX).map((part, i) =>\n        part.match(queryRX) ? (\n          <span className={cx(matchClassName)} key={i}>\n            {part}\n          </span>\n        ) : (\n          part\n        )\n      )}\n    </>\n  )\n}\n\nconst KEY_CODE_ENTER = 13\n\nconst ignoreItemValue = nanoid()\n\nconst Autocomplete = forwardRef(\n  (\n    {\n      id,\n      className,\n      label,\n      hint,\n      fullWidth,\n      icon,\n      status,\n      focusOnInit = false,\n      popoverClassName,\n      minQueryLength = 1,\n      onQueryChange,\n      onSelectItem,\n      renderItem,\n      items,\n      onKeyDown,\n      disabled,\n      defaultValue,\n      onClearValue,\n      allowCustomValue = true,\n      ...inputProps\n    }: Props,\n    ref\n  ) => {\n    const [defaultInputValue, setDefaultInputValue] = useState(defaultValue)\n    const [autocompleteKey, setAutocompleteKey] = useState(true)\n\n    const isInputValidChangedProgrammatically = useRef(false)\n    const sanitizedInitialItems = useMemo(() => sanitizeItems(items), [items])\n\n    const [value, setValue] = useState<string>((defaultValue as string) || \"\")\n    const [popoverItems, setPopoverItems] = useState(sanitizedInitialItems)\n\n    const collection = useMemo(\n      () =>\n        createListCollection({\n          items: popoverItems.length\n            ? popoverItems\n            : sanitizeItems([{ value: ignoreItemValue }]), // having an empty collection makes the component buggy. Best practice is to always have an \"instruction\" item when empty. This dummy item will not be displayed\n        }),\n      [popoverItems]\n    )\n\n    const handleInputChange = (details: Combobox.InputValueChangeDetails) => {\n      if (isInputValidChangedProgrammatically.current) {\n        isInputValidChangedProgrammatically.current = false\n        return\n      }\n\n      onQueryChange\n        ? onQueryChange(details.inputValue)\n        : setPopoverItems(\n            sanitizedInitialItems.filter((item) =>\n              item.label\n                .toLowerCase()\n                .includes(details.inputValue.toLowerCase())\n            )\n          )\n    }\n\n    useEffect(() => {\n      setPopoverItems(sanitizeItems(items))\n    }, [items])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const combobox = useCombobox({\n      ...(id ? { id } : {}),\n      allowCustomValue: allowCustomValue,\n      autoFocus: focusOnInit,\n      value: [value],\n      collection: collection,\n      onInputValueChange: handleInputChange,\n      openOnClick: minQueryLength === 0 && collection.items.length > 0,\n      onValueChange: (details) => {\n        isInputValidChangedProgrammatically.current = true\n        details.items[0]\n          ? setValue((details.items[0] as AutocompleteItem).value)\n          : setValue(\"\")\n      },\n      onInteractOutside: () => {\n        setTimeout(() => inputRef.current?.blur(), 30)\n      },\n      positioning: {\n        gutter: -3,\n        flip: false,\n      },\n    })\n\n    useImperativeHandle(ref, (): AutocompleteRefType => {\n      return {\n        query: combobox.inputValue,\n        input: inputRef.current as HTMLInputElement,\n        open: () => {\n          combobox.setOpen(true)\n        },\n        focus: () => {\n          combobox.focus()\n        },\n        clearValue: () => {\n          combobox.clearValue()\n          setValue(\"\")\n          setDefaultInputValue(\"\")\n          onClearValue && onClearValue()\n          onQueryChange && onQueryChange(\"\")\n        },\n        setSelectedItem: (selectedItem: AutocompleteItemInput) => {\n          isInputValidChangedProgrammatically.current = true\n          const sanitizedItem = sanitizeItem(selectedItem)\n          const existingItem = popoverItems.find(\n            (item) => item.value === sanitizedItem.value\n          )\n\n          if (!existingItem) {\n            combobox.setOpen(false)\n            setPopoverItems([])\n            setDefaultInputValue(sanitizedItem.value)\n            setValue(sanitizedItem.value)\n            setAutocompleteKey(!autocompleteKey)\n          } else {\n            setValue(sanitizedItem.value)\n            combobox.setOpen(false)\n          }\n        },\n      }\n    }, [combobox])\n\n    useEffect(() => {\n      focusOnInit && combobox.setOpen(collection.items.length > 0)\n    }, [])\n\n    const validItems = collection.items.filter(\n      (item) => item.value !== ignoreItemValue\n    )\n\n    useEffect(() => {\n      validItems.length === 0 && combobox.setOpen(false)\n\n      combobox.focused &&\n        collection.items.length > 0 &&\n        !combobox.open &&\n        combobox.setOpen(true)\n    }, [collection.items.length])\n\n    const autocomplete = (\n      <Combobox.RootProvider\n        value={combobox}\n        className={cx(\"cobalt-Autocomplete\", className, {\n          \"cobalt-Autocomplete--empty\": validItems.length === 0,\n        })}\n        key={\"\" + autocompleteKey}\n      >\n        {label && (\n          <Combobox.Label className=\"cobalt-FormField__Label\">\n            {label}\n          </Combobox.Label>\n        )}\n        <Combobox.Control\n          className={cx(\"cobalt-TextField\", {\n            \"cobalt-TextField--error\": status === \"error\",\n            \"cobalt-TextField--success\": status === \"success\",\n            \"cobalt-TextField--withIcon\": icon,\n            \"cobalt-TextField--withValue\":\n              inputRef.current && inputRef.current.value.length > 0,\n          })}\n        >\n          <Combobox.Input\n            className=\"cobalt-TextField__Input\"\n            ref={inputRef}\n            disabled={disabled}\n            defaultValue={defaultInputValue}\n            {...inputProps}\n            onKeyDown={(e) => {\n              onKeyDown && onKeyDown(e)\n              if (\n                onSelectItem &&\n                e.keyCode === KEY_CODE_ENTER &&\n                combobox.highlightedItem\n              ) {\n                const processSelection = onSelectItem(\n                  combobox.highlightedItem as AutocompleteItem,\n                  combobox.inputValue\n                )\n\n                if (!processSelection) {\n                  e.preventDefault()\n                  e.stopPropagation()\n                }\n              }\n            }}\n          />\n          {icon && (\n            <Icon\n              source={icon}\n              color=\"primary\"\n              className=\"cobalt-TextField__Icon\"\n            />\n          )}\n          {value.length > 0 && !disabled && (\n            <Combobox.ClearTrigger\n              className=\"cobalt-Autocomplete__clear-button\"\n              role=\"clear\"\n              onClick={() => {\n                setDefaultInputValue(\"\")\n                setValue(\"\")\n                setAutocompleteKey(!autocompleteKey)\n                minQueryLength === 0 &&\n                  setTimeout(() => {\n                    inputRef.current?.click()\n                  }, 0)\n                onClearValue && onClearValue()\n                onQueryChange && onQueryChange(\"\")\n              }}\n            >\n              <Icon source=\"close\" size={16} />\n            </Combobox.ClearTrigger>\n          )}\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner className=\"cobalt-Autocomplete__positioner\">\n            <Combobox.Content\n              className={cx(\"cobalt-Autocomplete__content\", popoverClassName, {\n                \"cobalt-Autocomplete__content--empty\": validItems.length === 0,\n              })}\n            >\n              {validItems.map((item: AutocompleteItem, index: number) => (\n                <Combobox.Item\n                  key={index}\n                  item={item}\n                  className=\"cobalt-Autocomplete__item\"\n                >\n                  {renderItem ? (\n                    <div\n                      onClick={(e) => {\n                        if (onSelectItem) {\n                          const processSelection = onSelectItem(\n                            item,\n                            combobox.inputValue\n                          )\n\n                          if (!processSelection) {\n                            e.preventDefault()\n                            e.stopPropagation()\n                          }\n                        }\n                      }}\n                    >\n                      {renderItem(item, combobox.inputValue)}\n                    </div>\n                  ) : (\n                    <div\n                      className={cx(\"cobalt-Autocomplete__item-wrapper\", {\n                        \"cobalt-Autocomplete__item-wrapper--disabled\":\n                          item.disabled,\n                      })}\n                    >\n                      {icon && (\n                        <span className=\"cobalt-Autocomplete__item-icon\">\n                          <Icon source={icon} color=\"primary\" />\n                        </span>\n                      )}\n                      <Combobox.ItemText className=\"cobalt-Autocomplete__item-label\">\n                        {item.label}\n                      </Combobox.ItemText>\n                      <Combobox.ItemIndicator className=\"cobalt-Autocomplete_selected-item-indicator\">\n                        <CheckIcon size={16} />\n                      </Combobox.ItemIndicator>\n                    </div>\n                  )}\n                </Combobox.Item>\n              ))}\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.RootProvider>\n    )\n\n    return label || hint ? (\n      <div\n        className={cx(\"cobalt-FormField\", {\n          \"cobalt-FormField--withHint\": hint,\n          \"cobalt-FormField--fullWidth\": fullWidth,\n        })}\n      >\n        {autocomplete}\n        {hint && (\n          <Hint status={status}>\n            <span dangerouslySetInnerHTML={{ __html: hint }} />\n          </Hint>\n        )}\n      </div>\n    ) : (\n      <>{autocomplete}</>\n    )\n  }\n)\n\nAutocomplete.displayName = \"Autocomplete\"\n\nexport { Autocomplete }\n"],"names":[],"mappings":"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"}

package/components/Form/Hint.js

@@ -18,15 +18,12 @@ const getIcon = (status) => {
 };
 const getIconColor = (status) => {
     switch (status) {
-        case "success": {
-            return "green";
-        }
-        case "error": {
-            return "red";
-        }
-        default: {
-            return "graphiteLight";
-        }
+        case "success":
+            return "success";
+        case "error":
+            return "error";
+        default:
+            return "onSurfaceVariant";
     }
 };
 const Hint = ({ children, status, className }) => {

package/components/Form/Hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  className?: string\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"green\"\n    }\n    case \"error\": {\n      return \"red\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status, className }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", className, {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;IACxD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;SACrB;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;SACvC;QACD,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;SACd;KACF;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;IAC7D,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,OAAO,CAAA;SACf;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,KAAK,CAAA;SACb;QACD,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;SACvB;KACF;AACH,CAAC,CAAA;AAEM,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAiB,KAAI;IACrE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE,SAAS,EAAE;YAC9C,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}
+{"version":3,"file":"Hint.js","sources":["../../../src/components/Form/Hint.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\nimport { FormElementStatus } from \"./form\"\n\nexport interface HintPropsType {\n  className?: string\n  children: React.ReactNode\n  status?: FormElementStatus\n}\n\nconst ICON_SIZE = 16\n\nconst getIcon = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\": {\n      return \"checkCircle\"\n    }\n    case \"error\": {\n      return \"contextualWarningCircleFilled\"\n    }\n    default: {\n      return \"info\"\n    }\n  }\n}\n\nconst getIconColor = (status: FormElementStatus | undefined) => {\n  switch (status) {\n    case \"success\":\n      return \"success\"\n    case \"error\":\n      return \"error\"\n    default:\n      return \"onSurfaceVariant\"\n  }\n}\n\nexport const Hint = ({ children, status, className }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", className, {\n        \"cobalt-Hint--success\": status === \"success\",\n        \"cobalt-Hint--error\": status === \"error\",\n      })}\n    >\n      <span className=\"cobalt-Hint__Icon\">\n        <Icon\n          source={getIcon(status)}\n          size={ICON_SIZE}\n          color={getIconColor(status)}\n        />\n      </span>\n      <span className=\"cobalt-Hint__Message\">{children}</span>\n    </div>\n  )\n}\n"],"names":["classNames"],"mappings":";;;;AAWA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;IACxD,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;SACrB;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;SACvC;QACD,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;SACd;KACF;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;IAC7D,QAAQ,MAAM;AACZ,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS,CAAA;AAClB,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,OAAO,CAAA;AAChB,QAAA;AACE,YAAA,OAAO,kBAAkB,CAAA;KAC5B;AACH,CAAC,CAAA;AAEM,MAAM,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAiB,KAAI;IACrE,QACE,6BACE,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE,SAAS,EAAE;YAC9C,sBAAsB,EAAE,MAAM,KAAK,SAAS;YAC5C,oBAAoB,EAAE,MAAM,KAAK,OAAO;SACzC,CAAC,EAAA;QAEF,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,mBAAmB,EAAA;YACjC,KAAC,CAAA,aAAA,CAAA,IAAI,IACH,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,EACvB,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,GAC3B,CACG;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAAE,QAAQ,CAAQ,CACpD,EACP;AACH;;;;"}

package/components/Form/Slider.js

@@ -1,9 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Slider as Slider$1 } from '@ark-ui/react';
 import cx from 'classnames';
 import { FieldWrapper } from './field.js';
 
-const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, ...restProps }) => {
+const MIN_BAR_HEIGHT_PERCENT = 3;
+const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled, onValueChange, renderValue, ariaLabel, hint, label, status, className, step, bars, ...restProps }) => {
+    const sliderMinValue = min || 0;
+    const sliderMaxValue = max || 100;
     const value = Array.isArray(_value)
         ? _value
         : _value !== undefined && !isNaN(_value)
@@ -24,11 +27,34 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
         return [0];
     }
     const [sliderValue, setSliderValue] = useState(() => initValue());
+    const barsData = useMemo(() => {
+        if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue)
+            return null;
+        const barsCount = (sliderMaxValue - sliderMinValue) / bars.step;
+        let maxBars = 0;
+        const rawValues = [];
+        for (let i = 0; i < barsCount; i++) {
+            const binValue = bars.bins[i * bars.step + sliderMinValue];
+            if (binValue) {
+                maxBars = Math.max(maxBars, binValue);
+                rawValues.push(binValue);
+            }
+            else {
+                rawValues.push(0);
+            }
+        }
+        if (maxBars === 0) {
+            return rawValues.map(() => 0); // all values are zero, so all bars are 0%
+        }
+        const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT;
+        return rawValues.map((v) => v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0);
+    }, [bars, sliderMinValue, sliderMaxValue]);
     return (React.createElement(FieldWrapper, { ...restProps, status: status, label: label, hint: hint },
         React.createElement(Slider$1.Root, { ...restProps, className: cx("cobalt-slider", className, {
                 "cobalt-slider--disabled": disabled,
                 "cobalt-slider--withHint": hint,
-            }), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max, 
+                "cobalt-slider--withBars": !!bars,
+            }), thumbAlignment: "contain", disabled: disabled, "aria-label": [ariaLabel], value: sliderValue, min: min, max: max, step: step, 
             // Need to force disbplaying in smaller spaces like popovers
             thumbSize: {
                 width: 24,
@@ -41,6 +67,17 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
             React.createElement(Slider$1.Label, { className: FieldWrapper.labelClassName }, label),
             renderValue && (React.createElement("div", { className: "cobalt-slider__value-container" }, renderValue((sliderValue.length === 1 ? sliderValue[0] : sliderValue), status))),
             React.createElement(Slider$1.Control, null,
+                React.createElement("div", { className: "cobalt-slider__bars" }, barsData &&
+                    barsData.map((val, i) => {
+                        const barsStep = (bars === null || bars === void 0 ? void 0 : bars.step) || 1;
+                        return (React.createElement("div", { key: i, className: cx("cobalt-slider__bar", {
+                                "cobalt-slider__bar--active": i * barsStep + sliderMinValue >= sliderValue[0] &&
+                                    (i + 1) * barsStep + sliderMinValue <= sliderValue[1],
+                            }), style: {
+                                width: `calc(${100 / barsData.length}%)`,
+                                height: `${val}%`,
+                            } }));
+                    })),
                 React.createElement(Slider$1.Track, null,
                     React.createElement(Slider$1.Range, null)),
                 sliderValue.map((_v, i) => (React.createElement(Slider$1.Thumb, { key: i, index: i },

package/components/Form/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nexport type SliderPropsType<T extends number | number[]> = {\n  /**\n   * mandatory for A11y\n   */\n  value?: T\n  defaultValue?: T\n  ariaLabel: string\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  /**\n   * Listener called when the value is changed\n   */\n  onValueChange?: (newValue: T) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: T,\n    status: FieldWrapperProps[\"status\"]\n  ) => React.ReactElement\n\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n  Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n  defaultValue: _defaultValue,\n  value: _value,\n  min,\n  max,\n  disabled,\n  onValueChange,\n  renderValue,\n  ariaLabel,\n  hint,\n  label,\n  status,\n  className,\n  ...restProps\n}: SliderPropsType<T>) => {\n  const value: number[] | undefined = Array.isArray(_value)\n    ? _value\n    : _value !== undefined && !isNaN(_value)\n      ? [_value]\n      : undefined\n  const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n    ? _defaultValue\n    : _defaultValue !== undefined && !isNaN(_defaultValue)\n      ? [_defaultValue]\n      : undefined\n  function initValue(): number[] {\n    if (value !== undefined) return value\n    if (defaultValue !== undefined) return defaultValue\n    if (min !== undefined) return [min]\n    return [0]\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  return (\n    <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n      <ArkSlider.Root\n        {...restProps}\n        className={cx(\"cobalt-slider\", className, {\n          \"cobalt-slider--disabled\": disabled,\n          \"cobalt-slider--withHint\": hint,\n        })}\n        thumbAlignment=\"contain\"\n        disabled={disabled}\n        aria-label={[ariaLabel]}\n        value={sliderValue}\n        min={min}\n        max={max}\n        // Need to force disbplaying in smaller spaces like popovers\n        thumbSize={{\n          width: 24,\n          height: 24,\n        }}\n        onValueChange={({ value: newValueArr }) => {\n          setSliderValue(newValueArr)\n          const newValue =\n            newValueArr.length === 1 ? newValueArr[0] : newValueArr\n          onValueChange && onValueChange(newValue as T)\n        }}\n      >\n        <ArkSlider.Label className={FieldWrapper.labelClassName}>\n          {label}\n        </ArkSlider.Label>\n        {renderValue && (\n          <div className=\"cobalt-slider__value-container\">\n            {renderValue(\n              (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n              status\n            )}\n          </div>\n        )}\n        <ArkSlider.Control>\n          <ArkSlider.Track>\n            <ArkSlider.Range />\n          </ArkSlider.Track>\n          {sliderValue.map((_v, i) => (\n            <ArkSlider.Thumb key={i} index={i}>\n              <ArkSlider.HiddenInput />\n            </ArkSlider.Thumb>\n          ))}\n        </ArkSlider.Control>\n      </ArkSlider.Root>\n    </FieldWrapper>\n  )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Form/Slider.tsx"],"sourcesContent":["import React, { PropsWithChildren, useState, useMemo } from \"react\"\nimport { Slider as ArkSlider, SliderRootProps } from \"@ark-ui/react\"\nimport cx from \"classnames\"\nimport { FieldWrapper, FieldWrapperProps } from \"./field\"\n\nconst MIN_BAR_HEIGHT_PERCENT = 3\n\nexport type SliderPropsType<T extends number | number[]> = {\n  /**\n   * mandatory for A11y\n   */\n  value?: T\n  defaultValue?: T\n  ariaLabel: string\n  /**\n   * values interval\n   */\n  step?: number\n  disabled?: boolean\n  bars?: {\n    step: number\n    bins: Record<number, number>\n  }\n  /**\n   * Listener called when the value is changed\n   */\n  onValueChange?: (newValue: T) => void\n  /**\n   * Function used to visually display the slider value\n   */\n  renderValue?: (\n    value: T,\n    status: FieldWrapperProps[\"status\"]\n  ) => React.ReactElement\n\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n} & FieldWrapperProps &\n  Omit<SliderRootProps, \"value\" | \"defaultValue\" | \"onValueChange\">\n\nconst Slider = <T extends number | number[]>({\n  defaultValue: _defaultValue,\n  value: _value,\n  min,\n  max,\n  disabled,\n  onValueChange,\n  renderValue,\n  ariaLabel,\n  hint,\n  label,\n  status,\n  className,\n  step,\n  bars,\n  ...restProps\n}: SliderPropsType<T>) => {\n  const sliderMinValue = min || 0\n  const sliderMaxValue = max || 100\n  const value: number[] | undefined = Array.isArray(_value)\n    ? _value\n    : _value !== undefined && !isNaN(_value)\n      ? [_value]\n      : undefined\n  const defaultValue: number[] | undefined = Array.isArray(_defaultValue)\n    ? _defaultValue\n    : _defaultValue !== undefined && !isNaN(_defaultValue)\n      ? [_defaultValue]\n      : undefined\n  function initValue(): number[] {\n    if (value !== undefined) return value\n    if (defaultValue !== undefined) return defaultValue\n    if (min !== undefined) return [min]\n    return [0]\n  }\n\n  const [sliderValue, setSliderValue] = useState(() => initValue())\n\n  const barsData = useMemo(() => {\n    if (!bars || bars.step <= 0 || sliderMinValue >= sliderMaxValue) return null\n\n    const barsCount = (sliderMaxValue - sliderMinValue) / bars.step\n\n    let maxBars = 0\n    const rawValues = []\n\n    for (let i = 0; i < barsCount; i++) {\n      const binValue = bars.bins[i * bars.step + sliderMinValue]\n      if (binValue) {\n        maxBars = Math.max(maxBars, binValue)\n        rawValues.push(binValue)\n      } else {\n        rawValues.push(0)\n      }\n    }\n\n    if (maxBars === 0) {\n      return rawValues.map(() => 0) // all values are zero, so all bars are 0%\n    }\n\n    const scaleFactor = 100 - MIN_BAR_HEIGHT_PERCENT\n\n    return rawValues.map((v) =>\n      v > 0 ? (v / maxBars) * scaleFactor + MIN_BAR_HEIGHT_PERCENT : 0\n    )\n  }, [bars, sliderMinValue, sliderMaxValue])\n\n  return (\n    <FieldWrapper {...restProps} status={status} label={label} hint={hint}>\n      <ArkSlider.Root\n        {...restProps}\n        className={cx(\"cobalt-slider\", className, {\n          \"cobalt-slider--disabled\": disabled,\n          \"cobalt-slider--withHint\": hint,\n          \"cobalt-slider--withBars\": !!bars,\n        })}\n        thumbAlignment=\"contain\"\n        disabled={disabled}\n        aria-label={[ariaLabel]}\n        value={sliderValue}\n        min={min}\n        max={max}\n        step={step}\n        // Need to force disbplaying in smaller spaces like popovers\n        thumbSize={{\n          width: 24,\n          height: 24,\n        }}\n        onValueChange={({ value: newValueArr }) => {\n          setSliderValue(newValueArr)\n          const newValue =\n            newValueArr.length === 1 ? newValueArr[0] : newValueArr\n          onValueChange && onValueChange(newValue as T)\n        }}\n      >\n        <ArkSlider.Label className={FieldWrapper.labelClassName}>\n          {label}\n        </ArkSlider.Label>\n        {renderValue && (\n          <div className=\"cobalt-slider__value-container\">\n            {renderValue(\n              (sliderValue.length === 1 ? sliderValue[0] : sliderValue) as T,\n              status\n            )}\n          </div>\n        )}\n        <ArkSlider.Control>\n          <div className=\"cobalt-slider__bars\">\n            {barsData &&\n              barsData.map((val, i) => {\n                const barsStep = bars?.step || 1\n                return (\n                  <div\n                    key={i}\n                    className={cx(\"cobalt-slider__bar\", {\n                      \"cobalt-slider__bar--active\":\n                        i * barsStep + sliderMinValue >= sliderValue[0] &&\n                        (i + 1) * barsStep + sliderMinValue <= sliderValue[1],\n                    })}\n                    style={{\n                      width: `calc(${100 / barsData.length}%)`,\n                      height: `${val}%`,\n                    }}\n                  ></div>\n                )\n              })}\n          </div>\n          <ArkSlider.Track>\n            <ArkSlider.Range />\n          </ArkSlider.Track>\n          {sliderValue.map((_v, i) => (\n            <ArkSlider.Thumb key={i} index={i}>\n              <ArkSlider.HiddenInput />\n            </ArkSlider.Thumb>\n          ))}\n        </ArkSlider.Control>\n      </ArkSlider.Root>\n    </FieldWrapper>\n  )\n}\n\nexport default Slider\n\nexport const SliderValueMeta = ({ children }: PropsWithChildren) => {\n  return <span className=\"cobalt-slider__value-meta\">{children}</span>\n}\n"],"names":["ArkSlider"],"mappings":"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"}

package/components/Icon/__generated__/AccountDetailsIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "accountDetails";
 const AccountDetailsIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AccountDetailsIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountDetailsIcon.js","sources":["../../../../src/components/Icon/__generated__/AccountDetailsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"accountDetails\"\nconst AccountDetailsIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M7.5 15c1.13 0 2.32.26 3.59.77 1.26.52 1.91 1.18 1.91 2V20H2v-2.23c0-.82.65-1.48 1.91-2C5.18 15.26 6.38 15 7.5 15Zm5.5-2h9v2h-9v-2Zm0-4h9v2h-9V9Zm0-4h9v2h-9V5ZM7.5 8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z\"\n      />\n    </svg>\n  )\n}\nexport default AccountDetailsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,gBAAgB,CAAA;AACnC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4MAA4M,EAC9M,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AccountDetailsIcon.js","sources":["../../../../src/components/Icon/__generated__/AccountDetailsIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"accountDetails\"\nconst AccountDetailsIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M7.5 15c1.13 0 2.32.26 3.59.77 1.26.52 1.91 1.18 1.91 2V20H2v-2.23c0-.82.65-1.48 1.91-2C5.18 15.26 6.38 15 7.5 15Zm5.5-2h9v2h-9v-2Zm0-4h9v2h-9V9Zm0-4h9v2h-9V5ZM7.5 8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z\"\n      />\n    </svg>\n  )\n}\nexport default AccountDetailsIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,gBAAgB,CAAA;AACnC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4MAA4M,EAC9M,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/AddPictureIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "addPicture";
 const AddPictureIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AddPictureIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddPictureIcon.js","sources":["../../../../src/components/Icon/__generated__/AddPictureIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"addPicture\"\nconst AddPictureIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M19 11h-4v4h-2v-4H9V9h4V5h2v4h4v2Zm1-9H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM4 6H2v14a2 2 0 0 0 2 2h14v-2H4V6Z\"\n      />\n    </svg>\n  )\n}\nexport default AddPictureIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6IAA6I,EAC/I,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AddPictureIcon.js","sources":["../../../../src/components/Icon/__generated__/AddPictureIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"addPicture\"\nconst AddPictureIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M19 11h-4v4h-2v-4H9V9h4V5h2v4h4v2Zm1-9H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM4 6H2v14a2 2 0 0 0 2 2h14v-2H4V6Z\"\n      />\n    </svg>\n  )\n}\nexport default AddPictureIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6IAA6I,EAC/I,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/AirConditioningIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "airConditioning";
 const AirConditioningIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AirConditioningIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AirConditioningIcon.js","sources":["../../../../src/components/Icon/__generated__/AirConditioningIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airConditioning\"\nconst AirConditioningIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m15.336 15.957-1.604-2.778h3.208l2.53 2.53a.749.749 0 1 0 1.06-1.06l-1.469-1.47H21a1 1 0 0 0 0-2h-1.939l1.469-1.47a.749.749 0 1 0-1.06-1.06l-2.53 2.53h-3.208L15.336 8.4l3.456-.925a.752.752 0 0 0-.388-1.45l-2.007.538.969-1.68a1 1 0 1 0-1.732-1l-.97 1.68-.537-2.007a.752.752 0 0 0-1.45.388l.927 3.456L12 10.179 10.397 7.4l.926-3.456a.75.75 0 1 0-1.449-.388l-.538 2.007-.97-1.68a1 1 0 0 0-1.732 1l.97 1.68-2.008-.538a.752.752 0 0 0-.388 1.45l3.456.925 1.604 2.778H7.061L4.53 8.649a.749.749 0 1 0-1.06 1.06l1.47 1.47H3a1 1 0 0 0 0 2h1.94l-1.47 1.47a.749.749 0 1 0 1.06 1.06l2.531-2.53h3.207l-1.604 2.778-3.456.926a.75.75 0 1 0 .388 1.449l2.008-.538-.97 1.68a1 1 0 0 0 1.732 1l.97-1.68.538 2.008a.75.75 0 1 0 1.449-.39l-.926-3.455L12 14.179l1.604 2.778-.927 3.456a.751.751 0 0 0 1.45.389l.537-2.008.97 1.68a1 1 0 0 0 1.732-1l-.969-1.68 2.007.538a.75.75 0 0 0 .388-1.45l-3.456-.925Z\"\n      />\n    </svg>\n  )\n}\nexport default AirConditioningIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,iBAAiB,CAAA;AACpC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,82BAA82B,EACh3B,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AirConditioningIcon.js","sources":["../../../../src/components/Icon/__generated__/AirConditioningIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airConditioning\"\nconst AirConditioningIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m15.336 15.957-1.604-2.778h3.208l2.53 2.53a.749.749 0 1 0 1.06-1.06l-1.469-1.47H21a1 1 0 0 0 0-2h-1.939l1.469-1.47a.749.749 0 1 0-1.06-1.06l-2.53 2.53h-3.208L15.336 8.4l3.456-.925a.752.752 0 0 0-.388-1.45l-2.007.538.969-1.68a1 1 0 1 0-1.732-1l-.97 1.68-.537-2.007a.752.752 0 0 0-1.45.388l.927 3.456L12 10.179 10.397 7.4l.926-3.456a.75.75 0 1 0-1.449-.388l-.538 2.007-.97-1.68a1 1 0 0 0-1.732 1l.97 1.68-2.008-.538a.752.752 0 0 0-.388 1.45l3.456.925 1.604 2.778H7.061L4.53 8.649a.749.749 0 1 0-1.06 1.06l1.47 1.47H3a1 1 0 0 0 0 2h1.94l-1.47 1.47a.749.749 0 1 0 1.06 1.06l2.531-2.53h3.207l-1.604 2.778-3.456.926a.75.75 0 1 0 .388 1.449l2.008-.538-.97 1.68a1 1 0 0 0 1.732 1l.97-1.68.538 2.008a.75.75 0 1 0 1.449-.39l-.926-3.455L12 14.179l1.604 2.778-.927 3.456a.751.751 0 0 0 1.45.389l.537-2.008.97 1.68a1 1 0 0 0 1.732-1l-.969-1.68 2.007.538a.75.75 0 0 0 .388-1.45l-3.456-.925Z\"\n      />\n    </svg>\n  )\n}\nexport default AirConditioningIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,iBAAiB,CAAA;AACpC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,82BAA82B,EACh3B,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/AirportIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "airport";
 const AirportIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AirportIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AirportIcon.js","sources":["../../../../src/components/Icon/__generated__/AirportIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airport\"\nconst AirportIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m16.935 20.546 1.414-1.414-2.121-9.192 3.889-3.89a1.5 1.5 0 1 0-2.121-2.12l-3.89 3.888-9.192-2.12L3.5 7.11l7.425 3.89-3.89 3.889-2.474-.354-1.061 1.06 3.182 1.768 1.768 3.182 1.06-1.06-.353-2.475 3.889-3.89 3.889 7.425Z\"\n      />\n    </svg>\n  )\n}\nexport default AirportIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6NAA6N,EAC/N,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AirportIcon.js","sources":["../../../../src/components/Icon/__generated__/AirportIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"airport\"\nconst AirportIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m16.935 20.546 1.414-1.414-2.121-9.192 3.889-3.89a1.5 1.5 0 1 0-2.121-2.12l-3.89 3.888-9.192-2.12L3.5 7.11l7.425 3.89-3.89 3.889-2.474-.354-1.061 1.06 3.182 1.768 1.768 3.182 1.06-1.06-.353-2.475 3.889-3.89 3.889 7.425Z\"\n      />\n    </svg>\n  )\n}\nexport default AirportIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6NAA6N,EAC/N,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/AndroidIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "android";
 const AndroidIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AndroidIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AndroidIcon.js","sources":["../../../../src/components/Icon/__generated__/AndroidIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"android\"\nconst AndroidIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52ZM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z\" />\n    </svg>\n  )\n}\nexport default AndroidIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qUAAqU,EAAG,CAAA,CAC5U,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AndroidIcon.js","sources":["../../../../src/components/Icon/__generated__/AndroidIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"android\"\nconst AndroidIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"m17.6 9.48 1.84-3.18c.16-.31.04-.69-.26-.85a.637.637 0 0 0-.83.22l-1.88 3.24a11.463 11.463 0 0 0-8.94 0L5.65 5.67a.643.643 0 0 0-.87-.2c-.28.18-.37.54-.22.83L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52ZM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z\" />\n    </svg>\n  )\n}\nexport default AndroidIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qUAAqU,EAAG,CAAA,CAC5U,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/AntiqueIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "antique";
 const AntiqueIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/AntiqueIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AntiqueIcon.js","sources":["../../../../src/components/Icon/__generated__/AntiqueIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"antique\"\nconst AntiqueIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M16 10h.5c0-3.157-1.168-4-5.2-4C4 6 2 9 2 10v5h1a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2c0-.47-.27-1.441-1-2.403V11h-1.826c-1.027-.59-2.39-1-4.174-1Zm-6 0H3.5c0-1.373 2.934-2.328 6.5-2.479V10Zm1.5 0V7.5c3.5.016 3.5.236 3.5 2.5h-3.5ZM6 13.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm12 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z\"\n      />\n    </svg>\n  )\n}\nexport default AntiqueIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wTAAwT,EAC1T,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"AntiqueIcon.js","sources":["../../../../src/components/Icon/__generated__/AntiqueIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"antique\"\nconst AntiqueIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M16 10h.5c0-3.157-1.168-4-5.2-4C4 6 2 9 2 10v5h1a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2c0-.47-.27-1.441-1-2.403V11h-1.826c-1.027-.59-2.39-1-4.174-1Zm-6 0H3.5c0-1.373 2.934-2.328 6.5-2.479V10Zm1.5 0V7.5c3.5.016 3.5.236 3.5 2.5h-3.5ZM6 13.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm12 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z\"\n      />\n    </svg>\n  )\n}\nexport default AntiqueIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,SAAS,CAAA;AAC5B,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wTAAwT,EAC1T,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowLeftCircleFilledIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "arrowLeftCircleFilled";
 const ArrowLeftCircleFilledIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/ArrowLeftCircleFilledIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowLeftCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeftCircleFilled\"\nconst ArrowLeftCircleFilledIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm4.975-9.15H9.048l2.373 2.71c.294.339.252.904-.084 1.21-.341.313-.91.265-1.212-.084l-3.616-4.131c-.276-.368-.272-.792-.002-1.125l.002-.002 3.616-4.132a.858.858 0 0 1 1.21-.085c.342.296.382.87.086 1.211l-2.373 2.711h7.927a.858.858 0 0 1 0 1.716Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowLeftCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,uBAAuB,CAAA;AAC1C,MAAM,yBAAyB,GAAG,CAAC,EACjC,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+TAA+T,EACjU,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"ArrowLeftCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeftCircleFilled\"\nconst ArrowLeftCircleFilledIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10Zm4.975-9.15H9.048l2.373 2.71c.294.339.252.904-.084 1.21-.341.313-.91.265-1.212-.084l-3.616-4.131c-.276-.368-.272-.792-.002-1.125l.002-.002 3.616-4.132a.858.858 0 0 1 1.21-.085c.342.296.382.87.086 1.211l-2.373 2.711h7.927a.858.858 0 0 1 0 1.716Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowLeftCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,uBAAuB,CAAA;AAC1C,MAAM,yBAAyB,GAAG,CAAC,EACjC,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+TAA+T,EACjU,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowLeftIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "arrowLeft";
 const ArrowLeftIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/ArrowLeftIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeft\"\nconst ArrowLeftIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m11.351 5 1.302 1.519-4.948 4.24h11.297v2H7.705L12.653 17l-1.302 1.518-6.935-5.944c-.484-.35-.596-1.119-.065-1.574l7-6Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,WAAW,CAAA;AAC9B,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yHAAyH,EAC3H,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"ArrowLeftIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowLeftIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowLeft\"\nconst ArrowLeftIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"m11.351 5 1.302 1.519-4.948 4.24h11.297v2H7.705L12.653 17l-1.302 1.518-6.935-5.944c-.484-.35-.596-1.119-.065-1.574l7-6Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowLeftIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,WAAW,CAAA;AAC9B,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yHAAyH,EAC3H,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowRightCircleFilledIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "arrowRightCircleFilled";
 const ArrowRightCircleFilledIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,

package/components/Icon/__generated__/ArrowRightCircleFilledIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowRightCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowRightCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowRightCircleFilled\"\nconst ArrowRightCircleFilledIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-4.975-9.15h7.928l-2.373 2.71c-.295.339-.253.904.083 1.21.341.313.91.265 1.212-.084l3.616-4.131c.276-.368.271-.792.002-1.125l-.002-.002-3.616-4.132a.858.858 0 0 0-1.21-.085.889.889 0 0 0-.086 1.211l2.373 2.711H7.026a.858.858 0 1 0 0 1.716Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowRightCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,wBAAwB,CAAA;AAC3C,MAAM,0BAA0B,GAAG,CAAC,EAClC,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0TAA0T,EAC5T,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"ArrowRightCircleFilledIcon.js","sources":["../../../../src/components/Icon/__generated__/ArrowRightCircleFilledIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { camelize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"arrowRightCircleFilled\"\nconst ArrowRightCircleFilledIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm-4.975-9.15h7.928l-2.373 2.71c-.295.339-.253.904.083 1.21.341.313.91.265 1.212-.084l3.616-4.131c.276-.368.271-.792.002-1.125l-.002-.002-3.616-4.132a.858.858 0 0 0-1.21-.085.889.889 0 0 0-.086 1.211l2.373 2.711H7.026a.858.858 0 1 0 0 1.716Z\"\n      />\n    </svg>\n  )\n}\nexport default ArrowRightCircleFilledIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,wBAAwB,CAAA;AAC3C,MAAM,0BAA0B,GAAG,CAAC,EAClC,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IACD,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0TAA0T,EAC5T,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/ArrowRightCircleIcon.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import capitalize from '../../utils/capitalize.js';
+import camelize from '../../utils/camelize.js';
 import 'lodash.throttle';
 import cx from 'classnames';
 
 const iconSource = "arrowRightCircle";
 const ArrowRightCircleIcon = ({ color, size = 24, contained = false, className, }) => {
     const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
-        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        [`c-fill-${camelize(color || "")}`]: color,
         "cobalt-Icon--size16": size === 16,
         "cobalt-Icon--size20": size === 20,
         "cobalt-Icon--size32": size === 32,