@ably/ui 16.2.8 → 17.0.0-dev.3dbbd263

package/core/TabMenu.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-24 md:px-20 px-16 py-16 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};return React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},React.createElement(Tabs.List,{ref:listRef,className:cn("relative",{"flex border-b border-neutral-300 dark:border-neutral-1000":underline},{"h-full":flexibleTabHeight})},tabs.map((tab,index)=>React.createElement(Tabs.Trigger,{key:`tab-${index}`,className:cn("lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"?tab.disabled:false},typeof tab==="object"?tab.label:tab)),React.createElement("div",{className:cn("absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6",{"transition-[transform,width]":animated}),style:{transform:`translateX(${highlight.offset}px)`,width:`${highlight.width}px`}})),contents.map((content,index)=>React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
 //# sourceMappingURL=TabMenu.js.map

package/core/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\n/**\n * Props for the TabMenu component.\n */\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: (string | { label: string; disabled?: boolean })[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map((tab, index) => (\n          <Tabs.Trigger\n            key={`tab-${index}`}\n            className={cn(\n              \"lg:px-24 md:px-20 px-16 py-16 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n              { \"flex-1\": flexibleTabWidth },\n              { \"h-full\": flexibleTabHeight },\n              tabClassName,\n            )}\n            value={`tab-${index}`}\n            onClick={(event) => handleTabClick(event, index)}\n            disabled={typeof tab === \"object\" ? tab.disabled : false}\n          >\n            {typeof tab === \"object\" ? tab.label : tab}\n          </Tabs.Trigger>\n        ))}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[3px] w-24\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","handleTabClick","event","index","currentTarget","Root","defaultValue","className","List","ref","map","tab","Trigger","key","value","onClick","disabled","label","div","style","transform","content","Content"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\n/**\n * Props for the TabMenu component.\n */\nexport type TabMenuProps = {\n  /**\n   * An array of tabs, which can be either a string or an object with a label and an optional disabled state.\n   */\n  tabs: (string | { label: string; disabled?: boolean })[];\n\n  /**\n   * An optional array of React nodes representing the content for each tab.\n   */\n  contents?: ReactNode[];\n\n  /**\n   * An optional callback function that is called when a tab is clicked, receiving the index of the clicked tab.\n   */\n  tabOnClick?: (index: number) => void;\n\n  /**\n   * An optional class name to apply to each tab.\n   */\n  tabClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Root element.\n   */\n  rootClassName?: string;\n\n  /**\n   * An optional class name to apply to the Tabs.Content element.\n   */\n  contentClassName?: string;\n\n  /**\n   * Optional configuration options for the TabMenu.\n   */\n  options?: {\n    /**\n     * The index of the tab that should be selected by default.\n     */\n    defaultTabIndex?: number;\n\n    /**\n     * Whether to show an underline below the selected tab.\n     */\n    underline?: boolean;\n\n    /**\n     * Whether to animate the transition between tabs.\n     */\n    animated?: boolean;\n\n    /**\n     * Whether the tab width should be flexible.\n     */\n    flexibleTabWidth?: boolean;\n\n    /**\n     * Whether the tab height should be flexible.\n     */\n    flexibleTabHeight?: boolean;\n  };\n};\n\nconst DEFAULT_TAILWIND_ANIMATION_DURATION = 150;\n\nconst TabMenu: React.FC<TabMenuProps> = ({\n  tabs = [],\n  contents = [],\n  tabOnClick,\n  tabClassName,\n  rootClassName,\n  contentClassName,\n  options,\n}) => {\n  const {\n    defaultTabIndex = 0,\n    underline = true,\n    animated: animatedOption = true,\n    flexibleTabWidth = false,\n    flexibleTabHeight = false,\n  } = options ?? {};\n\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const [animated, setAnimated] = React.useState(false);\n  const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });\n\n  useEffect(() => {\n    if (animatedOption && highlight.width > 0) {\n      setTimeout(() => {\n        setAnimated(true);\n      }, DEFAULT_TAILWIND_ANIMATION_DURATION);\n    }\n  }, [animatedOption, highlight.width]);\n\n  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  return (\n    <Tabs.Root\n      defaultValue={`tab-${defaultTabIndex}`}\n      className={cn({ \"h-full\": flexibleTabHeight }, rootClassName)}\n    >\n      <Tabs.List\n        ref={listRef}\n        className={cn(\n          \"relative\",\n          {\n            \"flex border-b border-neutral-300 dark:border-neutral-1000\":\n              underline,\n          },\n          { \"h-full\": flexibleTabHeight },\n        )}\n      >\n        {tabs.map((tab, index) => (\n          <Tabs.Trigger\n            key={`tab-${index}`}\n            className={cn(\n              \"lg:px-6 md:px-5 px-4 py-4 ui-text-label1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed\",\n              { \"flex-1\": flexibleTabWidth },\n              { \"h-full\": flexibleTabHeight },\n              tabClassName,\n            )}\n            value={`tab-${index}`}\n            onClick={(event) => handleTabClick(event, index)}\n            disabled={typeof tab === \"object\" ? tab.disabled : false}\n          >\n            {typeof tab === \"object\" ? tab.label : tab}\n          </Tabs.Trigger>\n        ))}\n        <div\n          className={cn(\n            \"absolute bottom-0 bg-neutral-1300 dark:bg-neutral-000 h-[0.1875rem] w-6\",\n            { \"transition-[transform,width]\": animated },\n          )}\n          style={{\n            transform: `translateX(${highlight.offset}px)`,\n            width: `${highlight.width}px`,\n          }}\n        ></div>\n      </Tabs.List>\n      {contents.map((content, index) => (\n        <Tabs.Content\n          key={`tab-${index}`}\n          value={`tab-${index}`}\n          className={contentClassName}\n        >\n          {content}\n        </Tabs.Content>\n      ))}\n    </Tabs.Root>\n  );\n};\n\nexport default TabMenu;\n"],"names":["React","useEffect","Tabs","throttle","cn","DEFAULT_TAILWIND_ANIMATION_DURATION","TabMenu","tabs","contents","tabOnClick","tabClassName","rootClassName","contentClassName","options","defaultTabIndex","underline","animated","animatedOption","flexibleTabWidth","flexibleTabHeight","listRef","useRef","setAnimated","useState","highlight","setHighlight","offset","width","setTimeout","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","handleTabClick","event","index","currentTarget","Root","defaultValue","className","List","ref","map","tab","Trigger","key","value","onClick","disabled","label","div","style","transform","content","Content"],"mappings":"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"}

package/core/Table/Table.js

@@ -1,2 +1,2 @@
-import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${rest?.className??""}`},children);export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${rest?.className??""}`},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children,...rest})=>React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${rest?.className??""}`},cloneElement(children,{isRowHeader:true}));
+import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-1 sm:table-fixed ${rest?.className??""}`},children);export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${rest?.className??""}`},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children,...rest})=>React.createElement("tr",{className:`-ml-6 mt-2 sm:ml-0 sm:mt-0 sm:sticky z-10 ${rest?.className??""}`},cloneElement(children,{isRowHeader:true}));
 //# sourceMappingURL=Table.js.map

package/core/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Table/Table.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactElement,\n  TableHTMLAttributes,\n  cloneElement,\n} from \"react\";\n\ntype TableProps = {\n  id?: string;\n};\n\nexport const Table = ({\n  id,\n  children,\n  ...rest\n}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (\n  <table\n    id={id}\n    {...rest}\n    className={`ui-standard-container mb-4 sm:table-fixed ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {children}\n  </table>\n);\n\nexport const TableBody = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (\n  <tbody {...rest}>{children}</tbody>\n);\n\nexport const TableHeader = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (\n  <thead\n    {...rest}\n    className={`sticky bg-white z-10 top-0 ${rest?.className ?? \"\"}`}\n  >\n    {cloneElement(children as ReactElement, { isHeader: true })}\n  </thead>\n);\n\nexport const TableRowHeader = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (\n  <tr\n    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {cloneElement(children as ReactElement, { isRowHeader: true })}\n  </tr>\n);\n"],"names":["React","cloneElement","Table","id","children","rest","table","className","TableBody","tbody","TableHeader","thead","isHeader","TableRowHeader","tr","isRowHeader"],"mappings":"AAAA,OAAOA,OAILC,YAAY,KACP,OAAQ,AAMf,QAAO,MAAMC,MAAQ,CAAC,CACpBC,EAAE,CACFC,QAAQ,CACR,GAAGC,KACmE,GACtE,oBAACC,SACCH,GAAIA,GACH,GAAGE,IAAI,CACRE,UAAW,CAAC,0CAA0C,EACpDF,MAAME,WAAa,GACpB,CAAC,EAEDH,SAEH,AAEF,QAAO,MAAMI,UAAY,CAAC,CACxBJ,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACI,QAAUJ,KAAOD,SAClB,AAEF,QAAO,MAAMM,YAAc,CAAC,CAC1BN,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACM,SACE,GAAGN,IAAI,CACRE,UAAW,CAAC,2BAA2B,EAAEF,MAAME,WAAa,GAAG,CAAC,EAE/DN,aAAaG,SAA0B,CAAEQ,SAAU,IAAK,GAE3D,AAEF,QAAO,MAAMC,eAAiB,CAAC,CAC7BT,QAAQ,CACR,GAAGC,KACyD,GAC5D,oBAACS,MACCP,UAAW,CAAC,2CAA2C,EACrDF,MAAME,WAAa,GACpB,CAAC,EAEDN,aAAaG,SAA0B,CAAEW,YAAa,IAAK,GAE9D"}
+{"version":3,"sources":["../../../src/core/Table/Table.tsx"],"sourcesContent":["import React, {\n  PropsWithChildren,\n  ReactElement,\n  TableHTMLAttributes,\n  cloneElement,\n} from \"react\";\n\ntype TableProps = {\n  id?: string;\n};\n\nexport const Table = ({\n  id,\n  children,\n  ...rest\n}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (\n  <table\n    id={id}\n    {...rest}\n    className={`ui-standard-container mb-1 sm:table-fixed ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {children}\n  </table>\n);\n\nexport const TableBody = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (\n  <tbody {...rest}>{children}</tbody>\n);\n\nexport const TableHeader = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (\n  <thead\n    {...rest}\n    className={`sticky bg-white z-10 top-0 ${rest?.className ?? \"\"}`}\n  >\n    {cloneElement(children as ReactElement, { isHeader: true })}\n  </thead>\n);\n\nexport const TableRowHeader = ({\n  children,\n  ...rest\n}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (\n  <tr\n    className={`-ml-6 mt-2 sm:ml-0 sm:mt-0 sm:sticky z-10 ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {cloneElement(children as ReactElement, { isRowHeader: true })}\n  </tr>\n);\n"],"names":["React","cloneElement","Table","id","children","rest","table","className","TableBody","tbody","TableHeader","thead","isHeader","TableRowHeader","tr","isRowHeader"],"mappings":"AAAA,OAAOA,OAILC,YAAY,KACP,OAAQ,AAMf,QAAO,MAAMC,MAAQ,CAAC,CACpBC,EAAE,CACFC,QAAQ,CACR,GAAGC,KACmE,GACtE,oBAACC,SACCH,GAAIA,GACH,GAAGE,IAAI,CACRE,UAAW,CAAC,0CAA0C,EACpDF,MAAME,WAAa,GACpB,CAAC,EAEDH,SAEH,AAEF,QAAO,MAAMI,UAAY,CAAC,CACxBJ,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACI,QAAUJ,KAAOD,SAClB,AAEF,QAAO,MAAMM,YAAc,CAAC,CAC1BN,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACM,SACE,GAAGN,IAAI,CACRE,UAAW,CAAC,2BAA2B,EAAEF,MAAME,WAAa,GAAG,CAAC,EAE/DN,aAAaG,SAA0B,CAAEQ,SAAU,IAAK,GAE3D,AAEF,QAAO,MAAMC,eAAiB,CAAC,CAC7BT,QAAQ,CACR,GAAGC,KACyD,GAC5D,oBAACS,MACCP,UAAW,CAAC,0CAA0C,EACpDF,MAAME,WAAa,GACpB,CAAC,EAEDN,aAAaG,SAA0B,CAAEW,YAAa,IAAK,GAE9D"}

package/core/Table/TableCell.js

@@ -1,8 +1,8 @@
 import React from"react";const LabelCell=({children,...rest})=>{const classes=`
-    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${rest?.className??""}
+    ui-text-p1 font-bold pt-6 pb-2 border-light-grey sm:p-6 sm:relative sm:top-0.5 flex sm:table-cell ${rest?.className??""}
   `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>React.createElement("td",{...rest,className:`
-        border-light-grey sm:p-24 leading-none flex sm:table-cell
-        ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
+        border-light-grey sm:p-6 leading-none flex sm:table-cell
+        ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-5 px-6":"py-1.5"}
         ${rest?.className??""}
-      `},children);const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${rest?.className??""}`},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${rest?.className??""}`},children);export{TableCell,LabelCell,HeaderCell,CtaCell};
+      `},children);const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:`ui-text-h3 px-6 py-6 hidden sm:table-cell ${rest?.className??""}`},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:`pt-6 hidden sm:table-cell ${rest?.className??""}`},children);export{TableCell,LabelCell,HeaderCell,CtaCell};
 //# sourceMappingURL=TableCell.js.map

package/core/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Table/TableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\ntype TableCellProps = {\n  isRowHeader?: boolean;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst LabelCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {\n  const classes = `\n    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${\n      rest?.className ?? \"\"\n    }\n  `;\n\n  return (\n    <td {...rest} className={classes}>\n      {children}\n    </td>\n  );\n};\n\nconst TableCell = ({\n  children,\n  isRowHeader,\n  ...rest\n}: PropsWithChildren<TableCellProps>) => (\n  <td\n    {...rest}\n    className={`\n        border-light-grey sm:p-24 leading-none flex sm:table-cell\n        ${\n          isRowHeader\n            ? \"rounded-l-none rounded-r sm:rounded-lg py-20 px-24\"\n            : \"py-6\"\n        }\n        ${rest?.className ?? \"\"}\n      `}\n  >\n    {children}\n  </td>\n);\n\nconst HeaderCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (\n  <td\n    {...rest}\n    className={`ui-text-h3 px-24 py-24 hidden sm:table-cell ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {children}\n  </td>\n);\n\nconst CtaCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (\n  <td\n    {...rest}\n    className={`pt-24 hidden sm:table-cell ${rest?.className ?? \"\"}`}\n  >\n    {children}\n  </td>\n);\n\nexport { TableCell, LabelCell, HeaderCell, CtaCell };\n"],"names":["React","LabelCell","children","rest","classes","className","td","TableCell","isRowHeader","HeaderCell","CtaCell"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,CAMjD,MAAMC,UAAY,CAAC,CACjBC,QAAQ,CACR,GAAGC,KAC6D,IAChE,MAAMC,QAAU;AAClB,sGAAsG,EAChGD,MAAME,WAAa;AAEzB,EAAE,CAAC,CAED,OACE,oBAACC,MAAI,GAAGH,IAAI,CAAEE,UAAWD,SACtBF,SAGP,EAEA,MAAMK,UAAY,CAAC,CACjBL,QAAQ,CACRM,WAAW,CACX,GAAGL,KAC+B,GAClC,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW;AACf;AACA,QAAQ,EACEG,YACI,qDACA;AAEd,QAAQ,EAAEL,MAAME,WAAa;AAC7B,MAAM,CAAC,EAEFH,UAIL,MAAMO,WAAa,CAAC,CAClBP,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW,CAAC,4CAA4C,EACtDF,MAAME,WAAa,GACpB,CAAC,EAEDH,UAIL,MAAMQ,QAAU,CAAC,CACfR,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW,CAAC,2BAA2B,EAAEF,MAAME,WAAa,GAAG,CAAC,EAE/DH,SAIL,QAASK,SAAS,CAAEN,SAAS,CAAEQ,UAAU,CAAEC,OAAO,CAAG"}
+{"version":3,"sources":["../../../src/core/Table/TableCell.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\ntype TableCellProps = {\n  isRowHeader?: boolean;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst LabelCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {\n  const classes = `\n    ui-text-p1 font-bold pt-6 pb-2 border-light-grey sm:p-6 sm:relative sm:top-0.5 flex sm:table-cell ${\n      rest?.className ?? \"\"\n    }\n  `;\n\n  return (\n    <td {...rest} className={classes}>\n      {children}\n    </td>\n  );\n};\n\nconst TableCell = ({\n  children,\n  isRowHeader,\n  ...rest\n}: PropsWithChildren<TableCellProps>) => (\n  <td\n    {...rest}\n    className={`\n        border-light-grey sm:p-6 leading-none flex sm:table-cell\n        ${\n          isRowHeader\n            ? \"rounded-l-none rounded-r sm:rounded-lg py-5 px-6\"\n            : \"py-1.5\"\n        }\n        ${rest?.className ?? \"\"}\n      `}\n  >\n    {children}\n  </td>\n);\n\nconst HeaderCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (\n  <td\n    {...rest}\n    className={`ui-text-h3 px-6 py-6 hidden sm:table-cell ${\n      rest?.className ?? \"\"\n    }`}\n  >\n    {children}\n  </td>\n);\n\nconst CtaCell = ({\n  children,\n  ...rest\n}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (\n  <td\n    {...rest}\n    className={`pt-6 hidden sm:table-cell ${rest?.className ?? \"\"}`}\n  >\n    {children}\n  </td>\n);\n\nexport { TableCell, LabelCell, HeaderCell, CtaCell };\n"],"names":["React","LabelCell","children","rest","classes","className","td","TableCell","isRowHeader","HeaderCell","CtaCell"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,CAMjD,MAAMC,UAAY,CAAC,CACjBC,QAAQ,CACR,GAAGC,KAC6D,IAChE,MAAMC,QAAU;AAClB,sGAAsG,EAChGD,MAAME,WAAa;AAEzB,EAAE,CAAC,CAED,OACE,oBAACC,MAAI,GAAGH,IAAI,CAAEE,UAAWD,SACtBF,SAGP,EAEA,MAAMK,UAAY,CAAC,CACjBL,QAAQ,CACRM,WAAW,CACX,GAAGL,KAC+B,GAClC,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW;AACf;AACA,QAAQ,EACEG,YACI,mDACA;AAEd,QAAQ,EAAEL,MAAME,WAAa;AAC7B,MAAM,CAAC,EAEFH,UAIL,MAAMO,WAAa,CAAC,CAClBP,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW,CAAC,0CAA0C,EACpDF,MAAME,WAAa,GACpB,CAAC,EAEDH,UAIL,MAAMQ,QAAU,CAAC,CACfR,QAAQ,CACR,GAAGC,KAC6D,GAChE,oBAACG,MACE,GAAGH,IAAI,CACRE,UAAW,CAAC,0BAA0B,EAAEF,MAAME,WAAa,GAAG,CAAC,EAE9DH,SAIL,QAASK,SAAS,CAAEN,SAAS,CAAEQ,UAAU,CAAEC,OAAO,CAAG"}

package/core/Table/data.js

@@ -1,2 +1,2 @@
-import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circle-solid",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-6 sm:py-6 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-32"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-32"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-16 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
+import React,{Fragment}from"react";import Tooltip from"../Tooltip";import Table from"../Table";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circle-solid",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-x-circle-solid",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const testRow=index=>({label:`Label ${index+1}`,cells:[{label:"text",content:"Cell content",column:"Free"},{label:"yes",content:React.createElement("div",{className:"flex items-center sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Supported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Supported,null))),column:"PAYG"},{label:"no",content:React.createElement("div",{className:"flex items-center  sm:flex-col sm:items-start"},React.createElement("span",{className:"sm:order-1 px-1.5 sm:py-1.5 sm:px-0"},"Unsupported"),React.createElement("span",{className:"sm:order-0"},React.createElement(Unsupported,null))),column:"Custom"}]});const sections=["Features","Support","Technical Support"].map(label=>({label,rows:[...Array(5)].map((_,i)=>testRow(i))}));export const PricingPageTable=()=>{return React.createElement("div",{className:"ui-standard-container"},React.createElement("h2",{className:"ui-text-h2 text-center m-8"},"Pricing Page Table"),React.createElement("p",{className:"text-center m-8"},"Example content"),React.createElement(Table.Root,null,React.createElement(Table.Header,null,React.createElement(Table.Row,null,React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Free")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"PAYG")),React.createElement(Table.Cell,null,React.createElement("span",{className:"ui-text-h3 hidden sm:block"},"Custom")))),React.createElement(Table.Body,null,sections.map(section=>React.createElement(Fragment,{key:section.label},React.createElement(Table.RowHeader,null,React.createElement(Table.Cell,{colSpan:4},section.label)),section.rows.map(row=>React.createElement(Table.Row,{key:row.label},React.createElement(Table.LabelCell,{key:row.label,className:"border-t border-light-grey"},React.createElement("a",{className:"ui-link",href:"#"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-4 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"#",className:"ui-btn"},"Contact sales"))))))};
 //# sourceMappingURL=data.js.map

package/core/Table/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Table/data.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n\nimport Tooltip from \"../Tooltip\";\nimport Table from \"../Table\";\nimport Icon from \"../Icon\";\n\nconst Supported = () => (\n  <Icon\n    name=\"icon-gui-check-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-success\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"supported-icon\"\n  />\n);\n\nconst Unsupported = () => (\n  <Icon\n    name=\"icon-gui-x-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-error\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"unsupported-icon\"\n  />\n);\n\nconst testRow = (index: number) => ({\n  label: `Label ${index + 1}`,\n  cells: [\n    { label: \"text\", content: \"Cell content\", column: \"Free\" },\n    {\n      label: \"yes\",\n      content: (\n        <div className=\"flex items-center sm:flex-col sm:items-start\">\n          <span className=\"sm:order-1 px-6 sm:py-6 sm:px-0\">Supported</span>\n          <span className=\"sm:order-0\">\n            <Supported />\n          </span>\n        </div>\n      ),\n      column: \"PAYG\",\n    },\n    {\n      label: \"no\",\n      content: (\n        <div className=\"flex items-center  sm:flex-col sm:items-start\">\n          <span className=\"sm:order-1 px-6 sm:py-6 sm:px-0\">Unsupported</span>\n          <span className=\"sm:order-0\">\n            <Unsupported />\n          </span>\n        </div>\n      ),\n      column: \"Custom\",\n    },\n  ],\n});\n\nconst sections = [\"Features\", \"Support\", \"Technical Support\"].map((label) => ({\n  label,\n  rows: [...Array(5)].map((_, i) => testRow(i)),\n}));\n\nexport const PricingPageTable = () => {\n  return (\n    <div className=\"ui-standard-container\">\n      <h2 className=\"ui-text-h2 text-center m-32\">Pricing Page Table</h2>\n      <p className=\"text-center m-32\">Example content</p>\n      <Table.Root>\n        <Table.Header>\n          <Table.Row>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">Free</span>\n            </Table.Cell>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">PAYG</span>\n            </Table.Cell>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">Custom</span>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {sections.map((section) => (\n            <Fragment key={section.label}>\n              <Table.RowHeader>\n                <Table.Cell colSpan={4}>{section.label}</Table.Cell>\n              </Table.RowHeader>\n              {section.rows.map((row) => (\n                <Table.Row key={row.label}>\n                  <Table.LabelCell\n                    key={row.label}\n                    className=\"border-t border-light-grey\"\n                  >\n                    <a className=\"ui-link\" href=\"#\">\n                      {row.label}\n                    </a>\n                    <Tooltip>Example tooltip</Tooltip>\n                  </Table.LabelCell>\n                  {row.cells.map((cell) => (\n                    <Table.Cell key={cell.label} className=\"last:mb-16 sm:mb-0\">\n                      <div className=\"flex-1 sm:hidden !text-dark-grey ui-text-overline2\">\n                        {cell.column}\n                      </div>\n                      {cell.content}\n                    </Table.Cell>\n                  ))}\n                </Table.Row>\n              ))}\n            </Fragment>\n          ))}\n          <Table.Row>\n            <Table.Cell></Table.Cell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn-secondary\">\n                Get started\n              </a>\n            </Table.CtaCell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn-secondary\">\n                Get started\n              </a>\n            </Table.CtaCell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn\">\n                Contact sales\n              </a>\n            </Table.CtaCell>\n          </Table.Row>\n        </Table.Body>\n      </Table.Root>\n    </div>\n  );\n};\n"],"names":["React","Fragment","Tooltip","Table","Icon","Supported","name","size","color","additionalCSS","data-testid","Unsupported","testRow","index","label","cells","content","column","div","className","span","sections","map","rows","Array","_","i","PricingPageTable","h2","p","Root","Header","Row","Cell","Body","section","key","RowHeader","colSpan","row","LabelCell","a","href","cell","CtaCell"],"mappings":"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"}
+{"version":3,"sources":["../../../src/core/Table/data.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n\nimport Tooltip from \"../Tooltip\";\nimport Table from \"../Table\";\nimport Icon from \"../Icon\";\n\nconst Supported = () => (\n  <Icon\n    name=\"icon-gui-check-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-success\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"supported-icon\"\n  />\n);\n\nconst Unsupported = () => (\n  <Icon\n    name=\"icon-gui-x-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-error\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"unsupported-icon\"\n  />\n);\n\nconst testRow = (index: number) => ({\n  label: `Label ${index + 1}`,\n  cells: [\n    { label: \"text\", content: \"Cell content\", column: \"Free\" },\n    {\n      label: \"yes\",\n      content: (\n        <div className=\"flex items-center sm:flex-col sm:items-start\">\n          <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">Supported</span>\n          <span className=\"sm:order-0\">\n            <Supported />\n          </span>\n        </div>\n      ),\n      column: \"PAYG\",\n    },\n    {\n      label: \"no\",\n      content: (\n        <div className=\"flex items-center  sm:flex-col sm:items-start\">\n          <span className=\"sm:order-1 px-1.5 sm:py-1.5 sm:px-0\">Unsupported</span>\n          <span className=\"sm:order-0\">\n            <Unsupported />\n          </span>\n        </div>\n      ),\n      column: \"Custom\",\n    },\n  ],\n});\n\nconst sections = [\"Features\", \"Support\", \"Technical Support\"].map((label) => ({\n  label,\n  rows: [...Array(5)].map((_, i) => testRow(i)),\n}));\n\nexport const PricingPageTable = () => {\n  return (\n    <div className=\"ui-standard-container\">\n      <h2 className=\"ui-text-h2 text-center m-8\">Pricing Page Table</h2>\n      <p className=\"text-center m-8\">Example content</p>\n      <Table.Root>\n        <Table.Header>\n          <Table.Row>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">Free</span>\n            </Table.Cell>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">PAYG</span>\n            </Table.Cell>\n            <Table.Cell>\n              <span className=\"ui-text-h3 hidden sm:block\">Custom</span>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {sections.map((section) => (\n            <Fragment key={section.label}>\n              <Table.RowHeader>\n                <Table.Cell colSpan={4}>{section.label}</Table.Cell>\n              </Table.RowHeader>\n              {section.rows.map((row) => (\n                <Table.Row key={row.label}>\n                  <Table.LabelCell\n                    key={row.label}\n                    className=\"border-t border-light-grey\"\n                  >\n                    <a className=\"ui-link\" href=\"#\">\n                      {row.label}\n                    </a>\n                    <Tooltip>Example tooltip</Tooltip>\n                  </Table.LabelCell>\n                  {row.cells.map((cell) => (\n                    <Table.Cell key={cell.label} className=\"last:mb-4 sm:mb-0\">\n                      <div className=\"flex-1 sm:hidden !text-dark-grey ui-text-overline2\">\n                        {cell.column}\n                      </div>\n                      {cell.content}\n                    </Table.Cell>\n                  ))}\n                </Table.Row>\n              ))}\n            </Fragment>\n          ))}\n          <Table.Row>\n            <Table.Cell></Table.Cell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn-secondary\">\n                Get started\n              </a>\n            </Table.CtaCell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn-secondary\">\n                Get started\n              </a>\n            </Table.CtaCell>\n            <Table.CtaCell>\n              <a href=\"#\" className=\"ui-btn\">\n                Contact sales\n              </a>\n            </Table.CtaCell>\n          </Table.Row>\n        </Table.Body>\n      </Table.Root>\n    </div>\n  );\n};\n"],"names":["React","Fragment","Tooltip","Table","Icon","Supported","name","size","color","additionalCSS","data-testid","Unsupported","testRow","index","label","cells","content","column","div","className","span","sections","map","rows","Array","_","i","PricingPageTable","h2","p","Root","Header","Row","Cell","Body","section","key","RowHeader","colSpan","row","LabelCell","a","href","cell","CtaCell"],"mappings":"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"}

package/core/Toggle.js

@@ -1,2 +1,2 @@
-import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size="lg",label,className,...props})=>{const rootSize=size==="sm"?"w-[42px] h-24":"w-[56px] h-32";const thumbSize=size==="sm"?"w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]":"h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]";return React.createElement("div",{className:"flex items-center"},React.createElement(Switch.Root,{className:cn("p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base",className,rootSize),id:id,...props},React.createElement(Switch.Thumb,{className:cn(`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,thumbSize)})),label?React.createElement("label",{className:"ml-16",htmlFor:id},label):null)};export default Toggle;
+import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size="lg",label,className,...props})=>{const rootSize=size==="sm"?"w-[2.625rem] h-6":"w-14 h-8";const thumbSize=size==="sm"?"w-[1.3125rem] h-[1.3125rem] translate-x-px data-[state=checked]:translate-x-5":"h-7 w-7 translate-x-0.5 data-[state=checked]:translate-x-[1.625rem]";return React.createElement("div",{className:"flex items-center"},React.createElement(Switch.Root,{className:cn("p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base",className,rootSize),id:id,...props},React.createElement(Switch.Thumb,{className:cn(`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,thumbSize)})),label?React.createElement("label",{className:"ml-4",htmlFor:id},label):null)};export default Toggle;
 //# sourceMappingURL=Toggle.js.map

package/core/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Toggle.tsx"],"sourcesContent":["import * as Switch from \"@radix-ui/react-switch\";\nimport React from \"react\";\nimport cn from \"./utils/cn\";\n\ntype ToggleProps = {\n  id: string;\n  size?: \"sm\" | \"lg\";\n  label?: string;\n  className?: string;\n  onCheckedChange?: (checked: boolean) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst Toggle: React.FC<ToggleProps> = ({\n  id,\n  size = \"lg\",\n  label,\n  className,\n  ...props\n}) => {\n  const rootSize = size === \"sm\" ? \"w-[42px] h-24\" : \"w-[56px] h-32\";\n  const thumbSize =\n    size === \"sm\"\n      ? \"w-[21px] h-[21px] translate-x-1 data-[state=checked]:translate-x-[20px]\"\n      : \"h-[28px] w-[28px] translate-x-2 data-[state=checked]:translate-x-[26px]\";\n\n  return (\n    <div className=\"flex items-center\">\n      <Switch.Root\n        className={cn(\n          \"p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base\",\n          className,\n          rootSize,\n        )}\n        id={id}\n        {...props}\n      >\n        <Switch.Thumb\n          className={cn(\n            `block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,\n            thumbSize,\n          )}\n        />\n      </Switch.Root>\n      {label ? (\n        <label className=\"ml-16\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["Switch","React","cn","Toggle","id","size","label","className","props","rootSize","thumbSize","div","Root","Thumb","htmlFor"],"mappings":"AAAA,UAAYA,WAAY,wBAAyB,AACjD,QAAOC,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,CAU5B,MAAMC,OAAgC,CAAC,CACrCC,EAAE,CACFC,KAAO,IAAI,CACXC,KAAK,CACLC,SAAS,CACT,GAAGC,MACJ,IACC,MAAMC,SAAWJ,OAAS,KAAO,gBAAkB,gBACnD,MAAMK,UACJL,OAAS,KACL,0EACA,0EAEN,OACE,oBAACM,OAAIJ,UAAU,qBACb,oBAACP,OAAOY,IAAI,EACVL,UAAWL,GACT,8LACAK,UACAE,UAEFL,GAAIA,GACH,GAAGI,KAAK,EAET,oBAACR,OAAOa,KAAK,EACXN,UAAWL,GACT,CAAC,kGAAkG,CAAC,CACpGQ,cAILJ,MACC,oBAACA,SAAMC,UAAU,QAAQO,QAASV,IAC/BE,OAED,KAGV,CAEA,gBAAeH,MAAO"}
+{"version":3,"sources":["../../src/core/Toggle.tsx"],"sourcesContent":["import * as Switch from \"@radix-ui/react-switch\";\nimport React from \"react\";\nimport cn from \"./utils/cn\";\n\ntype ToggleProps = {\n  id: string;\n  size?: \"sm\" | \"lg\";\n  label?: string;\n  className?: string;\n  onCheckedChange?: (checked: boolean) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst Toggle: React.FC<ToggleProps> = ({\n  id,\n  size = \"lg\",\n  label,\n  className,\n  ...props\n}) => {\n  const rootSize = size === \"sm\" ? \"w-[2.625rem] h-6\" : \"w-14 h-8\";\n  const thumbSize =\n    size === \"sm\"\n      ? \"w-[1.3125rem] h-[1.3125rem] translate-x-px data-[state=checked]:translate-x-5\"\n      : \"h-7 w-7 translate-x-0.5 data-[state=checked]:translate-x-[1.625rem]\";\n\n  return (\n    <div className=\"flex items-center\">\n      <Switch.Root\n        className={cn(\n          \"p-0 bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base\",\n          className,\n          rootSize,\n        )}\n        id={id}\n        {...props}\n      >\n        <Switch.Thumb\n          className={cn(\n            `block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,\n            thumbSize,\n          )}\n        />\n      </Switch.Root>\n      {label ? (\n        <label className=\"ml-4\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n    </div>\n  );\n};\n\nexport default Toggle;\n"],"names":["Switch","React","cn","Toggle","id","size","label","className","props","rootSize","thumbSize","div","Root","Thumb","htmlFor"],"mappings":"AAAA,UAAYA,WAAY,wBAAyB,AACjD,QAAOC,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,CAU5B,MAAMC,OAAgC,CAAC,CACrCC,EAAE,CACFC,KAAO,IAAI,CACXC,KAAK,CACLC,SAAS,CACT,GAAGC,MACJ,IACC,MAAMC,SAAWJ,OAAS,KAAO,mBAAqB,WACtD,MAAMK,UACJL,OAAS,KACL,gFACA,sEAEN,OACE,oBAACM,OAAIJ,UAAU,qBACb,oBAACP,OAAOY,IAAI,EACVL,UAAWL,GACT,8LACAK,UACAE,UAEFL,GAAIA,GACH,GAAGI,KAAK,EAET,oBAACR,OAAOa,KAAK,EACXN,UAAWL,GACT,CAAC,kGAAkG,CAAC,CACpGQ,cAILJ,MACC,oBAACA,SAAMC,UAAU,OAAOO,QAASV,IAC9BE,OAED,KAGV,CAEA,gBAAeH,MAAO"}

package/core/Tooltip.js

@@ -1,2 +1,2 @@
-import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import cn from"./utils/cn";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return React.createElement("div",{...rest,className:cn("inline-flex ml-8",rest?.className)},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??React.createElement(Icon,{name:"icon-gui-information-circle-micro",color:"text-neutral-800 dark:text-neutral-500",size:"1rem"})),open?createPortal(React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:cn("bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16",{"pointer-events-none":!interactive},"rounded-lg absolute",tooltipProps?.className,{"animate-[tooltipExit_0.25s_ease-in-out]":fadeOut},{"animate-[tooltipEntry_0.25s_ease-in-out]":!fadeOut})},React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;
+import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import cn from"./utils/cn";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return React.createElement("div",{...rest,className:cn("inline-flex ml-2",rest?.className)},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??React.createElement(Icon,{name:"icon-gui-information-circle-micro",color:"text-neutral-800 dark:text-neutral-500",size:"1rem"})),open?createPortal(React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:cn("bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-4",{"pointer-events-none":!interactive},"rounded-lg absolute",tooltipProps?.className,{"animate-[tooltipExit_0.25s_ease-in-out]":fadeOut},{"animate-[tooltipEntry_0.25s_ease-in-out]":!fadeOut})},React.createElement("div",{className:"max-w-60 w-auto"},children)),document.body):null)};export default Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/core/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  useRef,\n  useState,\n  MouseEvent,\n  RefObject,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  tooltipProps?: HTMLAttributes<HTMLDivElement>;\n  interactive?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  tooltipProps,\n  interactive = false,\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  const [open, setOpen] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n  const offset = 8;\n  const reference = useRef<HTMLButtonElement>(null);\n  const floating = useRef<HTMLDivElement>(null);\n  const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      const floatingRect = floating.current?.getBoundingClientRect();\n      const referenceRect = reference.current?.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      let orientation = \"top\";\n\n      if (floatingRect && referenceRect) {\n        let x =\n          referenceRect.left +\n          referenceRect.width / 2 -\n          floatingRect.width / 2 +\n          window.scrollX;\n        let y =\n          referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n        // Adjust if tooltip goes off the right edge\n        if (x + floatingRect.width > viewportWidth + window.scrollX) {\n          x = viewportWidth + window.scrollX - floatingRect.width - offset;\n          orientation = \"left\";\n        }\n\n        // Adjust if tooltip goes off the left edge\n        if (x < window.scrollX) {\n          x = window.scrollX + offset;\n          orientation = \"right\";\n        }\n\n        // Adjust if tooltip goes off the top edge\n        if (y < window.scrollY) {\n          y = referenceRect.bottom + offset + window.scrollY;\n          orientation = \"bottom\";\n        }\n\n        // Adjust if tooltip goes off the bottom edge\n        if (y + floatingRect.height > viewportHeight + window.scrollY) {\n          y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n        }\n\n        setPosition({ x, y, orientation });\n      }\n    } else {\n      setPosition({ x: 0, y: 0, orientation: \"top\" });\n    }\n\n    return () => {\n      if (fadeOutTimeoutRef.current !== null) {\n        clearTimeout(fadeOutTimeoutRef.current);\n      }\n    };\n  }, [open]);\n\n  const initiateFadeOut = () => {\n    setFadeOut(true);\n    fadeOutTimeoutRef.current = setTimeout(() => {\n      setOpen(false);\n      setFadeOut(false);\n    }, 250);\n  };\n\n  const cursorTowardsTooltip = (\n    event: MouseEvent,\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    if (!ref.current) {\n      return false;\n    }\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = ref.current.getBoundingClientRect();\n    const { orientation } = position;\n\n    switch (orientation) {\n      case \"top\":\n        return clientX >= x && clientX <= x + width && clientY < y;\n      case \"left\":\n        return clientY >= y && clientY <= y + height && clientX < x;\n      case \"right\":\n        return clientY >= y && clientY <= y + height && clientX > x + width;\n      case \"bottom\":\n        return clientX >= x && clientX <= x + width && clientY > y + height;\n      default:\n        return false;\n    }\n  };\n\n  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n    if (!reference.current) return;\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = reference.current.getBoundingClientRect();\n    const withinBounds =\n      clientX >= x &&\n      clientX <= x + width &&\n      clientY >= y &&\n      clientY <= y + height;\n\n    if (!withinBounds) {\n      initiateFadeOut();\n    }\n  };\n\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-8\", rest?.className)}>\n      <button\n        onMouseEnter={() => setOpen(true)}\n        onMouseLeave={(event) => {\n          if (!interactive || !cursorTowardsTooltip(event, reference)) {\n            initiateFadeOut();\n          }\n        }}\n        type=\"button\"\n        ref={reference}\n        aria-describedby=\"tooltip\"\n        {...triggerProps}\n        className={`p-0 relative focus:outline-none h-[1rem] ${\n          triggerProps?.className ?? \"\"\n        }`}\n      >\n        {triggerElement ?? (\n          <Icon\n            name=\"icon-gui-information-circle-micro\"\n            color=\"text-neutral-800 dark:text-neutral-500\"\n            size=\"1rem\"\n          />\n        )}\n      </button>\n\n      {open\n        ? createPortal(\n            <div\n              role=\"tooltip\"\n              ref={floating}\n              onMouseLeave={(event) =>\n                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n              }\n              style={{\n                top: position.y,\n                left: position.x,\n                zIndex: 1000,\n                boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n              }}\n              {...tooltipProps}\n              className={cn(\n                \"bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16\",\n                { \"pointer-events-none\": !interactive },\n                \"rounded-lg absolute\",\n                tooltipProps?.className,\n                { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n                { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n              )}\n            >\n              <div className=\"max-w-[240px] w-auto\">{children}</div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactNode,\n  useRef,\n  useState,\n  MouseEvent,\n  RefObject,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\n\ntype TooltipProps = {\n  triggerElement?: ReactNode;\n  triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  tooltipProps?: HTMLAttributes<HTMLDivElement>;\n  interactive?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n  children,\n  triggerElement,\n  triggerProps,\n  tooltipProps,\n  interactive = false,\n  ...rest\n}: PropsWithChildren<TooltipProps>) => {\n  const [open, setOpen] = useState(false);\n  const [fadeOut, setFadeOut] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n  const offset = 8;\n  const reference = useRef<HTMLButtonElement>(null);\n  const floating = useRef<HTMLDivElement>(null);\n  const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      const floatingRect = floating.current?.getBoundingClientRect();\n      const referenceRect = reference.current?.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n      let orientation = \"top\";\n\n      if (floatingRect && referenceRect) {\n        let x =\n          referenceRect.left +\n          referenceRect.width / 2 -\n          floatingRect.width / 2 +\n          window.scrollX;\n        let y =\n          referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n        // Adjust if tooltip goes off the right edge\n        if (x + floatingRect.width > viewportWidth + window.scrollX) {\n          x = viewportWidth + window.scrollX - floatingRect.width - offset;\n          orientation = \"left\";\n        }\n\n        // Adjust if tooltip goes off the left edge\n        if (x < window.scrollX) {\n          x = window.scrollX + offset;\n          orientation = \"right\";\n        }\n\n        // Adjust if tooltip goes off the top edge\n        if (y < window.scrollY) {\n          y = referenceRect.bottom + offset + window.scrollY;\n          orientation = \"bottom\";\n        }\n\n        // Adjust if tooltip goes off the bottom edge\n        if (y + floatingRect.height > viewportHeight + window.scrollY) {\n          y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n        }\n\n        setPosition({ x, y, orientation });\n      }\n    } else {\n      setPosition({ x: 0, y: 0, orientation: \"top\" });\n    }\n\n    return () => {\n      if (fadeOutTimeoutRef.current !== null) {\n        clearTimeout(fadeOutTimeoutRef.current);\n      }\n    };\n  }, [open]);\n\n  const initiateFadeOut = () => {\n    setFadeOut(true);\n    fadeOutTimeoutRef.current = setTimeout(() => {\n      setOpen(false);\n      setFadeOut(false);\n    }, 250);\n  };\n\n  const cursorTowardsTooltip = (\n    event: MouseEvent,\n    ref: RefObject<HTMLButtonElement>,\n  ) => {\n    if (!ref.current) {\n      return false;\n    }\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = ref.current.getBoundingClientRect();\n    const { orientation } = position;\n\n    switch (orientation) {\n      case \"top\":\n        return clientX >= x && clientX <= x + width && clientY < y;\n      case \"left\":\n        return clientY >= y && clientY <= y + height && clientX < x;\n      case \"right\":\n        return clientY >= y && clientY <= y + height && clientX > x + width;\n      case \"bottom\":\n        return clientX >= x && clientX <= x + width && clientY > y + height;\n      default:\n        return false;\n    }\n  };\n\n  const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n    if (!reference.current) return;\n\n    const { clientX, clientY } = event;\n    const { x, y, width, height } = reference.current.getBoundingClientRect();\n    const withinBounds =\n      clientX >= x &&\n      clientX <= x + width &&\n      clientY >= y &&\n      clientY <= y + height;\n\n    if (!withinBounds) {\n      initiateFadeOut();\n    }\n  };\n\n  return (\n    <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n      <button\n        onMouseEnter={() => setOpen(true)}\n        onMouseLeave={(event) => {\n          if (!interactive || !cursorTowardsTooltip(event, reference)) {\n            initiateFadeOut();\n          }\n        }}\n        type=\"button\"\n        ref={reference}\n        aria-describedby=\"tooltip\"\n        {...triggerProps}\n        className={`p-0 relative focus:outline-none h-[1rem] ${\n          triggerProps?.className ?? \"\"\n        }`}\n      >\n        {triggerElement ?? (\n          <Icon\n            name=\"icon-gui-information-circle-micro\"\n            color=\"text-neutral-800 dark:text-neutral-500\"\n            size=\"1rem\"\n          />\n        )}\n      </button>\n\n      {open\n        ? createPortal(\n            <div\n              role=\"tooltip\"\n              ref={floating}\n              onMouseLeave={(event) =>\n                setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n              }\n              style={{\n                top: position.y,\n                left: position.x,\n                zIndex: 1000,\n                boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n              }}\n              {...tooltipProps}\n              className={cn(\n                \"bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-4\",\n                { \"pointer-events-none\": !interactive },\n                \"rounded-lg absolute\",\n                tooltipProps?.className,\n                { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n                { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n              )}\n            >\n              <div className=\"max-w-60 w-auto\">{children}</div>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"AAAA,OAAOA,OAKLC,MAAM,CACNC,QAAQ,CAGRC,SAAS,KACJ,OAAQ,AACf,QAASC,YAAY,KAAQ,WAAY,AACzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAS5B,MAAMC,QAAU,CAAC,CACfC,QAAQ,CACRC,cAAc,CACdC,YAAY,CACZC,YAAY,CACZC,YAAc,KAAK,CACnB,GAAGC,KAC6B,IAChC,KAAM,CAACC,KAAMC,QAAQ,CAAGb,SAAS,OACjC,KAAM,CAACc,QAASC,WAAW,CAAGf,SAAS,OACvC,KAAM,CAACgB,SAAUC,YAAY,CAAGjB,SAAS,CAAEkB,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,GAC1E,MAAMC,OAAS,EACf,MAAMC,UAAYvB,OAA0B,MAC5C,MAAMwB,SAAWxB,OAAuB,MACxC,MAAMyB,kBAAoBzB,OAA8B,MAExDE,UAAU,KACR,GAAIW,KAAM,CACR,MAAMa,aAAeF,SAASG,OAAO,EAAEC,wBACvC,MAAMC,cAAgBN,UAAUI,OAAO,EAAEC,wBACzC,MAAME,cAAgBC,OAAOC,UAAU,CACvC,MAAMC,eAAiBF,OAAOG,WAAW,CACzC,IAAIb,YAAc,MAElB,GAAIK,cAAgBG,cAAe,CACjC,IAAIV,EACFU,cAAcM,IAAI,CAClBN,cAAcO,KAAK,CAAG,EACtBV,aAAaU,KAAK,CAAG,EACrBL,OAAOM,OAAO,CAChB,IAAIjB,EACFS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,CAGnE,GAAIrB,EAAIO,aAAaU,KAAK,CAAGN,cAAgBC,OAAOM,OAAO,CAAE,CAC3DlB,EAAIW,cAAgBC,OAAOM,OAAO,CAAGX,aAAaU,KAAK,CAAGd,OAC1DD,YAAc,MAChB,CAGA,GAAIF,EAAIY,OAAOM,OAAO,CAAE,CACtBlB,EAAIY,OAAOM,OAAO,CAAGf,OACrBD,YAAc,OAChB,CAGA,GAAID,EAAIW,OAAOS,OAAO,CAAE,CACtBpB,EAAIS,cAAcY,MAAM,CAAGnB,OAASS,OAAOS,OAAO,CAClDnB,YAAc,QAChB,CAGA,GAAID,EAAIM,aAAaa,MAAM,CAAGN,eAAiBF,OAAOS,OAAO,CAAE,CAC7DpB,EAAIS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,AACvE,CAEAtB,YAAY,CAAEC,EAAGC,EAAGC,WAAY,EAClC,CACF,KAAO,CACLH,YAAY,CAAEC,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,EAC/C,CAEA,MAAO,KACL,GAAII,kBAAkBE,OAAO,GAAK,KAAM,CACtCe,aAAajB,kBAAkBE,OAAO,CACxC,CACF,CACF,EAAG,CAACd,KAAK,EAET,MAAM8B,gBAAkB,KACtB3B,WAAW,KACXS,CAAAA,kBAAkBE,OAAO,CAAGiB,WAAW,KACrC9B,QAAQ,OACRE,WAAW,MACb,EAAG,IACL,EAEA,MAAM6B,qBAAuB,CAC3BC,MACAC,OAEA,GAAI,CAACA,IAAIpB,OAAO,CAAE,CAChB,OAAO,KACT,CAEA,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGQ,IAAIpB,OAAO,CAACC,qBAAqB,GACjE,KAAM,CAAEP,WAAW,CAAE,CAAGJ,SAExB,OAAQI,aACN,IAAK,MACH,OAAO2B,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,CAC3D,KAAK,OACH,OAAO6B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,CAC5D,KAAK,QACH,OAAO8B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,EAAIiB,KAChE,KAAK,SACH,OAAOY,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,EAAImB,MAC/D,SACE,OAAO,KACX,CACF,EAEA,MAAMW,0BAA4B,AAACJ,QACjC,GAAI,CAACvB,UAAUI,OAAO,CAAE,OAExB,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGhB,UAAUI,OAAO,CAACC,qBAAqB,GACvE,MAAMuB,aACJH,SAAW7B,GACX6B,SAAW7B,EAAIiB,OACfa,SAAW7B,GACX6B,SAAW7B,EAAImB,OAEjB,GAAI,CAACY,aAAc,CACjBR,iBACF,CACF,EAEA,OACE,oBAACS,OAAK,GAAGxC,IAAI,CAAEyC,UAAWhD,GAAG,mBAAoBO,MAAMyC,YACrD,oBAACC,UACCC,aAAc,IAAMzC,QAAQ,MAC5B0C,aAAc,AAACV,QACb,GAAI,CAACnC,aAAe,CAACkC,qBAAqBC,MAAOvB,WAAY,CAC3DoB,iBACF,CACF,EACAc,KAAK,SACLV,IAAKxB,UACLmC,mBAAiB,UAChB,GAAGjD,YAAY,CAChB4C,UAAW,CAAC,yCAAyC,EACnD5C,cAAc4C,WAAa,GAC5B,CAAC,EAED7C,gBACC,oBAACJ,MACCuD,KAAK,oCACLC,MAAM,yCACNC,KAAK,UAKVhD,KACGV,aACE,oBAACiD,OACCU,KAAK,UACLf,IAAKvB,SACLgC,aAAc,AAACV,OACbF,WAAW,IAAMM,0BAA0BJ,OAAQ,KAErDiB,MAAO,CACLzB,IAAKrB,SAASG,CAAC,CACfe,KAAMlB,SAASE,CAAC,CAChB6C,OAAQ,IACRC,UAAW,iCACb,EACC,GAAGvD,YAAY,CAChB2C,UAAWhD,GACT,yGACA,CAAE,sBAAuB,CAACM,WAAY,EACtC,sBACAD,cAAc2C,UACd,CAAE,0CAA2CtC,OAAQ,EACrD,CAAE,2CAA4C,CAACA,OAAQ,IAGzD,oBAACqC,OAAIC,UAAU,mBAAmB9C,WAEpC2D,SAASC,IAAI,EAEf,KAGV,CAEA,gBAAe7D,OAAQ"}

package/core/styles/buttons.css

@@ -1,22 +1,22 @@
 @layer components {
   .ui-button-base {
-    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus-base;
+    @apply inline-flex rounded justify-center items-center gap-3 text-neutral-000 transition-colors focus-base;
   }
 
   .ui-button-lg-base {
-    @apply ui-button-base ui-text-label1 font-bold h-[56px] px-[28px] py-[17px] gap-12 [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-label1 font-bold h-14 px-7 py-[1.0625rem] gap-3 [&>svg]:!w-6 [&>svg]:!h-6;
   }
 
   .ui-button-md-base {
-    @apply ui-button-base ui-text-label2 font-bold h-[48px] px-24 py-[13.5px] gap-[10px] [&>svg]:!w-24 [&>svg]:!h-24;
+    @apply ui-button-base ui-text-label2 font-bold h-12 px-6 py-[0.8125rem] gap-2.5 [&>svg]:!w-6 [&>svg]:!h-6;
   }
 
   .ui-button-sm-base {
-    @apply ui-button-base ui-text-label3 font-bold h-[40px] px-20 py-[10px] gap-8 [&>svg]:!w-20 [&>svg]:!h-20;
+    @apply ui-button-base ui-text-label3 font-bold h-10 px-5 py-2.5 gap-2 [&>svg]:!w-5 [&>svg]:!h-5;
   }
 
   .ui-button-xs-base {
-    @apply ui-button-base ui-text-label4 font-bold h-[36px] px-12 py-[9px] gap-6 [&>svg]:!w-16 [&>svg]:!h-16;
+    @apply ui-button-base ui-text-label4 font-bold h-9 px-3 py-[0.5625rem] gap-1.5 [&>svg]:!w-4 [&>svg]:!h-4;
   }
 
   .ui-button-disabled-base {
@@ -100,27 +100,27 @@
   }
 
   .ui-button-lg-left-icon {
-    @apply pl-24;
+    @apply pl-6;
   }
 
   .ui-button-left-icon {
-    @apply pl-20;
+    @apply pl-5;
   }
 
   .ui-button-sm-left-icon {
-    @apply pl-[18px];
+    @apply pl-[1.125rem];
   }
 
   .ui-button-lg-right-icon {
-    @apply pr-24;
+    @apply pr-6;
   }
 
   .ui-button-right-icon {
-    @apply pr-20;
+    @apply pr-5;
   }
 
   .ui-button-sm-right-icon {
-    @apply pr-[18px];
+    @apply pr-[1.125rem];
   }
 
   .ui-button-disabled {

package/core/styles/dropdowns.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus-base;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-4 pr-14 appearance-none select-none focus-base;
     @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
     background-position: center right 16px;
@@ -15,11 +15,11 @@
   }
 
   .ui-dropdown {
-    @apply ui-dropdown-base py-12;
+    @apply ui-dropdown-base py-3;
   }
 
   .ui-dropdown-small {
-    @apply ui-dropdown-base py-[10px] text-[14px];
+    @apply ui-dropdown-base py-2.5 text-[14px];
   }
 
   /* Special wrapper styles for overriding default Select2 functionality */

package/core/styles/forms/story-components.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>React.createElement("div",{className:"flex items-center gap-8"},React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));
+import React from"react";import Icon from"../../Icon";export const Checkbox=({index,disabled})=>React.createElement("div",{className:"ui-checkbox-p1 flex items-center"},React.createElement("input",{"data-ui-checkbox-native":"",type:"checkbox",id:`checkbox-example-${index}`,name:`checkbox-example-${index}`,value:"yes",className:"ui-checkbox-input",disabled:disabled}),React.createElement("div",{"data-ui-checkbox-styled":"",className:"ui-checkbox-styled"},React.createElement(Icon,{name:"icon-gui-check-micro",size:"1rem",additionalCSS:"ui-checkbox-styled-tick"})),React.createElement("label",{htmlFor:`checkbox-example-${index}`,className:"ui-checkbox-label-p1"},"Option ",index));export const RadioButton=({index,disabled})=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement("input",{"data-ui-radio-native":"",type:"radio",id:`radio-example-${index}`,name:"radio-example",value:`option-${index}`,className:"ui-radio",disabled:disabled}),React.createElement("label",{className:"text-neutral-1300 dark:text-neutral-000",htmlFor:`radio-example-${index}`},"Option ",index));
 //# sourceMappingURL=story-components.js.map

package/core/styles/forms/story-components.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/forms/story-components.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon\";\n\ntype FormElementProps = {\n  index: number;\n  disabled?: boolean;\n};\n\nexport const Checkbox = ({ index, disabled }: FormElementProps) => (\n  <div className=\"ui-checkbox-p1 flex items-center\">\n    <input\n      data-ui-checkbox-native=\"\"\n      type=\"checkbox\"\n      id={`checkbox-example-${index}`}\n      name={`checkbox-example-${index}`}\n      value=\"yes\"\n      className=\"ui-checkbox-input\"\n      disabled={disabled}\n    />\n    <div data-ui-checkbox-styled=\"\" className=\"ui-checkbox-styled\">\n      <Icon\n        name=\"icon-gui-check-micro\"\n        size=\"1rem\"\n        additionalCSS=\"ui-checkbox-styled-tick\"\n      />\n    </div>\n    <label\n      htmlFor={`checkbox-example-${index}`}\n      className=\"ui-checkbox-label-p1\"\n    >\n      Option {index}\n    </label>\n  </div>\n);\n\nexport const RadioButton = ({ index, disabled }: FormElementProps) => (\n  <div className=\"flex items-center gap-8\">\n    <input\n      data-ui-radio-native=\"\"\n      type=\"radio\"\n      id={`radio-example-${index}`}\n      name=\"radio-example\"\n      value={`option-${index}`}\n      className=\"ui-radio\"\n      disabled={disabled}\n    />\n    <label\n      className=\"text-neutral-1300 dark:text-neutral-000\"\n      htmlFor={`radio-example-${index}`}\n    >\n      Option {index}\n    </label>\n  </div>\n);\n"],"names":["React","Icon","Checkbox","index","disabled","div","className","input","data-ui-checkbox-native","type","id","name","value","data-ui-checkbox-styled","size","additionalCSS","label","htmlFor","RadioButton","data-ui-radio-native"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,YAAa,AAO9B,QAAO,MAAMC,SAAW,CAAC,CAAEC,KAAK,CAAEC,QAAQ,CAAoB,GAC5D,oBAACC,OAAIC,UAAU,oCACb,oBAACC,SACCC,0BAAwB,GACxBC,KAAK,WACLC,GAAI,CAAC,iBAAiB,EAAEP,MAAM,CAAC,CAC/BQ,KAAM,CAAC,iBAAiB,EAAER,MAAM,CAAC,CACjCS,MAAM,MACNN,UAAU,oBACVF,SAAUA,WAEZ,oBAACC,OAAIQ,0BAAwB,GAAGP,UAAU,sBACxC,oBAACL,MACCU,KAAK,uBACLG,KAAK,OACLC,cAAc,6BAGlB,oBAACC,SACCC,QAAS,CAAC,iBAAiB,EAAEd,MAAM,CAAC,CACpCG,UAAU,wBACX,UACSH,OAGZ,AAEF,QAAO,MAAMe,YAAc,CAAC,CAAEf,KAAK,CAAEC,QAAQ,CAAoB,GAC/D,oBAACC,OAAIC,UAAU,2BACb,oBAACC,SACCY,uBAAqB,GACrBV,KAAK,QACLC,GAAI,CAAC,cAAc,EAAEP,MAAM,CAAC,CAC5BQ,KAAK,gBACLC,MAAO,CAAC,OAAO,EAAET,MAAM,CAAC,CACxBG,UAAU,WACVF,SAAUA,WAEZ,oBAACY,SACCV,UAAU,0CACVW,QAAS,CAAC,cAAc,EAAEd,MAAM,CAAC,EAClC,UACSA,OAGZ"}
+{"version":3,"sources":["../../../../src/core/styles/forms/story-components.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../../Icon\";\n\ntype FormElementProps = {\n  index: number;\n  disabled?: boolean;\n};\n\nexport const Checkbox = ({ index, disabled }: FormElementProps) => (\n  <div className=\"ui-checkbox-p1 flex items-center\">\n    <input\n      data-ui-checkbox-native=\"\"\n      type=\"checkbox\"\n      id={`checkbox-example-${index}`}\n      name={`checkbox-example-${index}`}\n      value=\"yes\"\n      className=\"ui-checkbox-input\"\n      disabled={disabled}\n    />\n    <div data-ui-checkbox-styled=\"\" className=\"ui-checkbox-styled\">\n      <Icon\n        name=\"icon-gui-check-micro\"\n        size=\"1rem\"\n        additionalCSS=\"ui-checkbox-styled-tick\"\n      />\n    </div>\n    <label\n      htmlFor={`checkbox-example-${index}`}\n      className=\"ui-checkbox-label-p1\"\n    >\n      Option {index}\n    </label>\n  </div>\n);\n\nexport const RadioButton = ({ index, disabled }: FormElementProps) => (\n  <div className=\"flex items-center gap-2\">\n    <input\n      data-ui-radio-native=\"\"\n      type=\"radio\"\n      id={`radio-example-${index}`}\n      name=\"radio-example\"\n      value={`option-${index}`}\n      className=\"ui-radio\"\n      disabled={disabled}\n    />\n    <label\n      className=\"text-neutral-1300 dark:text-neutral-000\"\n      htmlFor={`radio-example-${index}`}\n    >\n      Option {index}\n    </label>\n  </div>\n);\n"],"names":["React","Icon","Checkbox","index","disabled","div","className","input","data-ui-checkbox-native","type","id","name","value","data-ui-checkbox-styled","size","additionalCSS","label","htmlFor","RadioButton","data-ui-radio-native"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,YAAa,AAO9B,QAAO,MAAMC,SAAW,CAAC,CAAEC,KAAK,CAAEC,QAAQ,CAAoB,GAC5D,oBAACC,OAAIC,UAAU,oCACb,oBAACC,SACCC,0BAAwB,GACxBC,KAAK,WACLC,GAAI,CAAC,iBAAiB,EAAEP,MAAM,CAAC,CAC/BQ,KAAM,CAAC,iBAAiB,EAAER,MAAM,CAAC,CACjCS,MAAM,MACNN,UAAU,oBACVF,SAAUA,WAEZ,oBAACC,OAAIQ,0BAAwB,GAAGP,UAAU,sBACxC,oBAACL,MACCU,KAAK,uBACLG,KAAK,OACLC,cAAc,6BAGlB,oBAACC,SACCC,QAAS,CAAC,iBAAiB,EAAEd,MAAM,CAAC,CACpCG,UAAU,wBACX,UACSH,OAGZ,AAEF,QAAO,MAAMe,YAAc,CAAC,CAAEf,KAAK,CAAEC,QAAQ,CAAoB,GAC/D,oBAACC,OAAIC,UAAU,2BACb,oBAACC,SACCY,uBAAqB,GACrBV,KAAK,QACLC,GAAI,CAAC,cAAc,EAAEP,MAAM,CAAC,CAC5BQ,KAAK,gBACLC,MAAO,CAAC,OAAO,EAAET,MAAM,CAAC,CACxBG,UAAU,WACVF,SAAUA,WAEZ,oBAACY,SACCV,UAAU,0CACVW,QAAS,CAAC,cAAc,EAAEd,MAAM,CAAC,EAClC,UACSA,OAGZ"}

package/core/styles/forms.css

@@ -1,18 +1,18 @@
 @layer components {
   .ui-checkbox-p1 {
-    @apply flex items-start mb-16 font-sans font-medium;
+    @apply flex items-start mb-4 font-sans font-medium;
   }
 
   .ui-checkbox-p2 {
-    @apply flex items-start mb-12 font-sans font-medium;
+    @apply flex items-start mb-3 font-sans font-medium;
   }
 
   .ui-checkbox-input {
-    @apply opacity-0 absolute h-20 w-20;
+    @apply opacity-0 absolute h-5 w-5;
   }
 
   .ui-checkbox-styled {
-    @apply w-20 h-20 mr-16;
+    @apply w-5 h-5 mr-4;
     @apply bg-white flex flex-shrink-0 justify-center items-center;
     @apply border border-neutral-500 rounded-md focus-within:border-active-orange;
   }
@@ -68,7 +68,7 @@
 
   .ui-textarea {
     @apply font-sans font-medium text-cool-black text-p1;
-    @apply p-input mb-16;
+    @apply p-input mb-4;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
     @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-none focus-visible:outline-gui-focus;
@@ -81,7 +81,7 @@
   }
 
   .ui-toggle {
-    @apply h-32 w-[56px] rounded-full relative inline-block;
+    @apply h-8 w-14 rounded-full relative inline-block;
   }
 
   .ui-toggle:has(:disabled) {
@@ -101,7 +101,7 @@
   }
 
   .ui-toggle-slider:before {
-    @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
+    @apply absolute h-7 w-7 left-0.5 bottom-0.5 bg-white rounded-full transition-transform drop-shadow-toggle;
     content: "";
   }
 
@@ -114,7 +114,7 @@
   }
 
   .ui-toggle input:checked + .ui-toggle-slider:before {
-    @apply translate-x-24;
+    @apply translate-x-6;
   }
 
   .ui-toggle input:disabled + .ui-toggle-slider:before {
@@ -140,7 +140,7 @@
   }
 
   .ui-radio {
-    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-base;
+    @apply border border-neutral-600 w-5 h-5 appearance-none cursor-pointer rounded-full focus-base;
   }
 
   .ui-radio:checked {
@@ -148,7 +148,7 @@
   }
 
   .ui-radio:checked::after {
-    @apply content-[''] mt-[5px] w-8 h-8 block bg-white rounded-full m-auto;
+    @apply content-[''] mt-[0.3125rem] w-2 h-2 block bg-white rounded-full m-auto;
   }
 
   .ui-radio:disabled {

package/core/styles/layout.css

@@ -1,26 +1,26 @@
 @layer components {
   .ui-standard-container {
-    @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
+    @apply w-full max-w-screen-xl mx-auto px-6 sm:px-8 md:px-10 lg:px-16;
   }
 
   .ui-grid-gap {
-    @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
+    @apply gap-2 sm:gap-4 md:gap-6 xl:gap-8;
   }
 
   .ui-grid-gap-x {
-    @apply gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32;
+    @apply gap-x-2 sm:gap-x-4 md:gap-x-6 xl:gap-x-8;
   }
 
   .ui-grid-px {
-    @apply px-24 sm:px-32 md:px-40 lg:px-64;
+    @apply px-6 sm:px-8 md:px-10 lg:px-16;
   }
 
   .ui-grid-mx {
-    @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
+    @apply mx-6 sm:mx-8 md:mx-10 lg:mx-16;
   }
 
   .ui-full-borderless-container-override {
-    @apply w-[10000px] ml-[calc(50%-5000px)];
+    @apply w-[625rem] ml-[calc(50%-5000px)];
   }
 
   .ui-full-container-override {

package/core/styles/legacy-buttons.css

@@ -70,15 +70,15 @@
   }
 
   .ui-btn-icon {
-    @apply w-24 h-24 mr-16;
+    @apply w-6 h-6 mr-4;
   }
 
   .ui-btn-icon-small {
-    @apply w-20 h-20 mr-12;
+    @apply w-5 h-5 mr-3;
   }
 
   .ui-btn-icon-xsmall {
-    @apply w-16 h-16 mr-8;
+    @apply w-4 h-4 mr-2;
   }
   .ui-btn.ui-btn-disabled,
   .ui-btn-invert.ui-btn-disabled {