@ably/ui 18.0.0-dev.dbc599e55b → 18.0.0

package/core/Badge.js

@@ -1,2 +1,2 @@
-import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const defaultIconSizeByBadgeSize={lg:"16px",md:"15px",sm:"14px",xs:"13px"};const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize,ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);const computedIconSize=iconSize??defaultIconSizeByBadgeSize[size];return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark":disabled},className),tabIndex:focusable?0:undefined,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:computedIconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:computedIconSize,color:colorClass}):null)};export default Badge;
+import React,{useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";const defaultIconSizeByBadgeSize={lg:"16px",md:"15px",sm:"14px",xs:"13px"};const Badge=({size="md",color="neutral",iconBefore,iconAfter,className,childClassName,children,disabled=false,focusable=false,hoverable=false,iconSize,ariaLabel})=>{const sizeClass=useMemo(()=>{switch(size){case"xs":return"px-2 py-0 text-[10px] leading-tight";case"sm":return"px-2 py-0.5 text-[10px] leading-tight";case"md":return"px-2.5 py-0.5 text-[11px] leading-normal";case"lg":return"px-3 py-[0.1875rem] text-[12px] leading-normal"}},[size]);const childClass=useMemo(()=>{switch(size){case"xs":case"sm":return"leading-[18px]";case"md":case"lg":return"leading-[20px]"}},[size]);const colorClass=useMemo(()=>{switch(color){case"neutral":return"text-neutral-900 dark:text-neutral-400";case"violet":return"text-violet-400";case"orange":return"text-orange-600";case"yellow":return"text-yellow-600";case"green":return"text-green-600";case"blue":return"text-blue-600";case"pink":return"text-pink-600";case"red":return"text-orange-700"}},[color]);const computedIconSize=iconSize??defaultIconSizeByBadgeSize[size];return React.createElement("div",{className:cn("inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold",sizeClass,colorClass,{"focus-base":focusable},{"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000":hoverable},{"cursor-not-allowed disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark":disabled},className),tabIndex:focusable?0:undefined,role:focusable?"button":undefined,"aria-label":focusable||hoverable?ariaLabel:undefined},iconBefore?React.createElement(Icon,{name:iconBefore,size:computedIconSize,color:colorClass}):null,React.createElement("span",{className:cn("whitespace-nowrap tracking-[0.04em]",childClass,childClassName)},children),iconAfter?React.createElement(Icon,{name:iconAfter,size:computedIconSize,color:colorClass}):null)};export default Badge;
 //# sourceMappingURL=Badge.js.map

package/core/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. If not provided, it will be derived from the badge size.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n\n  /**\n   * Additional CSS class names to apply to the children of the badge.\n   */\n  childClassName?: string;\n}\n\nconst defaultIconSizeByBadgeSize: Record<\n  NonNullable<BadgeProps[\"size\"]>,\n  IconSize\n> = {\n  lg: \"16px\",\n  md: \"15px\",\n  sm: \"14px\",\n  xs: \"13px\",\n};\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  childClassName,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize,\n  ariaLabel,\n}) => {\n  const sizeClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n        return \"px-2 py-0 text-[10px] leading-tight\";\n      case \"sm\":\n        return \"px-2 py-0.5 text-[10px] leading-tight\";\n      case \"md\":\n        return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n      case \"lg\":\n        return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n    }\n  }, [size]);\n\n  const childClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n      case \"sm\":\n        return \"leading-[18px]\";\n      case \"md\":\n      case \"lg\":\n        return \"leading-[20px]\";\n    }\n  }, [size]);\n\n  const colorClass = useMemo(() => {\n    switch (color) {\n      case \"neutral\":\n        return \"text-neutral-900 dark:text-neutral-400\";\n      case \"violet\":\n        return \"text-violet-400\";\n      case \"orange\":\n        return \"text-orange-600\";\n      case \"yellow\":\n        return \"text-yellow-600\";\n      case \"green\":\n        return \"text-green-600\";\n      case \"blue\":\n        return \"text-blue-600\";\n      case \"pink\":\n        return \"text-pink-600\";\n      case \"red\":\n        return \"text-orange-700\";\n    }\n  }, [color]);\n\n  const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n        sizeClass,\n        colorClass,\n        { \"focus-base\": focusable },\n        {\n          \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n            hoverable,\n        },\n        {\n          \"cursor-not-allowed disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      role={focusable ? \"button\" : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={computedIconSize} color={colorClass} />\n      ) : null}\n\n      <span\n        className={cn(\n          \"whitespace-nowrap tracking-[0.04em]\",\n          childClass,\n          childClassName,\n        )}\n      >\n        {children}\n      </span>\n\n      {iconAfter ? (\n        <Icon name={iconAfter} size={computedIconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","defaultIconSizeByBadgeSize","lg","md","sm","xs","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","computedIconSize","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,2BAGF,CACFC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,QAAQ,CACRC,SAAS,CACV,IACC,MAAMC,UAAYrB,QAAQ,KACxB,OAAQS,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAatB,QAAQ,KACzB,OAAQS,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAavB,QAAQ,KACzB,OAAQU,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,MAAMc,iBAAmBL,UAAYhB,0BAA0B,CAACM,KAAK,CAErE,OACE,oBAACgB,OACCZ,UAAWX,GACT,wIACAmB,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFa,SAAUT,UAAY,EAAIU,UAC1BC,KAAMX,UAAY,SAAWU,UAC7BE,aAAYZ,WAAaC,UAAYE,UAAYO,WAEhDhB,WACC,oBAACV,MAAK6B,KAAMnB,WAAYF,KAAMe,iBAAkBd,MAAOa,aACrD,KAEJ,oBAACQ,QACClB,UAAWX,GACT,sCACAoB,WACAR,iBAGDC,UAGFH,UACC,oBAACX,MAAK6B,KAAMlB,UAAWH,KAAMe,iBAAkBd,MAAOa,aACpD,KAGV,CAEA,gBAAef,KAAM"}
+{"version":3,"sources":["../../src/core/Badge.tsx"],"sourcesContent":["import React, { PropsWithChildren, useMemo } from \"react\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { ColorClassColorGroups } from \"./styles/colors/types\";\n\n/**\n * Props for the Badge component.\n */\nexport interface BadgeProps {\n  /**\n   * The size of the badge. Can be one of \"xs\", \"sm\", \"md\", or \"lg\".\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * The color of the badge. Can be a value from ColorClassColorGroups or \"red\".\n   */\n  color?: ColorClassColorGroups | \"red\";\n\n  /**\n   * The name of the icon to be displayed before the children in the badge.\n   */\n  iconBefore?: IconName;\n\n  /**\n   * The name of the icon to be displayed after the children in the badge.\n   */\n  iconAfter?: IconName;\n\n  /**\n   * Additional CSS class names to apply to the badge.\n   */\n  className?: string;\n\n  /**\n   * Whether the badge is disabled. Defaults to false.\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the badge is focusable. Defaults to false.\n   */\n  focusable?: boolean;\n\n  /**\n   * Whether the badge is hoverable. Defaults to false.\n   */\n  hoverable?: boolean;\n\n  /**\n   * The size of the icons in the badge. If not provided, it will be derived from the badge size.\n   */\n  iconSize?: IconSize;\n\n  /**\n   * Accessible label for the badge when interactive\n   */\n  ariaLabel?: string;\n\n  /**\n   * Additional CSS class names to apply to the children of the badge.\n   */\n  childClassName?: string;\n}\n\nconst defaultIconSizeByBadgeSize: Record<\n  NonNullable<BadgeProps[\"size\"]>,\n  IconSize\n> = {\n  lg: \"16px\",\n  md: \"15px\",\n  sm: \"14px\",\n  xs: \"13px\",\n};\n\nconst Badge: React.FC<PropsWithChildren<BadgeProps>> = ({\n  size = \"md\",\n  color = \"neutral\",\n  iconBefore,\n  iconAfter,\n  className,\n  childClassName,\n  children,\n  disabled = false,\n  focusable = false,\n  hoverable = false,\n  iconSize,\n  ariaLabel,\n}) => {\n  const sizeClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n        return \"px-2 py-0 text-[10px] leading-tight\";\n      case \"sm\":\n        return \"px-2 py-0.5 text-[10px] leading-tight\";\n      case \"md\":\n        return \"px-2.5 py-0.5 text-[11px] leading-normal\";\n      case \"lg\":\n        return \"px-3 py-[0.1875rem] text-[12px] leading-normal\";\n    }\n  }, [size]);\n\n  const childClass = useMemo(() => {\n    switch (size) {\n      case \"xs\":\n      case \"sm\":\n        return \"leading-[18px]\";\n      case \"md\":\n      case \"lg\":\n        return \"leading-[20px]\";\n    }\n  }, [size]);\n\n  const colorClass = useMemo(() => {\n    switch (color) {\n      case \"neutral\":\n        return \"text-neutral-900 dark:text-neutral-400\";\n      case \"violet\":\n        return \"text-violet-400\";\n      case \"orange\":\n        return \"text-orange-600\";\n      case \"yellow\":\n        return \"text-yellow-600\";\n      case \"green\":\n        return \"text-green-600\";\n      case \"blue\":\n        return \"text-blue-600\";\n      case \"pink\":\n        return \"text-pink-600\";\n      case \"red\":\n        return \"text-orange-700\";\n    }\n  }, [color]);\n\n  const computedIconSize = iconSize ?? defaultIconSizeByBadgeSize[size];\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex bg-neutral-100 dark:bg-neutral-1200 rounded-2xl gap-1 items-center focus-base transition-colors select-none font-semibold\",\n        sizeClass,\n        colorClass,\n        { \"focus-base\": focusable },\n        {\n          \"hover:bg-neutral-300 hover:dark:bg-neutral-1000 active:bg-neutral-300 dark:active:bg-neutral-1000\":\n            hoverable,\n        },\n        {\n          \"cursor-not-allowed disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark\":\n            disabled,\n        },\n        className,\n      )}\n      tabIndex={focusable ? 0 : undefined}\n      role={focusable ? \"button\" : undefined}\n      aria-label={focusable || hoverable ? ariaLabel : undefined}\n    >\n      {iconBefore ? (\n        <Icon name={iconBefore} size={computedIconSize} color={colorClass} />\n      ) : null}\n\n      <span\n        className={cn(\n          \"whitespace-nowrap tracking-[0.04em]\",\n          childClass,\n          childClassName,\n        )}\n      >\n        {children}\n      </span>\n\n      {iconAfter ? (\n        <Icon name={iconAfter} size={computedIconSize} color={colorClass} />\n      ) : null}\n    </div>\n  );\n};\n\nexport default Badge;\n"],"names":["React","useMemo","Icon","cn","defaultIconSizeByBadgeSize","lg","md","sm","xs","Badge","size","color","iconBefore","iconAfter","className","childClassName","children","disabled","focusable","hoverable","iconSize","ariaLabel","sizeClass","childClass","colorClass","computedIconSize","div","tabIndex","undefined","role","aria-label","name","span"],"mappings":"AAAA,OAAOA,OAA4BC,OAAO,KAAQ,OAAQ,AAE1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CA+D5B,MAAMC,2BAGF,CACFC,GAAI,OACJC,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMC,MAAiD,CAAC,CACtDC,KAAO,IAAI,CACXC,MAAQ,SAAS,CACjBC,UAAU,CACVC,SAAS,CACTC,SAAS,CACTC,cAAc,CACdC,QAAQ,CACRC,SAAW,KAAK,CAChBC,UAAY,KAAK,CACjBC,UAAY,KAAK,CACjBC,QAAQ,CACRC,SAAS,CACV,IACC,MAAMC,UAAYrB,QAAQ,KACxB,OAAQS,MACN,IAAK,KACH,MAAO,qCACT,KAAK,KACH,MAAO,uCACT,KAAK,KACH,MAAO,0CACT,KAAK,KACH,MAAO,gDACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMa,WAAatB,QAAQ,KACzB,OAAQS,MACN,IAAK,KACL,IAAK,KACH,MAAO,gBACT,KAAK,KACL,IAAK,KACH,MAAO,gBACX,CACF,EAAG,CAACA,KAAK,EAET,MAAMc,WAAavB,QAAQ,KACzB,OAAQU,OACN,IAAK,UACH,MAAO,wCACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,SACH,MAAO,iBACT,KAAK,QACH,MAAO,gBACT,KAAK,OACH,MAAO,eACT,KAAK,OACH,MAAO,eACT,KAAK,MACH,MAAO,iBACX,CACF,EAAG,CAACA,MAAM,EAEV,MAAMc,iBAAmBL,UAAYhB,0BAA0B,CAACM,KAAK,CAErE,OACE,oBAACgB,OACCZ,UAAWX,GACT,wIACAmB,UACAE,WACA,CAAE,aAAcN,SAAU,EAC1B,CACE,oGACEC,SACJ,EACA,CACE,2FACEF,QACJ,EACAH,WAEFa,SAAUT,UAAY,EAAIU,UAC1BC,KAAMX,UAAY,SAAWU,UAC7BE,aAAYZ,WAAaC,UAAYE,UAAYO,WAEhDhB,WACC,oBAACV,MAAK6B,KAAMnB,WAAYF,KAAMe,iBAAkBd,MAAOa,aACrD,KAEJ,oBAACQ,QACClB,UAAWX,GACT,sCACAoB,WACAR,iBAGDC,UAGFH,UACC,oBAACX,MAAK6B,KAAMlB,UAAWH,KAAMe,iBAAkBd,MAAOa,aACpD,KAGV,CAEA,gBAAef,KAAM"}

package/core/FeaturedLink.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-unavailable pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick&&!url?"button":undefined},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-2 relative -top-px -left-1 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
+import React from"react";import Icon from"./Icon";import cn from"./utils/cn";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor,flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children,disabled=false,iconClassName=""})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{...onClick?{}:{href:url},className:cn("font-sans font-bold block group/featured-link",{"text-gui-disabled-light dark:text-gui-disabled-dark pointer-events-none":disabled},{"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":!disabled},{"py-2":!flush},`ui-${textSize}`,additionalCSS),style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick&&!url?"button":undefined},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180",{"group-hover/featured-link:right-0":!disabled},iconClassName)}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:cn("align-middle ml-2 relative -top-px -left-1 transition-[left]",{"group-hover/featured-link:left-0":!disabled},iconClassName)})))};export default FeaturedLink;
 //# sourceMappingURL=FeaturedLink.js.map

package/core/FeaturedLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for the icon.\n   */\n  iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  iconClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        { \"text-gui-unavailable pointer-events-none\": disabled },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-2\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      role={onClick && !url ? \"button\" : undefined}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              iconClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-2 relative -top-px -left-1 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","onKeyDown","e","key","preventDefault","role","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CAAE,2CAA4CiB,QAAS,EACvD,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,QACTW,UACEX,QACI,AAACY,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBd,SACF,CACF,EACAC,UAENc,KAAMf,SAAW,CAACZ,IAAM,SAAWa,WAElCH,QACC,wCACE,oBAACb,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,+DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}
+{"version":3,"sources":["../../src/core/FeaturedLink.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode } from \"react\";\n\nimport Icon from \"./Icon\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport cn from \"./utils/cn\";\n\ntype FeaturedLinkProps = {\n  url: string;\n  children: ReactNode;\n  textSize?: string;\n  iconColor?: ColorClass | ColorThemeSet;\n  flush?: boolean;\n  reverse?: boolean;\n  additionalCSS?: string;\n  newWindow?: boolean;\n  onClick?: () => void;\n  disabled?: boolean;\n  /**\n   * Optional class name for the icon.\n   */\n  iconClassName?: string;\n};\n\ntype TargetProps = { target?: string; rel?: string };\n\n// When generating links with target=_blank, we only add `noreferrer` to\n// links that don't start with `/`, so we can continue tracking referrers\n// across our own domains\nconst buildTargetAndRel = (url: string, newWindow: boolean) => {\n  const props: TargetProps = {};\n\n  if (newWindow) {\n    props.target = \"_blank\";\n\n    if (url.startsWith(\"/\") && !url.startsWith(\"//\")) {\n      props.rel = \"noopener\";\n    } else {\n      props.rel = \"noopenner noreferrer\";\n    }\n  }\n\n  return props;\n};\n\nconst FeaturedLink = ({\n  url,\n  textSize = \"text-p2\",\n  iconColor,\n  flush = false,\n  reverse = false,\n  additionalCSS = \"\",\n  newWindow = false,\n  onClick = undefined,\n  children,\n  disabled = false,\n  iconClassName = \"\",\n}: FeaturedLinkProps) => {\n  const targetAndRel = buildTargetAndRel(url, newWindow);\n\n  return (\n    <a\n      {...(onClick ? {} : { href: url })}\n      className={cn(\n        \"font-sans font-bold block group/featured-link\",\n        {\n          \"text-gui-disabled-light dark:text-gui-disabled-dark pointer-events-none\":\n            disabled,\n        },\n        {\n          \"text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus\":\n            !disabled,\n        },\n        { \"py-2\": !flush },\n        `ui-${textSize}`,\n        additionalCSS,\n      )}\n      style={\n        {\n          \"--featured-link-icon-size\": `var(${textSize.replace(\n            \"text\",\n            \"--fs\",\n          )})`,\n        } as CSSProperties\n      }\n      {...targetAndRel}\n      onClick={onClick}\n      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      role={onClick && !url ? \"button\" : undefined}\n    >\n      {reverse ? (\n        <>\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle mr-2 relative -top-px -right-1 transition-[right] transform rotate-180\",\n              { \"group-hover/featured-link:right-0\": !disabled },\n              iconClassName,\n            )}\n          />\n          {children}\n        </>\n      ) : (\n        <>\n          {children}\n          <Icon\n            name=\"icon-gui-arrow-long-right-outline\"\n            size={`calc(var(--featured-link-icon-size) * 1.25)`}\n            color={iconColor}\n            additionalCSS={cn(\n              \"align-middle ml-2 relative -top-px -left-1 transition-[left]\",\n              {\n                \"group-hover/featured-link:left-0\": !disabled,\n              },\n              iconClassName,\n            )}\n          />\n        </>\n      )}\n    </a>\n  );\n};\n\nexport default FeaturedLink;\n"],"names":["React","Icon","cn","buildTargetAndRel","url","newWindow","props","target","startsWith","rel","FeaturedLink","textSize","iconColor","flush","reverse","additionalCSS","onClick","undefined","children","disabled","iconClassName","targetAndRel","a","href","className","style","replace","onKeyDown","e","key","preventDefault","role","name","size","color"],"mappings":"AAAA,OAAOA,UAAyC,OAAQ,AAExD,QAAOC,SAAU,QAAS,AAE1B,QAAOC,OAAQ,YAAa,CAwB5B,MAAMC,kBAAoB,CAACC,IAAaC,aACtC,MAAMC,MAAqB,CAAC,EAE5B,GAAID,UAAW,CACbC,MAAMC,MAAM,CAAG,SAEf,GAAIH,IAAII,UAAU,CAAC,MAAQ,CAACJ,IAAII,UAAU,CAAC,MAAO,CAChDF,MAAMG,GAAG,CAAG,UACd,KAAO,CACLH,MAAMG,GAAG,CAAG,sBACd,CACF,CAEA,OAAOH,KACT,EAEA,MAAMI,aAAe,CAAC,CACpBN,GAAG,CACHO,SAAW,SAAS,CACpBC,SAAS,CACTC,MAAQ,KAAK,CACbC,QAAU,KAAK,CACfC,cAAgB,EAAE,CAClBV,UAAY,KAAK,CACjBW,QAAUC,SAAS,CACnBC,QAAQ,CACRC,SAAW,KAAK,CAChBC,cAAgB,EAAE,CACA,IAClB,MAAMC,aAAelB,kBAAkBC,IAAKC,WAE5C,OACE,oBAACiB,KACE,GAAIN,QAAU,CAAC,EAAI,CAAEO,KAAMnB,GAAI,CAAC,CACjCoB,UAAWtB,GACT,gDACA,CACE,0EACEiB,QACJ,EACA,CACE,gHACE,CAACA,QACL,EACA,CAAE,OAAQ,CAACN,KAAM,EACjB,CAAC,GAAG,EAAEF,SAAS,CAAC,CAChBI,eAEFU,MACE,CACE,4BAA6B,CAAC,IAAI,EAAEd,SAASe,OAAO,CAClD,OACA,QACA,CAAC,CAAC,AACN,EAED,GAAGL,YAAY,CAChBL,QAASA,QACTW,UACEX,QACI,AAACY,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBd,SACF,CACF,EACAC,UAENc,KAAMf,SAAW,CAACZ,IAAM,SAAWa,WAElCH,QACC,wCACE,oBAACb,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,sFACA,CAAE,oCAAqC,CAACiB,QAAS,EACjDC,iBAGHF,UAGH,wCACGA,SACD,oBAACjB,MACC+B,KAAK,oCACLC,KAAM,CAAC,2CAA2C,CAAC,CACnDC,MAAOtB,UACPG,cAAeb,GACb,+DACA,CACE,mCAAoC,CAACiB,QACvC,EACAC,kBAOd,CAEA,gBAAeV,YAAa"}

package/core/ProductTile/ProductLabel.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel,showAblyText=true,className})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-[0.04em] font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):showAblyText&&React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable},className),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
+import React from"react";import cn from"../utils/cn";const LABEL_FONT_SIZE_RATIO=4;const DESCRIPTION_FONT_SIZE_RATIO=2.6;const ProductLabel=({label,unavailable,selected,numericalSize,showLabel,showAblyText=true,className})=>{if(!label||!showLabel){return null}const dynamicFontSize=numericalSize/LABEL_FONT_SIZE_RATIO;return React.createElement("span",{className:"flex flex-col justify-center"},unavailable?React.createElement("span",{className:"block"},React.createElement("span",{className:"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-disabled-light dark:text-gui-disabled-dark tracking-[0.04em] font-bold leading-snug",style:{fontSize:dynamicFontSize*.6,padding:`${dynamicFontSize*.25}px ${dynamicFontSize*.5}px`}},"COMING SOON")):showAblyText&&React.createElement("span",{className:cn("block font-bold uppercase ui-text-p2 leading-snug",{"text-neutral-500 dark:text-neutral-700":selected},{"text-neutral-700 dark:text-neutral-500":!selected}),style:{fontSize:dynamicFontSize,letterSpacing:"0.06em"}},"Ably"),React.createElement("span",{className:cn("block ui-text-p2 font-bold",{"text-neutral-000 dark:text-neutral-1300":selected===true&&!unavailable},{"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000":selected===false&&!unavailable},{"text-neutral-1300 dark:text-neutral-000":selected===undefined&&!unavailable},{"text-neutral-700 dark:text-neutral-600":unavailable},{"mt-[-3px]":!unavailable},className),style:{fontSize:numericalSize/DESCRIPTION_FONT_SIZE_RATIO}},label))};export default ProductLabel;
 //# sourceMappingURL=ProductLabel.js.map

package/core/ProductTile/ProductLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n  label: string;\n  unavailable: boolean;\n  selected?: boolean;\n  numericalSize: number;\n  showLabel?: boolean;\n  showAblyText?: boolean;\n  className?: string;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n  label,\n  unavailable,\n  selected,\n  numericalSize,\n  showLabel,\n  showAblyText = true,\n  className,\n}: ProductLabelProps) => {\n  if (!label || !showLabel) {\n    return null;\n  }\n\n  const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n  return (\n    <span className=\"flex flex-col justify-center\">\n      {unavailable ? (\n        <span className=\"block\">\n          <span\n            className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-unavailable tracking-[0.04em] font-bold leading-snug\"\n            style={{\n              fontSize: dynamicFontSize * 0.6,\n              padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n            }}\n          >\n            COMING SOON\n          </span>\n        </span>\n      ) : (\n        showAblyText && (\n          <span\n            className={cn(\n              \"block font-bold uppercase ui-text-p2 leading-snug\",\n              { \"text-neutral-500 dark:text-neutral-700\": selected },\n              { \"text-neutral-700 dark:text-neutral-500\": !selected },\n            )}\n            style={{\n              fontSize: dynamicFontSize,\n              letterSpacing: \"0.06em\",\n            }}\n          >\n            Ably\n          </span>\n        )\n      )}\n      <span\n        className={cn(\n          \"block ui-text-p2 font-bold\",\n          {\n            \"text-neutral-000 dark:text-neutral-1300\":\n              selected === true && !unavailable,\n          },\n          {\n            \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n              selected === false && !unavailable,\n          },\n          {\n            \"text-neutral-1300 dark:text-neutral-000\":\n              selected === undefined && !unavailable,\n          },\n          {\n            \"text-neutral-700 dark:text-neutral-600\": unavailable,\n          },\n          { \"mt-[-3px]\": !unavailable },\n          className,\n        )}\n        style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n      >\n        {label}\n      </span>\n    </span>\n  );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","showAblyText","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAY7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,aAAe,IAAI,CACnBC,SAAS,CACS,IAClB,GAAI,CAACN,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMG,gBAAkBJ,cAAgBN,sBAExC,OACE,oBAACW,QAAKF,UAAU,gCACbL,YACC,oBAACO,QAAKF,UAAU,SACd,oBAACE,QACCF,UAAU,sIACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKHF,cACE,oBAACG,QACCF,UAAWV,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDO,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAKL,oBAACJ,QACCF,UAAWV,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaW,WAAa,CAACZ,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BK,WAEFG,MAAO,CAAEC,SAAUP,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}
+{"version":3,"sources":["../../../src/core/ProductTile/ProductLabel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\n\ntype ProductLabelProps = {\n  label: string;\n  unavailable: boolean;\n  selected?: boolean;\n  numericalSize: number;\n  showLabel?: boolean;\n  showAblyText?: boolean;\n  className?: string;\n};\n\nconst LABEL_FONT_SIZE_RATIO = 4;\nconst DESCRIPTION_FONT_SIZE_RATIO = 2.6;\n\nconst ProductLabel = ({\n  label,\n  unavailable,\n  selected,\n  numericalSize,\n  showLabel,\n  showAblyText = true,\n  className,\n}: ProductLabelProps) => {\n  if (!label || !showLabel) {\n    return null;\n  }\n\n  const dynamicFontSize = numericalSize / LABEL_FONT_SIZE_RATIO;\n\n  return (\n    <span className=\"flex flex-col justify-center\">\n      {unavailable ? (\n        <span className=\"block\">\n          <span\n            className=\"table-cell font-sans bg-neutral-300 dark:bg-neutral-1000 rounded-full text-gui-disabled-light dark:text-gui-disabled-dark tracking-[0.04em] font-bold leading-snug\"\n            style={{\n              fontSize: dynamicFontSize * 0.6,\n              padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`,\n            }}\n          >\n            COMING SOON\n          </span>\n        </span>\n      ) : (\n        showAblyText && (\n          <span\n            className={cn(\n              \"block font-bold uppercase ui-text-p2 leading-snug\",\n              { \"text-neutral-500 dark:text-neutral-700\": selected },\n              { \"text-neutral-700 dark:text-neutral-500\": !selected },\n            )}\n            style={{\n              fontSize: dynamicFontSize,\n              letterSpacing: \"0.06em\",\n            }}\n          >\n            Ably\n          </span>\n        )\n      )}\n      <span\n        className={cn(\n          \"block ui-text-p2 font-bold\",\n          {\n            \"text-neutral-000 dark:text-neutral-1300\":\n              selected === true && !unavailable,\n          },\n          {\n            \"text-neutral-1000 dark:text-neutral-300 group-hover/product-tile:text-neutral-1300 dark:group-hover/product-tile:text-neutral-000\":\n              selected === false && !unavailable,\n          },\n          {\n            \"text-neutral-1300 dark:text-neutral-000\":\n              selected === undefined && !unavailable,\n          },\n          {\n            \"text-neutral-700 dark:text-neutral-600\": unavailable,\n          },\n          { \"mt-[-3px]\": !unavailable },\n          className,\n        )}\n        style={{ fontSize: numericalSize / DESCRIPTION_FONT_SIZE_RATIO }}\n      >\n        {label}\n      </span>\n    </span>\n  );\n};\n\nexport default ProductLabel;\n"],"names":["React","cn","LABEL_FONT_SIZE_RATIO","DESCRIPTION_FONT_SIZE_RATIO","ProductLabel","label","unavailable","selected","numericalSize","showLabel","showAblyText","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAY7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,aAAe,IAAI,CACnBC,SAAS,CACS,IAClB,GAAI,CAACN,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAMG,gBAAkBJ,cAAgBN,sBAExC,OACE,oBAACW,QAAKF,UAAU,gCACbL,YACC,oBAACO,QAAKF,UAAU,SACd,oBAACE,QACCF,UAAU,qKACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,gBAKHF,cACE,oBAACG,QACCF,UAAWV,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDO,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAKL,oBAACJ,QACCF,UAAWV,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaW,WAAa,CAACZ,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BK,WAEFG,MAAO,CAAEC,SAAUP,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}

package/core/ProductTile/data.js

@@ -1,2 +1,2 @@
-export const productNames=["pubsub","chat","aiTransport","liveObjects","spaces","liveSync"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience.",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale.",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/chat"},aiTransport:{label:"AI Transport",description:"Drop-in realtime continuity for Gen-2 AI experiences.",icon:"icon-product-ai-transport-mono",hoverIcon:"icon-product-ai-transport"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices.",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/liveobjects"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code.",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients.",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/livesync"}};
+export const productNames=["pubsub","chat","aiTransport","liveObjects","spaces","liveSync"];export const products={pubsub:{label:"Pub/Sub",description:"Low-level APIs to build any realtime experience.",icon:"icon-product-pubsub-mono",hoverIcon:"icon-product-pubsub",link:"/docs/channels"},chat:{label:"Chat",description:"Rapidly build chat features and roll-out at scale.",icon:"icon-product-chat-mono",hoverIcon:"icon-product-chat",link:"/docs/chat"},aiTransport:{label:"AI Transport",description:"A drop-in infrastructure layer for a durable AI UX.",icon:"icon-product-ai-transport-mono",hoverIcon:"icon-product-ai-transport"},liveObjects:{label:"LiveObjects",description:"Sync application state across multiple devices.",icon:"icon-product-liveobjects-mono",hoverIcon:"icon-product-liveobjects",link:"/docs/liveobjects"},spaces:{label:"Spaces",description:"Create collaborative environments in a few lines of code.",icon:"icon-product-spaces-mono",hoverIcon:"icon-product-spaces",link:"/docs/spaces"},liveSync:{label:"LiveSync",description:"Sync database changes with frontend clients.",icon:"icon-product-livesync-mono",hoverIcon:"icon-product-livesync",link:"/docs/livesync"}};
 //# sourceMappingURL=data.js.map

package/core/ProductTile/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n  \"pubsub\",\n  \"chat\",\n  \"aiTransport\",\n  \"liveObjects\",\n  \"spaces\",\n  \"liveSync\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n  ProductName,\n  {\n    label: string;\n    description: string;\n    link?: string;\n    icon?: IconName;\n    hoverIcon?: IconName;\n    unavailable?: boolean;\n  }\n>;\n\nexport const products: Products = {\n  pubsub: {\n    label: \"Pub/Sub\",\n    description: \"Low-level APIs to build any realtime experience.\",\n    icon: \"icon-product-pubsub-mono\",\n    hoverIcon: \"icon-product-pubsub\",\n    link: \"/docs/channels\",\n  },\n  chat: {\n    label: \"Chat\",\n    description: \"Rapidly build chat features and roll-out at scale.\",\n    icon: \"icon-product-chat-mono\",\n    hoverIcon: \"icon-product-chat\",\n    link: \"/docs/chat\",\n  },\n  aiTransport: {\n    label: \"AI Transport\",\n    description: \"Drop-in realtime continuity for Gen-2 AI experiences.\",\n    icon: \"icon-product-ai-transport-mono\",\n    hoverIcon: \"icon-product-ai-transport\",\n  },\n  liveObjects: {\n    label: \"LiveObjects\",\n    description: \"Sync application state across multiple devices.\",\n    icon: \"icon-product-liveobjects-mono\",\n    hoverIcon: \"icon-product-liveobjects\",\n    link: \"/docs/liveobjects\",\n  },\n  spaces: {\n    label: \"Spaces\",\n    description: \"Create collaborative environments in a few lines of code.\",\n    icon: \"icon-product-spaces-mono\",\n    hoverIcon: \"icon-product-spaces\",\n    link: \"/docs/spaces\",\n  },\n  liveSync: {\n    label: \"LiveSync\",\n    description: \"Sync database changes with frontend clients.\",\n    icon: \"icon-product-livesync-mono\",\n    hoverIcon: \"icon-product-livesync\",\n    link: \"/docs/livesync\",\n  },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","aiTransport","liveObjects","spaces","liveSync"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,cACA,cACA,SACA,WACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,mDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,gBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,qDACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,YACR,EACAE,YAAa,CACXN,MAAO,eACPC,YAAa,wDACbC,KAAM,iCACNC,UAAW,2BACb,EACAI,YAAa,CACXP,MAAO,cACPC,YAAa,kDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,mBACR,EACAI,OAAQ,CACNR,MAAO,SACPC,YAAa,4DACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,cACR,EACAK,SAAU,CACRT,MAAO,WACPC,YAAa,+CACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,gBACR,CACF,CAAE"}
+{"version":3,"sources":["../../../src/core/ProductTile/data.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport const productNames = [\n  \"pubsub\",\n  \"chat\",\n  \"aiTransport\",\n  \"liveObjects\",\n  \"spaces\",\n  \"liveSync\",\n] as const;\n\nexport type ProductName = (typeof productNames)[number];\n\ntype Products = Record<\n  ProductName,\n  {\n    label: string;\n    description: string;\n    link?: string;\n    icon?: IconName;\n    hoverIcon?: IconName;\n    unavailable?: boolean;\n  }\n>;\n\nexport const products: Products = {\n  pubsub: {\n    label: \"Pub/Sub\",\n    description: \"Low-level APIs to build any realtime experience.\",\n    icon: \"icon-product-pubsub-mono\",\n    hoverIcon: \"icon-product-pubsub\",\n    link: \"/docs/channels\",\n  },\n  chat: {\n    label: \"Chat\",\n    description: \"Rapidly build chat features and roll-out at scale.\",\n    icon: \"icon-product-chat-mono\",\n    hoverIcon: \"icon-product-chat\",\n    link: \"/docs/chat\",\n  },\n  aiTransport: {\n    label: \"AI Transport\",\n    description: \"A drop-in infrastructure layer for a durable AI UX.\",\n    icon: \"icon-product-ai-transport-mono\",\n    hoverIcon: \"icon-product-ai-transport\",\n  },\n  liveObjects: {\n    label: \"LiveObjects\",\n    description: \"Sync application state across multiple devices.\",\n    icon: \"icon-product-liveobjects-mono\",\n    hoverIcon: \"icon-product-liveobjects\",\n    link: \"/docs/liveobjects\",\n  },\n  spaces: {\n    label: \"Spaces\",\n    description: \"Create collaborative environments in a few lines of code.\",\n    icon: \"icon-product-spaces-mono\",\n    hoverIcon: \"icon-product-spaces\",\n    link: \"/docs/spaces\",\n  },\n  liveSync: {\n    label: \"LiveSync\",\n    description: \"Sync database changes with frontend clients.\",\n    icon: \"icon-product-livesync-mono\",\n    hoverIcon: \"icon-product-livesync\",\n    link: \"/docs/livesync\",\n  },\n};\n"],"names":["productNames","products","pubsub","label","description","icon","hoverIcon","link","chat","aiTransport","liveObjects","spaces","liveSync"],"mappings":"AAEA,OAAO,MAAMA,aAAe,CAC1B,SACA,OACA,cACA,cACA,SACA,WACD,AAAU,AAgBX,QAAO,MAAMC,SAAqB,CAChCC,OAAQ,CACNC,MAAO,UACPC,YAAa,mDACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,gBACR,EACAC,KAAM,CACJL,MAAO,OACPC,YAAa,qDACbC,KAAM,yBACNC,UAAW,oBACXC,KAAM,YACR,EACAE,YAAa,CACXN,MAAO,eACPC,YAAa,sDACbC,KAAM,iCACNC,UAAW,2BACb,EACAI,YAAa,CACXP,MAAO,cACPC,YAAa,kDACbC,KAAM,gCACNC,UAAW,2BACXC,KAAM,mBACR,EACAI,OAAQ,CACNR,MAAO,SACPC,YAAa,4DACbC,KAAM,2BACNC,UAAW,sBACXC,KAAM,cACR,EACAK,SAAU,CACRT,MAAO,WACPC,YAAa,+CACbC,KAAM,6BACNC,UAAW,wBACXC,KAAM,gBACR,CACF,CAAE"}

package/core/SegmentedControl.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-12 p-3 gap-2.5",rounded&&"px-[1.125rem]"),sm:cn("h-10 p-[0.5625rem] gap-[0.5625rem]",rounded&&"px-3.5"),xs:cn("h-9 p-2 gap-2",rounded&&"px-3")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}),children&&React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}))};export default SegmentedControl;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";const SegmentedControl=({className,rounded=false,leftIcon,rightIcon,active=false,variant="default",size="md",children,onClick,disabled})=>{const colorStyles={default:{active:"bg-neutral-200 dark:bg-neutral-1100",inactive:"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200"},subtle:{active:"bg-neutral-000 dark:bg-neutral-1000",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"},strong:{active:"bg-neutral-1000 dark:bg-neutral-300",inactive:"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100"}};const contentColorStyles={default:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},subtle:{active:"text-neutral-1300 dark:text-neutral-000",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"},strong:{active:"text-neutral-000 dark:text-neutral-1300",inactive:"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000"}};const sizeStyles={md:cn("h-12 p-3 gap-2.5",rounded&&"px-[1.125rem]"),sm:cn("h-10 p-[0.5625rem] gap-[0.5625rem]",rounded&&"px-3.5"),xs:cn("h-9 p-2 gap-2",rounded&&"px-3")};const textStyles={md:"ui-text-label2",sm:"ui-text-label3",xs:"ui-text-label4"};const iconSizes={md:"23px",sm:"22px",xs:"20px"};const activeKey=active?"active":"inactive";return React.createElement("div",{onClick:!disabled?onClick:undefined,onKeyDown:e=>{if((e.key==="Enter"||e.key===" ")&&!disabled&&onClick){e.preventDefault();onClick()}},className:cn("focus-base flex items-center justify-center cursor-pointer select-none transition-colors",colorStyles[variant][activeKey],contentColorStyles[variant][activeKey],sizeStyles[size],textStyles[size],disabled&&"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit",rounded?"rounded-full":"rounded-lg",className),tabIndex:disabled?-1:0,role:"button","aria-pressed":active,"aria-disabled":disabled},leftIcon&&React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}),children&&React.createElement("span",{className:cn("font-semibold transition-colors",contentColorStyles[variant][activeKey],disabled&&"text-gui-disabled-light dark:text-gui-disabled-dark hover:text-gui-disabled-light dark:hover:text-gui-disabled-dark")},children),rightIcon&&React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true",color:contentColorStyles[variant][activeKey]}))};export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.js.map

package/core/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n  className?: string;\n  rounded?: boolean;\n  leftIcon?: IconName;\n  rightIcon?: IconName;\n  active?: boolean;\n  variant?: \"default\" | \"subtle\" | \"strong\";\n  size?: SegmentedControlSize;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n  className,\n  rounded = false,\n  leftIcon,\n  rightIcon,\n  active = false,\n  variant = \"default\",\n  size = \"md\",\n  children,\n  onClick,\n  disabled,\n}) => {\n  const colorStyles = {\n    default: {\n      active: \"bg-neutral-200 dark:bg-neutral-1100\",\n      inactive:\n        \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n    },\n    subtle: {\n      active: \"bg-neutral-000 dark:bg-neutral-1000\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n    strong: {\n      active: \"bg-neutral-1000 dark:bg-neutral-300\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n  };\n\n  const contentColorStyles = {\n    default: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    subtle: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    strong: {\n      active: \"text-neutral-000 dark:text-neutral-1300\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n  };\n\n  const sizeStyles = {\n    md: cn(\"h-12 p-3 gap-2.5\", rounded && \"px-[1.125rem]\"),\n    sm: cn(\"h-10 p-[0.5625rem] gap-[0.5625rem]\", rounded && \"px-3.5\"),\n    xs: cn(\"h-9 p-2 gap-2\", rounded && \"px-3\"),\n  };\n\n  const textStyles = {\n    md: \"ui-text-label2\",\n    sm: \"ui-text-label3\",\n    xs: \"ui-text-label4\",\n  };\n\n  const iconSizes: Record<SegmentedControlSize, IconSize> = {\n    md: \"23px\",\n    sm: \"22px\",\n    xs: \"20px\",\n  };\n\n  const activeKey = active ? \"active\" : \"inactive\";\n\n  return (\n    <div\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={(e) => {\n        if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      className={cn(\n        \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n        colorStyles[variant][activeKey],\n        contentColorStyles[variant][activeKey],\n        sizeStyles[size],\n        textStyles[size],\n        disabled &&\n          \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n        rounded ? \"rounded-full\" : \"rounded-lg\",\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"button\"\n      aria-pressed={active}\n      aria-disabled={disabled}\n    >\n      {leftIcon && (\n        <Icon\n          name={leftIcon}\n          size={iconSizes[size]}\n          aria-hidden=\"true\"\n          color={contentColorStyles[variant][activeKey] as ColorClass}\n        />\n      )}\n      {children && (\n        <span\n          className={cn(\n            \"font-semibold transition-colors\",\n            contentColorStyles[variant][activeKey],\n            disabled &&\n              \"text-gui-unavailable dark:text-gui-unavailable-dark hover:text-gui-unavailable dark:hover:text-gui-unavailable-dark\",\n          )}\n        >\n          {children}\n        </span>\n      )}\n      {rightIcon && (\n        <Icon\n          name={rightIcon}\n          size={iconSizes[size]}\n          aria-hidden=\"true\"\n          color={contentColorStyles[variant][activeKey] as ColorClass}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","color","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAkB1B,MAAMC,iBAAuE,CAAC,CAC5EC,SAAS,CACTC,QAAU,KAAK,CACfC,QAAQ,CACRC,SAAS,CACTC,OAAS,KAAK,CACdC,QAAU,SAAS,CACnBC,KAAO,IAAI,CACXC,QAAQ,CACRC,OAAO,CACPC,QAAQ,CACT,IACC,MAAMC,YAAc,CAClBC,QAAS,CACPP,OAAQ,sCACRQ,SACE,uIACJ,EACAC,OAAQ,CACNT,OAAQ,sCACRQ,SACE,uIACJ,EACAE,OAAQ,CACNV,OAAQ,sCACRQ,SACE,uIACJ,CACF,EAEA,MAAMG,mBAAqB,CACzBJ,QAAS,CACPP,OAAQ,0CACRQ,SACE,6FACJ,EACAC,OAAQ,CACNT,OAAQ,0CACRQ,SACE,6FACJ,EACAE,OAAQ,CACNV,OAAQ,0CACRQ,SACE,6FACJ,CACF,EAEA,MAAMI,WAAa,CACjBC,GAAIpB,GAAG,mBAAoBI,SAAW,iBACtCiB,GAAIrB,GAAG,qCAAsCI,SAAW,UACxDkB,GAAItB,GAAG,gBAAiBI,SAAW,OACrC,EAEA,MAAMmB,WAAa,CACjBH,GAAI,iBACJC,GAAI,iBACJC,GAAI,gBACN,EAEA,MAAME,UAAoD,CACxDJ,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMG,UAAYlB,OAAS,SAAW,WAEtC,OACE,oBAACmB,OACCf,QAAS,CAACC,SAAWD,QAAUgB,UAC/BC,UAAW,AAACC,IACV,GAAI,AAACA,CAAAA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,GAAE,GAAM,CAAClB,UAAYD,QAAS,CAChEkB,EAAEE,cAAc,GAChBpB,SACF,CACF,EACAR,UAAWH,GACT,2FACAa,WAAW,CAACL,QAAQ,CAACiB,UAAU,CAC/BP,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCN,UAAU,CAACV,KAAK,CAChBc,UAAU,CAACd,KAAK,CAChBG,UACE,qGACFR,QAAU,eAAiB,aAC3BD,WAEF6B,SAAUpB,SAAW,CAAC,EAAI,EAC1BqB,KAAK,SACLC,eAAc3B,OACd4B,gBAAevB,UAEdP,UACC,oBAACJ,MACCmC,KAAM/B,SACNI,KAAMe,SAAS,CAACf,KAAK,CACrB4B,cAAY,OACZC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAGhDf,UACC,oBAAC6B,QACCpC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,WACC,oBAACL,MACCmC,KAAM9B,UACNG,KAAMe,SAAS,CAACf,KAAK,CACrB4B,cAAY,OACZC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAKvD,CAEA,gBAAevB,gBAAiB"}
+{"version":3,"sources":["../../src/core/SegmentedControl.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport type { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass } from \"./styles/colors/types\";\n\nexport type SegmentedControlSize = \"md\" | \"sm\" | \"xs\";\n\nexport type SegmentedControlProps = {\n  className?: string;\n  rounded?: boolean;\n  leftIcon?: IconName;\n  rightIcon?: IconName;\n  active?: boolean;\n  variant?: \"default\" | \"subtle\" | \"strong\";\n  size?: SegmentedControlSize;\n  onClick?: () => void;\n  disabled?: boolean;\n};\n\nconst SegmentedControl: React.FC<PropsWithChildren<SegmentedControlProps>> = ({\n  className,\n  rounded = false,\n  leftIcon,\n  rightIcon,\n  active = false,\n  variant = \"default\",\n  size = \"md\",\n  children,\n  onClick,\n  disabled,\n}) => {\n  const colorStyles = {\n    default: {\n      active: \"bg-neutral-200 dark:bg-neutral-1100\",\n      inactive:\n        \"bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-100 dark:active:bg-neutral-1200\",\n    },\n    subtle: {\n      active: \"bg-neutral-000 dark:bg-neutral-1000\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n    strong: {\n      active: \"bg-neutral-1000 dark:bg-neutral-300\",\n      inactive:\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 active:bg-neutral-200 dark:active:bg-neutral-1100\",\n    },\n  };\n\n  const contentColorStyles = {\n    default: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    subtle: {\n      active: \"text-neutral-1300 dark:text-neutral-000\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n    strong: {\n      active: \"text-neutral-000 dark:text-neutral-1300\",\n      inactive:\n        \"text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 dark:hover:text-neutral-000\",\n    },\n  };\n\n  const sizeStyles = {\n    md: cn(\"h-12 p-3 gap-2.5\", rounded && \"px-[1.125rem]\"),\n    sm: cn(\"h-10 p-[0.5625rem] gap-[0.5625rem]\", rounded && \"px-3.5\"),\n    xs: cn(\"h-9 p-2 gap-2\", rounded && \"px-3\"),\n  };\n\n  const textStyles = {\n    md: \"ui-text-label2\",\n    sm: \"ui-text-label3\",\n    xs: \"ui-text-label4\",\n  };\n\n  const iconSizes: Record<SegmentedControlSize, IconSize> = {\n    md: \"23px\",\n    sm: \"22px\",\n    xs: \"20px\",\n  };\n\n  const activeKey = active ? \"active\" : \"inactive\";\n\n  return (\n    <div\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={(e) => {\n        if ((e.key === \"Enter\" || e.key === \" \") && !disabled && onClick) {\n          e.preventDefault();\n          onClick();\n        }\n      }}\n      className={cn(\n        \"focus-base flex items-center justify-center cursor-pointer select-none transition-colors\",\n        colorStyles[variant][activeKey],\n        contentColorStyles[variant][activeKey],\n        sizeStyles[size],\n        textStyles[size],\n        disabled &&\n          \"cursor-not-allowed hover:bg-inherit dark:hover:bg-inherit active:bg-inherit dark:active:bg-inherit\",\n        rounded ? \"rounded-full\" : \"rounded-lg\",\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"button\"\n      aria-pressed={active}\n      aria-disabled={disabled}\n    >\n      {leftIcon && (\n        <Icon\n          name={leftIcon}\n          size={iconSizes[size]}\n          aria-hidden=\"true\"\n          color={contentColorStyles[variant][activeKey] as ColorClass}\n        />\n      )}\n      {children && (\n        <span\n          className={cn(\n            \"font-semibold transition-colors\",\n            contentColorStyles[variant][activeKey],\n            disabled &&\n              \"text-gui-disabled-light dark:text-gui-disabled-dark hover:text-gui-disabled-light dark:hover:text-gui-disabled-dark\",\n          )}\n        >\n          {children}\n        </span>\n      )}\n      {rightIcon && (\n        <Icon\n          name={rightIcon}\n          size={iconSizes[size]}\n          aria-hidden=\"true\"\n          color={contentColorStyles[variant][activeKey] as ColorClass}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["React","cn","Icon","SegmentedControl","className","rounded","leftIcon","rightIcon","active","variant","size","children","onClick","disabled","colorStyles","default","inactive","subtle","strong","contentColorStyles","sizeStyles","md","sm","xs","textStyles","iconSizes","activeKey","div","undefined","onKeyDown","e","key","preventDefault","tabIndex","role","aria-pressed","aria-disabled","name","aria-hidden","color","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAkB1B,MAAMC,iBAAuE,CAAC,CAC5EC,SAAS,CACTC,QAAU,KAAK,CACfC,QAAQ,CACRC,SAAS,CACTC,OAAS,KAAK,CACdC,QAAU,SAAS,CACnBC,KAAO,IAAI,CACXC,QAAQ,CACRC,OAAO,CACPC,QAAQ,CACT,IACC,MAAMC,YAAc,CAClBC,QAAS,CACPP,OAAQ,sCACRQ,SACE,uIACJ,EACAC,OAAQ,CACNT,OAAQ,sCACRQ,SACE,uIACJ,EACAE,OAAQ,CACNV,OAAQ,sCACRQ,SACE,uIACJ,CACF,EAEA,MAAMG,mBAAqB,CACzBJ,QAAS,CACPP,OAAQ,0CACRQ,SACE,6FACJ,EACAC,OAAQ,CACNT,OAAQ,0CACRQ,SACE,6FACJ,EACAE,OAAQ,CACNV,OAAQ,0CACRQ,SACE,6FACJ,CACF,EAEA,MAAMI,WAAa,CACjBC,GAAIpB,GAAG,mBAAoBI,SAAW,iBACtCiB,GAAIrB,GAAG,qCAAsCI,SAAW,UACxDkB,GAAItB,GAAG,gBAAiBI,SAAW,OACrC,EAEA,MAAMmB,WAAa,CACjBH,GAAI,iBACJC,GAAI,iBACJC,GAAI,gBACN,EAEA,MAAME,UAAoD,CACxDJ,GAAI,OACJC,GAAI,OACJC,GAAI,MACN,EAEA,MAAMG,UAAYlB,OAAS,SAAW,WAEtC,OACE,oBAACmB,OACCf,QAAS,CAACC,SAAWD,QAAUgB,UAC/BC,UAAW,AAACC,IACV,GAAI,AAACA,CAAAA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,GAAE,GAAM,CAAClB,UAAYD,QAAS,CAChEkB,EAAEE,cAAc,GAChBpB,SACF,CACF,EACAR,UAAWH,GACT,2FACAa,WAAW,CAACL,QAAQ,CAACiB,UAAU,CAC/BP,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCN,UAAU,CAACV,KAAK,CAChBc,UAAU,CAACd,KAAK,CAChBG,UACE,qGACFR,QAAU,eAAiB,aAC3BD,WAEF6B,SAAUpB,SAAW,CAAC,EAAI,EAC1BqB,KAAK,SACLC,eAAc3B,OACd4B,gBAAevB,UAEdP,UACC,oBAACJ,MACCmC,KAAM/B,SACNI,KAAMe,SAAS,CAACf,KAAK,CACrB4B,cAAY,OACZC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAGhDf,UACC,oBAAC6B,QACCpC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,WACC,oBAACL,MACCmC,KAAM9B,UACNG,KAAMe,SAAS,CAACf,KAAK,CACrB4B,cAAY,OACZC,MAAOpB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,GAKvD,CAEA,gBAAevB,gBAAiB"}

package/core/TabMenu.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import{throttle}from"es-toolkit/compat";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]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};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 handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};const tabTriggerContent=tab=>{if(!tab){return null}if(React.isValidElement(tab)||typeof tab==="string"){return tab}if(typeof tab==="object"&&"label"in tab){return tab.label}return null};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)=>tab&&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"&&"disabled"in tab?tab.disabled:false},tabTriggerContent(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;
+import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import{throttle}from"es-toolkit/compat";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]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};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 handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};const tabTriggerContent=tab=>{if(!tab){return null}if(React.isValidElement(tab)||typeof tab==="string"){return tab}if(typeof tab==="object"&&"label"in tab){return tab.label}return null};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)=>tab&&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-disabled-light dark:disabled:text-gui-disabled-dark disabled:cursor-not-allowed",{"flex-1":flexibleTabWidth},{"h-full":flexibleTabHeight},tabClassName),value:`tab-${index}`,onClick:event=>handleTabClick(event,index),disabled:typeof tab==="object"&&"disabled"in tab?tab.disabled:false},tabTriggerContent(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 \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype TabTriggerContent =\n  | string\n  | { label: string; disabled?: boolean }\n  | ReactNode;\n\n/**\n * Props for the TabMenu component.\n */\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: TabTriggerContent[];\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  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  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 handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  const tabTriggerContent = (tab: TabTriggerContent) => {\n    if (!tab) {\n      return null;\n    }\n\n    if (React.isValidElement(tab) || typeof tab === \"string\") {\n      return tab;\n    }\n\n    if (typeof tab === \"object\" && \"label\" in tab) {\n      return tab.label;\n    }\n\n    return null;\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(\n          (tab, index) =>\n            tab && (\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={\n                  typeof tab === \"object\" && \"disabled\" in tab\n                    ? tab.disabled\n                    : false\n                }\n              >\n                {tabTriggerContent(tab)}\n              </Tabs.Trigger>\n            ),\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","updateHighlightDimensions","element","left","parentLeft","current","getBoundingClientRect","handleResize","activeTabElement","querySelector","window","addEventListener","removeEventListener","handleTabClick","event","index","currentTarget","tabTriggerContent","tab","isValidElement","label","Root","defaultValue","className","List","ref","map","Trigger","key","value","onClick","disabled","div","style","transform","content","Content"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AACpD,WAAYC,SAAU,sBAAuB,AAC7C,QAASC,QAAQ,KAAQ,mBAAoB,AAC7C,QAAOC,OAAQ,YAAa,CAyE5B,MAAMC,oCAAsC,IAE5C,MAAMC,QAAkC,CAAC,CACvCC,KAAO,EAAE,CACTC,SAAW,EAAE,CACbC,UAAU,CACVC,YAAY,CACZC,aAAa,CACbC,gBAAgB,CAChBC,OAAO,CACR,IACC,KAAM,CACJC,gBAAkB,CAAC,CACnBC,UAAY,IAAI,CAChBC,SAAUC,eAAiB,IAAI,CAC/BC,iBAAmB,KAAK,CACxBC,kBAAoB,KAAK,CAC1B,CAAGN,SAAW,CAAC,EAEhB,MAAMO,QAAUpB,MAAMqB,MAAM,CAAiB,MAC7C,KAAM,CAACL,SAAUM,YAAY,CAAGtB,MAAMuB,QAAQ,CAAC,OAC/C,KAAM,CAACC,UAAWC,aAAa,CAAGzB,MAAMuB,QAAQ,CAAC,CAAEG,OAAQ,EAAGC,MAAO,CAAE,GAEvE1B,UAAU,KACR,GAAIgB,gBAAkBO,UAAUG,KAAK,CAAG,EAAG,CACzCC,WAAW,KACTN,YAAY,KACd,EAAGjB,oCACL,CACF,EAAG,CAACY,eAAgBO,UAAUG,KAAK,CAAC,EAEpC,MAAME,0BAA4B,AAACC,UACjC,KAAM,CAAEC,KAAMC,UAAU,CAAE,CAAGZ,QAAQa,OAAO,EAAEC,yBAA2B,CAAC,EAC1E,KAAM,CAAEH,IAAI,CAAEJ,KAAK,CAAE,CAAGG,QAAQI,qBAAqB,IAAM,CAAC,EAE5DT,aAAa,CACXC,OAAQ,AAACK,CAAAA,MAAQ,CAAA,EAAMC,CAAAA,YAAc,CAAA,EACrCL,MAAOA,OAAS,CAClB,EACF,EAEA1B,UAAU,KACR,MAAMkC,aAAehC,SAAS,KAC5B,MAAMiC,iBACJhB,QAAQa,OAAO,EAAEI,cACf,CAAC,qBAAqB,CAAC,EAG3B,GAAID,iBAAkB,CACpBP,0BAA0BO,iBAC5B,CACF,EAAG,KAEHD,eAEAG,OAAOC,gBAAgB,CAAC,SAAUJ,cAElC,MAAO,KACLG,OAAOE,mBAAmB,CAAC,SAAUL,aACvC,CACF,EAAG,EAAE,EAEL,MAAMM,eAAiB,CACrBC,MACAC,SAEAlC,aAAakC,OACbd,0BAA0Ba,MAAME,aAAa,CAC/C,EAEA,MAAMC,kBAAoB,AAACC,MACzB,GAAI,CAACA,IAAK,CACR,OAAO,IACT,CAEA,GAAI9C,MAAM+C,cAAc,CAACD,MAAQ,OAAOA,MAAQ,SAAU,CACxD,OAAOA,GACT,CAEA,GAAI,OAAOA,MAAQ,UAAY,UAAWA,IAAK,CAC7C,OAAOA,IAAIE,KAAK,AAClB,CAEA,OAAO,IACT,EAEA,OACE,oBAAC9C,KAAK+C,IAAI,EACRC,aAAc,CAAC,IAAI,EAAEpC,gBAAgB,CAAC,CACtCqC,UAAW/C,GAAG,CAAE,SAAUe,iBAAkB,EAAGR,gBAE/C,oBAACT,KAAKkD,IAAI,EACRC,IAAKjC,QACL+B,UAAW/C,GACT,WACA,CACE,4DACEW,SACJ,EACA,CAAE,SAAUI,iBAAkB,IAG/BZ,KAAK+C,GAAG,CACP,CAACR,IAAKH,QACJG,KACE,oBAAC5C,KAAKqD,OAAO,EACXC,IAAK,CAAC,IAAI,EAAEb,MAAM,CAAC,CACnBQ,UAAW/C,GACT,6bACA,CAAE,SAAUc,gBAAiB,EAC7B,CAAE,SAAUC,iBAAkB,EAC9BT,cAEF+C,MAAO,CAAC,IAAI,EAAEd,MAAM,CAAC,CACrBe,QAAS,AAAChB,OAAUD,eAAeC,MAAOC,OAC1CgB,SACE,OAAOb,MAAQ,UAAY,aAAcA,IACrCA,IAAIa,QAAQ,CACZ,OAGLd,kBAAkBC,OAI3B,oBAACc,OACCT,UAAW/C,GACT,0EACA,CAAE,+BAAgCY,QAAS,GAE7C6C,MAAO,CACLC,UAAW,CAAC,WAAW,EAAEtC,UAAUE,MAAM,CAAC,GAAG,CAAC,CAC9CC,MAAO,CAAC,EAAEH,UAAUG,KAAK,CAAC,EAAE,CAAC,AAC/B,KAGHnB,SAAS8C,GAAG,CAAC,CAACS,QAASpB,QACtB,oBAACzC,KAAK8D,OAAO,EACXR,IAAK,CAAC,IAAI,EAAEb,MAAM,CAAC,CACnBc,MAAO,CAAC,IAAI,EAAEd,MAAM,CAAC,CACrBQ,UAAWvC,kBAEVmD,UAKX,CAEA,gBAAezD,OAAQ"}
+{"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 \"es-toolkit/compat\";\nimport cn from \"./utils/cn\";\n\ntype TabTriggerContent =\n  | string\n  | { label: string; disabled?: boolean }\n  | ReactNode;\n\n/**\n * Props for the TabMenu component.\n */\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: TabTriggerContent[];\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  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  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 handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  const tabTriggerContent = (tab: TabTriggerContent) => {\n    if (!tab) {\n      return null;\n    }\n\n    if (React.isValidElement(tab) || typeof tab === \"string\") {\n      return tab;\n    }\n\n    if (typeof tab === \"object\" && \"label\" in tab) {\n      return tab.label;\n    }\n\n    return null;\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(\n          (tab, index) =>\n            tab && (\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-disabled-light dark:disabled:text-gui-disabled-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={\n                  typeof tab === \"object\" && \"disabled\" in tab\n                    ? tab.disabled\n                    : false\n                }\n              >\n                {tabTriggerContent(tab)}\n              </Tabs.Trigger>\n            ),\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","updateHighlightDimensions","element","left","parentLeft","current","getBoundingClientRect","handleResize","activeTabElement","querySelector","window","addEventListener","removeEventListener","handleTabClick","event","index","currentTarget","tabTriggerContent","tab","isValidElement","label","Root","defaultValue","className","List","ref","map","Trigger","key","value","onClick","disabled","div","style","transform","content","Content"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AACpD,WAAYC,SAAU,sBAAuB,AAC7C,QAASC,QAAQ,KAAQ,mBAAoB,AAC7C,QAAOC,OAAQ,YAAa,CAyE5B,MAAMC,oCAAsC,IAE5C,MAAMC,QAAkC,CAAC,CACvCC,KAAO,EAAE,CACTC,SAAW,EAAE,CACbC,UAAU,CACVC,YAAY,CACZC,aAAa,CACbC,gBAAgB,CAChBC,OAAO,CACR,IACC,KAAM,CACJC,gBAAkB,CAAC,CACnBC,UAAY,IAAI,CAChBC,SAAUC,eAAiB,IAAI,CAC/BC,iBAAmB,KAAK,CACxBC,kBAAoB,KAAK,CAC1B,CAAGN,SAAW,CAAC,EAEhB,MAAMO,QAAUpB,MAAMqB,MAAM,CAAiB,MAC7C,KAAM,CAACL,SAAUM,YAAY,CAAGtB,MAAMuB,QAAQ,CAAC,OAC/C,KAAM,CAACC,UAAWC,aAAa,CAAGzB,MAAMuB,QAAQ,CAAC,CAAEG,OAAQ,EAAGC,MAAO,CAAE,GAEvE1B,UAAU,KACR,GAAIgB,gBAAkBO,UAAUG,KAAK,CAAG,EAAG,CACzCC,WAAW,KACTN,YAAY,KACd,EAAGjB,oCACL,CACF,EAAG,CAACY,eAAgBO,UAAUG,KAAK,CAAC,EAEpC,MAAME,0BAA4B,AAACC,UACjC,KAAM,CAAEC,KAAMC,UAAU,CAAE,CAAGZ,QAAQa,OAAO,EAAEC,yBAA2B,CAAC,EAC1E,KAAM,CAAEH,IAAI,CAAEJ,KAAK,CAAE,CAAGG,QAAQI,qBAAqB,IAAM,CAAC,EAE5DT,aAAa,CACXC,OAAQ,AAACK,CAAAA,MAAQ,CAAA,EAAMC,CAAAA,YAAc,CAAA,EACrCL,MAAOA,OAAS,CAClB,EACF,EAEA1B,UAAU,KACR,MAAMkC,aAAehC,SAAS,KAC5B,MAAMiC,iBACJhB,QAAQa,OAAO,EAAEI,cACf,CAAC,qBAAqB,CAAC,EAG3B,GAAID,iBAAkB,CACpBP,0BAA0BO,iBAC5B,CACF,EAAG,KAEHD,eAEAG,OAAOC,gBAAgB,CAAC,SAAUJ,cAElC,MAAO,KACLG,OAAOE,mBAAmB,CAAC,SAAUL,aACvC,CACF,EAAG,EAAE,EAEL,MAAMM,eAAiB,CACrBC,MACAC,SAEAlC,aAAakC,OACbd,0BAA0Ba,MAAME,aAAa,CAC/C,EAEA,MAAMC,kBAAoB,AAACC,MACzB,GAAI,CAACA,IAAK,CACR,OAAO,IACT,CAEA,GAAI9C,MAAM+C,cAAc,CAACD,MAAQ,OAAOA,MAAQ,SAAU,CACxD,OAAOA,GACT,CAEA,GAAI,OAAOA,MAAQ,UAAY,UAAWA,IAAK,CAC7C,OAAOA,IAAIE,KAAK,AAClB,CAEA,OAAO,IACT,EAEA,OACE,oBAAC9C,KAAK+C,IAAI,EACRC,aAAc,CAAC,IAAI,EAAEpC,gBAAgB,CAAC,CACtCqC,UAAW/C,GAAG,CAAE,SAAUe,iBAAkB,EAAGR,gBAE/C,oBAACT,KAAKkD,IAAI,EACRC,IAAKjC,QACL+B,UAAW/C,GACT,WACA,CACE,4DACEW,SACJ,EACA,CAAE,SAAUI,iBAAkB,IAG/BZ,KAAK+C,GAAG,CACP,CAACR,IAAKH,QACJG,KACE,oBAAC5C,KAAKqD,OAAO,EACXC,IAAK,CAAC,IAAI,EAAEb,MAAM,CAAC,CACnBQ,UAAW/C,GACT,6bACA,CAAE,SAAUc,gBAAiB,EAC7B,CAAE,SAAUC,iBAAkB,EAC9BT,cAEF+C,MAAO,CAAC,IAAI,EAAEd,MAAM,CAAC,CACrBe,QAAS,AAAChB,OAAUD,eAAeC,MAAOC,OAC1CgB,SACE,OAAOb,MAAQ,UAAY,aAAcA,IACrCA,IAAIa,QAAQ,CACZ,OAGLd,kBAAkBC,OAI3B,oBAACc,OACCT,UAAW/C,GACT,0EACA,CAAE,+BAAgCY,QAAS,GAE7C6C,MAAO,CACLC,UAAW,CAAC,WAAW,EAAEtC,UAAUE,MAAM,CAAC,GAAG,CAAC,CAC9CC,MAAO,CAAC,EAAEH,UAAUG,KAAK,CAAC,EAAE,CAAC,AAC/B,KAGHnB,SAAS8C,GAAG,CAAC,CAACS,QAASpB,QACtB,oBAACzC,KAAK8D,OAAO,EACXR,IAAK,CAAC,IAAI,EAAEb,MAAM,CAAC,CACnBc,MAAO,CAAC,IAAI,EAAEd,MAAM,CAAC,CACrBQ,UAAWvC,kBAEVmD,UAKX,CAEA,gBAAezD,OAAQ"}

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-[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;
+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-disabled-light dark:data-[disabled]:bg-gui-disabled-dark 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 dark:data-[disabled]:bg-neutral-800 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-[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"}
+{"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-disabled-light dark:data-[disabled]:bg-gui-disabled-dark 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 dark:data-[disabled]:bg-neutral-800 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,2OACAK,UACAE,UAEFL,GAAIA,GACH,GAAGI,KAAK,EAET,oBAACR,OAAOa,KAAK,EACXN,UAAWL,GACT,CAAC,sIAAsI,CAAC,CACxIQ,cAILJ,MACC,oBAACA,SAAMC,UAAU,OAAOO,QAASV,IAC9BE,OAED,KAGV,CAEA,gBAAeH,MAAO"}

package/core/styles/buttons.css

@@ -20,11 +20,11 @@
   }
 
   .ui-button-disabled-base {
-    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+    @apply disabled:cursor-not-allowed disabled:bg-gui-disabled-light disabled:text-gui-disabled-dark disabled:hover:bg-gui-disabled-light;
   }
 
   .ui-button-disabled-base-dark {
-    @apply disabled:cursor-not-allowed disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
+    @apply disabled:cursor-not-allowed disabled:bg-gui-disabled-dark disabled:text-gui-disabled-light disabled:hover:bg-gui-disabled-dark;
   }
 
   .ui-button-priority-base {
@@ -44,11 +44,11 @@
   }
 
   .ui-button-secondary-base {
-    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 disabled:border-gui-disabled-light disabled:text-gui-disabled-light;
   }
 
   .ui-theme-dark .ui-button-secondary-base {
-    @apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+    @apply text-neutral-000 active:text-neutral-300 border-neutral-900 hover:border-neutral-700 active:border-neutral-800 disabled:border-gui-disabled-dark disabled:text-gui-disabled-dark;
   }
 
   .ui-button-priority-lg {
@@ -124,10 +124,10 @@
   }
 
   .ui-button-disabled {
-    @apply select-none pointer-events-none bg-gui-unavailable text-gui-unavailable-dark hover:bg-gui-unavailable;
+    @apply select-none pointer-events-none bg-gui-disabled-light text-gui-disabled-dark hover:bg-gui-disabled-light;
   }
 
   .ui-theme-dark .ui-button-disabled {
-    @apply select-none pointer-events-none bg-gui-unavailable-dark text-gui-unavailable hover:bg-gui-unavailable-dark;
+    @apply select-none pointer-events-none bg-gui-disabled-dark text-gui-disabled-light hover:bg-gui-disabled-dark;
   }
 }

package/core/styles/colors/types.js

@@ -1,2 +1,2 @@
-export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];export const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];export const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];export const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
+export const variants=["","dark:"];export const prefixes=["text","bg","from","to","border"];export const colors=["neutral","orange","blue","yellow","green","violet","pink"];export const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];export const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];export const yellowColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900"];export const greenColors=["green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900"];export const blueColors=["blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900"];export const violetColors=["violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900"];export const pinkColors=["pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];export const secondaryColors=[...yellowColors,...greenColors,...blueColors,...violetColors,...pinkColors];export const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-disabled-light","gui-disabled-dark","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];export const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark","transparent"];export const colorRoles={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};export const colorGroupLengths={neutral:neutralColors.length,orange:orangeColors.length,blue:blueColors.length,yellow:yellowColors.length,green:greenColors.length,violet:violetColors.length,pink:pinkColors.length};
 //# sourceMappingURL=types.js.map

package/core/styles/colors/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number];\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nexport const secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nexport const guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-unavailable\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAOA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,gBAAkB,IAC1BL,gBACAC,eACAC,cACAC,gBACAC,WACJ,AAAU,AAEX,QAAO,MAAME,UAAY,CACvB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,kBACA,oBACA,gBACA,YACA,oBACA,cACD,AAAU,AAEX,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}
+{"version":3,"sources":["../../../../src/core/styles/colors/types.ts"],"sourcesContent":["export type ColorName =\n  | (typeof neutralColors)[number]\n  | (typeof orangeColors)[number]\n  | (typeof secondaryColors)[number]\n  | (typeof guiColors)[number]\n  | (typeof aliasedColors)[number];\n\nexport const variants = [\"\", \"dark:\"] as const;\n\ntype ColorClassVariants = (typeof variants)[number];\n\nexport const prefixes = [\"text\", \"bg\", \"from\", \"to\", \"border\"] as const;\n\ntype ColorClassPrefixes = (typeof prefixes)[number];\n\nexport const colors = [\n  \"neutral\",\n  \"orange\",\n  \"blue\",\n  \"yellow\",\n  \"green\",\n  \"violet\",\n  \"pink\",\n] as const;\n\nexport type ColorClassColorGroups = (typeof colors)[number];\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type ColorClass =\n  `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;\n\nexport type ColorThemeSet = `${string} dark:${string}`;\n\nexport const neutralColors = [\n  \"neutral-000\",\n  \"neutral-100\",\n  \"neutral-200\",\n  \"neutral-300\",\n  \"neutral-400\",\n  \"neutral-500\",\n  \"neutral-600\",\n  \"neutral-700\",\n  \"neutral-800\",\n  \"neutral-900\",\n  \"neutral-1000\",\n  \"neutral-1100\",\n  \"neutral-1200\",\n  \"neutral-1300\",\n] as const;\n\nexport const orangeColors = [\n  \"orange-100\",\n  \"orange-200\",\n  \"orange-300\",\n  \"orange-400\",\n  \"orange-500\",\n  \"orange-600\",\n  \"orange-700\",\n  \"orange-800\",\n  \"orange-900\",\n  \"orange-1000\",\n  \"orange-1100\",\n] as const;\n\nexport const yellowColors = [\n  \"yellow-100\",\n  \"yellow-200\",\n  \"yellow-300\",\n  \"yellow-400\",\n  \"yellow-500\",\n  \"yellow-600\",\n  \"yellow-700\",\n  \"yellow-800\",\n  \"yellow-900\",\n] as const;\n\nexport const greenColors = [\n  \"green-100\",\n  \"green-200\",\n  \"green-300\",\n  \"green-400\",\n  \"green-500\",\n  \"green-600\",\n  \"green-700\",\n  \"green-800\",\n  \"green-900\",\n] as const;\n\nexport const blueColors = [\n  \"blue-100\",\n  \"blue-200\",\n  \"blue-300\",\n  \"blue-400\",\n  \"blue-500\",\n  \"blue-600\",\n  \"blue-700\",\n  \"blue-800\",\n  \"blue-900\",\n] as const;\n\nexport const violetColors = [\n  \"violet-100\",\n  \"violet-200\",\n  \"violet-300\",\n  \"violet-400\",\n  \"violet-500\",\n  \"violet-600\",\n  \"violet-700\",\n  \"violet-800\",\n  \"violet-900\",\n] as const;\n\nexport const pinkColors = [\n  \"pink-100\",\n  \"pink-200\",\n  \"pink-300\",\n  \"pink-400\",\n  \"pink-500\",\n  \"pink-600\",\n  \"pink-700\",\n  \"pink-800\",\n  \"pink-900\",\n] as const;\n\nexport const secondaryColors = [\n  ...yellowColors,\n  ...greenColors,\n  ...blueColors,\n  ...violetColors,\n  ...pinkColors,\n] as const;\n\nexport const guiColors = [\n  \"gui-blue-default-light\",\n  \"gui-blue-hover-light\",\n  \"gui-blue-active-light\",\n  \"gui-blue-default-dark\",\n  \"gui-blue-hover-dark\",\n  \"gui-blue-active-dark\",\n  \"gui-blue-focus\",\n  \"gui-disabled-light\",\n  \"gui-disabled-dark\",\n  \"gui-success-green\",\n  \"gui-error-red\",\n  \"gui-focus\",\n  \"gui-focus-outline\",\n  \"gui-visited\",\n] as const;\n\nexport const aliasedColors = [\n  \"white\",\n  \"extra-light-grey\",\n  \"light-grey\",\n  \"mid-grey\",\n  \"dark-grey\",\n  \"charcoal-grey\",\n  \"cool-black\",\n  \"active-orange\",\n  \"bright-red\",\n  \"red-orange\",\n  \"electric-cyan\",\n  \"zingy-green\",\n  \"jazzy-pink\",\n  \"gui-default\",\n  \"gui-hover\",\n  \"gui-active\",\n  \"gui-error\",\n  \"gui-success\",\n  \"gui-default-dark\",\n  \"gui-hover-dark\",\n  \"gui-active-dark\",\n  \"transparent\",\n] as const;\n\nexport const colorRoles = {\n  neutral: neutralColors,\n  orange: orangeColors,\n  secondary: secondaryColors,\n  gui: guiColors,\n};\n\nexport const colorGroupLengths = {\n  neutral: neutralColors.length,\n  orange: orangeColors.length,\n  blue: blueColors.length,\n  yellow: yellowColors.length,\n  green: greenColors.length,\n  violet: violetColors.length,\n  pink: pinkColors.length,\n};\n"],"names":["variants","prefixes","colors","neutralColors","orangeColors","yellowColors","greenColors","blueColors","violetColors","pinkColors","secondaryColors","guiColors","aliasedColors","colorRoles","neutral","orange","secondary","gui","colorGroupLengths","length","blue","yellow","green","violet","pink"],"mappings":"AAOA,OAAO,MAAMA,SAAW,CAAC,GAAI,QAAQ,AAAU,AAI/C,QAAO,MAAMC,SAAW,CAAC,OAAQ,KAAM,OAAQ,KAAM,SAAS,AAAU,AAIxE,QAAO,MAAMC,OAAS,CACpB,UACA,SACA,OACA,SACA,QACA,SACA,OACD,AAAU,AAWX,QAAO,MAAMC,cAAgB,CAC3B,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,cACA,eACA,eACA,eACA,eACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,cACA,cACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,YAAc,CACzB,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACA,YACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,aAAe,CAC1B,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxB,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACA,WACD,AAAU,AAEX,QAAO,MAAMC,gBAAkB,IAC1BL,gBACAC,eACAC,cACAC,gBACAC,WACJ,AAAU,AAEX,QAAO,MAAME,UAAY,CACvB,yBACA,uBACA,wBACA,wBACA,sBACA,uBACA,iBACA,qBACA,oBACA,oBACA,gBACA,YACA,oBACA,cACD,AAAU,AAEX,QAAO,MAAMC,cAAgB,CAC3B,QACA,mBACA,aACA,WACA,YACA,gBACA,aACA,gBACA,aACA,aACA,gBACA,cACA,aACA,cACA,YACA,aACA,YACA,cACA,mBACA,iBACA,kBACA,cACD,AAAU,AAEX,QAAO,MAAMC,WAAa,CACxBC,QAASX,cACTY,OAAQX,aACRY,UAAWN,gBACXO,IAAKN,SACP,CAAE,AAEF,QAAO,MAAMO,kBAAoB,CAC/BJ,QAASX,cAAcgB,MAAM,CAC7BJ,OAAQX,aAAae,MAAM,CAC3BC,KAAMb,WAAWY,MAAM,CACvBE,OAAQhB,aAAac,MAAM,CAC3BG,MAAOhB,YAAYa,MAAM,CACzBI,OAAQf,aAAaW,MAAM,CAC3BK,KAAMf,WAAWU,MAAM,AACzB,CAAE"}

package/core/styles/forms.css

@@ -59,11 +59,11 @@
   }
 
   .ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-neutral-1000 border border-gui-unavailable-dark;
+    @apply bg-neutral-1000 border border-gui-disabled-dark;
   }
 
   .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
-    @apply bg-active-orange border-gui-unavailable-dark;
+    @apply bg-active-orange border-gui-disabled-dark;
   }
 
   .ui-textarea {
@@ -110,7 +110,7 @@
   }
 
   .ui-toggle input:disabled + .ui-toggle-slider {
-    @apply bg-gui-unavailable;
+    @apply bg-gui-disabled-light dark:bg-gui-disabled-dark;
   }
 
   .ui-toggle input:checked + .ui-toggle-slider:before {
@@ -132,11 +132,11 @@
   }
 
   .ui-input:disabled {
-    @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
+    @apply bg-gui-disabled-light placeholder-neutral-500 text-neutral-500;
   }
 
   .ui-theme-dark .ui-input:disabled {
-    @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
+    @apply bg-gui-disabled-dark text-neutral-800 placeholder-neutral-800;
   }
 
   .ui-radio {

package/core/styles/legacy-buttons.css

@@ -4,7 +4,7 @@
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus-base;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -36,7 +36,7 @@
 
   .ui-btn-alt:disabled {
     background: linear-gradient(var(--gradient-transparent));
-    @apply bg-gui-unavailable text-mid-grey cursor-not-allowed;
+    @apply bg-gui-disabled-light text-mid-grey cursor-not-allowed;
   }
 
   .ui-btn-invert {
@@ -44,7 +44,7 @@
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
     @apply focus:text-white focus:bg-cool-black focus-base;
-    @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-mid-grey disabled:bg-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -54,7 +54,7 @@
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
     @apply focus:border-cool-black focus:bg-white focus-base;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
+    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -64,7 +64,7 @@
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
     @apply focus-base;
-    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
+    @apply disabled:text-gui-disabled-light disabled:border-gui-disabled-light disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
   }
@@ -82,14 +82,14 @@
   }
   .ui-btn.ui-btn-disabled,
   .ui-btn-invert.ui-btn-disabled {
-    @apply text-mid-grey bg-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+    @apply text-mid-grey bg-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
   }
 
   .ui-btn-secondary.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable bg-white cursor-not-allowed pointer-events-none select-none;
+    @apply text-gui-disabled-light border-gui-disabled-light bg-white cursor-not-allowed pointer-events-none select-none;
   }
 
   .ui-btn-secondary-invert.ui-btn-disabled {
-    @apply text-gui-unavailable border-gui-unavailable cursor-not-allowed pointer-events-none select-none;
+    @apply text-gui-disabled-light border-gui-disabled-light cursor-not-allowed pointer-events-none select-none;
   }
 }

package/core/styles/properties.css

@@ -85,8 +85,8 @@
     --color-gui-blue-hover-dark: #2894ff;
     --color-gui-blue-active-dark: #0080ff;
     --color-gui-blue-focus: #80b9f2;
-    --color-gui-unavailable: #AFB9C5;
-    --color-gui-unavailable-dark: #676B7A;
+    --color-gui-disabled-light: #afb9c5;
+    --color-gui-disabled-dark: #676b7a;
     --color-gui-success-green: #11cb24;
     --color-gui-error-red: #fb0c0c;
     --color-gui-focus: #80b9f2;

package/core/styles/text.css

@@ -159,13 +159,13 @@
 
   .ui-link {
     @apply text-gui-default;
-    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
+    @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
     @apply focus:text-gui-default focus-base;
     @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
+    @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-disabled-light dark:disabled:text-gui-disabled-dark;
     @apply focus:text-charcoal-grey focus-base;
     @apply underline;
   }

package/index.d.ts

@@ -1004,17 +1004,6 @@ export default ForwardRef;
 //# sourceMappingURL=icon-display-architectural-guidance.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/components/icon-display-asset-tracking-col' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-display-asset-tracking-col.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/components/icon-display-authentication' {
 import * as React from "react";
 interface SVGRProps {
@@ -2357,28 +2346,6 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-prod-ai-transport-solid.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/components/icon-gui-prod-asset-tracking-outline' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-gui-prod-asset-tracking-outline.d.ts.map
-}
-
-declare module '@ably/ui/core/Icon/components/icon-gui-prod-asset-tracking-solid' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-gui-prod-asset-tracking-solid.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/components/icon-gui-prod-chat-outline' {
 import * as React from "react";
 interface SVGRProps {
@@ -2566,28 +2533,6 @@ export default ForwardRef;
 //# sourceMappingURL=icon-product-ai-transport.d.ts.map
 }
 
-declare module '@ably/ui/core/Icon/components/icon-product-asset-tracking-mono' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-product-asset-tracking-mono.d.ts.map
-}
-
-declare module '@ably/ui/core/Icon/components/icon-product-asset-tracking' {
-import * as React from "react";
-interface SVGRProps {
-    title?: string;
-    titleId?: string;
-}
-const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default ForwardRef;
-//# sourceMappingURL=icon-product-asset-tracking.d.ts.map
-}
-
 declare module '@ably/ui/core/Icon/components/icon-product-chat-mono' {
 import * as React from "react";
 interface SVGRProps {
@@ -5510,7 +5455,7 @@ export {};
 declare module '@ably/ui/core/Icon/utils' {
 import { IconName } from "@ably/ui/core/types";
 type HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent" | "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "from-neutral-000" | "from-neutral-100" | "from-neutral-200" | "from-neutral-300" | "from-neutral-400" | "from-neutral-500" | "from-neutral-600" | "from-neutral-700" | "from-neutral-800" | "from-neutral-900" | "from-neutral-1000" | "from-neutral-1100" | "from-neutral-1200" | "from-neutral-1300" | "from-orange-100" | "from-orange-200" | "from-orange-300" | "from-orange-400" | "from-orange-500" | "from-orange-600" | "from-orange-700" | "from-orange-800" | "from-orange-900" | "from-orange-1000" | "from-orange-1100" | "from-yellow-100" | "from-yellow-200" | "from-yellow-300" | "from-yellow-400" | "from-yellow-500" | "from-yellow-600" | "from-yellow-700" | "from-yellow-800" | "from-yellow-900" | "from-green-100" | "from-green-200" | "from-green-300" | "from-green-400" | "from-green-500" | "from-green-600" | "from-green-700" | "from-green-800" | "from-green-900" | "from-blue-100" | "from-blue-200" | "from-blue-300" | "from-blue-400" | "from-blue-500" | "from-blue-600" | "from-blue-700" | "from-blue-800" | "from-blue-900" | "from-violet-100" | "from-violet-200" | "from-violet-300" | "from-violet-400" | "from-violet-500" | "from-violet-600" | "from-violet-700" | "from-violet-800" | "from-violet-900" | "from-pink-100" | "from-pink-200" | "from-pink-300" | "from-pink-400" | "from-pink-500" | "from-pink-600" | "from-pink-700" | "from-pink-800" | "from-pink-900" | "from-gui-blue-default-light" | "from-gui-blue-hover-light" | "from-gui-blue-active-light" | "from-gui-blue-default-dark" | "from-gui-blue-hover-dark" | "from-gui-blue-active-dark" | "from-gui-blue-focus" | "from-gui-unavailable" | "from-gui-success-green" | "from-gui-error-red" | "from-gui-focus" | "from-gui-focus-outline" | "from-gui-visited" | "from-white" | "from-extra-light-grey" | "from-light-grey" | "from-mid-grey" | "from-dark-grey" | "from-charcoal-grey" | "from-cool-black" | "from-active-orange" | "from-bright-red" | "from-red-orange" | "from-electric-cyan" | "from-zingy-green" | "from-jazzy-pink" | "from-gui-default" | "from-gui-hover" | "from-gui-active" | "from-gui-error" | "from-gui-success" | "from-gui-default-dark" | "from-gui-hover-dark" | "from-gui-active-dark" | "from-transparent" | "to-neutral-000" | "to-neutral-100" | "to-neutral-200" | "to-neutral-300" | "to-neutral-400" | "to-neutral-500" | "to-neutral-600" | "to-neutral-700" | "to-neutral-800" | "to-neutral-900" | "to-neutral-1000" | "to-neutral-1100" | "to-neutral-1200" | "to-neutral-1300" | "to-orange-100" | "to-orange-200" | "to-orange-300" | "to-orange-400" | "to-orange-500" | "to-orange-600" | "to-orange-700" | "to-orange-800" | "to-orange-900" | "to-orange-1000" | "to-orange-1100" | "to-yellow-100" | "to-yellow-200" | "to-yellow-300" | "to-yellow-400" | "to-yellow-500" | "to-yellow-600" | "to-yellow-700" | "to-yellow-800" | "to-yellow-900" | "to-green-100" | "to-green-200" | "to-green-300" | "to-green-400" | "to-green-500" | "to-green-600" | "to-green-700" | "to-green-800" | "to-green-900" | "to-blue-100" | "to-blue-200" | "to-blue-300" | "to-blue-400" | "to-blue-500" | "to-blue-600" | "to-blue-700" | "to-blue-800" | "to-blue-900" | "to-violet-100" | "to-violet-200" | "to-violet-300" | "to-violet-400" | "to-violet-500" | "to-violet-600" | "to-violet-700" | "to-violet-800" | "to-violet-900" | "to-pink-100" | "to-pink-200" | "to-pink-300" | "to-pink-400" | "to-pink-500" | "to-pink-600" | "to-pink-700" | "to-pink-800" | "to-pink-900" | "to-gui-blue-default-light" | "to-gui-blue-hover-light" | "to-gui-blue-active-light" | "to-gui-blue-default-dark" | "to-gui-blue-hover-dark" | "to-gui-blue-active-dark" | "to-gui-blue-focus" | "to-gui-unavailable" | "to-gui-success-green" | "to-gui-error-red" | "to-gui-focus" | "to-gui-focus-outline" | "to-gui-visited" | "to-white" | "to-extra-light-grey" | "to-light-grey" | "to-mid-grey" | "to-dark-grey" | "to-charcoal-grey" | "to-cool-black" | "to-active-orange" | "to-bright-red" | "to-red-orange" | "to-electric-cyan" | "to-zingy-green" | "to-jazzy-pink" | "to-gui-default" | "to-gui-hover" | "to-gui-active" | "to-gui-error" | "to-gui-success" | "to-gui-default-dark" | "to-gui-hover-dark" | "to-gui-active-dark" | "to-transparent" | "border-neutral-000" | "border-neutral-100" | "border-neutral-200" | "border-neutral-300" | "border-neutral-400" | "border-neutral-500" | "border-neutral-600" | "border-neutral-700" | "border-neutral-800" | "border-neutral-900" | "border-neutral-1000" | "border-neutral-1100" | "border-neutral-1200" | "border-neutral-1300" | "border-orange-100" | "border-orange-200" | "border-orange-300" | "border-orange-400" | "border-orange-500" | "border-orange-600" | "border-orange-700" | "border-orange-800" | "border-orange-900" | "border-orange-1000" | "border-orange-1100" | "border-yellow-100" | "border-yellow-200" | "border-yellow-300" | "border-yellow-400" | "border-yellow-500" | "border-yellow-600" | "border-yellow-700" | "border-yellow-800" | "border-yellow-900" | "border-green-100" | "border-green-200" | "border-green-300" | "border-green-400" | "border-green-500" | "border-green-600" | "border-green-700" | "border-green-800" | "border-green-900" | "border-blue-100" | "border-blue-200" | "border-blue-300" | "border-blue-400" | "border-blue-500" | "border-blue-600" | "border-blue-700" | "border-blue-800" | "border-blue-900" | "border-violet-100" | "border-violet-200" | "border-violet-300" | "border-violet-400" | "border-violet-500" | "border-violet-600" | "border-violet-700" | "border-violet-800" | "border-violet-900" | "border-pink-100" | "border-pink-200" | "border-pink-300" | "border-pink-400" | "border-pink-500" | "border-pink-600" | "border-pink-700" | "border-pink-800" | "border-pink-900" | "border-gui-blue-default-light" | "border-gui-blue-hover-light" | "border-gui-blue-active-light" | "border-gui-blue-default-dark" | "border-gui-blue-hover-dark" | "border-gui-blue-active-dark" | "border-gui-blue-focus" | "border-gui-unavailable" | "border-gui-success-green" | "border-gui-error-red" | "border-gui-focus" | "border-gui-focus-outline" | "border-gui-visited" | "border-white" | "border-extra-light-grey" | "border-light-grey" | "border-mid-grey" | "border-dark-grey" | "border-charcoal-grey" | "border-cool-black" | "border-active-orange" | "border-bright-red" | "border-red-orange" | "border-electric-cyan" | "border-zingy-green" | "border-jazzy-pink" | "border-gui-default" | "border-gui-hover" | "border-gui-active" | "border-gui-error" | "border-gui-success" | "border-gui-default-dark" | "border-gui-hover-dark" | "border-gui-active-dark" | "border-transparent" | "dark:text-neutral-000" | "dark:text-neutral-100" | "dark:text-neutral-200" | "dark:text-neutral-300" | "dark:text-neutral-400" | "dark:text-neutral-500" | "dark:text-neutral-600" | "dark:text-neutral-700" | "dark:text-neutral-800" | "dark:text-neutral-900" | "dark:text-neutral-1000" | "dark:text-neutral-1100" | "dark:text-neutral-1200" | "dark:text-neutral-1300" | "dark:text-orange-100" | "dark:text-orange-200" | "dark:text-orange-300" | "dark:text-orange-400" | "dark:text-orange-500" | "dark:text-orange-600" | "dark:text-orange-700" | "dark:text-orange-800" | "dark:text-orange-900" | "dark:text-orange-1000" | "dark:text-orange-1100" | "dark:text-yellow-100" | "dark:text-yellow-200" | "dark:text-yellow-300" | "dark:text-yellow-400" | "dark:text-yellow-500" | "dark:text-yellow-600" | "dark:text-yellow-700" | "dark:text-yellow-800" | "dark:text-yellow-900" | "dark:text-green-100" | "dark:text-green-200" | "dark:text-green-300" | "dark:text-green-400" | "dark:text-green-500" | "dark:text-green-600" | "dark:text-green-700" | "dark:text-green-800" | "dark:text-green-900" | "dark:text-blue-100" | "dark:text-blue-200" | "dark:text-blue-300" | "dark:text-blue-400" | "dark:text-blue-500" | "dark:text-blue-600" | "dark:text-blue-700" | "dark:text-blue-800" | "dark:text-blue-900" | "dark:text-violet-100" | "dark:text-violet-200" | "dark:text-violet-300" | "dark:text-violet-400" | "dark:text-violet-500" | "dark:text-violet-600" | "dark:text-violet-700" | "dark:text-violet-800" | "dark:text-violet-900" | "dark:text-pink-100" | "dark:text-pink-200" | "dark:text-pink-300" | "dark:text-pink-400" | "dark:text-pink-500" | "dark:text-pink-600" | "dark:text-pink-700" | "dark:text-pink-800" | "dark:text-pink-900" | "dark:text-gui-blue-default-light" | "dark:text-gui-blue-hover-light" | "dark:text-gui-blue-active-light" | "dark:text-gui-blue-default-dark" | "dark:text-gui-blue-hover-dark" | "dark:text-gui-blue-active-dark" | "dark:text-gui-blue-focus" | "dark:text-gui-unavailable" | "dark:text-gui-success-green" | "dark:text-gui-error-red" | "dark:text-gui-focus" | "dark:text-gui-focus-outline" | "dark:text-gui-visited" | "dark:text-white" | "dark:text-extra-light-grey" | "dark:text-light-grey" | "dark:text-mid-grey" | "dark:text-dark-grey" | "dark:text-charcoal-grey" | "dark:text-cool-black" | "dark:text-active-orange" | "dark:text-bright-red" | "dark:text-red-orange" | "dark:text-electric-cyan" | "dark:text-zingy-green" | "dark:text-jazzy-pink" | "dark:text-gui-default" | "dark:text-gui-hover" | "dark:text-gui-active" | "dark:text-gui-error" | "dark:text-gui-success" | "dark:text-gui-default-dark" | "dark:text-gui-hover-dark" | "dark:text-gui-active-dark" | "dark:text-transparent" | "dark:bg-neutral-000" | "dark:bg-neutral-100" | "dark:bg-neutral-200" | "dark:bg-neutral-300" | "dark:bg-neutral-400" | "dark:bg-neutral-500" | "dark:bg-neutral-600" | "dark:bg-neutral-700" | "dark:bg-neutral-800" | "dark:bg-neutral-900" | "dark:bg-neutral-1000" | "dark:bg-neutral-1100" | "dark:bg-neutral-1200" | "dark:bg-neutral-1300" | "dark:bg-orange-100" | "dark:bg-orange-200" | "dark:bg-orange-300" | "dark:bg-orange-400" | "dark:bg-orange-500" | "dark:bg-orange-600" | "dark:bg-orange-700" | "dark:bg-orange-800" | "dark:bg-orange-900" | "dark:bg-orange-1000" | "dark:bg-orange-1100" | "dark:bg-yellow-100" | "dark:bg-yellow-200" | "dark:bg-yellow-300" | "dark:bg-yellow-400" | "dark:bg-yellow-500" | "dark:bg-yellow-600" | "dark:bg-yellow-700" | "dark:bg-yellow-800" | "dark:bg-yellow-900" | "dark:bg-green-100" | "dark:bg-green-200" | "dark:bg-green-300" | "dark:bg-green-400" | "dark:bg-green-500" | "dark:bg-green-600" | "dark:bg-green-700" | "dark:bg-green-800" | "dark:bg-green-900" | "dark:bg-blue-100" | "dark:bg-blue-200" | "dark:bg-blue-300" | "dark:bg-blue-400" | "dark:bg-blue-500" | "dark:bg-blue-600" | "dark:bg-blue-700" | "dark:bg-blue-800" | "dark:bg-blue-900" | "dark:bg-violet-100" | "dark:bg-violet-200" | "dark:bg-violet-300" | "dark:bg-violet-400" | "dark:bg-violet-500" | "dark:bg-violet-600" | "dark:bg-violet-700" | "dark:bg-violet-800" | "dark:bg-violet-900" | "dark:bg-pink-100" | "dark:bg-pink-200" | "dark:bg-pink-300" | "dark:bg-pink-400" | "dark:bg-pink-500" | "dark:bg-pink-600" | "dark:bg-pink-700" | "dark:bg-pink-800" | "dark:bg-pink-900" | "dark:bg-gui-blue-default-light" | "dark:bg-gui-blue-hover-light" | "dark:bg-gui-blue-active-light" | "dark:bg-gui-blue-default-dark" | "dark:bg-gui-blue-hover-dark" | "dark:bg-gui-blue-active-dark" | "dark:bg-gui-blue-focus" | "dark:bg-gui-unavailable" | "dark:bg-gui-success-green" | "dark:bg-gui-error-red" | "dark:bg-gui-focus" | "dark:bg-gui-focus-outline" | "dark:bg-gui-visited" | "dark:bg-white" | "dark:bg-extra-light-grey" | "dark:bg-light-grey" | "dark:bg-mid-grey" | "dark:bg-dark-grey" | "dark:bg-charcoal-grey" | "dark:bg-cool-black" | "dark:bg-active-orange" | "dark:bg-bright-red" | "dark:bg-red-orange" | "dark:bg-electric-cyan" | "dark:bg-zingy-green" | "dark:bg-jazzy-pink" | "dark:bg-gui-default" | "dark:bg-gui-hover" | "dark:bg-gui-active" | "dark:bg-gui-error" | "dark:bg-gui-success" | "dark:bg-gui-default-dark" | "dark:bg-gui-hover-dark" | "dark:bg-gui-active-dark" | "dark:bg-transparent" | "dark:from-neutral-000" | "dark:from-neutral-100" | "dark:from-neutral-200" | "dark:from-neutral-300" | "dark:from-neutral-400" | "dark:from-neutral-500" | "dark:from-neutral-600" | "dark:from-neutral-700" | "dark:from-neutral-800" | "dark:from-neutral-900" | "dark:from-neutral-1000" | "dark:from-neutral-1100" | "dark:from-neutral-1200" | "dark:from-neutral-1300" | "dark:from-orange-100" | "dark:from-orange-200" | "dark:from-orange-300" | "dark:from-orange-400" | "dark:from-orange-500" | "dark:from-orange-600" | "dark:from-orange-700" | "dark:from-orange-800" | "dark:from-orange-900" | "dark:from-orange-1000" | "dark:from-orange-1100" | "dark:from-yellow-100" | "dark:from-yellow-200" | "dark:from-yellow-300" | "dark:from-yellow-400" | "dark:from-yellow-500" | "dark:from-yellow-600" | "dark:from-yellow-700" | "dark:from-yellow-800" | "dark:from-yellow-900" | "dark:from-green-100" | "dark:from-green-200" | "dark:from-green-300" | "dark:from-green-400" | "dark:from-green-500" | "dark:from-green-600" | "dark:from-green-700" | "dark:from-green-800" | "dark:from-green-900" | "dark:from-blue-100" | "dark:from-blue-200" | "dark:from-blue-300" | "dark:from-blue-400" | "dark:from-blue-500" | "dark:from-blue-600" | "dark:from-blue-700" | "dark:from-blue-800" | "dark:from-blue-900" | "dark:from-violet-100" | "dark:from-violet-200" | "dark:from-violet-300" | "dark:from-violet-400" | "dark:from-violet-500" | "dark:from-violet-600" | "dark:from-violet-700" | "dark:from-violet-800" | "dark:from-violet-900" | "dark:from-pink-100" | "dark:from-pink-200" | "dark:from-pink-300" | "dark:from-pink-400" | "dark:from-pink-500" | "dark:from-pink-600" | "dark:from-pink-700" | "dark:from-pink-800" | "dark:from-pink-900" | "dark:from-gui-blue-default-light" | "dark:from-gui-blue-hover-light" | "dark:from-gui-blue-active-light" | "dark:from-gui-blue-default-dark" | "dark:from-gui-blue-hover-dark" | "dark:from-gui-blue-active-dark" | "dark:from-gui-blue-focus" | "dark:from-gui-unavailable" | "dark:from-gui-success-green" | "dark:from-gui-error-red" | "dark:from-gui-focus" | "dark:from-gui-focus-outline" | "dark:from-gui-visited" | "dark:from-white" | "dark:from-extra-light-grey" | "dark:from-light-grey" | "dark:from-mid-grey" | "dark:from-dark-grey" | "dark:from-charcoal-grey" | "dark:from-cool-black" | "dark:from-active-orange" | "dark:from-bright-red" | "dark:from-red-orange" | "dark:from-electric-cyan" | "dark:from-zingy-green" | "dark:from-jazzy-pink" | "dark:from-gui-default" | "dark:from-gui-hover" | "dark:from-gui-active" | "dark:from-gui-error" | "dark:from-gui-success" | "dark:from-gui-default-dark" | "dark:from-gui-hover-dark" | "dark:from-gui-active-dark" | "dark:from-transparent" | "dark:to-neutral-000" | "dark:to-neutral-100" | "dark:to-neutral-200" | "dark:to-neutral-300" | "dark:to-neutral-400" | "dark:to-neutral-500" | "dark:to-neutral-600" | "dark:to-neutral-700" | "dark:to-neutral-800" | "dark:to-neutral-900" | "dark:to-neutral-1000" | "dark:to-neutral-1100" | "dark:to-neutral-1200" | "dark:to-neutral-1300" | "dark:to-orange-100" | "dark:to-orange-200" | "dark:to-orange-300" | "dark:to-orange-400" | "dark:to-orange-500" | "dark:to-orange-600" | "dark:to-orange-700" | "dark:to-orange-800" | "dark:to-orange-900" | "dark:to-orange-1000" | "dark:to-orange-1100" | "dark:to-yellow-100" | "dark:to-yellow-200" | "dark:to-yellow-300" | "dark:to-yellow-400" | "dark:to-yellow-500" | "dark:to-yellow-600" | "dark:to-yellow-700" | "dark:to-yellow-800" | "dark:to-yellow-900" | "dark:to-green-100" | "dark:to-green-200" | "dark:to-green-300" | "dark:to-green-400" | "dark:to-green-500" | "dark:to-green-600" | "dark:to-green-700" | "dark:to-green-800" | "dark:to-green-900" | "dark:to-blue-100" | "dark:to-blue-200" | "dark:to-blue-300" | "dark:to-blue-400" | "dark:to-blue-500" | "dark:to-blue-600" | "dark:to-blue-700" | "dark:to-blue-800" | "dark:to-blue-900" | "dark:to-violet-100" | "dark:to-violet-200" | "dark:to-violet-300" | "dark:to-violet-400" | "dark:to-violet-500" | "dark:to-violet-600" | "dark:to-violet-700" | "dark:to-violet-800" | "dark:to-violet-900" | "dark:to-pink-100" | "dark:to-pink-200" | "dark:to-pink-300" | "dark:to-pink-400" | "dark:to-pink-500" | "dark:to-pink-600" | "dark:to-pink-700" | "dark:to-pink-800" | "dark:to-pink-900" | "dark:to-gui-blue-default-light" | "dark:to-gui-blue-hover-light" | "dark:to-gui-blue-active-light" | "dark:to-gui-blue-default-dark" | "dark:to-gui-blue-hover-dark" | "dark:to-gui-blue-active-dark" | "dark:to-gui-blue-focus" | "dark:to-gui-unavailable" | "dark:to-gui-success-green" | "dark:to-gui-error-red" | "dark:to-gui-focus" | "dark:to-gui-focus-outline" | "dark:to-gui-visited" | "dark:to-white" | "dark:to-extra-light-grey" | "dark:to-light-grey" | "dark:to-mid-grey" | "dark:to-dark-grey" | "dark:to-charcoal-grey" | "dark:to-cool-black" | "dark:to-active-orange" | "dark:to-bright-red" | "dark:to-red-orange" | "dark:to-electric-cyan" | "dark:to-zingy-green" | "dark:to-jazzy-pink" | "dark:to-gui-default" | "dark:to-gui-hover" | "dark:to-gui-active" | "dark:to-gui-error" | "dark:to-gui-success" | "dark:to-gui-default-dark" | "dark:to-gui-hover-dark" | "dark:to-gui-active-dark" | "dark:to-transparent" | "dark:border-neutral-000" | "dark:border-neutral-100" | "dark:border-neutral-200" | "dark:border-neutral-300" | "dark:border-neutral-400" | "dark:border-neutral-500" | "dark:border-neutral-600" | "dark:border-neutral-700" | "dark:border-neutral-800" | "dark:border-neutral-900" | "dark:border-neutral-1000" | "dark:border-neutral-1100" | "dark:border-neutral-1200" | "dark:border-neutral-1300" | "dark:border-orange-100" | "dark:border-orange-200" | "dark:border-orange-300" | "dark:border-orange-400" | "dark:border-orange-500" | "dark:border-orange-600" | "dark:border-orange-700" | "dark:border-orange-800" | "dark:border-orange-900" | "dark:border-orange-1000" | "dark:border-orange-1100" | "dark:border-yellow-100" | "dark:border-yellow-200" | "dark:border-yellow-300" | "dark:border-yellow-400" | "dark:border-yellow-500" | "dark:border-yellow-600" | "dark:border-yellow-700" | "dark:border-yellow-800" | "dark:border-yellow-900" | "dark:border-green-100" | "dark:border-green-200" | "dark:border-green-300" | "dark:border-green-400" | "dark:border-green-500" | "dark:border-green-600" | "dark:border-green-700" | "dark:border-green-800" | "dark:border-green-900" | "dark:border-blue-100" | "dark:border-blue-200" | "dark:border-blue-300" | "dark:border-blue-400" | "dark:border-blue-500" | "dark:border-blue-600" | "dark:border-blue-700" | "dark:border-blue-800" | "dark:border-blue-900" | "dark:border-violet-100" | "dark:border-violet-200" | "dark:border-violet-300" | "dark:border-violet-400" | "dark:border-violet-500" | "dark:border-violet-600" | "dark:border-violet-700" | "dark:border-violet-800" | "dark:border-violet-900" | "dark:border-pink-100" | "dark:border-pink-200" | "dark:border-pink-300" | "dark:border-pink-400" | "dark:border-pink-500" | "dark:border-pink-600" | "dark:border-pink-700" | "dark:border-pink-800" | "dark:border-pink-900" | "dark:border-gui-blue-default-light" | "dark:border-gui-blue-hover-light" | "dark:border-gui-blue-active-light" | "dark:border-gui-blue-default-dark" | "dark:border-gui-blue-hover-dark" | "dark:border-gui-blue-active-dark" | "dark:border-gui-blue-focus" | "dark:border-gui-unavailable" | "dark:border-gui-success-green" | "dark:border-gui-error-red" | "dark:border-gui-focus" | "dark:border-gui-focus-outline" | "dark:border-gui-visited" | "dark:border-white" | "dark:border-extra-light-grey" | "dark:border-light-grey" | "dark:border-mid-grey" | "dark:border-dark-grey" | "dark:border-charcoal-grey" | "dark:border-cool-black" | "dark:border-active-orange" | "dark:border-bright-red" | "dark:border-red-orange" | "dark:border-electric-cyan" | "dark:border-zingy-green" | "dark:border-jazzy-pink" | "dark:border-gui-default" | "dark:border-gui-hover" | "dark:border-gui-active" | "dark:border-gui-error" | "dark:border-gui-success" | "dark:border-gui-default-dark" | "dark:border-gui-hover-dark" | "dark:border-gui-active-dark" | "dark:border-transparent";
+export const defaultIconSecondaryColor: (name: IconName) => "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-disabled-light" | "text-gui-disabled-dark" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark" | "text-transparent" | "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-disabled-light" | "bg-gui-disabled-dark" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "bg-transparent" | "from-neutral-000" | "from-neutral-100" | "from-neutral-200" | "from-neutral-300" | "from-neutral-400" | "from-neutral-500" | "from-neutral-600" | "from-neutral-700" | "from-neutral-800" | "from-neutral-900" | "from-neutral-1000" | "from-neutral-1100" | "from-neutral-1200" | "from-neutral-1300" | "from-orange-100" | "from-orange-200" | "from-orange-300" | "from-orange-400" | "from-orange-500" | "from-orange-600" | "from-orange-700" | "from-orange-800" | "from-orange-900" | "from-orange-1000" | "from-orange-1100" | "from-yellow-100" | "from-yellow-200" | "from-yellow-300" | "from-yellow-400" | "from-yellow-500" | "from-yellow-600" | "from-yellow-700" | "from-yellow-800" | "from-yellow-900" | "from-green-100" | "from-green-200" | "from-green-300" | "from-green-400" | "from-green-500" | "from-green-600" | "from-green-700" | "from-green-800" | "from-green-900" | "from-blue-100" | "from-blue-200" | "from-blue-300" | "from-blue-400" | "from-blue-500" | "from-blue-600" | "from-blue-700" | "from-blue-800" | "from-blue-900" | "from-violet-100" | "from-violet-200" | "from-violet-300" | "from-violet-400" | "from-violet-500" | "from-violet-600" | "from-violet-700" | "from-violet-800" | "from-violet-900" | "from-pink-100" | "from-pink-200" | "from-pink-300" | "from-pink-400" | "from-pink-500" | "from-pink-600" | "from-pink-700" | "from-pink-800" | "from-pink-900" | "from-gui-blue-default-light" | "from-gui-blue-hover-light" | "from-gui-blue-active-light" | "from-gui-blue-default-dark" | "from-gui-blue-hover-dark" | "from-gui-blue-active-dark" | "from-gui-blue-focus" | "from-gui-disabled-light" | "from-gui-disabled-dark" | "from-gui-success-green" | "from-gui-error-red" | "from-gui-focus" | "from-gui-focus-outline" | "from-gui-visited" | "from-white" | "from-extra-light-grey" | "from-light-grey" | "from-mid-grey" | "from-dark-grey" | "from-charcoal-grey" | "from-cool-black" | "from-active-orange" | "from-bright-red" | "from-red-orange" | "from-electric-cyan" | "from-zingy-green" | "from-jazzy-pink" | "from-gui-default" | "from-gui-hover" | "from-gui-active" | "from-gui-error" | "from-gui-success" | "from-gui-default-dark" | "from-gui-hover-dark" | "from-gui-active-dark" | "from-transparent" | "to-neutral-000" | "to-neutral-100" | "to-neutral-200" | "to-neutral-300" | "to-neutral-400" | "to-neutral-500" | "to-neutral-600" | "to-neutral-700" | "to-neutral-800" | "to-neutral-900" | "to-neutral-1000" | "to-neutral-1100" | "to-neutral-1200" | "to-neutral-1300" | "to-orange-100" | "to-orange-200" | "to-orange-300" | "to-orange-400" | "to-orange-500" | "to-orange-600" | "to-orange-700" | "to-orange-800" | "to-orange-900" | "to-orange-1000" | "to-orange-1100" | "to-yellow-100" | "to-yellow-200" | "to-yellow-300" | "to-yellow-400" | "to-yellow-500" | "to-yellow-600" | "to-yellow-700" | "to-yellow-800" | "to-yellow-900" | "to-green-100" | "to-green-200" | "to-green-300" | "to-green-400" | "to-green-500" | "to-green-600" | "to-green-700" | "to-green-800" | "to-green-900" | "to-blue-100" | "to-blue-200" | "to-blue-300" | "to-blue-400" | "to-blue-500" | "to-blue-600" | "to-blue-700" | "to-blue-800" | "to-blue-900" | "to-violet-100" | "to-violet-200" | "to-violet-300" | "to-violet-400" | "to-violet-500" | "to-violet-600" | "to-violet-700" | "to-violet-800" | "to-violet-900" | "to-pink-100" | "to-pink-200" | "to-pink-300" | "to-pink-400" | "to-pink-500" | "to-pink-600" | "to-pink-700" | "to-pink-800" | "to-pink-900" | "to-gui-blue-default-light" | "to-gui-blue-hover-light" | "to-gui-blue-active-light" | "to-gui-blue-default-dark" | "to-gui-blue-hover-dark" | "to-gui-blue-active-dark" | "to-gui-blue-focus" | "to-gui-disabled-light" | "to-gui-disabled-dark" | "to-gui-success-green" | "to-gui-error-red" | "to-gui-focus" | "to-gui-focus-outline" | "to-gui-visited" | "to-white" | "to-extra-light-grey" | "to-light-grey" | "to-mid-grey" | "to-dark-grey" | "to-charcoal-grey" | "to-cool-black" | "to-active-orange" | "to-bright-red" | "to-red-orange" | "to-electric-cyan" | "to-zingy-green" | "to-jazzy-pink" | "to-gui-default" | "to-gui-hover" | "to-gui-active" | "to-gui-error" | "to-gui-success" | "to-gui-default-dark" | "to-gui-hover-dark" | "to-gui-active-dark" | "to-transparent" | "border-neutral-000" | "border-neutral-100" | "border-neutral-200" | "border-neutral-300" | "border-neutral-400" | "border-neutral-500" | "border-neutral-600" | "border-neutral-700" | "border-neutral-800" | "border-neutral-900" | "border-neutral-1000" | "border-neutral-1100" | "border-neutral-1200" | "border-neutral-1300" | "border-orange-100" | "border-orange-200" | "border-orange-300" | "border-orange-400" | "border-orange-500" | "border-orange-600" | "border-orange-700" | "border-orange-800" | "border-orange-900" | "border-orange-1000" | "border-orange-1100" | "border-yellow-100" | "border-yellow-200" | "border-yellow-300" | "border-yellow-400" | "border-yellow-500" | "border-yellow-600" | "border-yellow-700" | "border-yellow-800" | "border-yellow-900" | "border-green-100" | "border-green-200" | "border-green-300" | "border-green-400" | "border-green-500" | "border-green-600" | "border-green-700" | "border-green-800" | "border-green-900" | "border-blue-100" | "border-blue-200" | "border-blue-300" | "border-blue-400" | "border-blue-500" | "border-blue-600" | "border-blue-700" | "border-blue-800" | "border-blue-900" | "border-violet-100" | "border-violet-200" | "border-violet-300" | "border-violet-400" | "border-violet-500" | "border-violet-600" | "border-violet-700" | "border-violet-800" | "border-violet-900" | "border-pink-100" | "border-pink-200" | "border-pink-300" | "border-pink-400" | "border-pink-500" | "border-pink-600" | "border-pink-700" | "border-pink-800" | "border-pink-900" | "border-gui-blue-default-light" | "border-gui-blue-hover-light" | "border-gui-blue-active-light" | "border-gui-blue-default-dark" | "border-gui-blue-hover-dark" | "border-gui-blue-active-dark" | "border-gui-blue-focus" | "border-gui-disabled-light" | "border-gui-disabled-dark" | "border-gui-success-green" | "border-gui-error-red" | "border-gui-focus" | "border-gui-focus-outline" | "border-gui-visited" | "border-white" | "border-extra-light-grey" | "border-light-grey" | "border-mid-grey" | "border-dark-grey" | "border-charcoal-grey" | "border-cool-black" | "border-active-orange" | "border-bright-red" | "border-red-orange" | "border-electric-cyan" | "border-zingy-green" | "border-jazzy-pink" | "border-gui-default" | "border-gui-hover" | "border-gui-active" | "border-gui-error" | "border-gui-success" | "border-gui-default-dark" | "border-gui-hover-dark" | "border-gui-active-dark" | "border-transparent" | "dark:text-neutral-000" | "dark:text-neutral-100" | "dark:text-neutral-200" | "dark:text-neutral-300" | "dark:text-neutral-400" | "dark:text-neutral-500" | "dark:text-neutral-600" | "dark:text-neutral-700" | "dark:text-neutral-800" | "dark:text-neutral-900" | "dark:text-neutral-1000" | "dark:text-neutral-1100" | "dark:text-neutral-1200" | "dark:text-neutral-1300" | "dark:text-orange-100" | "dark:text-orange-200" | "dark:text-orange-300" | "dark:text-orange-400" | "dark:text-orange-500" | "dark:text-orange-600" | "dark:text-orange-700" | "dark:text-orange-800" | "dark:text-orange-900" | "dark:text-orange-1000" | "dark:text-orange-1100" | "dark:text-yellow-100" | "dark:text-yellow-200" | "dark:text-yellow-300" | "dark:text-yellow-400" | "dark:text-yellow-500" | "dark:text-yellow-600" | "dark:text-yellow-700" | "dark:text-yellow-800" | "dark:text-yellow-900" | "dark:text-green-100" | "dark:text-green-200" | "dark:text-green-300" | "dark:text-green-400" | "dark:text-green-500" | "dark:text-green-600" | "dark:text-green-700" | "dark:text-green-800" | "dark:text-green-900" | "dark:text-blue-100" | "dark:text-blue-200" | "dark:text-blue-300" | "dark:text-blue-400" | "dark:text-blue-500" | "dark:text-blue-600" | "dark:text-blue-700" | "dark:text-blue-800" | "dark:text-blue-900" | "dark:text-violet-100" | "dark:text-violet-200" | "dark:text-violet-300" | "dark:text-violet-400" | "dark:text-violet-500" | "dark:text-violet-600" | "dark:text-violet-700" | "dark:text-violet-800" | "dark:text-violet-900" | "dark:text-pink-100" | "dark:text-pink-200" | "dark:text-pink-300" | "dark:text-pink-400" | "dark:text-pink-500" | "dark:text-pink-600" | "dark:text-pink-700" | "dark:text-pink-800" | "dark:text-pink-900" | "dark:text-gui-blue-default-light" | "dark:text-gui-blue-hover-light" | "dark:text-gui-blue-active-light" | "dark:text-gui-blue-default-dark" | "dark:text-gui-blue-hover-dark" | "dark:text-gui-blue-active-dark" | "dark:text-gui-blue-focus" | "dark:text-gui-disabled-light" | "dark:text-gui-disabled-dark" | "dark:text-gui-success-green" | "dark:text-gui-error-red" | "dark:text-gui-focus" | "dark:text-gui-focus-outline" | "dark:text-gui-visited" | "dark:text-white" | "dark:text-extra-light-grey" | "dark:text-light-grey" | "dark:text-mid-grey" | "dark:text-dark-grey" | "dark:text-charcoal-grey" | "dark:text-cool-black" | "dark:text-active-orange" | "dark:text-bright-red" | "dark:text-red-orange" | "dark:text-electric-cyan" | "dark:text-zingy-green" | "dark:text-jazzy-pink" | "dark:text-gui-default" | "dark:text-gui-hover" | "dark:text-gui-active" | "dark:text-gui-error" | "dark:text-gui-success" | "dark:text-gui-default-dark" | "dark:text-gui-hover-dark" | "dark:text-gui-active-dark" | "dark:text-transparent" | "dark:bg-neutral-000" | "dark:bg-neutral-100" | "dark:bg-neutral-200" | "dark:bg-neutral-300" | "dark:bg-neutral-400" | "dark:bg-neutral-500" | "dark:bg-neutral-600" | "dark:bg-neutral-700" | "dark:bg-neutral-800" | "dark:bg-neutral-900" | "dark:bg-neutral-1000" | "dark:bg-neutral-1100" | "dark:bg-neutral-1200" | "dark:bg-neutral-1300" | "dark:bg-orange-100" | "dark:bg-orange-200" | "dark:bg-orange-300" | "dark:bg-orange-400" | "dark:bg-orange-500" | "dark:bg-orange-600" | "dark:bg-orange-700" | "dark:bg-orange-800" | "dark:bg-orange-900" | "dark:bg-orange-1000" | "dark:bg-orange-1100" | "dark:bg-yellow-100" | "dark:bg-yellow-200" | "dark:bg-yellow-300" | "dark:bg-yellow-400" | "dark:bg-yellow-500" | "dark:bg-yellow-600" | "dark:bg-yellow-700" | "dark:bg-yellow-800" | "dark:bg-yellow-900" | "dark:bg-green-100" | "dark:bg-green-200" | "dark:bg-green-300" | "dark:bg-green-400" | "dark:bg-green-500" | "dark:bg-green-600" | "dark:bg-green-700" | "dark:bg-green-800" | "dark:bg-green-900" | "dark:bg-blue-100" | "dark:bg-blue-200" | "dark:bg-blue-300" | "dark:bg-blue-400" | "dark:bg-blue-500" | "dark:bg-blue-600" | "dark:bg-blue-700" | "dark:bg-blue-800" | "dark:bg-blue-900" | "dark:bg-violet-100" | "dark:bg-violet-200" | "dark:bg-violet-300" | "dark:bg-violet-400" | "dark:bg-violet-500" | "dark:bg-violet-600" | "dark:bg-violet-700" | "dark:bg-violet-800" | "dark:bg-violet-900" | "dark:bg-pink-100" | "dark:bg-pink-200" | "dark:bg-pink-300" | "dark:bg-pink-400" | "dark:bg-pink-500" | "dark:bg-pink-600" | "dark:bg-pink-700" | "dark:bg-pink-800" | "dark:bg-pink-900" | "dark:bg-gui-blue-default-light" | "dark:bg-gui-blue-hover-light" | "dark:bg-gui-blue-active-light" | "dark:bg-gui-blue-default-dark" | "dark:bg-gui-blue-hover-dark" | "dark:bg-gui-blue-active-dark" | "dark:bg-gui-blue-focus" | "dark:bg-gui-disabled-light" | "dark:bg-gui-disabled-dark" | "dark:bg-gui-success-green" | "dark:bg-gui-error-red" | "dark:bg-gui-focus" | "dark:bg-gui-focus-outline" | "dark:bg-gui-visited" | "dark:bg-white" | "dark:bg-extra-light-grey" | "dark:bg-light-grey" | "dark:bg-mid-grey" | "dark:bg-dark-grey" | "dark:bg-charcoal-grey" | "dark:bg-cool-black" | "dark:bg-active-orange" | "dark:bg-bright-red" | "dark:bg-red-orange" | "dark:bg-electric-cyan" | "dark:bg-zingy-green" | "dark:bg-jazzy-pink" | "dark:bg-gui-default" | "dark:bg-gui-hover" | "dark:bg-gui-active" | "dark:bg-gui-error" | "dark:bg-gui-success" | "dark:bg-gui-default-dark" | "dark:bg-gui-hover-dark" | "dark:bg-gui-active-dark" | "dark:bg-transparent" | "dark:from-neutral-000" | "dark:from-neutral-100" | "dark:from-neutral-200" | "dark:from-neutral-300" | "dark:from-neutral-400" | "dark:from-neutral-500" | "dark:from-neutral-600" | "dark:from-neutral-700" | "dark:from-neutral-800" | "dark:from-neutral-900" | "dark:from-neutral-1000" | "dark:from-neutral-1100" | "dark:from-neutral-1200" | "dark:from-neutral-1300" | "dark:from-orange-100" | "dark:from-orange-200" | "dark:from-orange-300" | "dark:from-orange-400" | "dark:from-orange-500" | "dark:from-orange-600" | "dark:from-orange-700" | "dark:from-orange-800" | "dark:from-orange-900" | "dark:from-orange-1000" | "dark:from-orange-1100" | "dark:from-yellow-100" | "dark:from-yellow-200" | "dark:from-yellow-300" | "dark:from-yellow-400" | "dark:from-yellow-500" | "dark:from-yellow-600" | "dark:from-yellow-700" | "dark:from-yellow-800" | "dark:from-yellow-900" | "dark:from-green-100" | "dark:from-green-200" | "dark:from-green-300" | "dark:from-green-400" | "dark:from-green-500" | "dark:from-green-600" | "dark:from-green-700" | "dark:from-green-800" | "dark:from-green-900" | "dark:from-blue-100" | "dark:from-blue-200" | "dark:from-blue-300" | "dark:from-blue-400" | "dark:from-blue-500" | "dark:from-blue-600" | "dark:from-blue-700" | "dark:from-blue-800" | "dark:from-blue-900" | "dark:from-violet-100" | "dark:from-violet-200" | "dark:from-violet-300" | "dark:from-violet-400" | "dark:from-violet-500" | "dark:from-violet-600" | "dark:from-violet-700" | "dark:from-violet-800" | "dark:from-violet-900" | "dark:from-pink-100" | "dark:from-pink-200" | "dark:from-pink-300" | "dark:from-pink-400" | "dark:from-pink-500" | "dark:from-pink-600" | "dark:from-pink-700" | "dark:from-pink-800" | "dark:from-pink-900" | "dark:from-gui-blue-default-light" | "dark:from-gui-blue-hover-light" | "dark:from-gui-blue-active-light" | "dark:from-gui-blue-default-dark" | "dark:from-gui-blue-hover-dark" | "dark:from-gui-blue-active-dark" | "dark:from-gui-blue-focus" | "dark:from-gui-disabled-light" | "dark:from-gui-disabled-dark" | "dark:from-gui-success-green" | "dark:from-gui-error-red" | "dark:from-gui-focus" | "dark:from-gui-focus-outline" | "dark:from-gui-visited" | "dark:from-white" | "dark:from-extra-light-grey" | "dark:from-light-grey" | "dark:from-mid-grey" | "dark:from-dark-grey" | "dark:from-charcoal-grey" | "dark:from-cool-black" | "dark:from-active-orange" | "dark:from-bright-red" | "dark:from-red-orange" | "dark:from-electric-cyan" | "dark:from-zingy-green" | "dark:from-jazzy-pink" | "dark:from-gui-default" | "dark:from-gui-hover" | "dark:from-gui-active" | "dark:from-gui-error" | "dark:from-gui-success" | "dark:from-gui-default-dark" | "dark:from-gui-hover-dark" | "dark:from-gui-active-dark" | "dark:from-transparent" | "dark:to-neutral-000" | "dark:to-neutral-100" | "dark:to-neutral-200" | "dark:to-neutral-300" | "dark:to-neutral-400" | "dark:to-neutral-500" | "dark:to-neutral-600" | "dark:to-neutral-700" | "dark:to-neutral-800" | "dark:to-neutral-900" | "dark:to-neutral-1000" | "dark:to-neutral-1100" | "dark:to-neutral-1200" | "dark:to-neutral-1300" | "dark:to-orange-100" | "dark:to-orange-200" | "dark:to-orange-300" | "dark:to-orange-400" | "dark:to-orange-500" | "dark:to-orange-600" | "dark:to-orange-700" | "dark:to-orange-800" | "dark:to-orange-900" | "dark:to-orange-1000" | "dark:to-orange-1100" | "dark:to-yellow-100" | "dark:to-yellow-200" | "dark:to-yellow-300" | "dark:to-yellow-400" | "dark:to-yellow-500" | "dark:to-yellow-600" | "dark:to-yellow-700" | "dark:to-yellow-800" | "dark:to-yellow-900" | "dark:to-green-100" | "dark:to-green-200" | "dark:to-green-300" | "dark:to-green-400" | "dark:to-green-500" | "dark:to-green-600" | "dark:to-green-700" | "dark:to-green-800" | "dark:to-green-900" | "dark:to-blue-100" | "dark:to-blue-200" | "dark:to-blue-300" | "dark:to-blue-400" | "dark:to-blue-500" | "dark:to-blue-600" | "dark:to-blue-700" | "dark:to-blue-800" | "dark:to-blue-900" | "dark:to-violet-100" | "dark:to-violet-200" | "dark:to-violet-300" | "dark:to-violet-400" | "dark:to-violet-500" | "dark:to-violet-600" | "dark:to-violet-700" | "dark:to-violet-800" | "dark:to-violet-900" | "dark:to-pink-100" | "dark:to-pink-200" | "dark:to-pink-300" | "dark:to-pink-400" | "dark:to-pink-500" | "dark:to-pink-600" | "dark:to-pink-700" | "dark:to-pink-800" | "dark:to-pink-900" | "dark:to-gui-blue-default-light" | "dark:to-gui-blue-hover-light" | "dark:to-gui-blue-active-light" | "dark:to-gui-blue-default-dark" | "dark:to-gui-blue-hover-dark" | "dark:to-gui-blue-active-dark" | "dark:to-gui-blue-focus" | "dark:to-gui-disabled-light" | "dark:to-gui-disabled-dark" | "dark:to-gui-success-green" | "dark:to-gui-error-red" | "dark:to-gui-focus" | "dark:to-gui-focus-outline" | "dark:to-gui-visited" | "dark:to-white" | "dark:to-extra-light-grey" | "dark:to-light-grey" | "dark:to-mid-grey" | "dark:to-dark-grey" | "dark:to-charcoal-grey" | "dark:to-cool-black" | "dark:to-active-orange" | "dark:to-bright-red" | "dark:to-red-orange" | "dark:to-electric-cyan" | "dark:to-zingy-green" | "dark:to-jazzy-pink" | "dark:to-gui-default" | "dark:to-gui-hover" | "dark:to-gui-active" | "dark:to-gui-error" | "dark:to-gui-success" | "dark:to-gui-default-dark" | "dark:to-gui-hover-dark" | "dark:to-gui-active-dark" | "dark:to-transparent" | "dark:border-neutral-000" | "dark:border-neutral-100" | "dark:border-neutral-200" | "dark:border-neutral-300" | "dark:border-neutral-400" | "dark:border-neutral-500" | "dark:border-neutral-600" | "dark:border-neutral-700" | "dark:border-neutral-800" | "dark:border-neutral-900" | "dark:border-neutral-1000" | "dark:border-neutral-1100" | "dark:border-neutral-1200" | "dark:border-neutral-1300" | "dark:border-orange-100" | "dark:border-orange-200" | "dark:border-orange-300" | "dark:border-orange-400" | "dark:border-orange-500" | "dark:border-orange-600" | "dark:border-orange-700" | "dark:border-orange-800" | "dark:border-orange-900" | "dark:border-orange-1000" | "dark:border-orange-1100" | "dark:border-yellow-100" | "dark:border-yellow-200" | "dark:border-yellow-300" | "dark:border-yellow-400" | "dark:border-yellow-500" | "dark:border-yellow-600" | "dark:border-yellow-700" | "dark:border-yellow-800" | "dark:border-yellow-900" | "dark:border-green-100" | "dark:border-green-200" | "dark:border-green-300" | "dark:border-green-400" | "dark:border-green-500" | "dark:border-green-600" | "dark:border-green-700" | "dark:border-green-800" | "dark:border-green-900" | "dark:border-blue-100" | "dark:border-blue-200" | "dark:border-blue-300" | "dark:border-blue-400" | "dark:border-blue-500" | "dark:border-blue-600" | "dark:border-blue-700" | "dark:border-blue-800" | "dark:border-blue-900" | "dark:border-violet-100" | "dark:border-violet-200" | "dark:border-violet-300" | "dark:border-violet-400" | "dark:border-violet-500" | "dark:border-violet-600" | "dark:border-violet-700" | "dark:border-violet-800" | "dark:border-violet-900" | "dark:border-pink-100" | "dark:border-pink-200" | "dark:border-pink-300" | "dark:border-pink-400" | "dark:border-pink-500" | "dark:border-pink-600" | "dark:border-pink-700" | "dark:border-pink-800" | "dark:border-pink-900" | "dark:border-gui-blue-default-light" | "dark:border-gui-blue-hover-light" | "dark:border-gui-blue-active-light" | "dark:border-gui-blue-default-dark" | "dark:border-gui-blue-hover-dark" | "dark:border-gui-blue-active-dark" | "dark:border-gui-blue-focus" | "dark:border-gui-disabled-light" | "dark:border-gui-disabled-dark" | "dark:border-gui-success-green" | "dark:border-gui-error-red" | "dark:border-gui-focus" | "dark:border-gui-focus-outline" | "dark:border-gui-visited" | "dark:border-white" | "dark:border-extra-light-grey" | "dark:border-light-grey" | "dark:border-mid-grey" | "dark:border-dark-grey" | "dark:border-charcoal-grey" | "dark:border-cool-black" | "dark:border-active-orange" | "dark:border-bright-red" | "dark:border-red-orange" | "dark:border-electric-cyan" | "dark:border-zingy-green" | "dark:border-jazzy-pink" | "dark:border-gui-default" | "dark:border-gui-hover" | "dark:border-gui-active" | "dark:border-gui-error" | "dark:border-gui-success" | "dark:border-gui-default-dark" | "dark:border-gui-hover-dark" | "dark:border-gui-active-dark" | "dark:border-transparent";
 export const toPascalCase: (str: string) => string;
 export const getHeroicon: (iconName: string, variant: string) => HeroiconComponent | null;
 export const setUniqueIds: (el: SVGSVGElement | null, uniqueId: string) => void;
@@ -6580,13 +6525,13 @@ export const blueColors: readonly ["blue-100", "blue-200", "blue-300", "blue-400
 export const violetColors: readonly ["violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900"];
 export const pinkColors: readonly ["pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
 export const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-export const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+export const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-disabled-light", "gui-disabled-dark", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
 export const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark", "transparent"];
 export const colorRoles: {
     neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
     orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
     secondary: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
-    gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
+    gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-disabled-light", "gui-disabled-dark", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
 };
 export const colorGroupLengths: {
     neutral: 14;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "18.0.0-dev.dbc599e55b",
+  "version": "18.0.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -33,12 +33,12 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/react": "^16.3.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20",
+    "@types/node": "^25",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "@types/svg-sprite": "^0.0.39",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
@@ -57,7 +57,7 @@
     "msw": "2.12.0",
     "msw-storybook-addon": "^2.0.5",
     "playwright": "^1.58.0",
-    "posthog-js": "1.347.2",
+    "posthog-js": "1.359.0",
     "prettier": "^3.8.0",
     "storybook": "^10.2.0",
     "svg-sprite": "^2.0.4",
@@ -78,7 +78,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "array-flat-polyfill": "^1.0.1",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.3.2",
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
@@ -89,7 +89,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "scroll-lock": "^2.1.4",
-    "swr": "^2.2.5",
+    "swr": "^2.4.0",
     "tailwind-merge": "^3.4.1"
   },
   "peerDependencies": {

package/tailwind.config.js

@@ -130,8 +130,8 @@ module.exports = {
         "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
         "gui-blue-focus": "var(--color-gui-blue-focus)",
         "gui-blue-visited": "var(--color-gui-blue-focus)",
-        "gui-unavailable": "var(--color-gui-unavailable)",
-        "gui-unavailable-dark": "var(--color-gui-unavailable-dark)",
+        "gui-disabled-light": "var(--color-gui-disabled-light)",
+        "gui-disabled-dark": "var(--color-gui-disabled-dark)",
         "gui-success-green": "var(--color-gui-success-green)",
         "gui-error-red": "var(--color-gui-error-red)",
         "gui-focus": "var(--color-gui-focus)",

package/core/Icon/components/icon-display-asset-tracking-col.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconDisplayAssetTrackingCol=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:48,height:48,fill:"none",viewBox:"0 0 48 48",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinejoin:"bevel",strokeMiterlimit:10,strokeWidth:1.5,d:"M40 35.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"}),React.createElement("path",{fill:"#03020D",d:"m40.02 44.5-.557.502a.75.75 0 0 0 1.114 0zm-6.27-12.96c0-3.47 2.81-6.29 6.25-6.29v-1.5c-4.276 0-7.75 3.5-7.75 7.79zM40 25.25c3.458 0 6.25 2.819 6.25 6.29h1.5c0-4.289-3.453-7.79-7.75-7.79zm6.25 6.29c0 1.148-.39 2.495-1.025 3.912-.63 1.406-1.479 2.825-2.337 4.099a46 46 0 0 1-3.408 4.428l-.014.015-.003.004.557.502c.557.502.558.501.558.501l.001-.002q.003 0 .005-.005l.016-.018.061-.069.228-.262a47.613 47.613 0 0 0 3.243-4.256c.886-1.316 1.784-2.812 2.462-4.323.673-1.501 1.156-3.074 1.156-4.526zM40.02 44.5l.557-.502v-.001q-.003 0-.004-.004l-.014-.015-.056-.063-.217-.249a46.488 46.488 0 0 1-3.155-4.124c-.864-1.276-1.716-2.695-2.35-4.1-.64-1.416-1.031-2.76-1.031-3.902h-1.5c0 1.449.486 3.02 1.163 4.519.682 1.51 1.584 3.007 2.476 4.324A48 48 0 0 0 39.46 45l.001.002z"}),React.createElement("path",{stroke:"#03020D",strokeLinejoin:"bevel",strokeMiterlimit:10,strokeWidth:1.5,d:"M8 13.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"}),React.createElement("path",{fill:"#03020D",d:"m8.02 22.5-.557.502a.75.75 0 0 0 1.115 0zM1.75 9.54c0-3.47 2.81-6.29 6.25-6.29v-1.5C3.724 1.75.25 5.25.25 9.54zM8 3.25c3.458 0 6.25 2.819 6.25 6.29h1.5c0-4.289-3.453-7.79-7.75-7.79zm6.25 6.29c0 1.148-.39 2.495-1.025 3.912-.63 1.406-1.479 2.825-2.337 4.099a46 46 0 0 1-3.408 4.428l-.014.015-.003.004.557.502.558.501.001-.002.005-.005.077-.087.228-.262a47.602 47.602 0 0 0 3.243-4.256c.886-1.316 1.784-2.812 2.462-4.323.673-1.501 1.156-3.074 1.156-4.526zM8.02 22.5l.557-.502v-.001q-.003 0-.004-.004l-.014-.015-.056-.063q-.076-.085-.216-.249a46.466 46.466 0 0 1-3.155-4.124c-.864-1.276-1.717-2.695-2.352-4.1-.639-1.416-1.03-2.76-1.03-3.902H.25c0 1.449.486 3.02 1.163 4.519.682 1.51 1.584 3.007 2.476 4.324a48 48 0 0 0 3.551 4.594l.017.018.004.005.001.002z"}),React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeWidth:1.5,d:"M34 44.5H12a4 4 0 0 1-4-4v-3a4 4 0 0 1 4-4h1"}),React.createElement("circle",{cx:18,cy:33.5,r:3,fill:"#FF5416"}),React.createElement("circle",{cx:14.25,cy:23.25,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:23.25,cy:33.5,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:23.25,cy:23.25,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:26.25,cy:33.5,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:26.25,cy:23.25,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:28.25,cy:28.5,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:28.25,cy:25.5,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:28.25,cy:31.5,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:20.25,cy:23.25,r:.75,fill:"#FF5416"}),React.createElement("circle",{cx:17.25,cy:23.25,r:.75,fill:"#FF5416"}));const ForwardRef=forwardRef(IconDisplayAssetTrackingCol);export default ForwardRef;
-//# sourceMappingURL=icon-display-asset-tracking-col.js.map

package/core/Icon/components/icon-display-asset-tracking-col.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-display-asset-tracking-col.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconDisplayAssetTrackingCol = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={48} height={48} fill=\"none\" viewBox=\"0 0 48 48\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinejoin=\"bevel\" strokeMiterlimit={10} strokeWidth={1.5} d=\"M40 35.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" /><path fill=\"#03020D\" d=\"m40.02 44.5-.557.502a.75.75 0 0 0 1.114 0zm-6.27-12.96c0-3.47 2.81-6.29 6.25-6.29v-1.5c-4.276 0-7.75 3.5-7.75 7.79zM40 25.25c3.458 0 6.25 2.819 6.25 6.29h1.5c0-4.289-3.453-7.79-7.75-7.79zm6.25 6.29c0 1.148-.39 2.495-1.025 3.912-.63 1.406-1.479 2.825-2.337 4.099a46 46 0 0 1-3.408 4.428l-.014.015-.003.004.557.502c.557.502.558.501.558.501l.001-.002q.003 0 .005-.005l.016-.018.061-.069.228-.262a47.613 47.613 0 0 0 3.243-4.256c.886-1.316 1.784-2.812 2.462-4.323.673-1.501 1.156-3.074 1.156-4.526zM40.02 44.5l.557-.502v-.001q-.003 0-.004-.004l-.014-.015-.056-.063-.217-.249a46.488 46.488 0 0 1-3.155-4.124c-.864-1.276-1.716-2.695-2.35-4.1-.64-1.416-1.031-2.76-1.031-3.902h-1.5c0 1.449.486 3.02 1.163 4.519.682 1.51 1.584 3.007 2.476 4.324A48 48 0 0 0 39.46 45l.001.002z\" /><path stroke=\"#03020D\" strokeLinejoin=\"bevel\" strokeMiterlimit={10} strokeWidth={1.5} d=\"M8 13.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z\" /><path fill=\"#03020D\" d=\"m8.02 22.5-.557.502a.75.75 0 0 0 1.115 0zM1.75 9.54c0-3.47 2.81-6.29 6.25-6.29v-1.5C3.724 1.75.25 5.25.25 9.54zM8 3.25c3.458 0 6.25 2.819 6.25 6.29h1.5c0-4.289-3.453-7.79-7.75-7.79zm6.25 6.29c0 1.148-.39 2.495-1.025 3.912-.63 1.406-1.479 2.825-2.337 4.099a46 46 0 0 1-3.408 4.428l-.014.015-.003.004.557.502.558.501.001-.002.005-.005.077-.087.228-.262a47.602 47.602 0 0 0 3.243-4.256c.886-1.316 1.784-2.812 2.462-4.323.673-1.501 1.156-3.074 1.156-4.526zM8.02 22.5l.557-.502v-.001q-.003 0-.004-.004l-.014-.015-.056-.063q-.076-.085-.216-.249a46.466 46.466 0 0 1-3.155-4.124c-.864-1.276-1.717-2.695-2.352-4.1-.639-1.416-1.03-2.76-1.03-3.902H.25c0 1.449.486 3.02 1.163 4.519.682 1.51 1.584 3.007 2.476 4.324a48 48 0 0 0 3.551 4.594l.017.018.004.005.001.002z\" /><path stroke=\"#03020D\" strokeLinecap=\"round\" strokeWidth={1.5} d=\"M34 44.5H12a4 4 0 0 1-4-4v-3a4 4 0 0 1 4-4h1\" /><circle cx={18} cy={33.5} r={3} fill=\"#FF5416\" /><circle cx={14.25} cy={23.25} r={0.75} fill=\"#FF5416\" /><circle cx={23.25} cy={33.5} r={0.75} fill=\"#FF5416\" /><circle cx={23.25} cy={23.25} r={0.75} fill=\"#FF5416\" /><circle cx={26.25} cy={33.5} r={0.75} fill=\"#FF5416\" /><circle cx={26.25} cy={23.25} r={0.75} fill=\"#FF5416\" /><circle cx={28.25} cy={28.5} r={0.75} fill=\"#FF5416\" /><circle cx={28.25} cy={25.5} r={0.75} fill=\"#FF5416\" /><circle cx={28.25} cy={31.5} r={0.75} fill=\"#FF5416\" /><circle cx={20.25} cy={23.25} r={0.75} fill=\"#FF5416\" /><circle cx={17.25} cy={23.25} r={0.75} fill=\"#FF5416\" /></svg>;\nconst ForwardRef = forwardRef(IconDisplayAssetTrackingCol);\nexport default ForwardRef;"],"names":["React","forwardRef","IconDisplayAssetTrackingCol","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinejoin","strokeMiterlimit","strokeWidth","d","strokeLinecap","circle","cx","cy","r","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,4BAA8B,CAAC,CACnCC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,eAAe,QAAQC,iBAAkB,GAAIC,YAAa,IAAKC,EAAE,0CAA0C,oBAACL,QAAKJ,KAAK,UAAUS,EAAE,mwBAAmwB,oBAACL,QAAKC,OAAO,UAAUC,eAAe,QAAQC,iBAAkB,GAAIC,YAAa,IAAKC,EAAE,yCAAyC,oBAACL,QAAKJ,KAAK,UAAUS,EAAE,qvBAAqvB,oBAACL,QAAKC,OAAO,UAAUK,cAAc,QAAQF,YAAa,IAAKC,EAAE,iDAAiD,oBAACE,UAAOC,GAAI,GAAIC,GAAI,KAAMC,EAAG,EAAGd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,MAAOC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,KAAMC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,MAAOC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,KAAMC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,MAAOC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,KAAMC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,KAAMC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,KAAMC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,MAAOC,EAAG,IAAMd,KAAK,YAAY,oBAACW,UAAOC,GAAI,MAAOC,GAAI,MAAOC,EAAG,IAAMd,KAAK,aACjvF,MAAMe,WAAazB,WAAWC,4BAC9B,gBAAewB,UAAW"}

package/core/Icon/components/icon-gui-prod-asset-tracking-outline.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconGuiProdAssetTrackingOutline=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",d:"m13.32 20.397.558.5zm-2.64 0-.558.5zm7.807-10.167c0 .644-.2 1.42-.571 2.292-.369.865-.888 1.779-1.482 2.685-1.189 1.813-2.64 3.538-3.672 4.69l1.116 1c1.056-1.176 2.563-2.964 3.81-4.867.624-.952 1.193-1.947 1.608-2.92.411-.965.69-1.953.69-2.88zM12 3.743a6.487 6.487 0 0 1 6.487 6.487h1.5A7.987 7.987 0 0 0 12 2.243zM5.513 10.23A6.487 6.487 0 0 1 12 3.743v-1.5a7.987 7.987 0 0 0-7.987 7.987zm5.726 9.666c-1.033-1.151-2.484-2.876-3.673-4.689-.594-.906-1.113-1.82-1.482-2.685-.371-.871-.57-1.648-.57-2.292h-1.5c0 .927.279 1.915.69 2.88.415.973.984 1.968 1.608 2.92 1.248 1.903 2.755 3.691 3.81 4.868zm1.523 0a1.01 1.01 0 0 1-1.524 0l-1.116 1.002a2.51 2.51 0 0 0 3.756 0zm1.383-9.666c0 1.185-.96 2.145-2.145 2.145v1.5a3.645 3.645 0 0 0 3.645-3.645zM12 8.085c1.185 0 2.145.96 2.145 2.145h1.5A3.645 3.645 0 0 0 12 6.585zM9.855 10.23c0-1.184.96-2.145 2.145-2.145v-1.5a3.645 3.645 0 0 0-3.645 3.645zM12 12.375a2.145 2.145 0 0 1-2.145-2.145h-1.5A3.645 3.645 0 0 0 12 13.875z"}));const ForwardRef=forwardRef(IconGuiProdAssetTrackingOutline);export default ForwardRef;
-//# sourceMappingURL=icon-gui-prod-asset-tracking-outline.js.map

package/core/Icon/components/icon-gui-prod-asset-tracking-outline.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-prod-asset-tracking-outline.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiProdAssetTrackingOutline = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" d=\"m13.32 20.397.558.5zm-2.64 0-.558.5zm7.807-10.167c0 .644-.2 1.42-.571 2.292-.369.865-.888 1.779-1.482 2.685-1.189 1.813-2.64 3.538-3.672 4.69l1.116 1c1.056-1.176 2.563-2.964 3.81-4.867.624-.952 1.193-1.947 1.608-2.92.411-.965.69-1.953.69-2.88zM12 3.743a6.487 6.487 0 0 1 6.487 6.487h1.5A7.987 7.987 0 0 0 12 2.243zM5.513 10.23A6.487 6.487 0 0 1 12 3.743v-1.5a7.987 7.987 0 0 0-7.987 7.987zm5.726 9.666c-1.033-1.151-2.484-2.876-3.673-4.689-.594-.906-1.113-1.82-1.482-2.685-.371-.871-.57-1.648-.57-2.292h-1.5c0 .927.279 1.915.69 2.88.415.973.984 1.968 1.608 2.92 1.248 1.903 2.755 3.691 3.81 4.868zm1.523 0a1.01 1.01 0 0 1-1.524 0l-1.116 1.002a2.51 2.51 0 0 0 3.756 0zm1.383-9.666c0 1.185-.96 2.145-2.145 2.145v1.5a3.645 3.645 0 0 0 3.645-3.645zM12 8.085c1.185 0 2.145.96 2.145 2.145h1.5A3.645 3.645 0 0 0 12 6.585zM9.855 10.23c0-1.184.96-2.145 2.145-2.145v-1.5a3.645 3.645 0 0 0-3.645 3.645zM12 12.375a2.145 2.145 0 0 1-2.145-2.145h-1.5A3.645 3.645 0 0 0 12 13.875z\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiProdAssetTrackingOutline);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiProdAssetTrackingOutline","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,gCAAkC,CAAC,CACvCC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,EAAE,08BAClS,MAAMC,WAAahB,WAAWC,gCAC9B,gBAAee,UAAW"}

package/core/Icon/components/icon-gui-prod-asset-tracking-solid.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconGuiProdAssetTrackingSolid=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M4.013 10.23a7.987 7.987 0 0 1 15.974 0c0 .927-.28 1.915-.691 2.88-.415.973-.984 1.968-1.608 2.92-1.247 1.903-2.754 3.691-3.81 4.868a2.51 2.51 0 0 1-3.756 0c-1.055-1.177-2.562-2.965-3.81-4.868-.624-.952-1.193-1.947-1.608-2.92-.411-.965-.69-1.953-.69-2.88m4.342 0a3.645 3.645 0 1 1 7.29 0 3.645 3.645 0 0 1-7.29 0",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconGuiProdAssetTrackingSolid);export default ForwardRef;
-//# sourceMappingURL=icon-gui-prod-asset-tracking-solid.js.map

package/core/Icon/components/icon-gui-prod-asset-tracking-solid.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-prod-asset-tracking-solid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiProdAssetTrackingSolid = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"none\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" fillRule=\"evenodd\" d=\"M4.013 10.23a7.987 7.987 0 0 1 15.974 0c0 .927-.28 1.915-.691 2.88-.415.973-.984 1.968-1.608 2.92-1.247 1.903-2.754 3.691-3.81 4.868a2.51 2.51 0 0 1-3.756 0c-1.055-1.177-2.562-2.965-3.81-4.868-.624-.952-1.193-1.947-1.608-2.92-.411-.965-.69-1.953-.69-2.88m4.342 0a3.645 3.645 0 1 1 7.29 0 3.645 3.645 0 0 1-7.29 0\" clipRule=\"evenodd\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiProdAssetTrackingSolid);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiProdAssetTrackingSolid","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","fillRule","d","clipRule","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,8BAAgC,CAAC,CACrCC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,OAAOC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,SAAS,UAAUC,EAAE,2TAA2TC,SAAS,aACznB,MAAMC,WAAalB,WAAWC,8BAC9B,gBAAeiB,UAAW"}

package/core/Icon/components/icon-product-asset-tracking-mono.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconProductAssetTrackingMono=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:128,height:128,fill:"none",viewBox:"0 0 128 128",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{fill:"currentColor",d:"m72.208 116.222-1.861-1.669zm-16.416 0-1.86 1.669zM106.5 53c0 4.412-1.355 9.548-3.723 15.103-2.358 5.532-5.658 11.333-9.396 17.034-7.477 11.404-16.582 22.22-23.034 29.416l3.722 3.338c6.528-7.28 15.82-18.308 23.493-30.013 3.838-5.852 7.302-11.922 9.814-17.814 2.502-5.868 4.124-11.71 4.124-17.064zM64 10.5c23.472 0 42.5 19.028 42.5 42.5h5c0-26.233-21.266-47.5-47.5-47.5zM21.5 53c0-23.472 19.028-42.5 42.5-42.5v-5C37.767 5.5 16.5 26.767 16.5 53zm36.154 61.553c-6.453-7.196-15.558-18.012-23.035-29.416-3.738-5.701-7.038-11.502-9.396-17.034C22.855 62.548 21.5 57.413 21.5 53h-5c0 5.355 1.622 11.196 4.124 17.064 2.512 5.892 5.976 11.962 9.814 17.815 7.674 11.704 16.965 22.732 23.493 30.012zm12.693 0c-3.442 3.837-9.252 3.837-12.693 0l-3.723 3.338c5.429 6.053 14.71 6.053 20.138 0zM79.5 53c0 8.56-6.94 15.5-15.5 15.5v5c11.322 0 20.5-9.178 20.5-20.5zM64 37.5c8.56 0 15.5 6.94 15.5 15.5h5c0-11.322-9.178-20.5-20.5-20.5zM48.5 53c0-8.56 6.94-15.5 15.5-15.5v-5c-11.322 0-20.5 9.178-20.5 20.5zM64 68.5c-8.56 0-15.5-6.94-15.5-15.5h-5c0 11.322 9.178 20.5 20.5 20.5z"}));const ForwardRef=forwardRef(IconProductAssetTrackingMono);export default ForwardRef;
-//# sourceMappingURL=icon-product-asset-tracking-mono.js.map

package/core/Icon/components/icon-product-asset-tracking-mono.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-product-asset-tracking-mono.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconProductAssetTrackingMono = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={128} height={128} fill=\"none\" viewBox=\"0 0 128 128\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path fill=\"currentColor\" d=\"m72.208 116.222-1.861-1.669zm-16.416 0-1.86 1.669zM106.5 53c0 4.412-1.355 9.548-3.723 15.103-2.358 5.532-5.658 11.333-9.396 17.034-7.477 11.404-16.582 22.22-23.034 29.416l3.722 3.338c6.528-7.28 15.82-18.308 23.493-30.013 3.838-5.852 7.302-11.922 9.814-17.814 2.502-5.868 4.124-11.71 4.124-17.064zM64 10.5c23.472 0 42.5 19.028 42.5 42.5h5c0-26.233-21.266-47.5-47.5-47.5zM21.5 53c0-23.472 19.028-42.5 42.5-42.5v-5C37.767 5.5 16.5 26.767 16.5 53zm36.154 61.553c-6.453-7.196-15.558-18.012-23.035-29.416-3.738-5.701-7.038-11.502-9.396-17.034C22.855 62.548 21.5 57.413 21.5 53h-5c0 5.355 1.622 11.196 4.124 17.064 2.512 5.892 5.976 11.962 9.814 17.815 7.674 11.704 16.965 22.732 23.493 30.012zm12.693 0c-3.442 3.837-9.252 3.837-12.693 0l-3.723 3.338c5.429 6.053 14.71 6.053 20.138 0zM79.5 53c0 8.56-6.94 15.5-15.5 15.5v5c11.322 0 20.5-9.178 20.5-20.5zM64 37.5c8.56 0 15.5 6.94 15.5 15.5h5c0-11.322-9.178-20.5-20.5-20.5zM48.5 53c0-8.56 6.94-15.5 15.5-15.5v-5c-11.322 0-20.5 9.178-20.5 20.5zM64 68.5c-8.56 0-15.5-6.94-15.5-15.5h-5c0 11.322 9.178 20.5 20.5 20.5z\" /></svg>;\nconst ForwardRef = forwardRef(IconProductAssetTrackingMono);\nexport default ForwardRef;"],"names":["React","forwardRef","IconProductAssetTrackingMono","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,6BAA+B,CAAC,CACpCC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,IAAKC,OAAQ,IAAKC,KAAK,OAAOC,QAAQ,cAAcN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKJ,KAAK,eAAeK,EAAE,miCACtS,MAAMC,WAAahB,WAAWC,6BAC9B,gBAAee,UAAW"}

package/core/Icon/components/icon-product-asset-tracking.js

@@ -1,2 +0,0 @@
-import*as React from"react";import{forwardRef}from"react";const IconProductAssetTracking=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:128,height:128,fill:"none",viewBox:"0 0 128 128",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("defs",null,React.createElement("linearGradient",{id:"paint0_linear_3807_424",x1:64,x2:64,y1:26.421,y2:111.391,gradientUnits:"userSpaceOnUse"},React.createElement("stop",{stopColor:"#FF5416"}),React.createElement("stop",{offset:1,stopColor:"#FF2739"}))),React.createElement("path",{fill:"url(#paint0_linear_3807_424)",fillRule:"evenodd",d:"M72.208 116.222C85.188 101.747 109 72.533 109 53c0-24.853-20.147-45-45-45S19 28.147 19 53c0 19.533 23.811 48.747 36.792 63.222 4.435 4.945 11.98 4.945 16.416 0M64 71c9.941 0 18-8.059 18-18s-8.059-18-18-18-18 8.059-18 18 8.059 18 18 18",clipRule:"evenodd"}));const ForwardRef=forwardRef(IconProductAssetTracking);export default ForwardRef;
-//# sourceMappingURL=icon-product-asset-tracking.js.map

package/core/Icon/components/icon-product-asset-tracking.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/core/Icon/components/icon-product-asset-tracking.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconProductAssetTracking = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={128} height={128} fill=\"none\" viewBox=\"0 0 128 128\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs><linearGradient id=\"paint0_linear_3807_424\" x1={64} x2={64} y1={26.421} y2={111.391} gradientUnits=\"userSpaceOnUse\"><stop stopColor=\"#FF5416\" /><stop offset={1} stopColor=\"#FF2739\" /></linearGradient></defs><path fill=\"url(#paint0_linear_3807_424)\" fillRule=\"evenodd\" d=\"M72.208 116.222C85.188 101.747 109 72.533 109 53c0-24.853-20.147-45-45-45S19 28.147 19 53c0 19.533 23.811 48.747 36.792 63.222 4.435 4.945 11.98 4.945 16.416 0M64 71c9.941 0 18-8.059 18-18s-8.059-18-18-18-18 8.059-18 18 8.059 18 18 18\" clipRule=\"evenodd\" /></svg>;\nconst ForwardRef = forwardRef(IconProductAssetTracking);\nexport default ForwardRef;"],"names":["React","forwardRef","IconProductAssetTracking","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","defs","linearGradient","x1","x2","y1","y2","gradientUnits","stop","stopColor","offset","path","fillRule","d","clipRule","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,yBAA2B,CAAC,CAChCC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,IAAKC,OAAQ,IAAKC,KAAK,OAAOC,QAAQ,cAAcN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,YAAK,oBAACC,kBAAeF,GAAG,yBAAyBG,GAAI,GAAIC,GAAI,GAAIC,GAAI,OAAQC,GAAI,QAASC,cAAc,kBAAiB,oBAACC,QAAKC,UAAU,YAAY,oBAACD,QAAKE,OAAQ,EAAGD,UAAU,cAAoC,oBAACE,QAAKd,KAAK,+BAA+Be,SAAS,UAAUC,EAAE,6OAA6OC,SAAS,aACpxB,MAAMC,WAAa5B,WAAWC,yBAC9B,gBAAe2B,UAAW"}