@drivy/cobalt 0.18.0 → 0.19.1

package/cjs/tokens/theme.js

@@ -175,7 +175,7 @@ const stroke = {
 		hover: "indigo/purple.700/purpleDeep.400",
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.300/purpleDeep.700",
+	accentAlt: "purple/purple.300/purpleDeep.700",
 	base: "grey/navy.100/black.50",
 	baseInteractive: {
 		DEFAULT: "grey/navy.100/black.50",

package/components/Accordion/index.js

@@ -7,11 +7,13 @@ import { animated, useSpring } from '@react-spring/web';
 import useElementHeight from '../../hooks/useElementHeight.js';
 
 const accordionSpringConfig = { tension: 300, friction: 30, clamp: true };
-const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, children, ...props }, ref) => {
+const AccordionItemHeader = forwardRef(({ headingLevel = 4, className, leftToggleIcon = false, children, ...props }, ref) => {
     const { isExpanded } = useAccordionItemContext();
     const Heading = `h${headingLevel}`;
     return (React.createElement(Heading, null,
-        React.createElement(AccordionButton, { ref: ref, className: "cobalt-accordion__header", ...props },
+        React.createElement(AccordionButton, { ref: ref, className: cx("cobalt-accordion__header", {
+                "cobalt-accordion__header--left-toggle-icon": leftToggleIcon,
+            }), ...props },
             React.createElement("span", { className: cx("cobalt-accordion__header-content", className) }, children),
             React.createElement(ToggleIcon, { isOpen: isExpanded }))));
 });

package/components/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(({ headingLevel = 4, className, children, ...props }, ref) => {\n  const { isExpanded } = useAccordionItemContext()\n  const Heading = `h${headingLevel}` as HeadingTag\n  return (\n    <Heading>\n      <ReachAccordionButton\n        ref={ref}\n        className=\"cobalt-accordion__header\"\n        {...props}\n      >\n        <span className={cx(\"cobalt-accordion__header-content\", className)}>\n          {children}\n        </span>\n        <ToggleIcon isOpen={isExpanded} />\n      </ReachAccordionButton>\n    </Heading>\n  )\n})\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n  Accordion as ReachAccordion,\n  AccordionItem as ReachAccordionItem,\n  AccordionButton as ReachAccordionButton,\n  AccordionPanel as ReachAccordionPanel,\n  AccordionProps as ReachAccordionProps,\n  AccordionItemProps as ReachAccordionItemProps,\n  AccordionButtonProps as ReachAccordionButtonProps,\n  useAccordionItemContext,\n  AccordionPanelProps as ReachAccordionPanelProps,\n} from \"@reach/accordion\"\nimport ToggleIcon from \"./ToggleIcon\"\nimport { animated, useSpring } from \"@react-spring/web\"\nimport useElementHeight from \"../../hooks/useElementHeight\"\nexport { useAccordionItemContext } from \"@reach/accordion\"\n\ntype HeadingLevelMapType = {\n  h2: 2\n  h3: 3\n  h4: 4\n  h5: 5\n  h6: 6\n}\n\ntype HeadingTag = keyof HeadingLevelMapType\nexport type AccordionItemHeaderPropsType = {\n  /**\n   * To improve the semantics of the markup further, the ARIA guidelines dictate\n   * that each accordion item's button should be wrapped in an element with\n   * role=\"heading\", or more simply, an HTML heading tag.\n   * https://reach.tech/accordion/#accordion-headings\n   */\n  headingLevel?: HeadingLevelMapType[HeadingTag]\n  className?: string\n  leftToggleIcon?: boolean\n} & ReachAccordionButtonProps\n\nexport type AccordionItemPanelPropsType = {\n  className?: string\n} & ReachAccordionPanelProps\nexport type AccordionItemPropsType = {\n  className?: string\n} & ReachAccordionItemProps\nexport type AccordionPropsType = {\n  className?: string\n  // We have to explicit them below to get displayed by Storybook\n  // should work without but might be an issue on Storybook side\n  collapsible?: ReachAccordionProps[\"collapsible\"]\n  defaultIndex?: ReachAccordionProps[\"defaultIndex\"]\n  index?: ReachAccordionProps[\"index\"]\n  multiple?: ReachAccordionProps[\"multiple\"]\n  onChange?: ReachAccordionProps[\"onChange\"]\n} & ReachAccordionProps\n\nconst accordionSpringConfig = { tension: 300, friction: 30, clamp: true }\n\nexport const AccordionItemHeader = forwardRef<\n  HTMLButtonElement,\n  AccordionItemHeaderPropsType\n>(\n  (\n    { headingLevel = 4, className, leftToggleIcon = false, children, ...props },\n    ref\n  ) => {\n    const { isExpanded } = useAccordionItemContext()\n    const Heading = `h${headingLevel}` as HeadingTag\n    return (\n      <Heading>\n        <ReachAccordionButton\n          ref={ref}\n          className={cx(\"cobalt-accordion__header\", {\n            \"cobalt-accordion__header--left-toggle-icon\": leftToggleIcon,\n          })}\n          {...props}\n        >\n          <span className={cx(\"cobalt-accordion__header-content\", className)}>\n            {children}\n          </span>\n          <ToggleIcon isOpen={isExpanded} />\n        </ReachAccordionButton>\n      </Heading>\n    )\n  }\n)\nAccordionItemHeader.displayName = \"Accordion.Item.Header\"\n\nconst AnimatedAccordionPanel = animated(ReachAccordionPanel)\nexport const AccordionItemPanel = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPanelPropsType) => {\n  const { isExpanded } = useAccordionItemContext()\n  const { ref, height } = useElementHeight<HTMLDivElement>()\n  const animation = useSpring({\n    opacity: isExpanded ? 1 : 0,\n    height: isExpanded ? height : 0,\n    overflow: \"hidden\",\n    config: accordionSpringConfig,\n  })\n\n  return (\n    <AnimatedAccordionPanel\n      style={animation}\n      // We need to set hidden to false for the exit animations to work\n      // but the panel should still be hidden from the accessibility tree\n      // when the panel is closed. We'll use aria-hidden instead.\n      hidden={false}\n      aria-hidden={!isExpanded || undefined}\n      {...props}\n    >\n      <div ref={ref} className={cx(\"cobalt-accordion__panel\", className)}>\n        {children}\n      </div>\n    </AnimatedAccordionPanel>\n  )\n}\nAccordionItemPanel.displayName = \"Accordion.Item.Panel\"\n\nexport const AccordionItem = ({\n  children,\n  className,\n  ...props\n}: AccordionItemPropsType) => {\n  return (\n    <ReachAccordionItem\n      className={cx(\"cobalt-accordions-list__item\", className)}\n      {...props}\n    >\n      {children}\n    </ReachAccordionItem>\n  )\n}\nAccordionItem.displayName = \"Accordion.Item\"\nAccordionItem.Header = AccordionItemHeader\nAccordionItem.Panel = AccordionItemPanel\n\nconst Accordion = ({\n  className,\n  children,\n  index,\n  collapsible = true,\n  multiple = false,\n  ...props\n}: AccordionPropsType) => {\n  const hasIndex = index === 0 || !!index\n  return (\n    <ReachAccordion\n      className={cx(\"cobalt-accordions-list\", className)}\n      collapsible={!hasIndex && collapsible}\n      multiple={!hasIndex && multiple}\n      index={index}\n      {...props}\n    >\n      {children}\n    </ReachAccordion>\n  )\n}\nAccordion.Item = AccordionItem\n\nexport default Accordion\n"],"names":["ReachAccordionButton","ReachAccordionPanel","ReachAccordionItem","ReachAccordion"],"mappings":"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"}

package/components/Form/Hint.js

@@ -29,8 +29,8 @@ const getIconColor = (status) => {
         }
     }
 };
-const Hint = ({ children, status }) => {
-    return (React.createElement("div", { className: cx("cobalt-Hint", {
+const Hint = ({ children, status, className }) => {
+    return (React.createElement("div", { className: cx("cobalt-Hint", className, {
             "cobalt-Hint--success": status === "success",
             "cobalt-Hint--error": status === "error",
         }) },

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  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 \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\n    }\n    default: {\n      return \"graphiteLight\"\n    }\n  }\n}\n\nexport const Hint = ({ children, status }: HintPropsType) => {\n  return (\n    <div\n      className={classNames(\"cobalt-Hint\", {\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":";;;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,OAAO,GAAG,CAAC,MAAqC,KAAI;AACxD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;AAC7D,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAEY,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAiB,KAAI;AAC1D,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,EAAU,CAAC,aAAa,EAAE;YACnC,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 \"signal\"\n    }\n    case \"error\": {\n      return \"essence\"\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;AACxD,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,aAAa,CAAA;AACrB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,+BAA+B,CAAA;AACvC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,MAAM,CAAA;AACd,SAAA;AACF,KAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAqC,KAAI;AAC7D,IAAA,QAAQ,MAAM;QACZ,KAAK,SAAS,EAAE;AACd,YAAA,OAAO,QAAQ,CAAA;AAChB,SAAA;QACD,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS,CAAA;AACjB,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,eAAe,CAAA;AACvB,SAAA;AACF,KAAA;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/Modal/ModalHeader.js

@@ -7,7 +7,7 @@ const ModalHeader = ({ title, close, }) => (React.createElement("div", { classNa
     close && (React.createElement("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close },
         React.createElement(VisuallyHidden, null, "Close"),
         React.createElement("span", { "aria-hidden": true },
-            React.createElement(Icon, { source: "close", color: "graphiteLight" }))))));
+            React.createElement(Icon, { source: "close", color: "subdued" }))))));
 
 export { ModalHeader as default };
 //# sourceMappingURL=ModalHeader.js.map

package/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport VisuallyHidden from \"@reach/visually-hidden\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: string\n  close?: () => void\n}) => (\n  <div className=\"cobalt-modal-header\">\n    <h2 className=\"cobalt-modal-header__title\">{title}</h2>\n    {close && (\n      <button\n        type=\"button\"\n        className=\"cobalt-modal-header__close-button\"\n        onClick={close}\n      >\n        <VisuallyHidden>Close</VisuallyHidden>\n        <span aria-hidden>\n          <Icon source=\"close\" color=\"graphiteLight\" />\n        </span>\n      </button>\n    )}\n  </div>\n)\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,MACC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;AAClC,IAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAM;AACtD,IAAA,KAAK,KACJ,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA;AAEd,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAuB,IAAA,EAAA,OAAA,CAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,GAAG,CACxC,CACA,CACV,CACG;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport VisuallyHidden from \"@reach/visually-hidden\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: string\n  close?: () => void\n}) => (\n  <div className=\"cobalt-modal-header\">\n    <h2 className=\"cobalt-modal-header__title\">{title}</h2>\n    {close && (\n      <button\n        type=\"button\"\n        className=\"cobalt-modal-header__close-button\"\n        onClick={close}\n      >\n        <VisuallyHidden>Close</VisuallyHidden>\n        <span aria-hidden>\n          <Icon source=\"close\" color=\"subdued\" />\n        </span>\n      </button>\n    )}\n  </div>\n)\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,MACC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;AAClC,IAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAM;AACtD,IAAA,KAAK,KACJ,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA;AAEd,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAuB,IAAA,EAAA,OAAA,CAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAClC,CACA,CACV,CACG;;;;"}

package/components/Pill/index.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 const ICON_SIZE = 20;
-const Pill = ({ icon, color = "indigo", children, overlayed, className, size, }) => {
+const Pill = ({ icon, color = "base", children, overlayed, className, size, }) => {
     const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
         React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "white" : color }))) : null;
     return (React.createElement("div", { className: cx(className, "cobalt-Pill", {

package/components/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"indigo\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,QAAQ,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"base\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}

package/components/PriceTable/index.js

@@ -6,7 +6,8 @@ const PriceTableRow = ({ label, value, discounted = false, }) => (React.createEl
     React.createElement("div", { className: "cobalt-PriceTable__Label" }, label),
     React.createElement("div", { className: cx("cobalt-PriceTable__Value", {
             "cobalt-PriceTable__Value--discount": discounted,
-        }) }, value)));
+        }) }, value)));
+PriceTable.Row = PriceTableRow;
 
-export { PriceTable, PriceTableRow };
+export { PriceTable, PriceTableRow, PriceTable as default };
 //# sourceMappingURL=index.js.map

package/components/PriceTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}

package/components/Rating/RatingCompact.js

@@ -2,12 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import { RatingIcon, defaultRatingIcon } from './RatingIcons.js';
 import RatingLabel from './RatingLabel.js';
+import { formatRatingValue } from './index.js';
 
-function RatingCompact({ className, value, count, icon = defaultRatingIcon, }) {
+function RatingCompact({ className, value, count, size = 16, icon = defaultRatingIcon, }) {
     return (React.createElement("div", { className: cx("cobalt-rating", className) },
-        React.createElement(RatingIcon, { icon: icon, size: 16, status: "full" }),
+        React.createElement(RatingIcon, { icon: icon, size: size, status: "full" }),
         React.createElement(RatingLabel, null,
-            value,
+            formatRatingValue(value),
             " ",
             count && `(${count})`)));
 }

package/components/Rating/RatingCompact.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={16} status={\"full\"} />\n      <RatingLabel>\n        {value} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAiBgB,SAAA,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACpD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,KAAK;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CAClB,CACV,EACP;AACH;;;;"}
+{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\nimport { formatRatingValue } from \".\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  size = 16,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={size} status={\"full\"} />\n      <RatingLabel>\n        {formatRatingValue(value)} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;SAkBgB,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,EAAE,EACT,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,iBAAiB,CAAC,KAAK,CAAC;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CACrC,CACV,EACP;AACH;;;;"}

package/components/Rating/index.js

@@ -3,11 +3,14 @@ import React from 'react';
 import { RatingIcons } from './RatingIcons.js';
 export { RatingIcons } from './RatingIcons.js';
 
+function formatRatingValue(value) {
+    return `${value}`.includes(".") ? value : value.toFixed(1);
+}
 function Rating({ className, iconsClassName, children, ...iconsProps }) {
     return (React.createElement("div", { className: cx("cobalt-rating", className) },
         React.createElement(RatingIcons, { className: iconsClassName, ...iconsProps }),
         children));
 }
 
-export { Rating };
+export { Rating, formatRatingValue };
 //# sourceMappingURL=index.js.map

package/components/Rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport { RatingCompact } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {\n  iconsClassName?: RatingIconsPropsType[\"className\"]\n}\n\nfunction Rating({\n  className,\n  iconsClassName,\n  children,\n  ...iconsProps\n}: RatingPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcons className={iconsClassName} {...iconsProps} />\n      {children}\n    </div>\n  )\n}\n\nexport { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons }\n"],"names":[],"mappings":";;;;;AAWA,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAA,GAAM,UAAU,EAAI,CAAA;QACzD,QAAQ,CACL,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Rating/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport React from \"react\"\nimport { RatingIcons, RatingIconsPropsType } from \"./RatingIcons\"\nimport { RatingInput } from \"./RatingInput\"\nimport { RatingCompact } from \"./RatingCompact\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {\n  iconsClassName?: RatingIconsPropsType[\"className\"]\n}\n\nfunction formatRatingValue(value: number) {\n  return `${value}`.includes(\".\") ? value : value.toFixed(1)\n}\n\nfunction Rating({\n  className,\n  iconsClassName,\n  children,\n  ...iconsProps\n}: RatingPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcons className={iconsClassName} {...iconsProps} />\n      {children}\n    </div>\n  )\n}\n\nexport {\n  Rating,\n  RatingLabel,\n  RatingInput,\n  RatingCompact,\n  RatingIcons,\n  formatRatingValue,\n}\n"],"names":[],"mappings":";;;;;AAWA,SAAS,iBAAiB,CAAC,KAAa,EAAA;IACtC,OAAO,CAAA,EAAG,KAAK,CAAE,CAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC5D,CAAC;AAED,SAAS,MAAM,CAAC,EACd,SAAS,EACT,cAAc,EACd,QAAQ,EACR,GAAG,UAAU,EACG,EAAA;IAChB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,SAAS,EAAE,cAAc,EAAA,GAAM,UAAU,EAAI,CAAA;QACzD,QAAQ,CACL,EACP;AACH;;;;"}

package/components/Tabs/index.js

@@ -3,7 +3,9 @@ import { Tabs as Tabs$1, TabList, TabPanels, TabPanel, Tab as Tab$1 } from '@rea
 import cx from 'classnames';
 import { useSpring } from '@react-spring/web';
 import throttle from 'lodash.throttle';
-import { Icon } from '../Icon/index.js';
+import '../Icon/index.js';
+import ChevronLeftIcon from '../Icon/__generated__/ChevronLeftIcon.js';
+import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
 
 const SCROLL_STEP = 150;
 // Only for the API, render nothing, we use InternalTab component internally
@@ -125,10 +127,10 @@ const Tabs = ({ children, defaultTabIndex, onChange, subLevel, }) => {
         isScrollable && (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "cobalt-tabs__nav-prev", onClick: onScrollPrev, disabled: !scrollButtonsEnabled.prev },
                 React.createElement("span", { className: "cobalt-tabs__nav-icon" },
-                    React.createElement(Icon, { source: "chevronLeft", color: "indigo" }))),
+                    React.createElement(ChevronLeftIcon, { color: "accent" }))),
             React.createElement("button", { className: "cobalt-tabs__nav-next", onClick: onScrollNext, disabled: !scrollButtonsEnabled.next },
                 React.createElement("span", { className: "cobalt-tabs__nav-icon" },
-                    React.createElement(Icon, { source: "chevronRight", color: "indigo" }))))),
+                    React.createElement(ChevronRightIcon, { color: "accent" }))))),
         !!tabsChildren.length && (React.createElement(TabPanels, null, tabsChildren.map((tabChildren, index) => (React.createElement(TabPanel, { className: "cobalt-tabs__panel", key: index }, tabChildren)))))));
 };
 Tabs.Tab = Tab;

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, {\n  FC,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { Icon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab: FC<TabPropsType> = () => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<React.PropsWithChildren<TabPropsType>> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      {...props}\n      {...(href ? { href, as: \"a\" } : { as: \"button\" })}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs: FC<TabsPropsType> & { Tab: FC<TabPropsType> } = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: typeof children[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronLeft\" color=\"indigo\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <Icon source=\"chevronRight\" color=\"indigo\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, {\n  FC,\n  useRef,\n  useLayoutEffect,\n  useState,\n  useCallback,\n} from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab: FC<TabPropsType> = () => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<React.PropsWithChildren<TabPropsType>> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      {...props}\n      {...(href ? { href, as: \"a\" } : { as: \"button\" })}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs: FC<TabsPropsType> & { Tab: FC<TabPropsType> } = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: typeof children[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronLeftIcon color=\"accent\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronRightIcon color=\"accent\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}

package/components/Tag/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-const Tag = ({ children, variant }) => (React.createElement("div", { className: cx("cobalt-Tag", {
+const Tag = ({ children, variant, className }) => (React.createElement("div", { className: cx("cobalt-Tag", className, {
         "cobalt-Tag--muted": variant === "muted",
         "cobalt-Tag--important": variant === "important",
     }) }, children));

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n  children: React.ReactNode\n  variant?: \"muted\" | \"important\"\n}\n\nexport const Tag = ({ children, variant }: TagProps) => (\n  <div\n    className={cx(\"cobalt-Tag\", {\n      \"cobalt-Tag--muted\": variant === \"muted\",\n      \"cobalt-Tag--important\": variant === \"important\",\n    })}\n  >\n    {children}\n  </div>\n)\n"],"names":[],"mappings":";;;MAQa,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAY,MACjD,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE;QAC1B,mBAAmB,EAAE,OAAO,KAAK,OAAO;QACxC,uBAAuB,EAAE,OAAO,KAAK,WAAW;AACjD,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n  children: React.ReactNode\n  className?: string\n  variant?: \"muted\" | \"important\"\n}\n\nexport const Tag = ({ children, variant, className }: TagProps) => (\n  <div\n    className={cx(\"cobalt-Tag\", className, {\n      \"cobalt-Tag--muted\": variant === \"muted\",\n      \"cobalt-Tag--important\": variant === \"important\",\n    })}\n  >\n    {children}\n  </div>\n)\n"],"names":[],"mappings":";;;AASa,MAAA,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAY,MAC5D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;QACrC,mBAAmB,EAAE,OAAO,KAAK,OAAO;QACxC,uBAAuB,EAAE,OAAO,KAAK,WAAW;AACjD,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}

package/index.js

@@ -32,7 +32,7 @@ export { ComposedField } from './components/Form/ComposedField.js';
 export { withFieldLabelAndHint } from './components/Form/field.js';
 export { Fieldset } from './components/Form/Fieldset.js';
 export { Hint } from './components/Form/Hint.js';
-export { Rating } from './components/Rating/index.js';
+export { Rating, formatRatingValue } from './components/Rating/index.js';
 export { Select } from './components/Form/Select.js';
 export { default as Slider, SliderValueMeta } from './components/Form/Slider.js';
 export { Stepper, StepperMeta } from './components/Form/Stepper.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -62,12 +62,12 @@
     "@types/jest": "27.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.48",
+    "@types/react": "17.0.49",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "autoprefixer": "10.4.8",
     "core-js": "3.24.1",
     "css-loader": "6.7.1",
-    "eslint": "8.22.0",
+    "eslint": "8.23.0",
     "jest": "27.5.1",
     "nested-object-access": "^0.2.5",
     "np": "7.6.2",
@@ -79,12 +79,12 @@
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.78.1",
+    "rollup": "2.79.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
     "rollup-plugin-typescript2": "0.33.0",
-    "sass": "1.54.5",
+    "sass": "1.54.8",
     "sass-loader": "12.6.0",
     "sharp": "0.30.7",
     "sharp-cli": "2.1.1",
@@ -138,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.48"
+    "@types/react": "17.0.49"
   }
 }

package/styles/components/Accordion/index.scss

@@ -11,6 +11,7 @@
     width: 100%;
     display: flex;
     padding: spacing(sm);
+
     border: 0;
 
     font-family: font-family(base);
@@ -20,6 +21,12 @@
     // Disable reach-ui styles
     background: transparent;
 
+    gap: spacing(sm);
+
+    &--left-toggle-icon {
+      flex-direction: row-reverse;
+    }
+
     &-content {
       width: 100%;
 

package/styles/components/Buttons/DefaultButton/index.scss

@@ -52,6 +52,6 @@
   &--selected {
     @include semantic-color(selected, buttonBackground, background-color);
     @include semantic-color(selected, buttonLabel, color);
-    @include semantic-color(accentAlt, stroke, border-color);
+    @include border-color(accent);
   }
 }

package/styles/components/Helper/index.scss

@@ -1,12 +1,16 @@
 .cobalt-helper {
+  @include border(base);
+  @include bg-color(secondary);
   padding: spacing(sm);
 
+  // FIXME: remove when releasing semantics color
   background-color: fade-out(color(purple), 0.92);
+
   border-radius: border-radius(xl);
 
   &__title {
     @include text-style-title-small;
-    color: color(graphite);
+    @include text-color(base);
   }
 
   &__content {

package/styles/components/Modal/index.scss

@@ -71,26 +71,21 @@ $reach-ui-dialog-margin-top: 10vh;
   }
 
   &-footer {
-    /* FIXME border function doesn't handle color variant */
-    border-top: border(grey);
-    border-color: color(grey, light);
+    @include border-top(base);
     padding: spacing(sm);
   }
 
   &-header {
+    @include border-bottom(base);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: spacing(md);
-    /* FIXME border function doesn't handle color variant */
-    border-bottom: border(grey);
-    border-color: color(grey, light);
 
     &__title {
       @include c-text-title-md;
+      @include text-color(base);
       margin: spacing(none);
-
-      color: color(indigo, dark);
     }
 
     &__close-button {

package/styles/components/Note/index.scss

@@ -2,14 +2,13 @@
   &Note {
     @include text-style-body;
     @include text-style--bodySubdued;
+    @include bg-color(info);
 
     display: inline-block;
 
-    padding: spacing(tight);
+    padding: spacing(sm);
 
-    background-color: color(acier, lighter);
-
-    border-radius: border-radius(x-large);
+    border-radius: border-radius(lg);
   }
 
   &Note--fullWidth {

package/styles/components/PhotoDropzone/index.scss

@@ -1,4 +1,6 @@
 .cobalt-photo-dropzone {
+  @include bg-color(neutralAlt);
+  @include border(accentAlt, default, dashed);
   position: relative;
 
   display: flex;
@@ -7,13 +9,11 @@
   height: 100%;
   width: 100%;
   min-height: 14rem;
-  border: border(purple, default, dashed);
 
   text-align: center;
 
   border-radius: border-radius(xl);
   cursor: pointer;
-  background-color: color(grey, lighter);
 
   transition: background-color 0.25s;
 }
@@ -31,6 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
+  // FIXME NEW COLORS: this background doesn't match any semantic color
   background-color: #f6e5f5;
 
   transition: background-color 0.25s;
@@ -42,20 +43,17 @@
 }
 
 .cobalt-photo-dropzone--loading {
-  border-color: color(grey, light);
+  @include bg-color(neutral);
+  @include text-color(accent);
   border-style: solid;
 
-  color: color(indigo, dark);
-
   cursor: default;
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone--errored {
-  border-color: color(red);
+  @include bg-color(neutral);
+  @include border-color(error);
   border-style: solid;
-
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone__description {
@@ -66,7 +64,7 @@
 }
 
 .cobalt-photo-dropzone__description--strong {
-  color: color(purple);
+  @include text-color(accent);
   font-weight: 700;
 }
 
@@ -79,6 +77,7 @@
 }
 
 .cobalt-photo-dropzone__delete-button {
+  @include bg-color(neutralAlt);
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -89,7 +88,6 @@
   border: 0;
 
   border-radius: border-radius(full);
-  background: color(white);
   cursor: pointer;
   opacity: 0;
 

package/styles/components/Pill/index.scss

@@ -1,44 +1,43 @@
 $pill-height: 28px;
-$group-item-spacing: spacing(extra-tight);
+$group-item-spacing: spacing(xs);
 
 .cobalt- {
   &Pill {
+    @include bg-color(neutralAlt);
+    @include text-color(base);
     display: inline-flex;
     align-items: center;
 
     height: $pill-height;
-    padding: spacing(unit) spacing(tight);
+    padding: spacing("2xs") spacing(sm);
 
     font-size: 13px;
     white-space: nowrap;
 
-    color: color(indigo);
-
     border-radius: $pill-height;
-
-    background-color: color(acier, lighter);
   }
 
   &Pill--large {
     $pill-height: 40px;
     height: $pill-height;
-    padding: spacing(extra-tight) spacing();
+    padding: spacing(xs) spacing();
 
     border-radius: $pill-height;
   }
 
   &Pill--colorAller {
-    color: color(aller);
+    @include text-color(connect);
   }
 
   &Pill--overlayed {
-    color: color(white);
+    @include text-color(inversed);
 
+    // FIXME NEW COLORS: this background doesn't match any semantic color
     background-color: rgba(color(graphite), 0.5);
   }
 
   &Pill__Icon {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
   }
 
   &PillGroup {

package/styles/components/PriceTable/index.scss

@@ -6,12 +6,12 @@
     justify-content: space-between;
 
     &:not(:last-child) {
-      margin-bottom: spacing(tight);
+      margin-bottom: spacing(sm);
     }
   }
 
   &PriceTable__Label {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
     width: 100%;
   }
 
@@ -20,11 +20,11 @@
     white-space: nowrap;
 
     &--discount {
-      color: color(signal);
+      @include text-color(success);
     }
 
     &:empty:before {
-      color: color(graphite, light);
+      @include text-color(subdued);
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBar/index.scss

@@ -7,7 +7,7 @@
 
   &ProgressBar__Progression {
     @include text-style-title;
-    color: color(aller);
+    @include text-color(infoAlt);
   }
 
   &ProgressBar__Title {
@@ -16,42 +16,42 @@
 
   &ProgressBar__CompletedCheckbox {
     path {
-      fill: color(aller);
+      @include fill-color(secondary);
     }
   }
 
   &ProgressBar__Container {
+    @include bg-color(neutral);
     position: relative;
 
-    margin-top: spacing(tight);
+    margin-top: spacing(sm);
 
-    height: spacing(unit);
+    height: spacing("2xs");
     width: 100%;
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 
   &ProgressBar__Foreground {
+    @include semantic-color(secondary, fill, background-color);
     position: absolute;
     left: 0;
     top: 0;
 
-    height: spacing(unit);
+    height: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(aller);
   }
 
   &ProgressBar__Tick {
+    @include bg-color(neutral);
     position: absolute;
     top: -6px;
     right: 0;
 
-    height: 4 * spacing(unit);
-    width: spacing(unit);
+    height: 4 * spacing("2xs");
+    width: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 }

package/styles/components/Tabs/index.scss

@@ -101,6 +101,8 @@ $scrollButtonWidth: 2rem;
 }
 
 .cobalt-tabs__label {
+  @include text-color(subdued);
+  @include bg-color(secondaryInteractive);
   position: relative;
 
   display: flex;
@@ -116,7 +118,6 @@ $scrollButtonWidth: 2rem;
   font-size: 1rem;
   line-height: 1;
   text-transform: uppercase;
-  color: color(graphite, light);
   font-family: font-family(brand);
   font-weight: 700;
 
@@ -126,11 +127,6 @@ $scrollButtonWidth: 2rem;
 
   transition: 0.2s color;
 
-  &:hover,
-  &:focus {
-    background: color(acier, lighter);
-  }
-
   &:after {
     position: absolute;
     bottom: 0;
@@ -149,10 +145,10 @@ $scrollButtonWidth: 2rem;
   }
 
   &.cobalt-tabs__label--selected {
-    color: color(asphalt);
+    @include text-color(base);
 
     &:after {
-      background: color(purple);
+      @include semantic-color(accent, fill, background-color);
 
       transform: scaleX(1);
     }

package/styles/components/Tag/index.scss

@@ -1,26 +1,24 @@
 .cobalt- {
   &Tag {
+    @include bg-color(neutral);
     display: inline-block;
 
-    padding: spacing(unit) spacing(extra-tight);
+    padding: spacing("2xs") spacing(xs);
 
     font-size: 13px;
 
     font-weight: 600;
 
-    background-color: color(acier, light);
-
     border-radius: border-radius();
   }
 
   &Tag--muted {
-    color: color(graphite, light);
-
-    background-color: color(acier, lighter);
+    @include text-color(subdued);
+    @include bg-color(neutralAlt);
   }
 
   &Tag--important {
-    color: color(essence);
+    @include text-color(error);
 
     background-color: lighten(color(essence), 24);
   }

package/styles/core/_colors-map.scss

@@ -176,7 +176,7 @@ $theme-colors-map: (
       hover: var(--c-l-indigo),
       press: var(--c-l-indigo-dark)
     ),
-    accentAlt: var(--c-l-indigo),
+    accentAlt: var(--c-l-purple),
     base: var(--c-l-grey),
     baseInteractive: (
       DEFAULT: var(--c-l-grey),

package/styles/core/border.scss

@@ -13,7 +13,7 @@ $border-style-data: (
   dashed: dashed
 );
 
-@mixin border-style($style: solid, $position) {
+@mixin border-style($style: solid, $position: "") {
   $styleValue: map-get($border-style-data, $style);
   @if type-of($styleValue) != string {
     @error "Border style `#{$style}` not found.";
@@ -33,7 +33,7 @@ $border-style-data: (
   }
 }
 
-@mixin border-width($size: default, $position) {
+@mixin border-width($size: default, $position: "") {
   $sizeValue: map-get($border-size-data, $size);
   @if type-of($sizeValue) != number {
     @error "Border size `#{$size}` not found.";

package/styles/core/theme.scss

@@ -113,7 +113,7 @@
   --c-stroke-accentInteractive: var(--c-l-indigo);
   --c-stroke-accentInteractive--hover: var(--c-l-indigo);
   --c-stroke-accentInteractive--press: var(--c-l-indigo-dark);
-  --c-stroke-accentAlt: var(--c-l-indigo);
+  --c-stroke-accentAlt: var(--c-l-purple);
   --c-stroke-base: var(--c-l-grey);
   --c-stroke-baseInteractive: var(--c-l-grey);
   --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);

package/tokens/theme.js

@@ -171,7 +171,7 @@ const stroke = {
 		hover: "indigo/purple.700/purpleDeep.400",
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.300/purpleDeep.700",
+	accentAlt: "purple/purple.300/purpleDeep.700",
 	base: "grey/navy.100/black.50",
 	baseInteractive: {
 		DEFAULT: "grey/navy.100/black.50",

package/types/components/Accordion/index.d.ts

@@ -18,6 +18,7 @@ export declare type AccordionItemHeaderPropsType = {
      */
     headingLevel?: HeadingLevelMapType[HeadingTag];
     className?: string;
+    leftToggleIcon?: boolean;
 } & ReachAccordionButtonProps;
 export declare type AccordionItemPanelPropsType = {
     className?: string;
@@ -42,6 +43,7 @@ export declare const AccordionItemHeader: React.ForwardRefExoticComponent<{
      */
     headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
     className?: string | undefined;
+    leftToggleIcon?: boolean | undefined;
 } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const AccordionItemPanel: {
     ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;
@@ -59,6 +61,7 @@ export declare const AccordionItem: {
          */
         headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
         className?: string | undefined;
+        leftToggleIcon?: boolean | undefined;
     } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
     Panel: {
         ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;
@@ -79,6 +82,7 @@ declare const Accordion: {
              */
             headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
             className?: string | undefined;
+            leftToggleIcon?: boolean | undefined;
         } & ReachAccordionButtonProps & React.RefAttributes<HTMLButtonElement>>;
         Panel: {
             ({ children, className, ...props }: AccordionItemPanelPropsType): JSX.Element;

package/types/components/Form/Hint.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { FormElementStatus } from "./form";
 export interface HintPropsType {
+    className?: string;
     children: React.ReactNode;
     status?: FormElementStatus;
 }
-export declare const Hint: ({ children, status }: HintPropsType) => JSX.Element;
+export declare const Hint: ({ children, status, className }: HintPropsType) => JSX.Element;

package/types/components/PriceTable/index.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
-export declare const PriceTable: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
+export declare const PriceTable: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): JSX.Element;
+    Row: ({ label, value, discounted, }: PriceTableRowProps) => JSX.Element;
+};
 interface PriceTableRowProps {
     label: string;
     value: string;
     discounted?: boolean;
 }
 export declare const PriceTableRow: ({ label, value, discounted, }: PriceTableRowProps) => JSX.Element;
-export {};
+export default PriceTable;

package/types/components/Rating/RatingCompact.d.ts

@@ -4,5 +4,5 @@ declare type RatingCompactPropsType = Pick<RatingIconsPropsType, "className" | "
     icon?: JSX.Element;
     count?: number;
 };
-export declare function RatingCompact({ className, value, count, icon, }: RatingCompactPropsType): JSX.Element;
+export declare function RatingCompact({ className, value, count, size, icon, }: RatingCompactPropsType): JSX.Element;
 export {};

package/types/components/Rating/index.d.ts

@@ -6,5 +6,6 @@ import RatingLabel from "./RatingLabel";
 declare type RatingPropsType = React.PropsWithChildren<RatingIconsPropsType> & {
     iconsClassName?: RatingIconsPropsType["className"];
 };
+declare function formatRatingValue(value: number): string | number;
 declare function Rating({ className, iconsClassName, children, ...iconsProps }: RatingPropsType): JSX.Element;
-export { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons };
+export { Rating, RatingLabel, RatingInput, RatingCompact, RatingIcons, formatRatingValue, };

package/types/components/Tag/index.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface TagProps {
     children: React.ReactNode;
+    className?: string;
     variant?: "muted" | "important";
 }
-export declare const Tag: ({ children, variant }: TagProps) => JSX.Element;
+export declare const Tag: ({ children, variant, className }: TagProps) => JSX.Element;

package/utilities.css

@@ -3830,7 +3830,7 @@
 }
 
 .c-border-accentAlt {
-  border-color: #61366b
+  border-color: #b01aa7
 }
 
 .c-border-base {