@drivy/cobalt 1.1.3 → 1.1.4

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "1.1.3",
+  "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;
 

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

@@ -47,21 +47,20 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: spacing(md);
+    @apply c-gap-md;
 
     @include breakpoint($from: sm) {
       flex-direction: row;
-      gap: spacing(sm);
+      @apply c-gap-sm;
     }
   }
 
   &__month {
-    @include bg-color(secondary);
+    @apply c-bg-secondary;
   }
 
   &__month-header {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
     margin-bottom: 12px;
     padding: 4px;
 
@@ -87,7 +86,7 @@
   }
 
   &__month__day-header {
-    @include text-color(subdued);
+    @apply c-text-subdued;
     flex: 1;
 
     text-align: center;
@@ -97,7 +96,7 @@
   }
 
   &__day {
-    @include text-color(base);
+    @apply c-text-base;
 
     position: relative;
 
@@ -147,22 +146,22 @@
     }
 
     &--today {
-      @include text-color(accent);
+      @apply c-text-accent;
       font-weight: 600;
     }
 
     &--selected {
-      @include text-color(accent);
+      @apply c-text-accent;
 
       background-color: $calendar-range-day-color;
 
       .cobalt-CalendarRangePicker__day-notification {
-        @include bg-color(accent);
+        @apply c-bg-accent;
       }
     }
 
     &--disabled {
-      @include text-color(disabled);
+      @apply c-text-disabled;
 
       text-decoration: line-through;
     }
@@ -199,19 +198,19 @@
     }
 
     &--active:not(&--invalid) {
-      @include text-color(onAccent);
+      @apply c-text-onAccent;
     }
 
     &--active .cobalt-CalendarRangePicker__day-notification {
-      @include bg-color(primary);
+      @apply c-bg-primary;
     }
 
     &--active:not(&--invalid):after {
-      @include bg-color(accent);
+      @apply c-bg-accent;
     }
 
     &--invalid {
-      @include text-color(error);
+      @apply c-text-error;
 
       background-color: $calendar-range-day-invalid-color;
 
@@ -220,7 +219,7 @@
       }
 
       .cobalt-CalendarRangePicker__day-notification {
-        @include bg-color(error);
+        @apply c-bg-error;
       }
     }
 
@@ -228,13 +227,13 @@
         &--range
       ):not(&--startDay) {
       &:after {
-        @include bg-color(primary);
+        @apply c-bg-primary;
       }
     }
 
     &--endDay.cobalt-CalendarRangePicker__day--active.cobalt-CalendarRangePicker__day--invalid {
       &:after {
-        @include border(error);
+        @apply c-border-error;
         border-width: 2px;
       }
     }
@@ -242,7 +241,7 @@
     //Start day = end day
     &--startDay.cobalt-CalendarRangePicker__day--endDay {
       &:before {
-        @include border(onAccent);
+        @apply c-border-onAccent;
 
         position: absolute;
 
@@ -283,7 +282,7 @@
 
     margin: 0;
 
-    padding: 0 spacing(sm);
+    @apply c-py-none c-px-sm;
 
     height: 0;
 
@@ -306,7 +305,7 @@
 }
 
 .tippy-box[data-theme~="range-picker"] {
-  @include border(base);
+  @apply c-border-base;
 }
 
 .tippy-box[data-theme~="range-picker"] .tippy-arrow:after {

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

@@ -1,24 +1,25 @@
 @use "sass:math";
 
-$daySize: spacing(md);
+// Define $daySize using the Tailwind theme function
+$daySize: theme("spacing.md");
 
 .cobalt-CalendarView {
   display: flex;
 
-  gap: spacing(sm);
+  @apply c-gap-sm;
 
   &__monthName {
-    @include c-text-section-heading;
+    @apply c-text-section-heading;
   }
 
   &__week {
     display: flex;
 
-    gap: spacing(unit);
+    @apply c-gap-2xs;
   }
 
   &__day {
-    @include text-color(base);
+    @apply c-text-base;
 
     display: flex;
     align-items: center;
@@ -29,25 +30,22 @@ $daySize: spacing(md);
 
     font-size: 12px;
 
-    border-radius: math.div($daySize, 2);
+    border-radius: calc(#{$daySize} / 2);
 
     &--disabled {
-      @include bg-color(blocker);
-      @include text-color(subdued);
+      @apply c-bg-blocker c-text-subdued;
     }
 
     &--highlighted {
-      @include text-color(onRental);
-      @include bg-color(rental);
+      @apply c-text-onRental c-bg-rental;
     }
 
     &--semi-highlighted {
-      @include text-color(onRentalAlt);
-      @include bg-color(rentalAlt);
+      @apply c-text-onRentalAlt c-bg-rentalAlt;
     }
 
     &--past {
-      @include text-color(subdued);
+      @apply c-text-subdued;
       opacity: 0.4;
     }
   }