@drivy/cobalt 0.31.2 → 0.31.3

package/components/BasicCell/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import cx from 'classnames';
 
-const BasicCell = ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, title, children, rightAddonIcon, large = false, }) => {
+const BasicCell = ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, leftAddonThumbSquare, title, children, rightAddonIcon, large = false, }) => {
     let leftAddon = null;
     if (leftAddonIcon != null)
         leftAddon = leftAddonIcon;
     else if (leftAddonThumbUrl != null) {
         const leftAddonThumbSize = large ? 64 : 44;
-        leftAddon = (React.createElement("div", { className: "cobalt-BasicCell__Thumb" },
+        leftAddon = (React.createElement("div", { className: cx("cobalt-BasicCell__Thumb", {
+                "cobalt-BasicCell__Thumb--square": leftAddonThumbSquare,
+            }) },
             React.createElement("img", { src: leftAddonThumbUrl, alt: leftAddonThumbAlt, width: leftAddonThumbSize, height: leftAddonThumbSize })));
     }
     return (React.createElement("div", { className: cx("cobalt-BasicCell", {

package/components/BasicCell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/BasicCell/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface BasicCellProps {\n  children: React.ReactNode\n  leftAddonIcon?: React.ReactNode\n  leftAddonThumbUrl?: string\n  leftAddonThumbAlt?: string\n  title: string\n  rightAddonIcon?: React.ReactNode\n  large?: boolean\n}\n\nexport const BasicCell = ({\n  leftAddonIcon,\n  leftAddonThumbUrl,\n  leftAddonThumbAlt,\n  title,\n  children,\n  rightAddonIcon,\n  large = false,\n}: BasicCellProps) => {\n  let leftAddon: React.ReactNode | BasicCellProps[\"leftAddonIcon\"] | null = null\n\n  if (leftAddonIcon != null) leftAddon = leftAddonIcon\n  else if (leftAddonThumbUrl != null) {\n    const leftAddonThumbSize = large ? 64 : 44\n    leftAddon = (\n      <div className=\"cobalt-BasicCell__Thumb\">\n        <img\n          src={leftAddonThumbUrl}\n          alt={leftAddonThumbAlt}\n          width={leftAddonThumbSize}\n          height={leftAddonThumbSize}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cx(\"cobalt-BasicCell\", {\n        \"cobalt-BasicCell--large\": large === true,\n      })}\n    >\n      {leftAddon != null && (\n        <div className=\"cobalt-BasicCell__LeftAddon\">{leftAddon}</div>\n      )}\n      <div className=\"cobalt-BasicCell__Main\">\n        <div className=\"cobalt-BasicCell__Title\">{title}</div>\n        <div className=\"cobalt-BasicCell__Content\">{children}</div>\n      </div>\n      {rightAddonIcon != null && (\n        <div className=\"cobalt-BasicCell__RightAddonIcon\">{rightAddonIcon}</div>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;MAaa,SAAS,GAAG,CAAC,EACxB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,KAAK,GACE,KAAI;IACnB,IAAI,SAAS,GAA6D,IAAI,CAAA;IAE9E,IAAI,aAAa,IAAI,IAAI;QAAE,SAAS,GAAG,aAAa,CAAA;SAC/C,IAAI,iBAAiB,IAAI,IAAI,EAAE;QAClC,MAAM,kBAAkB,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,CAAA;AAC1C,QAAA,SAAS,IACP,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;AACtC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,iBAAiB,EACtB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,kBAAkB,EAC1B,CAAA,CACE,CACP,CAAA;AACF,KAAA;AAED,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE;YAChC,yBAAyB,EAAE,KAAK,KAAK,IAAI;SAC1C,CAAC,EAAA;QAED,SAAS,IAAI,IAAI,KAChB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,EAAE,SAAS,CAAO,CAC/D;QACD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA;AACrC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,EAAE,KAAK,CAAO;AACtD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAO,CACvD;AACL,QAAA,cAAc,IAAI,IAAI,KACrB,6BAAK,SAAS,EAAC,kCAAkC,EAAA,EAAE,cAAc,CAAO,CACzE,CACG,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/BasicCell/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface BasicCellProps {\n  children: React.ReactNode\n  leftAddonIcon?: React.ReactNode\n  leftAddonThumbUrl?: string\n  leftAddonThumbAlt?: string\n  leftAddonThumbSquare?: boolean\n  title: string\n  rightAddonIcon?: React.ReactNode\n  large?: boolean\n}\n\nexport const BasicCell = ({\n  leftAddonIcon,\n  leftAddonThumbUrl,\n  leftAddonThumbAlt,\n  leftAddonThumbSquare,\n  title,\n  children,\n  rightAddonIcon,\n  large = false,\n}: BasicCellProps) => {\n  let leftAddon: React.ReactNode | BasicCellProps[\"leftAddonIcon\"] | null = null\n\n  if (leftAddonIcon != null) leftAddon = leftAddonIcon\n  else if (leftAddonThumbUrl != null) {\n    const leftAddonThumbSize = large ? 64 : 44\n    leftAddon = (\n      <div\n        className={cx(\"cobalt-BasicCell__Thumb\", {\n          \"cobalt-BasicCell__Thumb--square\": leftAddonThumbSquare,\n        })}\n      >\n        <img\n          src={leftAddonThumbUrl}\n          alt={leftAddonThumbAlt}\n          width={leftAddonThumbSize}\n          height={leftAddonThumbSize}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className={cx(\"cobalt-BasicCell\", {\n        \"cobalt-BasicCell--large\": large === true,\n      })}\n    >\n      {leftAddon != null && (\n        <div className=\"cobalt-BasicCell__LeftAddon\">{leftAddon}</div>\n      )}\n      <div className=\"cobalt-BasicCell__Main\">\n        <div className=\"cobalt-BasicCell__Title\">{title}</div>\n        <div className=\"cobalt-BasicCell__Content\">{children}</div>\n      </div>\n      {rightAddonIcon != null && (\n        <div className=\"cobalt-BasicCell__RightAddonIcon\">{rightAddonIcon}</div>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAca,MAAA,SAAS,GAAG,CAAC,EACxB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,EACL,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,KAAK,GACE,KAAI;IACnB,IAAI,SAAS,GAA6D,IAAI,CAAA;IAE9E,IAAI,aAAa,IAAI,IAAI;QAAE,SAAS,GAAG,aAAa,CAAA;SAC/C,IAAI,iBAAiB,IAAI,IAAI,EAAE;QAClC,MAAM,kBAAkB,GAAG,KAAK,GAAG,EAAE,GAAG,EAAE,CAAA;QAC1C,SAAS,IACP,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;AACvC,gBAAA,iCAAiC,EAAE,oBAAoB;aACxD,CAAC,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,iBAAiB,EACtB,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,kBAAkB,EAC1B,CAAA,CACE,CACP,CAAA;AACF,KAAA;AAED,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE;YAChC,yBAAyB,EAAE,KAAK,KAAK,IAAI;SAC1C,CAAC,EAAA;QAED,SAAS,IAAI,IAAI,KAChB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,EAAE,SAAS,CAAO,CAC/D;QACD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA;AACrC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,EAAE,KAAK,CAAO;AACtD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,EAAE,EAAA,QAAQ,CAAO,CACvD;AACL,QAAA,cAAc,IAAI,IAAI,KACrB,6BAAK,SAAS,EAAC,kCAAkC,EAAA,EAAE,cAAc,CAAO,CACzE,CACG,EACP;AACH;;;;"}

package/components/ProgressBanner/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import cx from 'classnames';
+import { ProgressCircular } from '../ProgressCircular/index.js';
+import '../Icon/index.js';
+import CheckIcon from '../Icon/__generated__/CheckIcon.js';
+
+function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
+    return (React.createElement("div", { className: cx("cobalt-progressBanner", className, {
+            "cobalt-progressBanner--completed": completed,
+            "cobalt-progressBanner--fullWidth": fullWidth,
+        }) },
+        progress && !completed && (React.createElement(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated },
+            React.createElement("div", { className: "cobalt-progressBanner__progress-container" },
+                progress.done,
+                "/",
+                progress.total))),
+        completed && (React.createElement("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
+                "cobalt-progressBanner__completed-icon-container--animated": animated,
+            }) },
+            React.createElement(CheckIcon, { color: "success", size: 32 }))),
+        React.createElement("div", { className: "cobalt-progressBanner__text-container" },
+            React.createElement("div", { className: "cobalt-progressBanner__title" }, title),
+            React.createElement("div", { className: "cobalt-progressBanner__description" }, description))));
+}
+
+export { ProgressBanner };
+//# sourceMappingURL=index.js.map

package/components/ProgressBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressBanner/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { ProgressCircular } from \"../ProgressCircular\"\nimport { CheckIcon } from \"../Icon\"\n\ntype ProgressBannerPropsType = {\n  progress?: {\n    done: number\n    total: number\n  }\n  title: string\n  description: string\n  completed?: boolean\n  animated?: boolean\n  fullWidth?: boolean\n  className?: string\n}\n\nexport function ProgressBanner({\n  progress,\n  title,\n  description,\n  completed = false,\n  animated = false,\n  fullWidth = false,\n  className,\n}: ProgressBannerPropsType) {\n  return (\n    <div\n      className={cx(\"cobalt-progressBanner\", className, {\n        \"cobalt-progressBanner--completed\": completed,\n        \"cobalt-progressBanner--fullWidth\": fullWidth,\n      })}\n    >\n      {progress && !completed && (\n        <ProgressCircular\n          size={48}\n          progress={(progress.done * 100) / progress.total}\n          animated={animated}\n        >\n          <div className=\"cobalt-progressBanner__progress-container\">\n            {progress.done}/{progress.total}\n          </div>\n        </ProgressCircular>\n      )}\n\n      {completed && (\n        <div\n          className={cx(\"cobalt-progressBanner__completed-icon-container\", {\n            \"cobalt-progressBanner__completed-icon-container--animated\":\n              animated,\n          })}\n        >\n          <CheckIcon color=\"success\" size={32} />\n        </div>\n      )}\n\n      <div className=\"cobalt-progressBanner__text-container\">\n        <div className=\"cobalt-progressBanner__title\">{title}</div>\n        <div className=\"cobalt-progressBanner__description\">{description}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAkBM,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GACe,EAAA;IACxB,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;AAChD,YAAA,kCAAkC,EAAE,SAAS;AAC7C,YAAA,kCAAkC,EAAE,SAAS;SAC9C,CAAC,EAAA;AAED,QAAA,QAAQ,IAAI,CAAC,SAAS,KACrB,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,EAChD,QAAQ,EAAE,QAAQ,EAAA;YAElB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,2CAA2C,EAAA;AACvD,gBAAA,QAAQ,CAAC,IAAI;;AAAG,gBAAA,QAAQ,CAAC,KAAK,CAC3B,CACW,CACpB;QAEA,SAAS,KACR,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE;AAC/D,gBAAA,2DAA2D,EACzD,QAAQ;aACX,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,EAAI,CAAA,CACnC,CACP;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uCAAuC,EAAA;AACpD,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAA,EAAE,KAAK,CAAO;YAC3D,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA,EAAE,WAAW,CAAO,CACnE,CACF,EACP;AACH;;;;"}

package/components/ProgressCircular/index.js

@@ -0,0 +1,26 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import cx from 'classnames';
+
+const ProgressCircular = ({ progress, size, status = "info", animated = false, className, children, }) => {
+    const pathRef = useRef(null);
+    useLayoutEffect(() => {
+        if (!pathRef.current)
+            return;
+        const length = pathRef.current.getTotalLength();
+        const value = progress;
+        const to = length * ((100 - value) / 100);
+        // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/
+        pathRef.current.getBoundingClientRect();
+        pathRef.current.style.strokeDashoffset = "" + Math.max(0, to);
+    }, []);
+    return (React.createElement("div", { className: cx(`cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`, className, {
+            "cobalt-circularProgressBar--animated": animated,
+            [`cobalt-circularProgressBar--${status}`]: status,
+        }) },
+        React.createElement("div", { className: "cobalt-circularProgressBar__content" }, children),
+        React.createElement("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none", "data-value": "75" },
+            React.createElement("path", { ref: pathRef, className: "cobalt-circularProgressBar__bar", d: "M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0", strokeLinecap: "round", strokeLinejoin: "round", strokeDashoffset: "282.78302001953125", strokeDasharray: "282.78302001953125" }))));
+};
+
+export { ProgressCircular };
+//# sourceMappingURL=index.js.map

package/components/ProgressCircular/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ProgressCircular/index.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from \"react\"\nimport cx from \"classnames\"\n\nexport interface ProgressBarProps {\n  children: React.ReactNode\n  progress: number\n  status?: \"info\" | \"success\" | \"error\"\n  size: 32 | 48 | 64 | 96\n  animated?: boolean\n  className?: string\n}\n\nexport const ProgressCircular = ({\n  progress,\n  size,\n  status = \"info\",\n  animated = false,\n  className,\n  children,\n}: ProgressBarProps) => {\n  const pathRef = useRef<SVGGeometryElement>(null)\n\n  useLayoutEffect(() => {\n    if (!pathRef.current) return\n    const length = pathRef.current.getTotalLength()\n\n    const value = progress\n\n    const to = length * ((100 - value) / 100)\n    // Trigger Layout in Safari hack https://jakearchibald.com/2013/animated-line-drawing-svg/\n    pathRef.current.getBoundingClientRect()\n\n    pathRef.current.style.strokeDashoffset = \"\" + Math.max(0, to)\n  }, [])\n\n  return (\n    <div\n      className={cx(\n        `cobalt-circularProgressBar cobalt-circularProgressBar--size${size}`,\n        className,\n        {\n          \"cobalt-circularProgressBar--animated\": animated,\n          [`cobalt-circularProgressBar--${status}`]: status,\n        }\n      )}\n    >\n      <div className=\"cobalt-circularProgressBar__content\">{children}</div>\n      <svg\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        preserveAspectRatio=\"none\"\n        data-value=\"75\"\n      >\n        {/* <circle r=\"45\" cx=\"50\" cy=\"50\" /> */}\n        <path\n          ref={pathRef}\n          className=\"cobalt-circularProgressBar__bar\"\n          d=\"M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeDashoffset=\"282.78302001953125\"\n          strokeDasharray=\"282.78302001953125\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;MAYa,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,QAAQ,GACS,KAAI;AACrB,IAAA,MAAM,OAAO,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAA;IAEhD,eAAe,CAAC,MAAK;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,cAAc,EAAE,CAAA;QAE/C,MAAM,KAAK,GAAG,QAAQ,CAAA;AAEtB,QAAA,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,CAAC,CAAA;;AAEzC,QAAA,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;AAEvC,QAAA,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;KAC9D,EAAE,EAAE,CAAC,CAAA;IAEN,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,CAAA,2DAAA,EAA8D,IAAI,CAAA,CAAE,EACpE,SAAS,EACT;AACE,YAAA,sCAAsC,EAAE,QAAQ;AAChD,YAAA,CAAC,CAA+B,4BAAA,EAAA,MAAM,CAAE,CAAA,GAAG,MAAM;SAClD,CACF,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA,EAAE,QAAQ,CAAO;AACrE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM,EAAA,YAAA,EACf,IAAI,EAAA;AAGf,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,iCAAiC,EAC3C,CAAC,EAAC,0CAA0C,EAC5C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,gBAAgB,EAAC,oBAAoB,EACrC,eAAe,EAAC,oBAAoB,EAAA,CACpC,CACE,CACF,EACP;AACH;;;;"}

package/index.js

@@ -21,6 +21,8 @@ export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
 export { Pill, PillGroup } from './components/Pill/index.js';
 export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
 export { ProgressBar } from './components/ProgressBar/index.js';
+export { ProgressCircular } from './components/ProgressCircular/index.js';
+export { ProgressBanner } from './components/ProgressBanner/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';
 export { Tag } from './components/Tag/index.js';
 export { Chip } from './components/Chip/index.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": "0.31.2",
+  "version": "0.31.3",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -65,9 +65,9 @@
     "@types/react": "18.0.26",
     "@whitespace/storybook-addon-html": "^5.1.1",
     "autoprefixer": "10.4.13",
-    "core-js": "3.28.0",
+    "core-js": "3.29.0",
     "css-loader": "6.7.3",
-    "eslint": "8.34.0",
+    "eslint": "8.35.0",
     "file-loader": "6.2.0",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
@@ -87,7 +87,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.34.1",
-    "sass": "1.58.2",
+    "sass": "1.58.3",
     "sass-loader": "13.2.0",
     "sharp": "0.31.3",
     "sharp-cli": "4.1.0",

package/styles/components/BasicCell/index.scss

@@ -24,6 +24,8 @@
   }
 
   &BasicCell__Thumb {
+    @include bg-color(neutralAlt);
+
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -39,6 +41,10 @@
     }
   }
 
+  &BasicCell__Thumb--square {
+    border-radius: border-radius(lg);
+  }
+
   &BasicCell__LeftAddon {
     padding-right: spacing(sm);
   }

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

@@ -250,6 +250,7 @@
 
     &--selected.cobalt-CalendarRangePicker__day--invalid {
       .cobalt-CalendarRangePicker__day-inner {
+        @include text-color(inversed);
         background-color: $calendar-out-of-range-color;
       }
     }

package/styles/components/ProgressBanner/index.scss

@@ -0,0 +1,76 @@
+.cobalt-progressBanner {
+  @include bg-color(info);
+  @include text-color(info);
+
+  display: inline-flex;
+  align-items: center;
+
+  padding: spacing(sm);
+
+  border-radius: border-radius(xl);
+
+  gap: spacing(sm);
+
+  &__progress-container {
+    font-weight: 600;
+  }
+
+  &__completed-icon-container {
+    @include bg-color(primary);
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    width: spacing(xl);
+    height: spacing(xl);
+
+    margin: 0 5px; // ProgressCircular stroke width
+
+    flex-shrink: 0;
+
+    border-radius: 50%;
+  }
+
+  &__text-container {
+    display: flex;
+    flex-direction: column;
+    gap: spacing("2xs");
+  }
+
+  &__title {
+    @include c-text-title-xs;
+  }
+
+  &__description {
+    font-size: 14px;
+  }
+
+  &--completed {
+    @include bg-color(successAlt);
+    @include text-color(successAlt);
+  }
+
+  &__completed-icon-container--animated .cobalt-Icon {
+    animation: progressBanner__animation--zoom-in 650ms ease;
+  }
+
+  &--fullWidth {
+    display: flex;
+  }
+}
+
+@keyframes progressBanner__animation--zoom-in {
+  0% {
+    transform: scale(0, 0);
+  }
+
+  50% {
+    transform: scale(1.2, 1.2);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}

package/styles/components/ProgressCircular/index.scss

@@ -0,0 +1,85 @@
+.cobalt-circularProgressBar {
+  --content-size: 64px;
+  --total-size: calc((var(--content-size) / 4) + var(--content-size));
+  --progress-color: #{color-var(fill, base)};
+
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: var(--total-size);
+  height: var(--total-size);
+
+  flex-shrink: 0;
+
+  svg {
+    position: absolute;
+
+    display: inline-flex;
+
+    width: calc(var(--total-size) - 2px);
+    height: calc(var(--total-size) - 2px);
+
+    vertical-align: bottom;
+  }
+
+  &__bar {
+    fill: none;
+
+    transform: rotate(-90deg) scaleX(-1);
+    transform-origin: center center;
+
+    stroke-width: 8px;
+    stroke: var(--progress-color);
+  }
+
+  &__content {
+    @include bg-color(primary);
+
+    position: absolute;
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+
+    width: var(--content-size);
+    height: var(--content-size);
+
+    border-radius: 50%;
+  }
+
+  &--animated .cobalt-circularProgressBar__bar {
+    transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
+  }
+
+  &--size96 {
+    --content-size: 96px;
+  }
+
+  &--size64 {
+    --content-size: 64px;
+  }
+
+  &--size48 {
+    --content-size: 48px;
+  }
+
+  &--size32 {
+    --content-size: 32px;
+  }
+
+  &--info {
+    --progress-color: #{color-var(fill, secondary)};
+  }
+
+  &--error {
+    --progress-color: #{color-var(fill, error)};
+  }
+
+  &--success {
+    --progress-color: #{color-var(fill, success)};
+  }
+}

package/styles/components.scss

@@ -27,3 +27,5 @@
 @import "./components/Accordion/index";
 @import "./components/HorizontalList/index";
 @import "./components/Rating/index";
+@import "./components/ProgressCircular/index";
+@import "./components/ProgressBanner/index";

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

@@ -4,8 +4,9 @@ export interface BasicCellProps {
     leftAddonIcon?: React.ReactNode;
     leftAddonThumbUrl?: string;
     leftAddonThumbAlt?: string;
+    leftAddonThumbSquare?: boolean;
     title: string;
     rightAddonIcon?: React.ReactNode;
     large?: boolean;
 }
-export declare const BasicCell: ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, title, children, rightAddonIcon, large, }: BasicCellProps) => JSX.Element;
+export declare const BasicCell: ({ leftAddonIcon, leftAddonThumbUrl, leftAddonThumbAlt, leftAddonThumbSquare, title, children, rightAddonIcon, large, }: BasicCellProps) => JSX.Element;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type ProgressBannerPropsType = {
+    progress?: {
+        done: number;
+        total: number;
+    };
+    title: string;
+    description: string;
+    completed?: boolean;
+    animated?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+};
+export declare function ProgressBanner({ progress, title, description, completed, animated, fullWidth, className, }: ProgressBannerPropsType): JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ProgressBarProps {
+    children: React.ReactNode;
+    progress: number;
+    status?: "info" | "success" | "error";
+    size: 32 | 48 | 64 | 96;
+    animated?: boolean;
+    className?: string;
+}
+export declare const ProgressCircular: ({ progress, size, status, animated, className, children, }: ProgressBarProps) => JSX.Element;

package/types/index.d.ts

@@ -21,6 +21,8 @@ export { default as PhotoDropzone } from "./components/PhotoDropzone";
 export { Pill, PillGroup } from "./components/Pill";
 export { PriceTable, PriceTableRow } from "./components/PriceTable";
 export { ProgressBar } from "./components/ProgressBar";
+export { ProgressCircular } from "./components/ProgressCircular";
+export { ProgressBanner } from "./components/ProgressBanner";
 export { Tabs, Tab } from "./components/Tabs";
 export { Tag } from "./components/Tag";
 export { Chip } from "./components/Chip";