@drivy/cobalt 0.34.8 → 0.35.0

package/components/BulletList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/BulletList/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\n\ninterface BulletListProps {\n  children: React.ReactNode\n  iconPosition?: \"top\" | \"centered\"\n}\n\nexport const BulletList = ({\n  children,\n  iconPosition = \"centered\",\n}: BulletListProps) => (\n  <ul\n    className={classNames(\"cobalt-BulletList\", {\n      \"cobalt-BulletList--iconPositionTop\": iconPosition === \"top\",\n    })}\n  >\n    {children}\n  </ul>\n)\n\ninterface BulletListItemProps {\n  children: React.ReactNode\n  icon: ReturnType<typeof Icon>\n}\n\nexport const BulletListItem = ({ children, icon }: BulletListItemProps) => (\n  <li className=\"cobalt-BulletListItem\">\n    <span className=\"cobalt-BulletListItem__Icon\">{icon}</span>\n    <p className=\"cobalt-BulletListItem__Content\">{children}</p>\n  </li>\n)\n"],"names":["classNames"],"mappings":";;;MASa,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,YAAY,GAAG,UAAU,GACT,MAChB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,mBAAmB,EAAE;QACzC,oCAAoC,EAAE,YAAY,KAAK,KAAK;AAC7D,KAAA,CAAC,EAED,EAAA,QAAQ,CACN,EACN;AAOY,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAuB,MACpE,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACnC,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAQ;IAC3D,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAAE,QAAQ,CAAK,CACzD;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/BulletList/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { Icon } from \"../Icon\"\n\nexport interface BulletListProps {\n  children: React.ReactNode\n  iconPosition?: \"top\" | \"centered\"\n}\n\nexport const BulletList = ({\n  children,\n  iconPosition = \"centered\",\n}: BulletListProps) => (\n  <ul\n    className={classNames(\"cobalt-BulletList\", {\n      \"cobalt-BulletList--iconPositionTop\": iconPosition === \"top\",\n    })}\n  >\n    {children}\n  </ul>\n)\n\ninterface BulletListItemProps {\n  children: React.ReactNode\n  icon: ReturnType<typeof Icon>\n}\n\nexport const BulletListItem = ({ children, icon }: BulletListItemProps) => (\n  <li className=\"cobalt-BulletListItem\">\n    <span className=\"cobalt-BulletListItem__Icon\">{icon}</span>\n    <p className=\"cobalt-BulletListItem__Content\">{children}</p>\n  </li>\n)\n"],"names":["classNames"],"mappings":";;;MASa,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,YAAY,GAAG,UAAU,GACT,MAChB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,mBAAmB,EAAE;QACzC,oCAAoC,EAAE,YAAY,KAAK,KAAK;AAC7D,KAAA,CAAC,EAED,EAAA,QAAQ,CACN,EACN;AAOY,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAuB,MACpE,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;AACnC,IAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAQ;IAC3D,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAC,gCAAgC,EAAA,EAAE,QAAQ,CAAK,CACzD;;;;"}

package/components/Modal/index.js

@@ -12,7 +12,7 @@ import { getScrollbarWidth } from '../utils/dom.js';
 // Only for the API, render nothing, we use ModalFooterInternal internally
 const ModalFooterAPI = (_props) => null;
 const isModalFooterAPIComponent = (component) => React.isValidElement(component) && component.type === ModalFooterAPI;
-const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, close, overflowHidden = true, initialFocusRef, bodySpacing, onDismissAttempt, onHidden, onShow, title, skipAnimation = { enter: false, leave: false }, }, ref) => {
+const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, close, overflowHidden = true, initialFocusRef, bodySpacing, onDismissAttempt, onHidden, onShow, title, skipAnimation = { enter: false, leave: false }, fullHeight, fullWidth, }, ref) => {
     const defaultBodyStyle = useRef({
         paddingRight: document.body.style.paddingRight,
         overflow: document.body.style.overflow,
@@ -95,6 +95,8 @@ const _Modal = forwardRef(({ ["aria-label"]: ariaLabel, children, isOpen, close,
                 "cobalt-modal--desktop": !isMobile,
                 "cobalt-modal--mobile": isMobile,
                 "cobalt-modal--overflowHidden": overflowHidden,
+                "cobalt-modal--fullHeight": fullHeight,
+                "cobalt-modal--fullWidth": fullWidth,
             }), "aria-label": ariaLabel, style: { translateY: styles.modalTransform }, ref: ref },
             header,
             React.createElement(ModalBody, { bodySpacing: bodySpacing, hasHeader: hasHeader, hasFooter: !!footer }, children),

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   * 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: (_a: unknown, _b: unknown, isReady: boolean) => {\n        isReady && isOpen && 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   * Disable modal max-width limit\n   */\n  fullWidth?: boolean\n  /**\n   * Always take the full height of the screen\n   */\n  fullHeight?: 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      skipAnimation = { enter: false, leave: false },\n      fullHeight,\n      fullWidth,\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: (_a: unknown, _b: unknown, isReady: boolean) => {\n        isReady && isOpen && 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                    \"cobalt-modal--fullHeight\": fullHeight,\n                    \"cobalt-modal--fullWidth\": fullWidth,\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/components/PriceTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\nexport interface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.34.8",
+  "version": "0.35.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -35,7 +35,7 @@
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "4.0.2",
-    "postcss": "8.4.27",
+    "postcss": "8.4.28",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -49,14 +49,14 @@
     "@getaround-eu/prettier-config": "1.2.0",
     "@getaround-eu/stylelint-config": "2.0.1",
     "@getaround-eu/ts-config": "2.2.0",
-    "@percy/storybook": "3.3.1",
+    "@percy/storybook": "4.3.6",
     "@rollup/plugin-json": "6.0.0",
-    "@rushstack/eslint-patch": "1.3.2",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
+    "@rushstack/eslint-patch": "1.3.3",
+    "@storybook/addon-essentials": "7.3.2",
+    "@storybook/addons": "7.3.2",
+    "@storybook/blocks": "7.3.2",
+    "@storybook/react": "7.3.2",
+    "@storybook/react-webpack5": "7.3.2",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
@@ -67,36 +67,38 @@
     "@types/media-typer": "1.1.1",
     "@types/prettier": "2.7.3",
     "@types/react-dom": "18.2.7",
-    "@whitespace/storybook-addon-html": "^5.1.6",
-    "autoprefixer": "10.4.14",
-    "core-js": "3.32.0",
+    "autoprefixer": "10.4.15",
+    "core-js": "3.32.1",
     "css-loader": "6.8.1",
-    "eslint": "8.45.0",
+    "eslint": "8.47.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "file-loader": "6.2.0",
-    "jest": "29.6.2",
-    "jest-environment-jsdom": "29.6.2",
+    "jest": "29.6.3",
+    "jest-environment-jsdom": "29.6.3",
     "nested-object-access": "^0.2.5",
     "np": "8.0.4",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "7.3.2",
+    "postcss-loader": "7.3.3",
     "prettier": "2.8.8",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
     "react-test-renderer": "18.2.0",
-    "regenerator-runtime": "0.13.11",
+    "regenerator-runtime": "0.14.0",
+    "remark-gfm": "^3.0.1",
     "rollup": "2.79.1",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.35.0",
-    "sass": "1.64.1",
+    "sass": "1.66.1",
     "sass-loader": "13.3.2",
-    "sharp": "0.32.4",
+    "sharp": "0.32.5",
     "sharp-cli": "4.1.1",
+    "storybook": "7.3.2",
     "style-loader": "3.3.3",
-    "stylelint": "15.10.2",
+    "stylelint": "15.10.3",
     "svg2vectordrawable": "2.9.1",
     "svgo": "3.0.2",
     "ts-jest": "29.1.1",
@@ -115,13 +117,13 @@
     "scss:vars": "node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
     "icon:binary": "./scripts/buildIconBinary.sh",
     "icon": "./icon",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "build:icons": "./scripts/buildIcons.sh",
     "build:illustrations": "./scripts/buildIllustrations.sh",
     "build:theme": "ts-node-esm ./scripts/buildThemeCSSVariables.ts",
     "test": "jest",
-    "percy": "build-storybook && percy-storybook --widths=320,1280",
+    "percy": "storybook build && percy-storybook --widths=320,1280",
     "typecheck": "tsc",
     "version": "cp package.json dist/package.json"
   },
@@ -145,5 +147,8 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }

package/styles/components/Modal/index.scss

@@ -18,6 +18,7 @@ $reach-ui-dialog-margin-top: 10vh;
   }
 
   &[data-reach-dialog-content] {
+    @include bg-color(secondary);
     max-height: calc(100% - 2 * #{$reach-ui-dialog-margin-top});
 
     box-shadow: 0 6px 36px fade-out(black, 0.8);
@@ -28,6 +29,18 @@ $reach-ui-dialog-margin-top: 10vh;
     width: 80vw;
   }
 
+  &--fullHeight {
+    &[data-reach-dialog-content] {
+      height: 100%;
+    }
+  }
+
+  &--fullWidth {
+    &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
+      max-width: unset;
+    }
+  }
+
   &--desktop {
     position: relative;
 
@@ -54,6 +67,8 @@ $reach-ui-dialog-margin-top: 10vh;
   }
 
   &-body {
+    height: 100%;
+
     overflow-y: auto;
     overscroll-behavior: contain;
 

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Icon } from "../Icon";
-interface BulletListProps {
+export interface BulletListProps {
     children: React.ReactNode;
     iconPosition?: "top" | "centered";
 }

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

@@ -48,6 +48,14 @@ export type ModalPropsType = {
         enter: boolean;
         leave: boolean;
     };
+    /**
+     * Disable modal max-width limit
+     */
+    fullWidth?: boolean;
+    /**
+     * Always take the full height of the screen
+     */
+    fullHeight?: boolean;
     /**
      * Modal body content
      */

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

@@ -5,7 +5,7 @@ export declare const PriceTable: {
     }): React.JSX.Element;
     Row: ({ label, value, discounted, }: PriceTableRowProps) => React.JSX.Element;
 };
-interface PriceTableRowProps {
+export interface PriceTableRowProps {
     label: string;
     value: string;
     discounted?: boolean;