@drivy/cobalt 0.39.1 → 0.40.0

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { useRef, useLayoutEffect, useState, useCallback } from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  children?: React.ReactNode\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  children?: React.ReactNode\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab = (_props: TabPropsType) => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<TabPropsType> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      {...props}\n      {...(href ? { href, as: \"a\" } : { as: \"button\" })}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}: TabsPropsType) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: (typeof children)[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronLeftIcon color=\"accent\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronRightIcon color=\"accent\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/index.tsx"],"sourcesContent":["import React, { useRef, useLayoutEffect, useState, useCallback } from \"react\"\nimport {\n  Tabs as ReachTabs,\n  TabList as ReachTabList,\n  Tab as ReachTab,\n  TabPanels as ReachTabPanels,\n  TabPanel as ReachTabPanel,\n} from \"@reach/tabs\"\nimport cx from \"classnames\"\nimport { useSpring } from \"@react-spring/web\"\n\nimport { throttle } from \"../utils\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../Icon\"\n\nconst SCROLL_STEP = 150\n\nexport type TabsPropsType = {\n  children?: React.ReactNode\n  /**\n   * Index of the initial actived tab (first tab by default)\n   */\n  defaultTabIndex?: number\n  /**\n   * Method to be run on tab change\n   */\n  onChange?: (index: number) => void\n  /**\n   * Left aligned tabs with no uppercased labels\n   */\n  subLevel?: boolean\n}\n\ntype TabPropsType = {\n  children?: React.ReactNode\n  /**\n   * Label/title of the tab\n   */\n  label: string | React.ReactNode | ((isSelected?: boolean) => React.ReactNode)\n  /**\n   * Hypertext link. If provided, the tab will be an anchor\n   */\n  href?: string\n}\n\ntype InternalTabPropsType = {\n  isSelected?: boolean // Provided by Reach TabList component\n  href?: string\n  children: TabPropsType[\"label\"]\n}\n\n// Only for the API, render nothing, we use InternalTab component internally\nexport const Tab = (_props: TabPropsType) => null\nTab.displayName = \"Tab\"\n\nconst isTabComponent = (\n  component: React.ReactNode\n): component is React.ReactElement<TabPropsType> =>\n  React.isValidElement(component) && component.type === Tab\n\nconst InternalTab = (props: InternalTabPropsType) => {\n  const { href, children, isSelected } = props\n  return (\n    <ReachTab\n      {...props}\n      {...(href ? { href, as: \"a\" } : { as: \"button\" })}\n      className={cx(\"cobalt-tabs__label\", {\n        \"cobalt-tabs__label--selected\": isSelected,\n      })}\n    >\n      {typeof children === \"function\" ? children(isSelected) : children}\n    </ReachTab>\n  )\n}\nInternalTab.displayName = \"InternalTab\"\n\nexport const Tabs = ({\n  children,\n  defaultTabIndex,\n  onChange,\n  subLevel,\n}: TabsPropsType) => {\n  const [scrollDistance, setScrollDistance] = useState(0)\n  const [scrollButtonsEnabled, setScrollButtonsEnabled] = useState({\n    prev: false,\n    next: true,\n  })\n\n  const labelListRef = useRef<HTMLDivElement>(null)\n\n  const [, scrollLeftSpringRef] = useSpring(() => ({\n    config: { tension: 300, friction: 30, clamp: true },\n    springScrollLeft: 0,\n    onChange: {\n      springScrollLeft: (springScrollLeft) => {\n        if (labelListRef?.current) {\n          labelListRef.current.scrollLeft =\n            springScrollLeft as unknown as number\n        }\n      },\n    },\n  }))\n\n  const updateScrollDistance = () => {\n    const scrollWidth = labelListRef?.current?.scrollWidth || 0\n    const clientWidth = labelListRef?.current?.clientWidth || 0\n    setScrollDistance(scrollWidth && clientWidth && scrollWidth - clientWidth)\n  }\n\n  const updateScrollButtonsState = () => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      if (labelListRef.current.scrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n      }\n      if (scrollDistance && labelListRef.current.scrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n      }\n      setScrollButtonsEnabled(newScrollButtonStates)\n    }\n  }\n\n  const updateStates = () => {\n    updateScrollDistance()\n    updateScrollButtonsState()\n  }\n\n  useLayoutEffect(() => {\n    const throttledUpdate = throttle(updateStates, 300)\n    window.addEventListener(\"resize\", throttledUpdate)\n    return () => window.removeEventListener(\"resize\", throttledUpdate)\n  }, [scrollDistance])\n\n  // When the bar became scrollable/not scrollable, the scrollWidth will change\n  // so we update states according to its change\n  useLayoutEffect(() => {\n    updateStates()\n  }, [labelListRef?.current?.scrollWidth])\n\n  const tabsPropsArray: TabPropsType[] = []\n  const tabsChildren: (typeof children)[] = []\n  let matchedHrefIndex: number | undefined = undefined\n  React.Children.forEach(children, (child, index) => {\n    if (isTabComponent(child)) {\n      const { children: tabChildren, ...tabProps } = child.props\n      tabsPropsArray.push(tabProps)\n      // if no children, it will be null, nothing will be rendered\n      tabsChildren.push(tabChildren)\n      if (tabProps.href === window.location.pathname) {\n        matchedHrefIndex = index\n      }\n    }\n  })\n\n  const scrollTabs = (scrollAmount: number) => {\n    if (labelListRef?.current) {\n      const newScrollButtonStates = { prev: true, next: true }\n      const computedScrollLeft = labelListRef.current.scrollLeft + scrollAmount\n      let newScrollLeft = computedScrollLeft\n\n      // not scrolled at all\n      if (computedScrollLeft <= 0) {\n        newScrollButtonStates.prev = false\n        newScrollLeft = 0\n      }\n      // scrolled at maximum\n      if (scrollDistance && computedScrollLeft >= scrollDistance) {\n        newScrollButtonStates.next = false\n        newScrollLeft = scrollDistance\n      }\n\n      setScrollButtonsEnabled(newScrollButtonStates)\n      scrollLeftSpringRef.start({\n        springScrollLeft: newScrollLeft,\n        immediate: false,\n      })\n    }\n  }\n  const onScrollPrev = useCallback(\n    () => scrollTabs(-SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n  const onScrollNext = useCallback(\n    () => scrollTabs(SCROLL_STEP),\n    [scrollButtonsEnabled, labelListRef?.current?.scrollLeft]\n  )\n\n  const isScrollable = !!scrollDistance\n\n  const handleWheel = throttle(() => {\n    if (labelListRef?.current) {\n      updateScrollButtonsState()\n      // Don't animate\n      scrollLeftSpringRef.set({\n        springScrollLeft: labelListRef.current.scrollLeft,\n      })\n    }\n  }, 300)\n\n  return (\n    <ReachTabs\n      className=\"cobalt-tabs\"\n      defaultIndex={matchedHrefIndex || defaultTabIndex}\n      onChange={onChange}\n    >\n      <ReachTabList\n        className={cx(\"cobalt-tabs__labels\", {\n          \"cobalt-tabs__labels--scrollable\": isScrollable,\n          \"cobalt-tabs__labels--subLevel\": subLevel,\n        })}\n        onWheel={handleWheel}\n        ref={labelListRef}\n      >\n        {tabsPropsArray.map((props, index) => (\n          <InternalTab key={index} href={props.href}>\n            {props.label}\n          </InternalTab>\n        ))}\n      </ReachTabList>\n      {isScrollable && (\n        <>\n          <button\n            className=\"cobalt-tabs__nav-prev\"\n            onClick={onScrollPrev}\n            disabled={!scrollButtonsEnabled.prev}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronLeftIcon color=\"accent\" />\n            </span>\n          </button>\n          <button\n            className=\"cobalt-tabs__nav-next\"\n            onClick={onScrollNext}\n            disabled={!scrollButtonsEnabled.next}\n          >\n            <span className=\"cobalt-tabs__nav-icon\">\n              <ChevronRightIcon color=\"accent\" />\n            </span>\n          </button>\n        </>\n      )}\n      {!!tabsChildren.length && (\n        <ReachTabPanels>\n          {tabsChildren.map((tabChildren, index) => (\n            <ReachTabPanel className=\"cobalt-tabs__panel\" key={index}>\n              {tabChildren}\n            </ReachTabPanel>\n          ))}\n        </ReachTabPanels>\n      )}\n    </ReachTabs>\n  )\n}\nTabs.Tab = Tab\nTabs.displayName = \"Tabs\"\n\nexport default Tabs\n"],"names":["ReachTab","ReachTabs","ReachTabList","ReachTabPanels","ReachTabPanel"],"mappings":"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"}

package/components/utils/Timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.js","sources":["../../../src/components/utils/Timer.ts"],"sourcesContent":["/**\n * Timer object enhancing setTimeout with start, pause, resume features *\n */\nclass Timer {\n  private timerID?: number\n  private start?: number\n  private remaining: number\n  private callback: (...args: any) => any\n\n  constructor(callback: (...args: any) => any, delay: number) {\n    this.remaining = delay\n    this.callback = callback\n  }\n\n  pause = () => {\n    if (this.start) {\n      window.clearTimeout(this.timerID)\n      this.remaining -= Number(new Date()) - this.start\n    }\n  }\n\n  run = () => {\n    this.start = Number(new Date())\n    if (this.timerID) window.clearTimeout(this.timerID)\n    this.timerID = window.setTimeout(this.callback, this.remaining)\n  }\n}\n\nexport default Timer\n"],"names":[],"mappings":"AAAA;;AAEG;AACH,MAAM,KAAK,CAAA;IAMT,WAAY,CAAA,QAA+B,EAAE,KAAa,EAAA;QAK1D,IAAK,CAAA,KAAA,GAAG,MAAK;YACX,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACjC,gBAAA,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;AAClD,aAAA;AACH,SAAC,CAAA;QAED,IAAG,CAAA,GAAA,GAAG,MAAK;YACT,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;YAC/B,IAAI,IAAI,CAAC,OAAO;AAAE,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACnD,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;AACjE,SAAC,CAAA;AAfC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;KACzB;AAcF;;;;"}
+{"version":3,"file":"Timer.js","sources":["../../../src/components/utils/Timer.ts"],"sourcesContent":["/**\n * Timer object enhancing setTimeout with start, pause, resume features *\n */\nclass Timer {\n  private timerID?: number\n  private start?: number\n  private remaining: number\n  private callback: (...args: any) => any\n\n  constructor(callback: (...args: any) => any, delay: number) {\n    this.remaining = delay\n    this.callback = callback\n  }\n\n  pause = () => {\n    if (this.start) {\n      window.clearTimeout(this.timerID)\n      this.remaining -= Number(new Date()) - this.start\n    }\n  }\n\n  run = () => {\n    this.start = Number(new Date())\n    if (this.timerID) window.clearTimeout(this.timerID)\n    this.timerID = window.setTimeout(this.callback, this.remaining)\n  }\n}\n\nexport default Timer\n"],"names":[],"mappings":"AAAA;;AAEG;AACH,MAAM,KAAK,CAAA;IAMT,WAAY,CAAA,QAA+B,EAAE,KAAa,EAAA;QAK1D,IAAK,CAAA,KAAA,GAAG,MAAK;AACX,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACjC,gBAAA,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;aAClD;AACH,SAAC,CAAA;QAED,IAAG,CAAA,GAAA,GAAG,MAAK;YACT,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;YAC/B,IAAI,IAAI,CAAC,OAAO;AAAE,gBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AACnD,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;AACjE,SAAC,CAAA;AAfC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;KACzB;AAcF;;;;"}

package/components/utils/validateFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"validateFile.js","sources":["../../../src/components/utils/validateFile.ts"],"sourcesContent":["import typer from \"media-typer\"\n\nconst MIME_SUBTYPE_TO_EXTENSION: Record<string, string> = {\n  gif: \"gif\",\n  jpeg: \"jpg\",\n  pdf: \"pdf\",\n  png: \"png\",\n  zip: \"zip\",\n  csv: \"csv\",\n}\n\nconst getFileSignature = (blob: Blob): Promise<string> => {\n  return new Promise<string>((resolve, reject) => {\n    try {\n      const fileReader: FileReader = new FileReader()\n      fileReader.onloadend = (_e: Event) => {\n        let header = \"\"\n        const result: ArrayBuffer = fileReader.result as ArrayBuffer\n        const arr = new Uint8Array(result)\n\n        for (let i = 0; i < arr.length; i++) {\n          header += arr[i].toString(16)\n        }\n        resolve(header)\n      }\n      fileReader.readAsArrayBuffer(blob.slice(0, 4))\n    } catch (e) {\n      reject(e)\n    }\n  })\n}\n\nconst getMimetypeFromSignature = (signature: string): string | null => {\n  switch (signature.toUpperCase()) {\n    case \"89504E47\":\n      return \"image/png\"\n    case \"47494638\":\n      return \"image/gif\"\n    case \"25504446\":\n      return \"application/pdf\"\n    case \"FFD8FFDB\":\n    case \"FFD8FFEE\":\n    case \"FFD8FFE0\":\n    case \"FFD8FFE1\":\n    case \"FFD8FFE2\":\n    case \"FFD8FFE3\":\n    case \"FFD8FFE8\":\n      return \"image/jpeg\"\n    case \"504B0304\":\n      return \"application/zip\"\n    default:\n      return null\n  }\n}\n\nconst getMimeType = (file: Blob): Promise<string | null> => {\n  return new Promise((resolve, reject) => {\n    getFileSignature(file).then(\n      (signature) => {\n        resolve(getMimetypeFromSignature(signature))\n      },\n      (error) => {\n        reject(error)\n      }\n    )\n  })\n}\n\nconst getFileExtensionFromFileName = (fileName: string): string | null => {\n  const fileTypeFromFileNameRegExp = new RegExp(`(\\\\.)(.+)$`, \"i\")\n\n  const fromName = fileTypeFromFileNameRegExp.exec(fileName)\n  if (fromName && fromName.length > 1 && fromName[2]) {\n    return fromName[2]\n  }\n\n  return null\n}\n\nconst getFileExtensionFromMimeType = (mimeType: string): string | null => {\n  try {\n    const type = typer.parse(mimeType).subtype\n    return MIME_SUBTYPE_TO_EXTENSION[type] || null\n  } catch (_e) {\n    return null\n  }\n}\n\n// If this function\n// - return falsy => the file is correct, file process will abort\n// - return true => the file is valid to continue the file process\nexport const validateFile = async (\n  file: File,\n  fileTypeValidator: (\n    file: File,\n    extension: string | null\n  ) => boolean | undefined | null\n) => {\n  const mimeType = await getMimeType(file)\n  const extension =\n    (mimeType && getFileExtensionFromMimeType(mimeType)) ||\n    getFileExtensionFromMimeType(file.type) ||\n    getFileExtensionFromFileName(file.name)\n\n  return fileTypeValidator(file, extension)\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validateFile.js","sources":["../../../src/components/utils/validateFile.ts"],"sourcesContent":["import typer from \"media-typer\"\n\nconst MIME_SUBTYPE_TO_EXTENSION: Record<string, string> = {\n  gif: \"gif\",\n  jpeg: \"jpg\",\n  pdf: \"pdf\",\n  png: \"png\",\n  zip: \"zip\",\n  csv: \"csv\",\n}\n\nconst getFileSignature = (blob: Blob): Promise<string> => {\n  return new Promise<string>((resolve, reject) => {\n    try {\n      const fileReader: FileReader = new FileReader()\n      fileReader.onloadend = (_e: Event) => {\n        let header = \"\"\n        const result: ArrayBuffer = fileReader.result as ArrayBuffer\n        const arr = new Uint8Array(result)\n\n        for (let i = 0; i < arr.length; i++) {\n          header += arr[i].toString(16)\n        }\n        resolve(header)\n      }\n      fileReader.readAsArrayBuffer(blob.slice(0, 4))\n    } catch (e) {\n      reject(e)\n    }\n  })\n}\n\nconst getMimetypeFromSignature = (signature: string): string | null => {\n  switch (signature.toUpperCase()) {\n    case \"89504E47\":\n      return \"image/png\"\n    case \"47494638\":\n      return \"image/gif\"\n    case \"25504446\":\n      return \"application/pdf\"\n    case \"FFD8FFDB\":\n    case \"FFD8FFEE\":\n    case \"FFD8FFE0\":\n    case \"FFD8FFE1\":\n    case \"FFD8FFE2\":\n    case \"FFD8FFE3\":\n    case \"FFD8FFE8\":\n      return \"image/jpeg\"\n    case \"504B0304\":\n      return \"application/zip\"\n    default:\n      return null\n  }\n}\n\nconst getMimeType = (file: Blob): Promise<string | null> => {\n  return new Promise((resolve, reject) => {\n    getFileSignature(file).then(\n      (signature) => {\n        resolve(getMimetypeFromSignature(signature))\n      },\n      (error) => {\n        reject(error)\n      }\n    )\n  })\n}\n\nconst getFileExtensionFromFileName = (fileName: string): string | null => {\n  const fileTypeFromFileNameRegExp = new RegExp(`(\\\\.)(.+)$`, \"i\")\n\n  const fromName = fileTypeFromFileNameRegExp.exec(fileName)\n  if (fromName && fromName.length > 1 && fromName[2]) {\n    return fromName[2]\n  }\n\n  return null\n}\n\nconst getFileExtensionFromMimeType = (mimeType: string): string | null => {\n  try {\n    const type = typer.parse(mimeType).subtype\n    return MIME_SUBTYPE_TO_EXTENSION[type] || null\n  } catch (_e) {\n    return null\n  }\n}\n\n// If this function\n// - return falsy => the file is correct, file process will abort\n// - return true => the file is valid to continue the file process\nexport const validateFile = async (\n  file: File,\n  fileTypeValidator: (\n    file: File,\n    extension: string | null\n  ) => boolean | undefined | null\n) => {\n  const mimeType = await getMimeType(file)\n  const extension =\n    (mimeType && getFileExtensionFromMimeType(mimeType)) ||\n    getFileExtensionFromMimeType(file.type) ||\n    getFileExtensionFromFileName(file.name)\n\n  return fileTypeValidator(file, extension)\n}\n"],"names":[],"mappings":"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"}

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from \"react\"\nimport { breakpoints } from \"../tokens\"\n\nexport type CobaltBreakpointType = keyof typeof breakpoints | \"over\"\n\nconst defaultBreakpoint: CobaltBreakpointType = \"md\"\n\nconst breakpointsArray = (\n  Object.keys(breakpoints) as (keyof typeof breakpoints)[]\n)\n  .map((bp) => ({\n    name: bp,\n    value: parseInt(breakpoints[bp].slice(0, -2), 10),\n  }))\n  .sort((a, b) => a.value - b.value)\n\nexport const cobaltBreakpoints: [CobaltBreakpointType, string][] =\n  breakpointsArray.map((breakpoint, index) => {\n    // lowest limit\n    if (index === 0) {\n      return [breakpoint.name, `(max-width: ${breakpoint.value - 1}px)`]\n    } else {\n      return [\n        breakpoint.name,\n        `(min-width: ${breakpointsArray[index - 1].value}px) and (max-width: ${\n          breakpoint.value - 1\n        }px)`,\n      ]\n    }\n  })\n\n// highest limit\ncobaltBreakpoints.push([\n  \"over\",\n  `(min-width: ${breakpointsArray[breakpointsArray.length - 1].value}px)`,\n])\n\n/**\n * Hook to get the current Cobalt breakpoint according to the viewport size\n */\nconst useBreakpoint = () => {\n  const getMediaQueriesList = () =>\n    cobaltBreakpoints.map((b) => window.matchMedia(b[1]))\n\n  const getBreakpoint = () => {\n    const matchIndex = getMediaQueriesList().findIndex((media) => media.matches)\n    return matchIndex !== -1\n      ? cobaltBreakpoints[matchIndex][0]\n      : defaultBreakpoint\n  }\n\n  const isMobileBreakpoint = (bp: CobaltBreakpointType) =>\n    bp === \"sm\" || bp === \"xs\"\n\n  const initialBreakpoint = getBreakpoint()\n\n  const [breakpoint, setBreakpoint] =\n    useState<CobaltBreakpointType>(initialBreakpoint)\n\n  const [isMobile, setIsMobile] = useState(\n    isMobileBreakpoint(initialBreakpoint)\n  )\n\n  useEffect(() => {\n    const handleMediaChange = () => {\n      const newBreakpoint = getBreakpoint()\n      setBreakpoint(newBreakpoint)\n      setIsMobile(isMobileBreakpoint(newBreakpoint))\n    }\n    const mediaQueriesList = getMediaQueriesList()\n    mediaQueriesList.forEach((mq) => {\n      // Safari < 14 only supports addListener\n      mq.addEventListener\n        ? mq.addEventListener(\"change\", handleMediaChange)\n        : mq.addListener(handleMediaChange)\n    })\n    // Remove listeners on cleanup\n    return () =>\n      mediaQueriesList.forEach((mq) => {\n        // Safari < 14 only supports removeListener\n        mq.removeEventListener\n          ? mq.removeEventListener(\"change\", handleMediaChange)\n          : mq.removeListener(handleMediaChange)\n      })\n  }, []) // Empty array ensures effect is only run on mount and unmount\n\n  return { breakpoint, isMobile }\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from \"react\"\nimport { breakpoints } from \"../tokens\"\n\nexport type CobaltBreakpointType = keyof typeof breakpoints | \"over\"\n\nconst defaultBreakpoint: CobaltBreakpointType = \"md\"\n\nconst breakpointsArray = (\n  Object.keys(breakpoints) as (keyof typeof breakpoints)[]\n)\n  .map((bp) => ({\n    name: bp,\n    value: parseInt(breakpoints[bp].slice(0, -2), 10),\n  }))\n  .sort((a, b) => a.value - b.value)\n\nexport const cobaltBreakpoints: [CobaltBreakpointType, string][] =\n  breakpointsArray.map((breakpoint, index) => {\n    // lowest limit\n    if (index === 0) {\n      return [breakpoint.name, `(max-width: ${breakpoint.value - 1}px)`]\n    } else {\n      return [\n        breakpoint.name,\n        `(min-width: ${breakpointsArray[index - 1].value}px) and (max-width: ${\n          breakpoint.value - 1\n        }px)`,\n      ]\n    }\n  })\n\n// highest limit\ncobaltBreakpoints.push([\n  \"over\",\n  `(min-width: ${breakpointsArray[breakpointsArray.length - 1].value}px)`,\n])\n\n/**\n * Hook to get the current Cobalt breakpoint according to the viewport size\n */\nconst useBreakpoint = () => {\n  const getMediaQueriesList = () =>\n    cobaltBreakpoints.map((b) => window.matchMedia(b[1]))\n\n  const getBreakpoint = () => {\n    const matchIndex = getMediaQueriesList().findIndex((media) => media.matches)\n    return matchIndex !== -1\n      ? cobaltBreakpoints[matchIndex][0]\n      : defaultBreakpoint\n  }\n\n  const isMobileBreakpoint = (bp: CobaltBreakpointType) =>\n    bp === \"sm\" || bp === \"xs\"\n\n  const initialBreakpoint = getBreakpoint()\n\n  const [breakpoint, setBreakpoint] =\n    useState<CobaltBreakpointType>(initialBreakpoint)\n\n  const [isMobile, setIsMobile] = useState(\n    isMobileBreakpoint(initialBreakpoint)\n  )\n\n  useEffect(() => {\n    const handleMediaChange = () => {\n      const newBreakpoint = getBreakpoint()\n      setBreakpoint(newBreakpoint)\n      setIsMobile(isMobileBreakpoint(newBreakpoint))\n    }\n    const mediaQueriesList = getMediaQueriesList()\n    mediaQueriesList.forEach((mq) => {\n      // Safari < 14 only supports addListener\n      mq.addEventListener\n        ? mq.addEventListener(\"change\", handleMediaChange)\n        : mq.addListener(handleMediaChange)\n    })\n    // Remove listeners on cleanup\n    return () =>\n      mediaQueriesList.forEach((mq) => {\n        // Safari < 14 only supports removeListener\n        mq.removeEventListener\n          ? mq.removeEventListener(\"change\", handleMediaChange)\n          : mq.removeListener(handleMediaChange)\n      })\n  }, []) // Empty array ensures effect is only run on mount and unmount\n\n  return { breakpoint, isMobile }\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":"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"}

package/hooks/useElementHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useElementHeight.js","sources":["../../src/hooks/useElementHeight.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\"\nimport { ResizeObserver as ROPolyfill } from \"@juggle/resize-observer\"\n\n// https://caniuse.com/resizeobserver\nconst ResizeObserver =\n  (window as { ResizeObserver: typeof ROPolyfill } & typeof window)\n    .ResizeObserver || ROPolyfill\n\n/**\n * Hook to listen the giving element resize events (using ResizeObserver)\n * and returning the updated height of that element according to those events\n *\n * Useful to animated using react-spring an element that we can't know the\n * actual size since it's computed from the child elements\n */\nconst useElementHeight = <ElementType extends HTMLElement>() => {\n  const ref = useRef<ElementType>(null)\n  const [height, setHeight] = useState(0)\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      requestAnimationFrame(() => {\n        if (!entry) return\n        setHeight(entry.target.getBoundingClientRect().height)\n      })\n    })\n\n    if (ref.current) {\n      resizeObserver.observe(ref.current)\n    }\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return { ref, height }\n}\n\nexport default useElementHeight\n"],"names":["ROPolyfill"],"mappings":";;;AAGA;AACA,MAAM,cAAc,GACjB,MAAgE;KAC9D,cAAc,IAAIA,gBAAU,CAAA;AAEjC;;;;;;AAMG;AACG,MAAA,gBAAgB,GAAG,MAAsC;AAC7D,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,SAAS,CAAC,MAAK;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;YACpD,qBAAqB,CAAC,MAAK;AACzB,gBAAA,IAAI,CAAC,KAAK;oBAAE,OAAM;gBAClB,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAA;AACxD,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;QAEF,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,YAAA,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;AACpC,SAAA;AAED,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE,CAAA;KACzC,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;AACxB;;;;"}
+{"version":3,"file":"useElementHeight.js","sources":["../../src/hooks/useElementHeight.tsx"],"sourcesContent":["import { useRef, useState, useEffect } from \"react\"\nimport { ResizeObserver as ROPolyfill } from \"@juggle/resize-observer\"\n\n// https://caniuse.com/resizeobserver\nconst ResizeObserver =\n  (window as { ResizeObserver: typeof ROPolyfill } & typeof window)\n    .ResizeObserver || ROPolyfill\n\n/**\n * Hook to listen the giving element resize events (using ResizeObserver)\n * and returning the updated height of that element according to those events\n *\n * Useful to animated using react-spring an element that we can't know the\n * actual size since it's computed from the child elements\n */\nconst useElementHeight = <ElementType extends HTMLElement>() => {\n  const ref = useRef<ElementType>(null)\n  const [height, setHeight] = useState(0)\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      requestAnimationFrame(() => {\n        if (!entry) return\n        setHeight(entry.target.getBoundingClientRect().height)\n      })\n    })\n\n    if (ref.current) {\n      resizeObserver.observe(ref.current)\n    }\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return { ref, height }\n}\n\nexport default useElementHeight\n"],"names":["ROPolyfill"],"mappings":";;;AAGA;AACA,MAAM,cAAc,GACjB,MAAgE;KAC9D,cAAc,IAAIA,gBAAU,CAAA;AAEjC;;;;;;AAMG;AACG,MAAA,gBAAgB,GAAG,MAAsC;AAC7D,IAAA,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEvC,SAAS,CAAC,MAAK;QACb,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;YACpD,qBAAqB,CAAC,MAAK;AACzB,gBAAA,IAAI,CAAC,KAAK;oBAAE,OAAM;gBAClB,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAA;AACxD,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF,QAAA,IAAI,GAAG,CAAC,OAAO,EAAE;AACf,YAAA,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;SACpC;AAED,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE,CAAA;KACzC,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA;AACxB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.39.1",
+  "version": "0.40.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -31,12 +31,12 @@
     "@reach/visually-hidden": "0.16.0",
     "@react-spring/web": "9.5.5",
     "@tippyjs/react": "4.2.6",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "date-fns": "2.30.0",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
-    "nanoid": "5.0.3",
-    "postcss": "8.4.31",
+    "nanoid": "5.0.4",
+    "postcss": "8.4.33",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -51,27 +51,27 @@
     "@getaround-eu/stylelint-config": "3.0.0",
     "@getaround-eu/ts-config": "2.2.0",
     "@percy/storybook": "4.3.6",
-    "@rollup/plugin-json": "6.0.1",
-    "@rushstack/eslint-patch": "1.5.1",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addons": "7.5.3",
-    "@storybook/blocks": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-webpack5": "7.5.3",
+    "@rollup/plugin-json": "6.1.0",
+    "@rushstack/eslint-patch": "1.7.2",
+    "@storybook/addon-essentials": "7.6.10",
+    "@storybook/addons": "7.6.10",
+    "@storybook/blocks": "7.6.10",
+    "@storybook/react": "7.6.10",
+    "@storybook/react-webpack5": "7.6.10",
     "@svgr/cli": "7.0.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "14.1.0",
+    "@testing-library/react": "14.1.2",
     "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.1",
-    "@types/jest": "29.5.8",
+    "@types/jest": "29.5.11",
     "@types/lodash.throttle": "4.1.9",
     "@types/media-typer": "1.1.3",
     "@types/prettier": "3.0.0",
-    "@types/react-dom": "18.2.15",
-    "autoprefixer": "10.4.16",
-    "core-js": "3.33.2",
-    "css-loader": "6.8.1",
-    "eslint": "8.53.0",
+    "@types/react-dom": "18.2.18",
+    "autoprefixer": "10.4.17",
+    "core-js": "3.35.1",
+    "css-loader": "6.9.1",
+    "eslint": "8.56.0",
     "eslint-plugin-storybook": "^0.6.15",
     "file-loader": "6.2.0",
     "jest": "29.7.0",
@@ -79,33 +79,33 @@
     "nested-object-access": "^0.2.5",
     "np": "8.0.4",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "7.3.3",
-    "prettier": "3.1.0",
+    "postcss-loader": "7.3.4",
+    "prettier": "3.2.4",
     "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",
     "react-textarea-autosize": "^8.5.3",
-    "regenerator-runtime": "0.14.0",
+    "regenerator-runtime": "0.14.1",
     "remark-gfm": "^3.0.1",
     "rollup": "2.79.1",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "2.0.0",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.69.5",
-    "sass-loader": "13.3.2",
+    "sass": "1.70.0",
+    "sass-loader": "13.3.3",
     "sharp": "0.32.6",
-    "sharp-cli": "4.1.1",
-    "storybook": "7.5.3",
-    "style-loader": "3.3.3",
+    "sharp-cli": "4.2.0",
+    "storybook": "7.6.10",
+    "style-loader": "3.3.4",
     "stylelint": "15.11.0",
     "svg2vectordrawable": "2.9.1",
-    "svgo": "3.0.3",
-    "ts-jest": "29.1.1",
-    "ts-node": "10.9.1",
-    "typescript": "5.2.2"
+    "svgo": "3.2.0",
+    "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -117,8 +117,7 @@
     "lint:css": "stylelint \"src/**/*.scss\"",
     "lint:js": "eslint src/components --ext ts,tsx,js,jsx --max-warnings 0 ",
     "scss:vars": "node -e 'console.log(require(\"./utils/tailwindcssThemeHelpers.js\").getFlattenedTheme())'",
-    "icon:binary": "./scripts/buildIconBinary.sh",
-    "icon": "./icon",
+    "binary": "./scripts/buildCobaltBinary.sh",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "build:icons": "./scripts/buildIcons.sh",

package/styles/components/Layout/{Layout.scss → Components/index.scss}

@@ -1,11 +1,24 @@
 :root {
   --cobalt-layout-y-spacing: 8px;
   --cobalt-layout-x-spacing: 24px;
+  --cobalt-layout-item-spacing: 16px;
+  --cobalt-layout-page-header-top-spacing: 32px;
+  --cobalt-layout-section-header-top-spacing: 40px;
+}
+
+.cobalt-layout-section,
+.cobalt-layout-card,
+.cobalt-layout-stack,
+.cobalt-layout-page-title,
+.cobalt-layout-section-title {
+  min-width: calc(100% - 2 * var(--cobalt-layout-x-spacing));
 }
 
 .cobalt-layout-section {
   @include bg-color(primary);
-  padding: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+  margin: var(--cobalt-layout-y-spacing) var(--cobalt-layout-x-spacing);
+  // Allow to take the full height of the parent container in full pages
+  flex-grow: 1;
 }
 
 .cobalt-layout-card {
@@ -16,7 +29,7 @@
   border-radius: border-radius(xl);
 
   .cobalt-layout-card__item {
-    margin: 16px;
+    margin: var(--cobalt-layout-item-spacing);
   }
 }
 
@@ -29,7 +42,7 @@ div.cobalt-layout-stack {
 
   .cobalt-layout-stack__item {
     @include border-top(base);
-    padding: 16px;
+    padding: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item:first-of-type {
@@ -52,28 +65,30 @@ table.cobalt-layout-stack {
   .cobalt-layout-stack__item td,
   .cobalt-layout-stack__item th {
     @include border-top(base);
-    padding: 16px 0;
+    padding-top: var(--cobalt-layout-item-spacing);
+    padding-bottom: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item th:first-of-type,
   .cobalt-layout-stack__item td:first-of-type {
-    padding-left: 16px;
+    padding-left: var(--cobalt-layout-item-spacing);
   }
 
   .cobalt-layout-stack__item th:last-of-type,
   .cobalt-layout-stack__item td:last-of-type {
-    padding-right: 16px;
+    padding-right: var(--cobalt-layout-item-spacing);
   }
 }
 
-.cobalt-layout-page-title {
-  @include c-text-title-lg;
-  padding: 32px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
-    var(--cobalt-layout-x-spacing);
-}
-
 .cobalt-layout-section-title {
   @include c-text-title-md;
-  padding: 40px var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
+  padding: var(--cobalt-layout-section-header-top-spacing)
+    var(--cobalt-layout-x-spacing) var(--cobalt-layout-y-spacing)
     var(--cobalt-layout-x-spacing);
 }
+
+.cobalt-layout-section.cobalt-layout--isPageHeader,
+.cobalt-layout-card.cobalt-layout--isPageHeader,
+.cobalt-layout-stack.cobalt-layout--isPageHeader {
+  padding-top: var(--cobalt-layout-page-header-top-spacing);
+}

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

@@ -0,0 +1,55 @@
+.cobalt-layout-flexible,
+.cobalt-layout-flexibleWithConstraint,
+.cobalt-layout-fixed {
+  display: flex;
+  flex-direction: column;
+  min-height: 1px;
+}
+
+.cobalt-layout-flexible.cobalt-layout--bottomPadding,
+.cobalt-layout-flexibleWithConstraint.cobalt-layout--bottomPadding,
+.cobalt-layout-fixed.cobalt-layout--bottomPadding {
+  padding-bottom: 48px;
+}
+
+.cobalt-layout-flexible,
+.cobalt-layout-flexibleWithConstraint {
+  min-width: 0;
+  width: 100%;
+}
+
+.cobalt-layout-fixed {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.cobalt-layout-flexibleWithConstraint {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cobalt-layout-flexibleWithConstraint--large {
+  max-width: 1200px;
+}
+
+.cobalt-layout-flexibleWithConstraint--medium {
+  max-width: 840px;
+}
+
+.cobalt-layout-flexibleWithConstraint--small {
+  max-width: 540px;
+}
+
+.cobalt-layout-fixed--280 {
+  width: 280px;
+}
+
+.cobalt-layout-fixed--420 {
+  width: 420px;
+}
+
+.cobalt-layout-fixed--600 {
+  width: 600px;
+}
+
+// 48px paddiing bottom

package/styles/components.scss

@@ -13,7 +13,8 @@
 @import "./components/Flag/index";
 @import "./components/Flash/index";
 @import "./components/Icon/index";
-@import "./components/Layout/Layout";
+@import "./components/Layout/Components/index";
+@import "./components/Layout/Surfaces/index";
 @import "./components/Note/index";
 @import "./components/PhotoDropzone/index";
 @import "./components/Pill/index";

package/styles/core/palette.scss

@@ -68,29 +68,4 @@
   --c-season-800: #005100;
   --c-season-900: #030;
   --c-season-1000: #001900;
-  --c-l-white: #fff;
-  --c-l-grey-lighter: #f8f7f8;
-  --c-l-grey-light: #edebed;
-  --c-l-grey: #dbd8dc;
-  --c-l-grey-dark: #a49da7;
-  --c-l-indigo: #61366b;
-  --c-l-indigo-dark: #390446;
-  --c-l-purple-light: #d076ca;
-  --c-l-purple: #b01aa7;
-  --c-l-graphite-light: #757575;
-  --c-l-graphite: #333;
-  --c-l-turquoise: #5ecbdd;
-  --c-l-coral: #ffa484;
-  --c-l-amber: #ffc25a;
-  --c-l-red: #ff7378;
-  --c-l-green-light: #0fffb3;
-  --c-l-green: #00da94;
-  --c-l-green-dark: #00a873;
-  --c-l-blue: #2ea2ea;
-  --c-l-deprecatedBlueGhost: #2ea2ea0f;
-  --c-l-deprecatedDriver: #ffd988;
-  --c-l-deprecatedSeasonLow: #bdffac;
-  --c-l-deprecatedSeasonMedium: #94ea84;
-  --c-l-deprecatedSeasonHigh: #73c865;
-  --c-l-deprecatedSeasonVeryHigh: #54a949;
 }

package/styles/core/text.scss

@@ -53,7 +53,7 @@
   font-size: 1.25rem;
   font-weight: 700;
   line-height: 125%;
-  letter-spacing: NaNrem;
+  letter-spacing: -0.025rem;
 
   @include breakpoint($from: sm) {
     font-size: 1.5rem;