@drivy/cobalt 2.17.0 → 2.19.0

package/cjs/tokens/icons.js

@@ -95,6 +95,7 @@ const icons = {
 	creditCardAdd: "credit-card-add.svg",
 	creditCardError: "credit-card-error.svg",
 	creditCard: "credit-card.svg",
+	crosshover: "crosshover.svg",
 	cruiseControl: "cruise-control.svg",
 	dashcam: "dashcam.svg",
 	directions: "directions.svg",
@@ -132,6 +133,7 @@ const icons = {
 	gift: "gift.svg",
 	gps: "gps.svg",
 	graphUp: "graph-up.svg",
+	handDollar: "hand-dollar.svg",
 	healing: "healing.svg",
 	heart: "heart.svg",
 	height: "height.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/Icon/__generated__/CrosshoverIcon.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cx from 'classnames';
+import 'lodash.throttle';
+import camelize from '../../utils/camelize.js';
+
+const iconSource = "crosshover";
+const CrosshoverIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`c-fill-${camelize(color || "")}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    return (jsx("span", { className: computedClassName, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [jsx("title", { children: iconSource }), jsx("path", { d: "m14.45 15.75-5.912 5.913-1.326-1.326 3.65-3.65H2.25v-1.875h8.612l-3.65-3.65 1.326-1.325zM16.788 3.663l-3.65 3.65h8.612v1.875h-8.612l3.65 3.65-1.326 1.325L9.55 8.25l5.913-5.913z" })] }) }));
+};
+
+export { CrosshoverIcon as default };
+//# sourceMappingURL=CrosshoverIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrosshoverIcon.js","sources":["../../../../src/components/Icon/__generated__/CrosshoverIcon.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { camelize } from \"../../utils\"\nimport type { IconColorsType } from \"../\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"crosshover\"\nconst CrosshoverIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    },\n  )\n  return (\n    <span className={computedClassName}>\n      {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <title>{iconSource}</title>\n          <path d=\"m14.45 15.75-5.912 5.913-1.326-1.326 3.65-3.65H2.25v-1.875h8.612l-3.65-3.65 1.326-1.325zM16.788 3.663l-3.65 3.65h8.612v1.875h-8.612l3.65 3.65-1.326 1.325L9.55 8.25l5.913-5.913z\" />\n        </svg>\n      }\n    </span>\n  )\n}\nexport default CrosshoverIcon\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AASA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;IACD,QACEA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAE9B,QAAA,EAAAC,IAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,QAAA,EAAA,CACzDD,GAAQ,CAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAU,EAAS,CAAA,EAC3BA,GAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,kLAAkL,EAAG,CAAA,CAAA,EAAA,CACzL,EAEH,CAAA,EACR;AACH;;;;"}

package/components/Icon/__generated__/HandDollarIcon.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cx from 'classnames';
+import 'lodash.throttle';
+import camelize from '../../utils/camelize.js';
+
+const iconSource = "handDollar";
+const HandDollarIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`c-fill-${camelize(color || "")}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    return (jsx("span", { className: computedClassName, children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [jsx("title", { children: iconSource }), jsx("path", { d: "M5.683 14.489c.493 0 .894.4.894.894v5.723c0 .493-.4.894-.894.894H3.894A.894.894 0 0 1 3 21.106v-5.723c0-.494.4-.894.894-.894zM11.763 14.488c1.172 0 2.165.752 2.53 1.799l-.11.07a5 5 0 0 1-2.436.636h-.341a.537.537 0 0 0 0 1.073h.341a6.06 6.06 0 0 0 2.97-.779l.011-.005.01-.007 3.46-2.155a2 2 0 0 1 1.636-.221c.233.128.444.306.602.544.323.484.285 1.033.13 1.473-.154.438-.444.84-.758 1.13l-2.523 2.343A6.03 6.03 0 0 1 13.183 22h-.88a8.3 8.3 0 0 1-2.615-.425l-2.038-.679V15.41l1.123-.561c.472-.236.992-.36 1.52-.36z" }), jsx("path", { fillRule: "evenodd", d: "M12.12 2a5.544 5.544 0 1 1 0 11.088A5.544 5.544 0 0 1 12.12 2m-.338 3.077c-.701.137-1.318.564-1.318 1.348 0 1.66 2.542 1.294 2.543 2.154 0 .305-.285.564-.81.564-.57 0-1.04-.22-1.41-.525l-.592.654c.439.427 1.048.67 1.587.754v.792h.924v-.807c.809-.168 1.34-.746 1.34-1.446 0-1.69-2.54-1.463-2.541-2.132 0-.275.292-.488.793-.488.455 0 .848.153 1.14.35l.493-.723a2.8 2.8 0 0 0-1.225-.502v-.8h-.924z", clipRule: "evenodd" })] }) }));
+};
+
+export { HandDollarIcon as default };
+//# sourceMappingURL=HandDollarIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandDollarIcon.js","sources":["../../../../src/components/Icon/__generated__/HandDollarIcon.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport { camelize } from \"../../utils\"\nimport type { IconColorsType } from \"../\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"handDollar\"\nconst HandDollarIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`c-fill-${camelize(color || \"\")}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    },\n  )\n  return (\n    <span className={computedClassName}>\n      {\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n          <title>{iconSource}</title>\n          <path d=\"M5.683 14.489c.493 0 .894.4.894.894v5.723c0 .493-.4.894-.894.894H3.894A.894.894 0 0 1 3 21.106v-5.723c0-.494.4-.894.894-.894zM11.763 14.488c1.172 0 2.165.752 2.53 1.799l-.11.07a5 5 0 0 1-2.436.636h-.341a.537.537 0 0 0 0 1.073h.341a6.06 6.06 0 0 0 2.97-.779l.011-.005.01-.007 3.46-2.155a2 2 0 0 1 1.636-.221c.233.128.444.306.602.544.323.484.285 1.033.13 1.473-.154.438-.444.84-.758 1.13l-2.523 2.343A6.03 6.03 0 0 1 13.183 22h-.88a8.3 8.3 0 0 1-2.615-.425l-2.038-.679V15.41l1.123-.561c.472-.236.992-.36 1.52-.36z\" />\n          <path\n            fillRule=\"evenodd\"\n            d=\"M12.12 2a5.544 5.544 0 1 1 0 11.088A5.544 5.544 0 0 1 12.12 2m-.338 3.077c-.701.137-1.318.564-1.318 1.348 0 1.66 2.542 1.294 2.543 2.154 0 .305-.285.564-.81.564-.57 0-1.04-.22-1.41-.525l-.592.654c.439.427 1.048.67 1.587.754v.792h.924v-.807c.809-.168 1.34-.746 1.34-1.446 0-1.69-2.54-1.463-2.541-2.132 0-.275.292-.488.793-.488.455 0 .848.153 1.14.35l.493-.723a2.8 2.8 0 0 0-1.225-.502v-.8h-.924z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      }\n    </span>\n  )\n}\nexport default HandDollarIcon\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;AASA,MAAM,UAAU,GAAG,YAAY,CAAA;AAC/B,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,OAAA,EAAU,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA,CAAE,GAAG,KAAK;QAC1C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AACD,IAAA,QACEA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,QAAA,EAE9BC,cAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,aACzDD,GAAQ,CAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAU,GAAS,EAC3BA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,igBAAigB,EAAG,CAAA,EAC5gBA,cACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4YAA4Y,EAC9Y,QAAQ,EAAC,SAAS,GAClB,CACE,EAAA,CAAA,EAAA,CAEH,EACR;AACH;;;;"}

package/components/MarketingNote/index.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+
+const MarketingNote = ({ children, title, icon, className, variant, }) => (jsxs("div", { className: cx(`cobalt-marketing-note cobalt-marketing-note--${variant}`, className), children: [icon && (jsx("div", { className: "cobalt-marketing-note__icon-container", children: icon })), jsxs("div", { className: "c-flex-1", children: [title && jsx("div", { className: "c-font-bold", children: title }), children] })] }));
+
+export { MarketingNote };
+//# sourceMappingURL=index.js.map

package/components/MarketingNote/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/MarketingNote/index.tsx"],"sourcesContent":["import cx from \"classnames\"\nimport type { PropsWithChildren } from \"react\"\n\nexport type MarketingNoteProps = PropsWithChildren<{\n  variant: \"success\" | \"tertiary\"\n  title?: string\n  icon?: React.JSX.Element\n  className?: string\n}>\n\nexport const MarketingNote = ({\n  children,\n  title,\n  icon,\n  className,\n  variant,\n}: MarketingNoteProps) => (\n  <div\n    className={cx(\n      `cobalt-marketing-note cobalt-marketing-note--${variant}`,\n      className,\n    )}\n  >\n    {icon && (\n      <div className=\"cobalt-marketing-note__icon-container\">{icon}</div>\n    )}\n\n    <div className=\"c-flex-1\">\n      {title && <div className=\"c-font-bold\">{title}</div>}\n      {children}\n    </div>\n  </div>\n)\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAUO,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,GACY,MACnBA,IACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,6CAAA,EAAgD,OAAO,CAAA,CAAE,EACzD,SAAS,CACV,EAEA,QAAA,EAAA,CAAA,IAAI,KACHC,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAE,QAAA,EAAA,IAAI,EAAO,CAAA,CACpE,EAEDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EACtB,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAO,EACnD,QAAQ,CACL,EAAA,CAAA,CAAA,EAAA,CACF;;;;"}

package/components/Steps/index.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Steps as Steps$1 } from '@ark-ui/react/steps';
+import cx from 'classnames';
+
+const Steps = ({ items }) => {
+    return (jsx(Steps$1.Root, { className: "cobalt-steps", count: items.length, orientation: "vertical", children: items.map((item, index) => {
+            const itemKey = index;
+            return (jsxs(Steps$1.Item, { index: index, className: cx("cobalt-steps__item", {
+                    "cobalt-steps__item--important": item.important,
+                }), children: [jsxs("div", { className: "cobalt-steps__item__wrapper", children: [jsx(Steps$1.Indicator, { className: "cobalt-steps__item__indicator" }), jsxs("div", { className: "cobalt-steps__item__content", children: [jsx("div", { className: "cobalt-steps__item__label", children: item.label }), jsx("div", { className: "cobalt-steps__item__description", children: item.description })] })] }), jsx(Steps$1.Separator, { className: "cobalt-steps__item__separator" })] }, itemKey));
+        }) }));
+};
+
+export { Steps };
+//# sourceMappingURL=index.js.map

package/components/Steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Steps/index.tsx"],"sourcesContent":["import { Steps as ArkSteps } from \"@ark-ui/react/steps\"\nimport cx from \"classnames\"\n\nexport interface StepItem {\n  label: string\n  description?: string\n  important?: boolean\n}\n\nexport type StepsPropsType = { items: StepItem[] }\n\nexport const Steps = ({ items }: StepsPropsType) => {\n  return (\n    <ArkSteps.Root\n      className=\"cobalt-steps\"\n      count={items.length}\n      orientation=\"vertical\"\n    >\n      {items.map((item, index) => {\n        const itemKey = index\n        return (\n          <ArkSteps.Item\n            key={itemKey}\n            index={index}\n            className={cx(\"cobalt-steps__item\", {\n              \"cobalt-steps__item--important\": item.important,\n            })}\n          >\n            <div className=\"cobalt-steps__item__wrapper\">\n              <ArkSteps.Indicator className=\"cobalt-steps__item__indicator\" />\n              <div className=\"cobalt-steps__item__content\">\n                <div className=\"cobalt-steps__item__label\">{item.label}</div>\n                <div className=\"cobalt-steps__item__description\">\n                  {item.description}\n                </div>\n              </div>\n            </div>\n            <ArkSteps.Separator className=\"cobalt-steps__item__separator\" />\n          </ArkSteps.Item>\n        )\n      })}\n    </ArkSteps.Root>\n  )\n}\n"],"names":["_jsx","ArkSteps","_jsxs"],"mappings":";;;;MAWa,KAAK,GAAG,CAAC,EAAE,KAAK,EAAkB,KAAI;AACjD,IAAA,QACEA,GAAA,CAACC,OAAQ,CAAC,IAAI,EAAA,EACZ,SAAS,EAAC,cAAc,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,WAAW,EAAC,UAAU,EAAA,QAAA,EAErB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;YACzB,MAAM,OAAO,GAAG,KAAK,CAAA;AACrB,YAAA,QACEC,IAAA,CAACD,OAAQ,CAAC,IAAI,EAEZ,EAAA,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;oBAClC,+BAA+B,EAAE,IAAI,CAAC,SAAS;iBAChD,CAAC,EAAA,QAAA,EAAA,CAEFC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAG,CAAA,EAChEC,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAC1C,QAAA,EAAA,CAAAF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAO,CAAA,EAC7DA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,iCAAiC,EAC7C,QAAA,EAAA,IAAI,CAAC,WAAW,EACb,CAAA,CAAA,EAAA,CACF,CACF,EAAA,CAAA,EACNA,IAACC,OAAQ,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,+BAA+B,EAAA,CAAG,CAf3D,EAAA,EAAA,OAAO,CAgBE,EACjB;SACF,CAAC,EACY,CAAA,EACjB;AACH;;;;"}

package/icons/crosshover.js

@@ -0,0 +1,4 @@
+var crosshover = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m14.45 15.75-5.912 5.913-1.326-1.326 3.65-3.65H2.25v-1.875h8.612l-3.65-3.65 1.326-1.325zm2.338-12.087-3.65 3.65h8.612v1.875h-8.612l3.65 3.65-1.326 1.325L9.55 8.25l5.913-5.913z\"/></svg>";
+
+export { crosshover as default };
+//# sourceMappingURL=crosshover.js.map

package/icons/crosshover.js.map

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

package/icons/crosshover.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m14.45 15.75-5.912 5.913-1.326-1.326 3.65-3.65H2.25v-1.875h8.612l-3.65-3.65 1.326-1.325zM16.788 3.663l-3.65 3.65h8.612v1.875h-8.612l3.65 3.65-1.326 1.325L9.55 8.25l5.913-5.913z"/></svg>

package/icons/hand-dollar.js

@@ -0,0 +1,4 @@
+var handDollar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5.683 14.489c.493 0 .894.4.894.894v5.723c0 .493-.4.894-.894.894H3.894A.894.894 0 0 1 3 21.106v-5.723c0-.494.4-.894.894-.894zm6.08-.001a2.68 2.68 0 0 1 2.53 1.799l-.11.07a5 5 0 0 1-2.436.636h-.341a.537.537 0 0 0 0 1.073h.341a6.06 6.06 0 0 0 2.97-.779l.011-.005.01-.007 3.46-2.155a2 2 0 0 1 1.636-.221c.233.128.444.306.602.544.323.484.285 1.033.13 1.473-.154.438-.444.84-.758 1.13l-2.523 2.343A6.03 6.03 0 0 1 13.183 22h-.88a8.3 8.3 0 0 1-2.615-.425l-2.038-.679V15.41l1.123-.561c.472-.236.992-.36 1.52-.36z\"/><path fill-rule=\"evenodd\" d=\"M12.12 2a5.544 5.544 0 1 1 0 11.088A5.544 5.544 0 0 1 12.12 2m-.338 3.077c-.701.137-1.318.564-1.318 1.348 0 1.66 2.542 1.294 2.543 2.154 0 .305-.285.564-.81.564-.57 0-1.04-.22-1.41-.525l-.592.654c.439.427 1.048.67 1.587.754v.792h.924v-.807c.809-.168 1.34-.746 1.34-1.446 0-1.69-2.54-1.463-2.541-2.132 0-.275.292-.488.793-.488.455 0 .848.153 1.14.35l.493-.723a2.8 2.8 0 0 0-1.225-.502v-.8h-.924z\" clip-rule=\"evenodd\"/></svg>";
+
+export { handDollar as default };
+//# sourceMappingURL=hand-dollar.js.map

package/icons/hand-dollar.js.map

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

package/icons/hand-dollar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.683 14.489c.493 0 .894.4.894.894v5.723c0 .493-.4.894-.894.894H3.894A.894.894 0 0 1 3 21.106v-5.723c0-.494.4-.894.894-.894zM11.763 14.488c1.172 0 2.165.752 2.53 1.799l-.11.07a5 5 0 0 1-2.436.636h-.341a.537.537 0 0 0 0 1.073h.341a6.06 6.06 0 0 0 2.97-.779l.011-.005.01-.007 3.46-2.155a2 2 0 0 1 1.636-.221c.233.128.444.306.602.544.323.484.285 1.033.13 1.473-.154.438-.444.84-.758 1.13l-2.523 2.343A6.03 6.03 0 0 1 13.183 22h-.88a8.3 8.3 0 0 1-2.615-.425l-2.038-.679V15.41l1.123-.561c.472-.236.992-.36 1.52-.36z"/><path fill-rule="evenodd" d="M12.12 2a5.544 5.544 0 1 1 0 11.088A5.544 5.544 0 0 1 12.12 2m-.338 3.077c-.701.137-1.318.564-1.318 1.348 0 1.66 2.542 1.294 2.543 2.154 0 .305-.285.564-.81.564-.57 0-1.04-.22-1.41-.525l-.592.654c.439.427 1.048.67 1.587.754v.792h.924v-.807c.809-.168 1.34-.746 1.34-1.446 0-1.69-2.54-1.463-2.541-2.132 0-.275.292-.488.793-.488.455 0 .848.153 1.14.35l.493-.723a2.8 2.8 0 0 0-1.225-.502v-.8h-.924z" clip-rule="evenodd"/></svg>

package/icons/index.js

@@ -90,6 +90,7 @@ export { default as coupe } from './coupe.js';
 export { default as creditCard } from './credit-card.js';
 export { default as creditCardAdd } from './credit-card-add.js';
 export { default as creditCardError } from './credit-card-error.js';
+export { default as crosshover } from './crosshover.js';
 export { default as cruiseControl } from './cruise-control.js';
 export { default as dashcam } from './dashcam.js';
 export { default as directions } from './directions.js';
@@ -127,6 +128,7 @@ export { default as geolocation } from './geolocation.js';
 export { default as gift } from './gift.js';
 export { default as gps } from './gps.js';
 export { default as graphUp } from './graph-up.js';
+export { default as handDollar } from './hand-dollar.js';
 export { default as healing } from './healing.js';
 export { default as heart } from './heart.js';
 export { default as height } from './height.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/index.js

@@ -42,6 +42,7 @@ export { default as LayoutSection } from './components/Layout/Components/LayoutS
 export { default as LayoutSectionTitle } from './components/Layout/Components/LayoutSectionTitle.js';
 export { default as LayoutStack } from './components/Layout/Components/LayoutStack.js';
 export { Fixed, Flexible, FlexibleWithConstraint } from './components/Layout/Surfaces/index.js';
+export { MarketingNote } from './components/MarketingNote/index.js';
 export { default as Modal } from './components/Modal/index.js';
 export { Note } from './components/Note/index.js';
 export { default as Pagination } from './components/Pagination/index.js';
@@ -55,6 +56,7 @@ export { ProgressBar } from './components/ProgressBar/index.js';
 export { ProgressCircular } from './components/ProgressCircular/index.js';
 export { Rating } from './components/Rating/index.js';
 export { Sidepanel } from './components/Sidepanel/index.js';
+export { Steps } from './components/Steps/index.js';
 export { Tab, default as Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { getA11yOnClick, getCSSVariableThemeColor, getComputedThemeColor } from './helpers/index.js';
@@ -150,6 +152,7 @@ export { default as CoupeIcon } from './components/Icon/__generated__/CoupeIcon.
 export { default as CreditCardAddIcon } from './components/Icon/__generated__/CreditCardAddIcon.js';
 export { default as CreditCardErrorIcon } from './components/Icon/__generated__/CreditCardErrorIcon.js';
 export { default as CreditCardIcon } from './components/Icon/__generated__/CreditCardIcon.js';
+export { default as CrosshoverIcon } from './components/Icon/__generated__/CrosshoverIcon.js';
 export { default as CruiseControlIcon } from './components/Icon/__generated__/CruiseControlIcon.js';
 export { default as DashcamIcon } from './components/Icon/__generated__/DashcamIcon.js';
 export { default as DirectionsIcon } from './components/Icon/__generated__/DirectionsIcon.js';
@@ -187,6 +190,7 @@ export { default as GeolocationIcon } from './components/Icon/__generated__/Geol
 export { default as GiftIcon } from './components/Icon/__generated__/GiftIcon.js';
 export { default as GpsIcon } from './components/Icon/__generated__/GpsIcon.js';
 export { default as GraphUpIcon } from './components/Icon/__generated__/GraphUpIcon.js';
+export { default as HandDollarIcon } from './components/Icon/__generated__/HandDollarIcon.js';
 export { default as HealingIcon } from './components/Icon/__generated__/HealingIcon.js';
 export { default as HeartIcon } from './components/Icon/__generated__/HeartIcon.js';
 export { default as HeightIcon } from './components/Icon/__generated__/HeightIcon.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": "2.17.0",
+  "version": "2.19.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/MarketingNote/index.scss

@@ -0,0 +1,39 @@
+.cobalt-marketing-note {
+  @apply c-rounded-xl c-p-sm c-gap-xs c-text-body-sm;
+
+  display: flex;
+  align-items: flex-start;
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--success {
+  @apply c-bg-successContainer c-text-onSuccessContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onSuccessContainer;
+  }
+}
+
+.cobalt-marketing-note.cobalt-marketing-note--tertiary {
+  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
+
+  .cobalt-Icon {
+    @apply c-fill-onTertiaryContainer;
+  }
+}
+
+.cobalt-marketing-note__icon-container {
+  --icon-container-size: 28px;
+
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  width: var(--icon-container-size);
+  height: var(--icon-container-size);
+}
+
+.cobalt-marketing-note__icon-container .cobalt-Icon {
+  width: 100%;
+  height: 100%;
+}

package/styles/components/Steps/index.scss

@@ -0,0 +1,91 @@
+.cobalt-steps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 32rem;
+
+  --steps-indicator-size: 12px;
+  --steps-separator-thickness: 1px;
+
+  @apply c-px-2xs c-py-xs;
+}
+
+.cobalt-steps__item {
+  @apply c-pb-sm c-text-body-sm;
+  position: relative;
+
+  display: flex;
+  flex: 1 0 0;
+  align-items: flex-start;
+  gap: 0.75rem;
+
+  &:last-of-type {
+    @apply c-pb-none;
+
+    flex: initial;
+
+    & [data-part="separator"] {
+      display: none;
+    }
+  }
+}
+
+.cobalt-steps__item__wrapper {
+  display: flex;
+
+  align-items: flex-start;
+
+  gap: 0.75rem;
+}
+
+.cobalt-steps__item__content {
+  @apply c-gap-2xs;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.cobalt-steps__item__indicator {
+  @apply c-border c-border-outline c-rounded-full c-bg-surfaceBright;
+
+  display: flex;
+
+  width: var(--steps-indicator-size);
+  height: var(--steps-indicator-size);
+
+  align-items: center;
+  justify-content: center;
+
+  flex-shrink: 0;
+}
+
+.cobalt-steps__item__separator {
+  @apply c-bg-outline;
+
+  position: absolute;
+  top: calc(var(--steps-indicator-size));
+  left: calc(var(--steps-indicator-size) / 2 - 0.5px);
+
+  flex: 1;
+
+  width: var(--steps-separator-thickness);
+  height: 100%;
+
+  max-height: calc(100% - var(--steps-indicator-size));
+
+  margin-inline: 0;
+}
+
+.cobalt-steps__item__label {
+  @apply c--mt-2xs;
+}
+
+.cobalt-steps__item.cobalt-steps__item--important .cobalt-steps__item__label {
+  @apply c-font-bold;
+}
+
+.cobalt-steps__item__description {
+  @apply c-text-onSurfaceVariant;
+}

package/styles/components.scss

@@ -16,6 +16,7 @@
 @import "./components/Icon/index";
 @import "./components/Layout/Components/index";
 @import "./components/Layout/Surfaces/index";
+@import "./components/MarketingNote/index";
 @import "./components/Note/index";
 @import "./components/Pagination/index";
 @import "./components/PhotoDropzone/index";
@@ -38,3 +39,4 @@
 @import "./components/PlateNumber/index";
 @import "./components/Sidepanel/index";
 @import "./components/Notice/index";
+@import "./components/Steps/index";

package/tokens/icons.js

@@ -91,6 +91,7 @@ const icons = {
 	creditCardAdd: "credit-card-add.svg",
 	creditCardError: "credit-card-error.svg",
 	creditCard: "credit-card.svg",
+	crosshover: "crosshover.svg",
 	cruiseControl: "cruise-control.svg",
 	dashcam: "dashcam.svg",
 	directions: "directions.svg",
@@ -128,6 +129,7 @@ const icons = {
 	gift: "gift.svg",
 	gps: "gps.svg",
 	graphUp: "graph-up.svg",
+	handDollar: "hand-dollar.svg",
 	healing: "healing.svg",
 	heart: "heart.svg",
 	height: "height.svg",

package/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/types/src/components/Icon/__generated__/CrosshoverIcon.d.ts

@@ -0,0 +1,9 @@
+import type { IconColorsType } from "../";
+export type IconProps = {
+    color?: IconColorsType;
+    size?: 16 | 20 | 24 | 32;
+    contained?: boolean;
+    className?: string;
+};
+declare const CrosshoverIcon: ({ color, size, contained, className, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default CrosshoverIcon;

package/types/src/components/Icon/__generated__/HandDollarIcon.d.ts

@@ -0,0 +1,9 @@
+import type { IconColorsType } from "../";
+export type IconProps = {
+    color?: IconColorsType;
+    size?: 16 | 20 | 24 | 32;
+    contained?: boolean;
+    className?: string;
+};
+declare const HandDollarIcon: ({ color, size, contained, className, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default HandDollarIcon;

package/types/src/components/Icon/__generated__/index.d.ts

@@ -90,6 +90,7 @@ export { default as CoupeIcon } from "./CoupeIcon";
 export { default as CreditCardAddIcon } from "./CreditCardAddIcon";
 export { default as CreditCardErrorIcon } from "./CreditCardErrorIcon";
 export { default as CreditCardIcon } from "./CreditCardIcon";
+export { default as CrosshoverIcon } from "./CrosshoverIcon";
 export { default as CruiseControlIcon } from "./CruiseControlIcon";
 export { default as DashcamIcon } from "./DashcamIcon";
 export { default as DirectionsIcon } from "./DirectionsIcon";
@@ -127,6 +128,7 @@ export { default as GeolocationIcon } from "./GeolocationIcon";
 export { default as GiftIcon } from "./GiftIcon";
 export { default as GpsIcon } from "./GpsIcon";
 export { default as GraphUpIcon } from "./GraphUpIcon";
+export { default as HandDollarIcon } from "./HandDollarIcon";
 export { default as HealingIcon } from "./HealingIcon";
 export { default as HeartIcon } from "./HeartIcon";
 export { default as HeightIcon } from "./HeightIcon";

package/types/src/components/MarketingNote/index.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react";
+export type MarketingNoteProps = PropsWithChildren<{
+    variant: "success" | "tertiary";
+    title?: string;
+    icon?: React.JSX.Element;
+    className?: string;
+}>;
+export declare const MarketingNote: ({ children, title, icon, className, variant, }: MarketingNoteProps) => import("react/jsx-runtime").JSX.Element;

package/types/src/components/Steps/index.d.ts

@@ -0,0 +1,9 @@
+export interface StepItem {
+    label: string;
+    description?: string;
+    important?: boolean;
+}
+export type StepsPropsType = {
+    items: StepItem[];
+};
+export declare const Steps: ({ items }: StepsPropsType) => import("react/jsx-runtime").JSX.Element;

package/types/src/icons/index.d.ts

@@ -90,6 +90,7 @@ export { default as coupe } from "./coupe.svg";
 export { default as creditCard } from "./credit-card.svg";
 export { default as creditCardAdd } from "./credit-card-add.svg";
 export { default as creditCardError } from "./credit-card-error.svg";
+export { default as crosshover } from "./crosshover.svg";
 export { default as cruiseControl } from "./cruise-control.svg";
 export { default as dashcam } from "./dashcam.svg";
 export { default as directions } from "./directions.svg";
@@ -127,6 +128,7 @@ export { default as geolocation } from "./geolocation.svg";
 export { default as gift } from "./gift.svg";
 export { default as gps } from "./gps.svg";
 export { default as graphUp } from "./graph-up.svg";
+export { default as handDollar } from "./hand-dollar.svg";
 export { default as healing } from "./healing.svg";
 export { default as heart } from "./heart.svg";
 export { default as height } from "./height.svg";

package/types/src/index.d.ts

@@ -42,6 +42,7 @@ export * from "./components/Icon";
 /** Layouts */
 export * from "./components/Layout/Components";
 export * from "./components/Layout/Surfaces";
+export { MarketingNote } from "./components/MarketingNote";
 export { default as Modal, type ModalStepType, MultiStepModal, } from "./components/Modal";
 export { Note } from "./components/Note";
 export { default as Pagination } from "./components/Pagination";
@@ -55,6 +56,7 @@ export { ProgressBar } from "./components/ProgressBar";
 export { ProgressCircular } from "./components/ProgressCircular";
 export * from "./components/Rating/";
 export { Sidepanel } from "./components/Sidepanel";
+export { Steps } from "./components/Steps";
 export { default as Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export * from "./helpers";

package/types/src/tokens/index.d.ts

@@ -112,6 +112,7 @@ export declare const icons: {
         creditCardAdd: string;
         creditCardError: string;
         creditCard: string;
+        crosshover: string;
         cruiseControl: string;
         dashcam: string;
         directions: string;
@@ -149,6 +150,7 @@ export declare const icons: {
         gift: string;
         gps: string;
         graphUp: string;
+        handDollar: string;
         healing: string;
         heart: string;
         height: string;

package/utils/getCobaltTailwindcssConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
+{"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}