@drivy/cobalt 0.14.4 → 0.14.8

package/cjs/tokens/icons.js

@@ -44,6 +44,7 @@ const icons = {
 	contextualWarningCircle: "contextual-warning-circle.svg",
 	creditCard: "credit-card.svg",
 	directions: "directions.svg",
+	document: "document.svg",
 	dotsHorizontal: "dots-horizontal.svg",
 	dotsVertical: "dots-vertical.svg",
 	download: "download.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__/DocumentIcon.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+var iconSource = "document";
+var DocumentIcon = function (_a) {
+    var _b;
+    var color = _a.color, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.contained, contained = _d === void 0 ? false : _d, className = _a.className;
+    var computedClassName = cx(className, "cobalt-Icon cobalt-Icon--".concat(iconSource), (_b = {},
+        _b["cobalt-Icon--color".concat(capitalize(color))] = color,
+        _b["cobalt-Icon--size16"] = size === 16,
+        _b["cobalt-Icon--size20"] = size === 20,
+        _b["cobalt-Icon--size32"] = size === 32,
+        _b["cobalt-Icon--contained"] = contained,
+        _b));
+    var wrap = function (content) { return (React.createElement("span", { className: computedClassName }, content)); };
+    return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 15H9v-2h7v2Zm3-4H9V9h10v2Zm0-4H9V5h10v2Zm2-6H7c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V3a2 2 0 0 0-2-2ZM3 5v16h16v2H3a2 2 0 0 1-2-2V5h2Z" })));
+};
+
+export { DocumentIcon as default };
+//# sourceMappingURL=DocumentIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentIcon.js","sources":["../../../../src/components/Icon/__generated__/DocumentIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColors } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColors\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"document\"\n\nconst DocumentIcon = ({\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\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M16 15H9v-2h7v2Zm3-4H9V9h10v2Zm0-4H9V5h10v2Zm2-6H7c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V3a2 2 0 0 0-2-2ZM3 5v16h16v2H3a2 2 0 0 1-2-2V5h2Z\"\n      />\n    </svg>\n  )\n}\n\nexport default DocumentIcon\n"],"names":[],"mappings":";;;;;AAUA,IAAM,UAAU,GAAG,UAAU,CAAA;IAEvB,YAAY,GAAG,UAAC,EAKV;;QAJV,KAAK,WAAA,EACL,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,SAAS,eAAA;IAET,IAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,mCAA4B,UAAU,CAAE;QAEtC,GAAC,4BAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,IAAG,KAAK;QACjD,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,yBAAqB,GAAE,IAAI,KAAK,EAAE;QAClC,4BAAwB,GAAE,SAAS;YAEtC,CAAA;IAED,IAAM,IAAI,GAAG,UAAC,OAAwB,IAAK,QACzC,8BAAM,SAAS,EAAE,iBAAiB,IAAG,OAAO,CAAQ,IACrD,CAAA;IAED,OAAO,IAAI,CACT,6BAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;QACzD,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,6JAA6J,GAC/J,CACE,CACP,CAAA;AACH;;;;"}

package/components/Modal/index.js

@@ -16,22 +16,18 @@ var isModalFooterAPIComponent = function (component) {
     return React.isValidElement(component) && component.type === ModalFooterAPI;
 };
 var _Modal = forwardRef(function (_a, ref) {
-    var ariaLabel = _a["aria-label"], children = _a.children, isOpen = _a.isOpen, close = _a.close, _b = _a.overflowHidden, overflowHidden = _b === void 0 ? true : _b, initialFocusRef = _a.initialFocusRef, bodySpacing = _a.bodySpacing, onDismissAttempt = _a.onDismissAttempt, onHidden = _a.onHidden, onShow = _a.onShow, title = _a.title;
-    var defaultBodyStyle = useRef();
-    useEffect(function () {
-        defaultBodyStyle.current = {
-            paddingRight: document.body.style.paddingRight,
-            overflow: document.body.style.overflow,
-        };
-    }, []);
+    var ariaLabel = _a["aria-label"], children = _a.children, isOpen = _a.isOpen, close = _a.close, _b = _a.overflowHidden, overflowHidden = _b === void 0 ? true : _b, initialFocusRef = _a.initialFocusRef, bodySpacing = _a.bodySpacing, onDismissAttempt = _a.onDismissAttempt, onHidden = _a.onHidden, onShow = _a.onShow, title = _a.title, _c = _a.skipAnimation, skipAnimation = _c === void 0 ? { enter: false, leave: false } : _c;
+    var defaultBodyStyle = useRef({
+        paddingRight: document.body.style.paddingRight,
+        overflow: document.body.style.overflow,
+        isRestored: false,
+    });
     var restoreDefaultBodyStyle = function () {
-        if (defaultBodyStyle.current) {
-            var _a = defaultBodyStyle.current, overflow_1 = _a.overflow, paddingRight_1 = _a.paddingRight;
-            setTimeout(function () {
-                // setTimeout is used to ensure that the restore style job is done as a final step
-                document.body.style.overflow = overflow_1;
-                document.body.style.paddingRight = paddingRight_1;
-            }, 0);
+        if (defaultBodyStyle.current && !defaultBodyStyle.current.isRestored) {
+            var _a = defaultBodyStyle.current, overflow = _a.overflow, paddingRight = _a.paddingRight;
+            document.body.style.overflow = overflow;
+            document.body.style.paddingRight = paddingRight;
+            defaultBodyStyle.current.isRestored = true;
         }
     };
     useEffect(function () {
@@ -41,6 +37,7 @@ var _Modal = forwardRef(function (_a, ref) {
         // dangerouslyBypassScrollLock is used to disabled it
         // + fake scrollbar width to avoid visual layout shift
         if (isOpen) {
+            defaultBodyStyle.current.isRestored = false;
             document.body.style.paddingRight = "".concat(getScrollbarWidth() +
                 parseInt(window.getComputedStyle(document.body).paddingRight, 10), "px"); // to avoid visual shift due to removing an existing scrollbar
             document.body.style.overflow = "hidden";
@@ -58,11 +55,13 @@ var _Modal = forwardRef(function (_a, ref) {
             modalTransform: transformTransitionOut,
         },
         enter: {
+            immediate: skipAnimation.enter,
             overlayOpacity: 1,
             modalTransform: 0,
             config: springConfig,
         },
         leave: {
+            immediate: skipAnimation.leave,
             overlayOpacity: 0,
             modalTransform: transformTransitionOut,
             config: springConfig,

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle =\n      useRef<Record<\"paddingRight\" | \"overflow\", string>>()\n\n    useEffect(() => {\n      defaultBodyStyle.current = {\n        paddingRight: document.body.style.paddingRight,\n        overflow: document.body.style.overflow,\n      }\n    }, [])\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n        setTimeout(() => {\n          // setTimeout is used to ensure that the restore style job is done as a final step\n          document.body.style.overflow = overflow\n          document.body.style.paddingRight = paddingRight\n        }, 0)\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: () => {\n        if (onShow) onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                onTouchEnd={(e) => e.stopPropagation()}\n                onMouseUp={(e) => e.stopPropagation()}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport { DialogOverlay, DialogContent } from \"@reach/dialog\"\nimport { useTransition, animated } from \"@react-spring/web\"\n\nimport useBreakpoint from \"../../hooks/useBreakpoint\"\nimport ModalHeader from \"./ModalHeader\"\nimport ModalBody from \"./ModalBody\"\nimport ModalFooter, { ModalFooterPropsType } from \"./ModalFooter\"\nimport { getScrollbarWidth } from \"../utils/\"\n\nexport type ModalPropsType = {\n  /**\n   * mandatory for A11y\n   */\n  [\"aria-label\"]: string\n  /**\n   * Function called to close the modal, providing it make the modal closeable\n   */\n  close?: () => void\n  /**\n   * React.ref of the element to focus first when the modal opens\n   */\n  initialFocusRef?: React.RefObject<HTMLElement>\n  /**\n   * State to show or hide the modal/dialog\n   */\n  isOpen: boolean\n  /**\n   * Action to fire if the user try to dismiss when the modal is not closeable\n   */\n  onDismissAttempt?: () => void\n  /**\n   * Listener called when the modal has been fully hidden\n   */\n  onHidden?: () => void\n  /**\n   * Listener called when the modal begins to show\n   */\n  onShow?: () => void\n  /**\n   * Modal title\n   */\n  title?: string\n  /**\n   * Disable/Enable body paddings (enabled by default)\n   */\n  bodySpacing?: boolean\n  /**\n   * Disable/Enable hidding overflowing absolute elements (enabled by default)\n   */\n  overflowHidden?: boolean\n  /**\n   * Disable enter/leave animation (animation enabled by default)\n   */\n  skipAnimation?: {\n    enter: boolean\n    leave: boolean\n  }\n  /**\n   * Modal body content\n   */\n  children: React.ReactNode\n}\n\n// Only for the API, render nothing, we use ModalFooterInternal internally\nexport const ModalFooterAPI = (_props: ModalFooterPropsType) => null\n\nexport const isModalFooterAPIComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<ModalFooterPropsType> =>\n  React.isValidElement(component) && component.type === ModalFooterAPI\n\nconst _Modal = forwardRef<HTMLDivElement, ModalPropsType>(\n  (\n    {\n      [\"aria-label\"]: ariaLabel,\n      children,\n      isOpen,\n      close,\n      overflowHidden = true,\n      initialFocusRef,\n      bodySpacing,\n      onDismissAttempt,\n      onHidden,\n      onShow,\n      title,\n      skipAnimation = { enter: false, leave: false },\n    }: ModalPropsType,\n    ref\n  ) => {\n    const defaultBodyStyle = useRef({\n      paddingRight: document.body.style.paddingRight,\n      overflow: document.body.style.overflow,\n      isRestored: false,\n    })\n\n    const restoreDefaultBodyStyle = () => {\n      if (defaultBodyStyle.current && !defaultBodyStyle.current.isRestored) {\n        const { overflow, paddingRight } = defaultBodyStyle.current\n\n        document.body.style.overflow = overflow\n        document.body.style.paddingRight = paddingRight\n\n        defaultBodyStyle.current.isRestored = true\n      }\n    }\n\n    useEffect(() => {\n      // disable / enable body scroll\n      // default reach ui solution to lock body scroll is broken with range inputs on mobile (no drag)\n      // https://github.com/reach/reach-ui/issues/678\n      // dangerouslyBypassScrollLock is used to disabled it\n      // + fake scrollbar width to avoid visual layout shift\n      if (isOpen) {\n        defaultBodyStyle.current.isRestored = false\n\n        document.body.style.paddingRight = `${\n          getScrollbarWidth() +\n          parseInt(window.getComputedStyle(document.body).paddingRight, 10)\n        }px` // to avoid visual shift due to removing an existing scrollbar\n\n        document.body.style.overflow = \"hidden\"\n      }\n      return () => {\n        isOpen && restoreDefaultBodyStyle()\n      }\n    }, [isOpen])\n\n    const { isMobile } = useBreakpoint()\n\n    const transformTransitionOut = isMobile ? 500 : -20\n\n    const springConfig = { tension: 300, friction: 30, clamp: true }\n\n    const transition = useTransition(isOpen, {\n      from: {\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n      },\n      enter: {\n        immediate: skipAnimation.enter,\n        overlayOpacity: 1,\n        modalTransform: 0,\n        config: springConfig,\n      },\n      leave: {\n        immediate: skipAnimation.leave,\n        overlayOpacity: 0,\n        modalTransform: transformTransitionOut,\n        config: springConfig,\n      },\n      onStart: () => {\n        if (onShow) onShow()\n      },\n      onDestroyed: (isTransitioned) => {\n        !isOpen && restoreDefaultBodyStyle()\n        if (onHidden && isTransitioned) onHidden()\n      },\n    })\n\n    const AnimatedDialogOverlay = animated(DialogOverlay)\n    const AnimatedDialogContent = animated(DialogContent)\n\n    const modalFooter = React.Children.toArray(children).find((c) =>\n      isModalFooterAPIComponent(c)\n    )\n\n    let header: React.ReactNode = null\n    if (title || close) {\n      header = <ModalHeader title={title} {...(close ? { close } : {})} />\n    }\n    const hasHeader = !!title || !!close\n\n    let footer: React.ReactNode = null\n    if (React.isValidElement(modalFooter)) {\n      footer = <ModalFooter {...modalFooter.props} />\n    }\n\n    const getDismissHandler = (onClose?: ModalPropsType[\"close\"]) => {\n      if (onClose) return onClose\n      if (onDismissAttempt) return onDismissAttempt\n      return\n    }\n\n    return (\n      <>\n        {transition(\n          (styles, isOpenState) =>\n            isOpenState && (\n              <AnimatedDialogOverlay\n                initialFocusRef={initialFocusRef}\n                onDismiss={getDismissHandler(close)}\n                className=\"cobalt-modal__overlay\"\n                style={{ opacity: styles.overlayOpacity }}\n                onTouchEnd={(e) => e.stopPropagation()}\n                onMouseUp={(e) => e.stopPropagation()}\n                dangerouslyBypassScrollLock\n              >\n                <AnimatedDialogContent\n                  className={cx(\"cobalt-modal\", {\n                    \"cobalt-modal--desktop\": !isMobile,\n                    \"cobalt-modal--mobile\": isMobile,\n                    \"cobalt-modal--overflowHidden\": overflowHidden,\n                  })}\n                  aria-label={ariaLabel}\n                  style={{ translateY: styles.modalTransform }}\n                  ref={ref}\n                >\n                  {header}\n                  <ModalBody\n                    bodySpacing={bodySpacing}\n                    hasHeader={hasHeader}\n                    hasFooter={!!footer}\n                  >\n                    {children}\n                  </ModalBody>\n                  {footer}\n                </AnimatedDialogContent>\n              </AnimatedDialogOverlay>\n            )\n        )}\n      </>\n    )\n  }\n)\n\n_Modal.displayName = \"Modal\"\n\nconst Modal = Object.assign(_Modal, { Footer: ModalFooterAPI })\n\nexport default Modal\n"],"names":[],"mappings":"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"}

package/icons/document.js

@@ -0,0 +1,4 @@
+var document = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 15H9v-2h7v2zm3-4H9V9h10v2zm0-4H9V5h10v2zm2-6H7c-1.11 0-2 .89-2 2v14a2 2 0 002 2h14c1.11 0 2-.89 2-2V3a2 2 0 00-2-2zM3 5v16h16v2H3a2 2 0 01-2-2V5h2z\"/></svg>";
+
+export { document as default };
+//# sourceMappingURL=document.js.map

package/icons/document.js.map

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

package/icons/document.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 15H9v-2h7v2Zm3-4H9V9h10v2Zm0-4H9V5h10v2Zm2-6H7c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V3a2 2 0 0 0-2-2ZM3 5v16h16v2H3a2 2 0 0 1-2-2V5h2Z"/></svg>

package/icons/index.js

@@ -39,6 +39,7 @@ export { default as contextualWarningCircleFilled } from './contextual-warning-c
 export { default as contextualWarningCircle } from './contextual-warning-circle.js';
 export { default as creditCard } from './credit-card.js';
 export { default as directions } from './directions.js';
+export { default as document } from './document.js';
 export { default as dotsHorizontal } from './dots-horizontal.js';
 export { default as dotsVertical } from './dots-vertical.js';
 export { default as download } from './download.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

@@ -87,6 +87,7 @@ export { default as ContextualWarningCircleFilledIcon } from './components/Icon/
 export { default as ContextualWarningCircleIcon } from './components/Icon/__generated__/ContextualWarningCircleIcon.js';
 export { default as CreditCardIcon } from './components/Icon/__generated__/CreditCardIcon.js';
 export { default as DirectionsIcon } from './components/Icon/__generated__/DirectionsIcon.js';
+export { default as DocumentIcon } from './components/Icon/__generated__/DocumentIcon.js';
 export { default as DotsHorizontalIcon } from './components/Icon/__generated__/DotsHorizontalIcon.js';
 export { default as DotsVerticalIcon } from './components/Icon/__generated__/DotsVerticalIcon.js';
 export { default as DownloadIcon } from './components/Icon/__generated__/DownloadIcon.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.14.4",
+  "version": "0.14.8",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,8 +31,8 @@
     "date-fns": "2.28.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "3.2.0",
-    "postcss": "8.4.5",
+    "nanoid": "3.3.1",
+    "postcss": "8.4.6",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -49,25 +49,25 @@
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "4.1.0",
     "@rushstack/eslint-patch": "1.1.0",
-    "@storybook/addon-essentials": "6.4.14",
-    "@storybook/addons": "6.4.14",
-    "@storybook/builder-webpack5": "6.4.14",
-    "@storybook/manager-webpack5": "6.4.14",
-    "@storybook/react": "6.4.14",
+    "@storybook/addon-essentials": "6.4.19",
+    "@storybook/addons": "6.4.19",
+    "@storybook/builder-webpack5": "6.4.19",
+    "@storybook/manager-webpack5": "6.4.19",
+    "@storybook/react": "6.4.19",
     "@svgr/cli": "5.5.0",
-    "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.3",
     "@testing-library/react-hooks": "7.0.2",
     "@types/classnames": "2.3.0",
     "@types/jest": "27.4.0",
     "@types/lodash.throttle": "4.1.6",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.38",
+    "@types/react": "17.0.39",
     "autoprefixer": "10.4.2",
-    "core-js": "3.20.3",
-    "css-loader": "6.5.1",
-    "eslint": "8.7.0",
-    "jest": "27.4.7",
+    "core-js": "3.21.1",
+    "css-loader": "6.6.0",
+    "eslint": "8.9.0",
+    "jest": "27.5.1",
     "np": "7.6.0",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
@@ -77,15 +77,15 @@
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.66.1",
+    "rollup": "2.68.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
-    "rollup-plugin-typescript2": "0.31.1",
-    "sass": "1.49.0",
-    "sass-loader": "12.4.0",
+    "rollup-plugin-typescript2": "0.31.2",
+    "sass": "1.49.8",
+    "sass-loader": "12.6.0",
     "style-loader": "3.3.1",
-    "stylelint": "14.3.0",
+    "stylelint": "14.5.1",
     "svgo": "2.8.0",
     "ts-jest": "27.1.3",
     "typescript": "4.5.5"
@@ -132,6 +132,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.38"
+    "@types/react": "17.0.39"
   }
 }

package/styles/components/Button/legacy.scss

@@ -48,6 +48,7 @@ $group-item-spacing: spacing(tight);
   font-family: font-family(brand);
   font-weight: 600;
   text-align: center;
+  white-space: normal;
 
   border-radius: border-radius(large);
   box-shadow: 0 2px 8px 0 rgba(#000, 0.08);

package/styles/components/Buttons/index.scss

@@ -67,6 +67,7 @@
   font-family: font-family(brand);
   font-weight: 600;
   text-align: center;
+  white-space: normal;
 
   border-radius: border-radius(md);
   box-shadow: 0 2px 8px 0 rgba(#000, 0.08);

package/styles/components/Form/RadioWithDetails.scss

@@ -43,13 +43,16 @@
   }
 
   .cobalt-radio-with-details__title {
-    @include text-style-section-header;
     color: color(indigo);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
 
     transition: color 150ms ease-in-out;
   }
 
   .cobalt-radio-with-details__description {
+    @include text-style-body;
     color: color(grey, dark);
 
     transition: color 150ms ease-in-out;

package/styles/components/Form/form.scss

@@ -76,7 +76,7 @@ $form-element--error-color: color(essence);
       inset 0 0 0 1px $form-element--default-active-color;
   }
 
-  &:read-only:focus {
+  &:not(select):read-only:focus {
     border-width: 1px;
 
     outline: none;
@@ -85,7 +85,7 @@ $form-element--error-color: color(essence);
   }
 
   &:disabled,
-  &:read-only {
+  &:not(select):read-only {
     border-color: $form-element--default-color;
 
     color: color(graphite, light);

package/tokens/icons.js

@@ -40,6 +40,7 @@ const icons = {
 	contextualWarningCircle: "contextual-warning-circle.svg",
 	creditCard: "credit-card.svg",
 	directions: "directions.svg",
+	document: "document.svg",
 	dotsHorizontal: "dots-horizontal.svg",
 	dotsVertical: "dots-vertical.svg",
 	download: "download.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/components/Button/index.d.ts

@@ -17,7 +17,7 @@ export declare const Button: {
         rounded?: boolean | undefined;
         size?: "large" | undefined;
         iconPosition?: "right" | "left" | undefined;
-        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
     } & {
         children?: _React.ReactNode;
     } & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -34,7 +34,7 @@ export declare const Button: {
         rounded?: boolean | undefined;
         size?: "large" | undefined;
         iconPosition?: "right" | "left" | undefined;
-        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
     } & {
         children?: _React.ReactNode;
     } & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -56,7 +56,7 @@ export declare const Button: {
         rounded?: boolean | undefined;
         size?: "large" | undefined;
         iconPosition?: "right" | "left" | undefined;
-        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
     } & {
         children?: _React.ReactNode;
     } & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -79,7 +79,7 @@ export declare const Button: {
         rounded?: boolean | undefined;
         size?: "large" | undefined;
         iconPosition?: "right" | "left" | undefined;
-        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
     } & {
         children?: _React.ReactNode;
     } & _React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -100,7 +100,7 @@ export declare const Button: {
             rounded?: boolean | undefined;
             size?: "large" | undefined;
             iconPosition?: "right" | "left" | undefined;
-            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
         } & {
             children?: _React.ReactNode;
         } & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -118,7 +118,7 @@ export declare const Button: {
             rounded?: boolean | undefined;
             size?: "large" | undefined;
             iconPosition?: "right" | "left" | undefined;
-            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
         } & {
             children?: _React.ReactNode;
         } & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -141,7 +141,7 @@ export declare const Button: {
             rounded?: boolean | undefined;
             size?: "large" | undefined;
             iconPosition?: "right" | "left" | undefined;
-            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
         } & {
             children?: _React.ReactNode;
         } & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -165,7 +165,7 @@ export declare const Button: {
             rounded?: boolean | undefined;
             size?: "large" | undefined;
             iconPosition?: "right" | "left" | undefined;
-            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+            icon?: "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "document" | "dotsHorizontal" | "dotsVertical" | "download" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "loading" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "reset" | "ride" | "search" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
         } & {
             children?: _React.ReactNode;
         } & _React.AnchorHTMLAttributes<HTMLAnchorElement> & {

package/types/components/Buttons/BrandButton/index.d.ts

@@ -16,7 +16,7 @@ declare const BrandButton: React.ForwardRefExoticComponent<{
     rounded?: boolean | undefined;
     size?: "large" | undefined;
     iconPosition?: "left" | "right" | undefined;
-    icon?: "loading" | "reset" | "search" | "download" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+    icon?: "loading" | "reset" | "document" | "search" | "download" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
 } & {
     children?: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -33,7 +33,7 @@ declare const BrandButton: React.ForwardRefExoticComponent<{
         rounded?: boolean | undefined;
         size?: "large" | undefined;
         iconPosition?: "left" | "right" | undefined;
-        icon?: "loading" | "reset" | "search" | "download" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
+        icon?: "loading" | "reset" | "document" | "search" | "download" | "airport" | "arrowLeft" | "arrowRight" | "bin" | "briefcase" | "bulb" | "camera" | "carAdd" | "carCheck" | "carDrivyOpen" | "carGroup" | "carLock" | "carReturn" | "carSearch" | "carTypeAntique" | "carTypeCabriolet" | "carTypeCampervan" | "carTypeCity" | "carTypeConvertible" | "carTypeCoupe" | "carTypeFamily" | "carTypeFourFour" | "carTypeMinibus" | "carTypeSedan" | "carTypeUtility" | "car" | "checkCircle" | "check" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "close" | "contactMail" | "contactPhone" | "contextualPaperclip" | "contextualQuestion" | "contextualWarningCircleFilled" | "contextualWarningCircle" | "creditCard" | "directions" | "dotsHorizontal" | "dotsVertical" | "earth" | "edit" | "externalLink" | "eye" | "filters" | "flag" | "geolocation" | "graphUp" | "incident" | "infoFilled" | "info" | "instant" | "key" | "locality" | "locationMap" | "locationParking" | "locationPin" | "logout" | "map" | "meetDriver" | "meetOwner" | "menuList" | "mileage" | "miscGift" | "notification" | "optionAirConditioning" | "optionAndroidAuto" | "optionAppleCarplay" | "optionAudioInput" | "optionBabySeat" | "optionBikeRack" | "optionBluetoothAudio" | "optionCdPlayer" | "optionChains" | "optionCruiseControl" | "optionDashcam" | "optionGps" | "optionHasTrailer" | "optionHitch" | "optionRoofBox" | "optionSkiRack" | "optionSnowTire" | "optionWheelchairAccessible" | "peopleUser" | "photos" | "plug" | "plus" | "raceFlag" | "refresh" | "ride" | "serviceBattery" | "serviceCleaning" | "serviceFuel" | "serviceHealing" | "serviceLocked" | "serviceTolls" | "serviceUnlocked" | "settings" | "share" | "shop" | "socialFacebook" | "socialLinkedin" | "socialTwitter" | "socialWhatsapp" | "star" | "subway" | "timeAlert" | "timeBackwards" | "timeCalendar" | "timeForward" | "train" | "userShield" | "verifiedSeal" | "wrench" | undefined;
     } & {
         children?: React.ReactNode;
     } & React.AnchorHTMLAttributes<HTMLAnchorElement> & {