@drivy/cobalt 1.1.2 → 1.1.4

package/cjs/tokens/icons.js

@@ -253,6 +253,7 @@ const icons = {
 	skiRack: "ski-rack.svg",
 	slider: "slider.svg",
 	smartphone: "smartphone.svg",
+	smilingFace: "smiling-face.svg",
 	snowTire: "snow-tire.svg",
 	socialFacebook: "social-facebook.svg",
 	socialLinkedin: "social-linkedin.svg",

package/cjs/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/Form/Slider.js

@@ -24,7 +24,6 @@ const Slider = ({ defaultValue: _defaultValue, value: _value, min, max, disabled
         return [0];
     }
     const [sliderValue, setSliderValue] = useState(() => initValue());
-    console.log("className", className);
     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,

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  console.log(\"className\", className)\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 } 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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"}

package/components/Icon/__generated__/SmilingFaceIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "smilingFace";
+const SmilingFaceIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { fillRule: "evenodd", d: "M19.8 11.678a8.182 8.182 0 1 1-16.364 0 8.182 8.182 0 0 1 16.363 0m1.818 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10m-14.546-.455a.91.91 0 1 1 1.818 0h1.819a2.727 2.727 0 1 0-5.455 0zm4.546 4.546a4.6 4.6 0 0 1-4.174-2.652l-1.653.758a6.42 6.42 0 0 0 5.827 3.712 6.42 6.42 0 0 0 5.826-3.712l-1.653-.758a4.6 4.6 0 0 1-4.173 2.652m3.636-5.455a.91.91 0 0 0-.909.91h-1.818a2.727 2.727 0 0 1 5.454 0h-1.818a.91.91 0 0 0-.909-.91", clipRule: "evenodd" })));
+};
+
+export { SmilingFaceIcon as default };
+//# sourceMappingURL=SmilingFaceIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmilingFaceIcon.js","sources":["../../../../src/components/Icon/__generated__/SmilingFaceIcon.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 = \"smilingFace\"\nconst SmilingFaceIcon = ({\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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M19.8 11.678a8.182 8.182 0 1 1-16.364 0 8.182 8.182 0 0 1 16.363 0m1.818 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10m-14.546-.455a.91.91 0 1 1 1.818 0h1.819a2.727 2.727 0 1 0-5.455 0zm4.546 4.546a4.6 4.6 0 0 1-4.174-2.652l-1.653.758a6.42 6.42 0 0 0 5.827 3.712 6.42 6.42 0 0 0 5.826-3.712l-1.653-.758a4.6 4.6 0 0 1-4.173 2.652m3.636-5.455a.91.91 0 0 0-.909.91h-1.818a2.727 2.727 0 0 1 5.454 0h-1.818a.91.91 0 0 0-.909-.91\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  )\n}\nexport default SmilingFaceIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,aAAa,CAAA;AAChC,MAAM,eAAe,GAAG,CAAC,EACvB,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,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kcAAkc,EACpc,QAAQ,EAAC,SAAS,EAClB,CAAA,CACE,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/StarHalfIcon.js

@@ -13,8 +13,8 @@ const StarHalfIcon = ({ color, size = 24, contained = false, className, }) => {
         "cobalt-Icon--contained": contained,
     });
     const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
-    return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { d: "M12 3c-.42 0-.838.228-1.054.684L8.804 8.218l-4.797.731c-.963.147-1.348 1.384-.65 2.094l3.488 3.552-.838 4.967c-.165 1.003.843 1.768 1.705 1.294L12 18.53V3Z" })));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12 18.941V1.771a.2.2 0 0 0-.181.115L8.8 8.316a.2.2 0 0 1-.151.113L1.885 9.462a.2.2 0 0 0-.113.338l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .097-.025" })));
 };
 
 export { StarHalfIcon as default };

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

@@ -1 +1 @@
-{"version":3,"file":"StarHalfIcon.js","sources":["../../../../src/components/Icon/__generated__/StarHalfIcon.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 = \"starHalf\"\nconst StarHalfIcon = ({\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=\"M12 3c-.42 0-.838.228-1.054.684L8.804 8.218l-4.797.731c-.963.147-1.348 1.384-.65 2.094l3.488 3.552-.838 4.967c-.165 1.003.843 1.768 1.705 1.294L12 18.53V3Z\" />\n    </svg>\n  )\n}\nexport default StarHalfIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,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,6JAA6J,EAAG,CAAA,CACpK,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"StarHalfIcon.js","sources":["../../../../src/components/Icon/__generated__/StarHalfIcon.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 = \"starHalf\"\nconst StarHalfIcon = ({\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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M12 18.941V1.771a.2.2 0 0 0-.181.115L8.8 8.316a.2.2 0 0 1-.151.113L1.885 9.462a.2.2 0 0 0-.113.338l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .097-.025\" />\n    </svg>\n  )\n}\nexport default StarHalfIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,CAAC,EACpB,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,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qMAAqM,EAAG,CAAA,CAC5M,CACP,CAAA;AACH;;;;"}

package/components/Icon/__generated__/StarIcon.js

@@ -13,8 +13,8 @@ const StarIcon = ({ color, size = 24, contained = false, className, }) => {
         "cobalt-Icon--contained": contained,
     });
     const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
-    return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.712 20.856c-.862.474-1.87-.29-1.705-1.294l.838-4.967-3.489-3.552c-.697-.71-.312-1.947.651-2.094l4.797-.73 2.142-4.535a1.154 1.154 0 0 1 2.108 0l2.177 4.543 4.761.722c.964.147 1.35 1.384.652 2.094l-3.467 3.545.817 4.974c.164 1.003-.843 1.768-1.706 1.294l-4.262-2.34-4.314 2.34Z" })));
+    return wrap(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+        React.createElement("path", { d: "M12.181 1.886a.2.2 0 0 0-.362 0l-3.018 6.43a.2.2 0 0 1-.151.113L1.885 9.463a.2.2 0 0 0-.113.337l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .194 0l6.032 3.335a.2.2 0 0 0 .294-.207l-1.157-7.092a.2.2 0 0 1 .055-.172l4.907-5.03a.2.2 0 0 0-.113-.338L15.35 8.43a.2.2 0 0 1-.15-.113z" })));
 };
 
 export { StarIcon as default };

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

@@ -1 +1 @@
-{"version":3,"file":"StarIcon.js","sources":["../../../../src/components/Icon/__generated__/StarIcon.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 = \"star\"\nconst StarIcon = ({\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.712 20.856c-.862.474-1.87-.29-1.705-1.294l.838-4.967-3.489-3.552c-.697-.71-.312-1.947.651-2.094l4.797-.73 2.142-4.535a1.154 1.154 0 0 1 2.108 0l2.177 4.543 4.761.722c.964.147 1.35 1.384.652 2.094l-3.467 3.545.817 4.974c.164 1.003-.843 1.768-1.706 1.294l-4.262-2.34-4.314 2.34Z\"\n      />\n    </svg>\n  )\n}\nexport default StarIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAA;AACzB,MAAM,QAAQ,GAAG,CAAC,EAChB,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,yRAAyR,EAC3R,CAAA,CACE,CACP,CAAA;AACH;;;;"}
+{"version":3,"file":"StarIcon.js","sources":["../../../../src/components/Icon/__generated__/StarIcon.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 = \"star\"\nconst StarIcon = ({\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 xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M12.181 1.886a.2.2 0 0 0-.362 0l-3.018 6.43a.2.2 0 0 1-.151.113L1.885 9.463a.2.2 0 0 0-.113.337l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .194 0l6.032 3.335a.2.2 0 0 0 .294-.207l-1.157-7.092a.2.2 0 0 1 .055-.172l4.907-5.03a.2.2 0 0 0-.113-.338L15.35 8.43a.2.2 0 0 1-.15-.113z\" />\n    </svg>\n  )\n}\nexport default StarIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,MAAM,CAAA;AACzB,MAAM,QAAQ,GAAG,CAAC,EAChB,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,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,kUAAkU,EAAG,CAAA,CACzU,CACP,CAAA;AACH;;;;"}

package/icons/index.js

@@ -248,6 +248,7 @@ export { default as shop } from './shop.js';
 export { default as skiRack } from './ski-rack.js';
 export { default as slider } from './slider.js';
 export { default as smartphone } from './smartphone.js';
+export { default as smilingFace } from './smiling-face.js';
 export { default as snowTire } from './snow-tire.js';
 export { default as socialFacebook } from './social-facebook.js';
 export { default as socialLinkedin } from './social-linkedin.js';

package/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/icons/smiling-face.js

@@ -0,0 +1,4 @@
+var smilingFace = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M19.8 11.678a8.182 8.182 0 1 1-16.364 0 8.182 8.182 0 0 1 16.363 0m1.818 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10m-14.546-.455a.91.91 0 1 1 1.818 0h1.819a2.727 2.727 0 1 0-5.455 0zm4.546 4.546a4.6 4.6 0 0 1-4.174-2.652l-1.653.758a6.42 6.42 0 0 0 5.827 3.712 6.42 6.42 0 0 0 5.826-3.712l-1.653-.758a4.6 4.6 0 0 1-4.173 2.652m3.636-5.455a.91.91 0 0 0-.909.91h-1.818a2.727 2.727 0 0 1 5.454 0h-1.818a.91.91 0 0 0-.909-.91\" clip-rule=\"evenodd\"/></svg>";
+
+export { smilingFace as default };
+//# sourceMappingURL=smiling-face.js.map

package/icons/smiling-face.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smiling-face.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/icons/smiling-face.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.8 11.678a8.182 8.182 0 1 1-16.364 0 8.182 8.182 0 0 1 16.363 0m1.818 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10m-14.546-.455a.91.91 0 1 1 1.818 0h1.819a2.727 2.727 0 1 0-5.455 0zm4.546 4.546a4.6 4.6 0 0 1-4.174-2.652l-1.653.758a6.42 6.42 0 0 0 5.827 3.712 6.42 6.42 0 0 0 5.826-3.712l-1.653-.758a4.6 4.6 0 0 1-4.173 2.652m3.636-5.455a.91.91 0 0 0-.909.91h-1.818a2.727 2.727 0 0 1 5.454 0h-1.818a.91.91 0 0 0-.909-.91" clip-rule="evenodd"/></svg>

package/icons/star-half.js

@@ -1,4 +1,4 @@
-var starHalf = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3c-.42 0-.838.228-1.054.684L8.804 8.218l-4.797.731c-.963.147-1.348 1.384-.65 2.094l3.488 3.552-.838 4.967c-.165 1.003.843 1.768 1.705 1.294L12 18.53V3Z\"/></svg>";
+var starHalf = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 18.941V1.771a.2.2 0 0 0-.181.115L8.8 8.316a.2.2 0 0 1-.151.113L1.885 9.462a.2.2 0 0 0-.113.338l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .097-.025\"/></svg>";
 
 export { starHalf as default };
 //# sourceMappingURL=star-half.js.map

package/icons/star-half.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 3c-.42 0-.838.228-1.054.684L8.804 8.218l-4.797.731c-.963.147-1.348 1.384-.65 2.094l3.488 3.552-.838 4.967c-.165 1.003.843 1.768 1.705 1.294L12 18.53V3Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18.941V1.771a.2.2 0 0 0-.181.115L8.8 8.316a.2.2 0 0 1-.151.113L1.885 9.462a.2.2 0 0 0-.113.338l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .097-.025"/></svg>

package/icons/star.js

@@ -1,4 +1,4 @@
-var star = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.712 20.856c-.862.474-1.87-.29-1.705-1.294l.838-4.967-3.489-3.552c-.697-.71-.312-1.947.651-2.094l4.797-.73 2.142-4.535a1.154 1.154 0 0 1 2.108 0l2.177 4.543 4.761.722c.964.147 1.35 1.384.652 2.094l-3.467 3.545.817 4.974c.164 1.003-.843 1.768-1.706 1.294l-4.262-2.34-4.314 2.34Z\"/></svg>";
+var star = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12.181 1.886a.2.2 0 0 0-.362 0l-3.018 6.43a.2.2 0 0 1-.151.113L1.885 9.463a.2.2 0 0 0-.113.337l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .194 0l6.032 3.335a.2.2 0 0 0 .294-.207l-1.157-7.092a.2.2 0 0 1 .055-.172l4.907-5.03a.2.2 0 0 0-.113-.338L15.35 8.43a.2.2 0 0 1-.15-.113z\"/></svg>";
 
 export { star as default };
 //# sourceMappingURL=star.js.map

package/icons/star.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.712 20.856c-.862.474-1.87-.29-1.705-1.294l.838-4.967-3.489-3.552c-.697-.71-.312-1.947.651-2.094l4.797-.73 2.142-4.535a1.154 1.154 0 0 1 2.108 0l2.177 4.543 4.761.722c.964.147 1.35 1.384.652 2.094l-3.467 3.545.817 4.974c.164 1.003-.843 1.768-1.706 1.294l-4.262-2.34-4.314 2.34Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.181 1.886a.2.2 0 0 0-.362 0l-3.018 6.43a.2.2 0 0 1-.151.113L1.885 9.463a.2.2 0 0 0-.113.337l4.908 5.03a.2.2 0 0 1 .054.172l-1.157 7.091a.2.2 0 0 0 .294.208l6.032-3.335a.2.2 0 0 1 .194 0l6.032 3.335a.2.2 0 0 0 .294-.207l-1.157-7.092a.2.2 0 0 1 .055-.172l4.907-5.03a.2.2 0 0 0-.113-.338L15.35 8.43a.2.2 0 0 1-.15-.113z"/></svg>

package/index.js

@@ -304,6 +304,7 @@ export { default as ShopIcon } from './components/Icon/__generated__/ShopIcon.js
 export { default as SkiRackIcon } from './components/Icon/__generated__/SkiRackIcon.js';
 export { default as SliderIcon } from './components/Icon/__generated__/SliderIcon.js';
 export { default as SmartphoneIcon } from './components/Icon/__generated__/SmartphoneIcon.js';
+export { default as SmilingFaceIcon } from './components/Icon/__generated__/SmilingFaceIcon.js';
 export { default as SnowTireIcon } from './components/Icon/__generated__/SnowTireIcon.js';
 export { default as SocialFacebookIcon } from './components/Icon/__generated__/SocialFacebookIcon.js';
 export { default as SocialLinkedinIcon } from './components/Icon/__generated__/SocialLinkedinIcon.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",
@@ -9,7 +9,7 @@
     "*.scss"
   ],
   "engines": {
-    "node": ">=18.16.0"
+    "node": ">=22.14.0"
   },
   "module": "src/index.js",
   "license": "MIT",
@@ -19,7 +19,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@ark-ui/react": "4.9.1",
+    "@ark-ui/react": "4.9.2",
     "@juggle/resize-observer": "3.4.0",
     "@lottiefiles/react-lottie-player": "3.5.4",
     "@react-spring/web": "9.7.5",
@@ -28,8 +28,8 @@
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.0.9",
-    "postcss": "8.5.1",
+    "nanoid": "5.1.4",
+    "postcss": "8.5.3",
     "tailwindcss": "3.4.17",
     "tippy.js": "6.3.7"
   },
@@ -43,9 +43,9 @@
     "@getaround-eu/prettier-config": "1.2.1",
     "@getaround-eu/stylelint-config": "3.0.1",
     "@getaround-eu/ts-config": "2.2.1",
-    "@rollup/plugin-commonjs": "28.0.2",
+    "@rollup/plugin-commonjs": "28.0.3",
     "@rollup/plugin-json": "6.1.0",
-    "@rushstack/eslint-patch": "1.10.5",
+    "@rushstack/eslint-patch": "1.11.0",
     "@storybook/addon-essentials": "7.6.20",
     "@storybook/addons": "7.6.17",
     "@storybook/blocks": "7.6.20",
@@ -59,14 +59,14 @@
     "@types/jest": "29.5.14",
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
-    "@types/node": "20.17.16",
+    "@types/node": "22.13.10",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
-    "autoprefixer": "10.4.20",
-    "core-js": "3.40.0",
+    "autoprefixer": "10.4.21",
+    "core-js": "3.41.0",
     "css-loader": "7.1.2",
     "eslint": "8.57.1",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^0.11.6",
     "file-loader": "6.2.0",
     "fs-extra": "11.3.0",
     "html-entities": "2.5.2",
@@ -82,14 +82,14 @@
     "react-dom": "18.3.1",
     "react-syntax-highlighter": "15.6.1",
     "react-test-renderer": "18.3.1",
-    "react-textarea-autosize": "8.5.7",
+    "react-textarea-autosize": "8.5.8",
     "regenerator-runtime": "0.14.1",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.2",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.84.0",
+    "sass": "1.86.0",
     "sass-loader": "13.3.3",
     "sharp": "0.33.5",
     "sharp-cli": "5.1.0",
@@ -98,8 +98,8 @@
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.3.2",
-    "ts-jest": "29.2.5",
-    "tsx": "4.19.2",
+    "ts-jest": "29.2.6",
+    "tsx": "4.19.3",
     "typescript": "5.4.5"
   },
   "keywords": [

package/styles/components/BasicCell/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &BasicCell {
-    @include text-color(base);
+    @apply c-text-base;
 
     display: flex;
     align-items: center;
@@ -14,17 +14,16 @@
   }
 
   &BasicCell__Title {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
     margin-bottom: 0;
   }
 
   &BasicCell__Content {
-    @include c-text-body-md;
+    @apply c-text-body-md;
   }
 
   &BasicCell__Thumb {
-    @include bg-color(neutralAlt);
+    @apply c-bg-neutralAlt;
 
     display: flex;
     flex-direction: column;
@@ -42,22 +41,21 @@
   }
 
   &BasicCell__Thumb--square {
-    border-radius: border-radius(lg);
+    @apply c-rounded-lg;
   }
 
   &BasicCell__LeftAddon {
-    padding-right: spacing(sm);
+    @apply c-pr-sm;
   }
 
   &BasicCell__RightAddonIcon {
-    padding-left: spacing(sm);
+    @apply c-pl-sm;
     margin-left: auto;
   }
 
   &BasicCell--large {
     .cobalt-BasicCell__Title {
-      @include c-text-title-sm;
-      margin-bottom: spacing("2xs");
+      @apply c-text-title-sm c-mb-2xs;
     }
 
     .cobalt-BasicCell__Thumb {

package/styles/components/BulletList/index.scss

@@ -4,7 +4,7 @@
     align-items: center;
 
     &:not(:last-child) {
-      margin-bottom: spacing(sm);
+      @apply c-mb-sm;
     }
 
     .cobalt-BulletList--iconPositionTop & {
@@ -13,9 +13,9 @@
   }
 
   &BulletListItem__Icon {
+    @apply c-mr-xs;
     display: flex;
     flex-shrink: 0;
-    margin-right: spacing(xs);
   }
 
   &BulletListItem__Content {
@@ -26,7 +26,7 @@
     svg,
     use,
     g {
-      @include fill-color(subdued);
+      fill: theme("semanticFillColor.subdued");
     }
   }
 }

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

@@ -50,8 +50,8 @@
   &--selected:focus,
   &--selected:active,
   &--selected {
+    @apply c-border-accent;
     @include semantic-color(buttonBackground, selected, background-color);
     @include semantic-color(buttonLabel, selected, color);
-    @include border-color(accent);
   }
 }

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

@@ -22,12 +22,10 @@
   }
 
   &.cob-Button__ghost--standalone {
-    margin-left: #{spacing(md) * -1};
-    margin-right: #{spacing(md) * -1};
+    @apply c--mx-md;
 
     &.cob-Button--large {
-      margin-left: #{spacing(lg) * -1};
-      margin-right: #{spacing(lg) * -1};
+      @apply c--mx-lg;
     }
   }
 

package/styles/components/Buttons/index.scss

@@ -28,7 +28,7 @@
     $height: 40px,
     $line-height: 20px,
     $font-size: 16px,
-    $horizontal-padding: spacing(md)
+    $horizontal-padding: theme("spacing.md")
   );
 
   position: relative;
@@ -45,7 +45,7 @@
   text-align: center;
   white-space: normal;
 
-  border-radius: border-radius(md);
+  @apply c-rounded-md;
 
   cursor: pointer;
   user-select: none;
@@ -82,11 +82,11 @@
     margin-bottom: -2px;
 
     &--left {
-      margin-right: spacing(xs);
+      @apply c-mr-xs;
     }
 
     &--right {
-      margin-left: spacing(xs);
+      @apply c-ml-xs;
     }
   }
 
@@ -118,7 +118,7 @@
   }
 
   &--rounded {
-    border-radius: border-radius(full);
+    @apply c-rounded-full;
   }
 
   &--fullWidth {
@@ -134,16 +134,16 @@
       $height: 56px,
       $line-height: 24px,
       $font-size: 18px,
-      $horizontal-padding: spacing(lg)
+      $horizontal-padding: theme("spacing.lg")
     );
   }
 }
 
 .cobalt-buttons-group {
+  @apply c--mt-sm;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: -#{spacing(sm)};
 
   &--right {
     justify-content: flex-end;
@@ -154,12 +154,12 @@
   }
 
   &__item {
-    margin-top: spacing(sm);
+    @apply c-mt-sm;
 
     &:not(.cobalt-buttons-group__item--fullWidth):not(
         .cobalt-buttons-group__item--xs\:fullWidth
       ) {
-      margin-right: spacing(sm);
+      @apply c-mr-sm;
     }
 
     &--fullWidth {

package/styles/components/Calendar/CalendarDayPicker/index.scss

@@ -20,7 +20,7 @@
 
     content: "";
 
-    border-radius: 50%;
+    @apply c-rounded-full;
   }
 
   position: relative;
@@ -29,7 +29,7 @@
     &__months-container {
       flex-direction: column;
 
-      gap: spacing(sm);
+      @apply c-gap-sm;
     }
   }
 
@@ -42,13 +42,12 @@
   }
 
   &__month {
-    @include bg-color(secondary);
+    @apply c-bg-secondary;
     flex: 1;
   }
 
   &__month-header {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
     margin-bottom: 12px;
     padding: 4px;
 
@@ -74,7 +73,7 @@
   }
 
   &__month__day-header {
-    @include text-color(subdued);
+    @apply c-text-subdued;
     flex: 1;
 
     text-align: center;
@@ -111,7 +110,7 @@
     }
 
     &--today {
-      @include text-color(accent);
+      @apply c-text-accent;
       font-weight: 600;
     }
 
@@ -123,18 +122,18 @@
     &:not(&--disabled):not(&--selected):hover
       .cobalt-CalendarDayPicker__day-inner:after {
       @include disk;
-      @include bg-color(accentAlt);
+      @apply c-bg-accentAlt;
     }
 
     &--selected .cobalt-CalendarDayPicker__day-inner:after {
       @include disk;
-      @include bg-color(accent);
+      @apply c-bg-accent;
 
       box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
     }
 
     &--selected .cobalt-CalendarDayPicker__day-inner {
-      @include text-color(inversed);
+      @apply c-text-inversed;
       font-weight: 600;
     }
 
@@ -152,7 +151,7 @@
 
     margin: 0;
 
-    padding: 0 spacing(sm);
+    @apply c-py-none c-px-sm;
 
     height: 0;