@drivy/cobalt 0.42.19 → 0.44.0

package/cjs/tokens/icons.js

@@ -199,6 +199,7 @@ const icons = {
 	payments: "payments.svg",
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
+	percentage: "percentage.svg",
 	performance: "performance.svg",
 	phoneLink: "phone-link.svg",
 	phone: "phone.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__/PercentageIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "percentage";
+const PercentageIcon = ({ 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", { d: "M6.529 12.268c2.191 0 3.516-1.758 3.516-4.56 0-2.803-1.335-4.532-3.516-4.532-2.192 0-3.527 1.739-3.527 4.531 0 2.813 1.325 4.561 3.527 4.561m0-1.39c-1.183 0-1.886-1.163-1.886-3.17 0-1.978.714-3.15 1.886-3.15s1.875 1.162 1.875 3.15c0 2.007-.693 3.17-1.875 3.17m11.58 10.95c2.19 0 3.516-1.759 3.516-4.551 0-2.812-1.335-4.542-3.517-4.542-2.191 0-3.527 1.74-3.527 4.542s1.326 4.551 3.527 4.551m0-1.381c-1.183 0-1.887-1.173-1.887-3.17 0-1.988.714-3.15 1.886-3.15s1.876 1.152 1.876 3.15-.693 3.17-1.876 3.17m-12.314 1.42c.377.21.927.18 1.254-.278L19.026 4.33c.356-.497.142-1.004-.235-1.223-.357-.188-.856-.149-1.213.348L5.601 20.665c-.367.507-.183.984.194 1.203" })));
+};
+
+export { PercentageIcon as default };
+//# sourceMappingURL=PercentageIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PercentageIcon.js","sources":["../../../../src/components/Icon/__generated__/PercentageIcon.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 = \"percentage\"\nconst PercentageIcon = ({\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=\"M6.529 12.268c2.191 0 3.516-1.758 3.516-4.56 0-2.803-1.335-4.532-3.516-4.532-2.192 0-3.527 1.739-3.527 4.531 0 2.813 1.325 4.561 3.527 4.561m0-1.39c-1.183 0-1.886-1.163-1.886-3.17 0-1.978.714-3.15 1.886-3.15s1.875 1.162 1.875 3.15c0 2.007-.693 3.17-1.875 3.17m11.58 10.95c2.19 0 3.516-1.759 3.516-4.551 0-2.812-1.335-4.542-3.517-4.542-2.191 0-3.527 1.74-3.527 4.542s1.326 4.551 3.527 4.551m0-1.381c-1.183 0-1.887-1.173-1.887-3.17 0-1.988.714-3.15 1.886-3.15s1.876 1.152 1.876 3.15-.693 3.17-1.876 3.17m-12.314 1.42c.377.21.927.18 1.254-.278L19.026 4.33c.356-.497.142-1.004-.235-1.223-.357-.188-.856-.149-1.213.348L5.601 20.665c-.367.507-.183.984.194 1.203\" />\n    </svg>\n  )\n}\nexport default PercentageIcon\n"],"names":[],"mappings":";;;;;AAUA,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,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,ipBAAipB,EAAG,CAAA,CACxpB,CACP,CAAA;AACH;;;;"}

package/components/Layout/Components/LayoutStack.js

@@ -2,9 +2,12 @@ import { nanoid } from 'nanoid';
 import React, { Children, cloneElement, isValidElement } from 'react';
 import cx from 'classnames';
 
-const LayoutStackItem = ({ children, isTable }) => {
+const LayoutStackItem = ({ children, isTable, ...props }) => {
     const Comp = isTable ? "tr" : "div";
-    return React.createElement(Comp, { className: "cobalt-layout-stack__item" }, children);
+    return (React.createElement(Comp, { className: "cobalt-layout-stack__item", ...props }, children));
+};
+const LayoutStackLinkItem = ({ children, ...hyperlinkProps }) => {
+    return (React.createElement("a", { className: "cobalt-layout-stack__item", ...hyperlinkProps }, children));
 };
 const isStackItem = (child) => {
     return isValidElement(child) && child.type === LayoutStackItem;
@@ -39,6 +42,7 @@ const LayoutStack = ({ children, isTable, isPageHeader, }) => {
     }
 };
 LayoutStack.Item = LayoutStackItem;
+LayoutStack.LinkItem = LayoutStackLinkItem;
 
 export { LayoutStack as default };
 //# sourceMappingURL=LayoutStack.js.map

package/components/Layout/Components/LayoutStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    }\n  | {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    }\n\nconst LayoutStackItem = ({ children, isTable }: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return <Comp className=\"cobalt-layout-stack__item\">{children}</Comp>\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAgBA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA4B,KAAI;IAC1E,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;IACnC,OAAO,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAC,2BAA2B,EAAA,EAAE,QAAQ,CAAQ,CAAA;AACtE,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe;;;;"}
+{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    })\n  | (React.HTMLAttributes<HTMLElement> & {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    })\n\ntype LayoutStackLinkItemPropsType =\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    children: React.ReactNode\n    isPageHeader?: boolean\n  }\n\nconst LayoutStackItem = ({\n  children,\n  isTable,\n  ...props\n}: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return (\n    <Comp className=\"cobalt-layout-stack__item\" {...props}>\n      {children}\n    </Comp>\n  )\n}\n\nconst LayoutStackLinkItem = ({\n  children,\n  ...hyperlinkProps\n}: LayoutStackLinkItemPropsType) => {\n  return (\n    <a className=\"cobalt-layout-stack__item\" {...hyperlinkProps}>\n      {children}\n    </a>\n  )\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nLayoutStack.LinkItem = LayoutStackLinkItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAsBA,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACiB,KAAI;IAC7B,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;AACnC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2BAA2B,EAAA,GAAK,KAAK,EAAA,EAClD,QAAQ,CACJ,EACR;AACH,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,EAC3B,QAAQ,EACR,GAAG,cAAc,EACY,KAAI;IACjC,QACE,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,2BAA2B,EAAK,GAAA,cAAc,EACxD,EAAA,QAAQ,CACP,EACL;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe,CAAA;AAElC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;;;"}

package/icons/index.js

@@ -194,6 +194,7 @@ export { default as passport } from './passport.js';
 export { default as payments } from './payments.js';
 export { default as pencil } from './pencil.js';
 export { default as peopleUser } from './people-user.js';
+export { default as percentage } from './percentage.js';
 export { default as performance } from './performance.js';
 export { default as phoneLink } from './phone-link.js';
 export { default as phone } from './phone.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/percentage.js

@@ -0,0 +1,4 @@
+var percentage = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M6.529 12.268c2.191 0 3.516-1.758 3.516-4.56 0-2.803-1.335-4.532-3.516-4.532-2.192 0-3.527 1.739-3.527 4.531 0 2.813 1.325 4.561 3.527 4.561m0-1.39c-1.183 0-1.886-1.163-1.886-3.17 0-1.978.714-3.15 1.886-3.15s1.875 1.162 1.875 3.15c0 2.007-.693 3.17-1.875 3.17m11.58 10.95c2.19 0 3.516-1.759 3.516-4.551 0-2.812-1.335-4.542-3.517-4.542-2.191 0-3.527 1.74-3.527 4.542s1.326 4.551 3.527 4.551m0-1.381c-1.183 0-1.887-1.173-1.887-3.17 0-1.988.714-3.15 1.886-3.15s1.876 1.152 1.876 3.15-.693 3.17-1.876 3.17m-12.314 1.42c.377.21.927.18 1.254-.278L19.026 4.33c.356-.497.142-1.004-.235-1.223-.357-.188-.856-.149-1.213.348L5.601 20.665c-.367.507-.183.984.194 1.203\"/></svg>";
+
+export { percentage as default };
+//# sourceMappingURL=percentage.js.map

package/icons/percentage.js.map

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

package/icons/percentage.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.529 12.268c2.191 0 3.516-1.758 3.516-4.56 0-2.803-1.335-4.532-3.516-4.532-2.192 0-3.527 1.739-3.527 4.531 0 2.813 1.325 4.561 3.527 4.561m0-1.39c-1.183 0-1.886-1.163-1.886-3.17 0-1.978.714-3.15 1.886-3.15s1.875 1.162 1.875 3.15c0 2.007-.693 3.17-1.875 3.17m11.58 10.95c2.19 0 3.516-1.759 3.516-4.551 0-2.812-1.335-4.542-3.517-4.542-2.191 0-3.527 1.74-3.527 4.542s1.326 4.551 3.527 4.551m0-1.381c-1.183 0-1.887-1.173-1.887-3.17 0-1.988.714-3.15 1.886-3.15s1.876 1.152 1.876 3.15-.693 3.17-1.876 3.17m-12.314 1.42c.377.21.927.18 1.254-.278L19.026 4.33c.356-.497.142-1.004-.235-1.223-.357-.188-.856-.149-1.213.348L5.601 20.665c-.367.507-.183.984.194 1.203"/></svg>

package/index.js

@@ -248,6 +248,7 @@ export { default as PassportIcon } from './components/Icon/__generated__/Passpor
 export { default as PaymentsIcon } from './components/Icon/__generated__/PaymentsIcon.js';
 export { default as PencilIcon } from './components/Icon/__generated__/PencilIcon.js';
 export { default as PeopleUserIcon } from './components/Icon/__generated__/PeopleUserIcon.js';
+export { default as PercentageIcon } from './components/Icon/__generated__/PercentageIcon.js';
 export { default as PerformanceIcon } from './components/Icon/__generated__/PerformanceIcon.js';
 export { default as PhoneIcon } from './components/Icon/__generated__/PhoneIcon.js';
 export { default as PhoneLinkIcon } from './components/Icon/__generated__/PhoneLinkIcon.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.42.19",
+  "version": "0.44.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/src/index.d.ts",

package/styles/components/Layout/Components/index.scss

@@ -42,12 +42,34 @@ div.cobalt-layout-stack {
 
   .cobalt-layout-stack__item {
     @include border-top(base);
+
+    display: block;
+
     padding: var(--cobalt-layout-item-spacing);
   }
 
-  .cobalt-layout-stack__item:first-of-type {
+  .cobalt-layout-stack__item:first-child {
     border-top: 0;
   }
+
+  a.cobalt-layout-stack__item {
+    text-decoration: inherit;
+    font-weight: inherit;
+  }
+
+  a.cobalt-layout-stack__item[href]:hover {
+    @include bg-color(neutralAlt);
+  }
+
+  a.cobalt-layout-stack__item[href]:first-child {
+    border-radius: calc(border-radius(xl) - 1px) calc(border-radius(xl) - 1px) 0
+      0;
+  }
+
+  a.cobalt-layout-stack__item[href]:last-child {
+    border-radius: 0 0 calc(border-radius(xl) - 1px)
+      calc(border-radius(xl) - 1px);
+  }
 }
 
 table.cobalt-layout-stack {

package/tokens/icons.js

@@ -195,6 +195,7 @@ const icons = {
 	payments: "payments.svg",
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
+	percentage: "percentage.svg",
 	performance: "performance.svg",
 	phoneLink: "phone-link.svg",
 	phone: "phone.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/Form/Autocomplete/index.d.ts

@@ -23,7 +23,7 @@ type Props = {
     renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement>;
 declare const wrappedComponent: React.ComponentClass<{
-    icon?: "map" | "search" | "filter" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "map" | "search" | "filter" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     items: (AutocompleteItem | string)[];
     minQueryLength?: number | undefined;
     autoFilter?: boolean | undefined;

package/types/src/components/Form/TextInput.d.ts

@@ -14,7 +14,7 @@ export declare const TextInputWrapper: ({ icon, status, render, }: {
 }) => React.JSX.Element;
 declare const wrappedComponent: React.ComponentClass<{
     type?: TextInputType | undefined;
-    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
+    icon?: "search" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "info" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang" | undefined;
     forwardedRef?: React.Ref<HTMLInputElement> | undefined;
 } & FormElement & React.InputHTMLAttributes<HTMLInputElement> & {
     id?: string | undefined;

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

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

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

@@ -194,6 +194,7 @@ export { default as PassportIcon } from "./PassportIcon";
 export { default as PaymentsIcon } from "./PaymentsIcon";
 export { default as PencilIcon } from "./PencilIcon";
 export { default as PeopleUserIcon } from "./PeopleUserIcon";
+export { default as PercentageIcon } from "./PercentageIcon";
 export { default as PerformanceIcon } from "./PerformanceIcon";
 export { default as PhoneIcon } from "./PhoneIcon";
 export { default as PhoneLinkIcon } from "./PhoneLinkIcon";

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

@@ -22,7 +22,7 @@ export interface IconProps {
     contained?: boolean;
     className?: string;
 }
-export declare const isIconSource: (source: string) => source is "info" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
+export declare const isIconSource: (source: string) => source is "info" | "accountDetails" | "addPicture" | "airConditioning" | "airport" | "android" | "antique" | "arrowLeftCircleFilled" | "arrowLeft" | "arrowRightCircleFilled" | "arrowRightCircle" | "arrowRight" | "audioInput" | "babySeat" | "battery" | "bell" | "bikeRack" | "bin" | "bluetooth" | "briefcase" | "bulb" | "cable" | "cabriolet" | "calendarCheck" | "calendarClock" | "calendarEnd" | "calendarStart" | "calendar" | "cameraAdd" | "camera" | "campervan" | "carAdd" | "carCheck" | "carDamages" | "carDrivyOpen" | "carGroup" | "carLock" | "carPlay" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "card" | "cdPlayer" | "certificate" | "chains" | "checkCircleFilled" | "checkCircle" | "check" | "checklist" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circledArrowRight" | "city" | "cleaning" | "clockAlert" | "clockBackwards" | "clockForwards" | "clock" | "closeCircleFilled" | "close" | "collapse" | "connectCar" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "contract" | "convertible" | "copy" | "coupe" | "creditCardAdd" | "creditCardError" | "creditCard" | "cruiseControl" | "dashcam" | "directions" | "document" | "dotHorizontal" | "dotVertical" | "dotsHorizontal" | "dotsVertical" | "download" | "earning" | "earth" | "edit" | "electric" | "evBattery" | "evCable" | "evCharger" | "expand" | "externalLink" | "eyeClosed" | "eyeOpened" | "eye" | "faceRecognition" | "facebook" | "family" | "fileFilled" | "filter" | "filters" | "flag" | "fourByFour" | "fourWheelDrive" | "fuelTank" | "geolocation" | "gift" | "gps" | "graphUp" | "healing" | "heart" | "hitch" | "home" | "idCard" | "incident" | "infoCircleFilled" | "infoCircle" | "infoFilled" | "instant" | "invoice" | "keyConnect" | "key" | "licenceCheck" | "licencePaper" | "licence" | "lifeBuoy" | "linkedin" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "location" | "lockCheck" | "locked" | "login" | "logout" | "mailCheck" | "mail" | "mapAlt" | "map" | "meetDriver" | "meetOwner" | "menuList" | "messages" | "mileage" | "minibus" | "minusCircleFilled" | "minus" | "miscGift" | "nearbyDevice" | "notification" | "number1Circle" | "number2Circle" | "number3Circle" | "number4Circle" | "number5Circle" | "okHand" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "paperclip" | "parking" | "passport" | "payments" | "pencil" | "peopleUser" | "percentage" | "performance" | "phoneLink" | "phone" | "photos" | "pickupTruck" | "pig" | "pin" | "plug" | "plusCircleFilled" | "plus" | "position" | "pricingFlat" | "pricingVariable" | "profilePicture" | "questionCircleFilled" | "questionCircle" | "question" | "raceFlag" | "recenter" | "refresh" | "reorder" | "replacementCar" | "reply" | "reset" | "ride" | "roofBox" | "rotate" | "sealCheck" | "searchCar" | "searchPeople" | "search" | "sedan" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "shareAndroid" | "shareIos" | "share" | "shieldCheck" | "shield" | "shop" | "skiRack" | "slider" | "smartphone" | "snowTire" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "starHalf" | "star" | "stars" | "subway" | "suitcase" | "support" | "suv" | "synch" | "tag" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "tolls" | "trailer" | "train" | "triangleDown" | "triangleRight" | "triangleUp" | "twitter" | "twoPeople" | "uber" | "unfold" | "unlocked" | "userCheck" | "userQuestion" | "userShield" | "userSwitch" | "user" | "utilityVanLarge" | "utilityVanMedium" | "utilityVanSmall" | "verifiedSeal" | "walk" | "wallet" | "warningCircleFilled" | "warningCircle" | "whatsapp" | "wheel" | "wheelchair" | "wrench" | "yingyang";
 export declare const Icon: ({ source, color, size, contained, className, }: IconProps) => React.JSX.Element;
 export * from "./__generated__/index";
 export default Icon;

package/types/src/components/Layout/Components/LayoutStack.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
-type LayoutStackItemPropsType = {
+type LayoutStackItemPropsType = (React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode;
     isTable: never;
     isPageHeader: never;
-} | {
+}) | (React.HTMLAttributes<HTMLElement> & {
     children: React.ReactNode;
     isPageHeader?: boolean;
     isTable?: boolean;
+});
+type LayoutStackLinkItemPropsType = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: React.ReactNode;
+    isPageHeader?: boolean;
 };
 declare const LayoutStack: {
     ({ children, isTable, isPageHeader, }: {
@@ -14,6 +18,7 @@ declare const LayoutStack: {
         isTable?: boolean;
         isPageHeader?: boolean;
     }): React.JSX.Element;
-    Item: ({ children, isTable }: LayoutStackItemPropsType) => React.JSX.Element;
+    Item: ({ children, isTable, ...props }: LayoutStackItemPropsType) => React.JSX.Element;
+    LinkItem: ({ children, ...hyperlinkProps }: LayoutStackLinkItemPropsType) => React.JSX.Element;
 };
 export default LayoutStack;

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

@@ -194,6 +194,7 @@ export { default as passport } from "./passport.svg";
 export { default as payments } from "./payments.svg";
 export { default as pencil } from "./pencil.svg";
 export { default as peopleUser } from "./people-user.svg";
+export { default as percentage } from "./percentage.svg";
 export { default as performance } from "./performance.svg";
 export { default as phoneLink } from "./phone-link.svg";
 export { default as phone } from "./phone.svg";

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

@@ -253,6 +253,7 @@ export declare const icons: {
         payments: string;
         pencil: string;
         peopleUser: string;
+        percentage: string;
         performance: string;
         phoneLink: string;
         phone: string;