@ably/ui 17.4.2 → 17.5.0-dev.01e191e7

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  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  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        <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      <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","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,SAAS,CACS,IAClB,GAAI,CAACL,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAME,gBAAkBH,cAAgBN,sBAExC,OACE,oBAACU,QAAKF,UAAU,gCACbJ,YACC,oBAACM,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,gBAKH,oBAACC,QACCF,UAAWT,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,QAIH,oBAACJ,QACCF,UAAWT,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BI,WAEFG,MAAO,CAAEC,SAAUN,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  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  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        <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      <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","className","dynamicFontSize","span","style","fontSize","padding","letterSpacing","undefined"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,sBAAwB,EAC9B,MAAMC,4BAA8B,IAEpC,MAAMC,aAAe,CAAC,CACpBC,KAAK,CACLC,WAAW,CACXC,QAAQ,CACRC,aAAa,CACbC,SAAS,CACTC,SAAS,CACS,IAClB,GAAI,CAACL,OAAS,CAACI,UAAW,CACxB,OAAO,IACT,CAEA,MAAME,gBAAkBH,cAAgBN,sBAExC,oBACE,oBAACU,QAAKF,UAAU,gCACbJ,yBACC,oBAACM,QAAKF,UAAU,sBACd,oBAACE,QACCF,UAAU,sIACVG,MAAO,CACLC,SAAUH,gBAAkB,GAC5BI,QAAS,CAAC,EAAEJ,gBAAkB,IAAK,GAAG,EAAEA,gBAAkB,GAAI,EAAE,CAAC,AACnE,GACD,6BAKH,oBAACC,QACCF,UAAWT,GACT,oDACA,CAAE,yCAA0CM,QAAS,EACrD,CAAE,yCAA0C,CAACA,QAAS,GAExDM,MAAO,CACLC,SAAUH,gBACVK,cAAe,QACjB,GACD,qBAIH,oBAACJ,QACCF,UAAWT,GACT,6BACA,CACE,0CACEM,WAAa,MAAQ,CAACD,WAC1B,EACA,CACE,oIACEC,WAAa,OAAS,CAACD,WAC3B,EACA,CACE,0CACEC,WAAaU,WAAa,CAACX,WAC/B,EACA,CACE,yCAA0CA,WAC5C,EACA,CAAE,YAAa,CAACA,WAAY,EAC5BI,WAEFG,MAAO,CAAEC,SAAUN,cAAgBL,2BAA4B,GAE9DE,OAIT,CAEA,gBAAeD,YAAa"}

package/core/ProductTile.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-3 rounded-lg gap-2":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-2 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import cn from"./utils/cn";import LinkButton from"./LinkButton";import{products}from"./ProductTile/data";import ProductIcon from"./ProductTile/ProductIcon";import ProductLabel from"./ProductTile/ProductLabel";import ProductDescription from"./ProductTile/ProductDescription";const CONTAINER_GAP_RATIO=3;const ProductTile=({name,selected,currentPage,className,onClick,showDescription=true,showLabel=true,size="40px",animateIcons=false,descriptionClassName,labelClassName})=>{const{icon,hoverIcon,label,description,link,unavailable}=products[name]??{};const numericalSize=parseInt(size,10);const containerPresent=showDescription||showLabel;return /*#__PURE__*/React.createElement("div",{className:cn("transition-colors group/product-tile",{"flex flex-col p-3 rounded-lg gap-2":containerPresent},{"bg-neutral-1300 dark:bg-neutral-000":selected},{"bg-neutral-000 dark:bg-neutral-1300":!selected},{"hover:bg-neutral-100 dark:hover:bg-neutral-1200":selected===false&&!unavailable},{"cursor-pointer":selected!==undefined&&!unavailable},{"pointer-events-none":unavailable},{[`${className}`]:className}),"aria-hidden":unavailable,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:cn("items-center",{flex:containerPresent},{"inline-flex":!containerPresent}),style:{gap:containerPresent?numericalSize/CONTAINER_GAP_RATIO:0}},/*#__PURE__*/React.createElement(ProductIcon,{size:numericalSize,name:icon,hoverName:animateIcons?hoverIcon:undefined,selected:selected,unavailable:!!unavailable}),/*#__PURE__*/React.createElement(ProductLabel,{label:label,selected:selected,unavailable:!!unavailable,numericalSize:numericalSize,showLabel:showLabel,className:labelClassName})),/*#__PURE__*/React.createElement(ProductDescription,{description:description,selected:selected,unavailable:!!unavailable,showDescription:showDescription,className:descriptionClassName}),selected&&link?/*#__PURE__*/React.createElement(LinkButton,{variant:"secondary",size:"xs",className:"mt-2 !text-neutral-000 dark:!text-neutral-1300",rightIcon:"icon-gui-arrow-right-micro",iconColor:"text-orange-600",href:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
 //# sourceMappingURL=ProductTile.js.map

package/core/ProductTile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n  /**\n   * The name of the product.\n   */\n  name: ProductName;\n\n  /**\n   * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n   * @default false\n   */\n  currentPage?: boolean;\n\n  /**\n   * Additional CSS class names to apply to the product tile outer container.\n   */\n  className?: string;\n\n  /**\n   * Additional CSS class names to apply to the product description container.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Additional CSS class names to apply to the product name / label container.\n   */\n  labelClassName?: string;\n\n  /**\n   * Callback function to handle click events on the product tile.\n   */\n  onClick?: () => void;\n\n  /**\n   * Indicates if the product description should be shown.\n   * @default true\n   */\n  showDescription?: boolean;\n\n  /**\n   * Indicates if the product label should be shown.\n   * @default true\n   */\n  showLabel?: boolean;\n\n  /**\n   * The size of the product icon.\n   * @default \"40px\"\n   */\n  size?: IconSize;\n\n  /**\n   * Indicates if the product icons should be animated.\n   * @default false\n   */\n  animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n  name,\n  selected,\n  currentPage,\n  className,\n  onClick,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n  descriptionClassName,\n  labelClassName,\n}: ProductTileProps) => {\n  const { icon, hoverIcon, label, description, link, unavailable } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n  const containerPresent = showDescription || showLabel;\n\n  return (\n    <div\n      className={cn(\n        \"transition-colors group/product-tile\",\n        { \"flex flex-col p-3 rounded-lg gap-2\": containerPresent },\n        { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n        {\n          \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n        },\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n            selected === false && !unavailable,\n        },\n        { \"cursor-pointer\": selected !== undefined && !unavailable },\n        { \"pointer-events-none\": unavailable },\n        { [`${className}`]: className },\n      )}\n      aria-hidden={unavailable}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          \"items-center\",\n          { flex: containerPresent },\n          { \"inline-flex\": !containerPresent },\n        )}\n        style={{\n          gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          selected={selected}\n          unavailable={!!unavailable}\n        />\n        <ProductLabel\n          label={label}\n          selected={selected}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n          className={labelClassName}\n        />\n      </div>\n      <ProductDescription\n        description={description}\n        selected={selected}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n        className={descriptionClassName}\n      />\n      {selected && link ? (\n        <LinkButton\n          variant=\"secondary\"\n          size=\"xs\"\n          className=\"mt-2 !text-neutral-000 dark:!text-neutral-1300\"\n          rightIcon=\"icon-gui-arrow-right-micro\"\n          iconColor=\"text-orange-600\"\n          href={link}\n        >\n          {currentPage ? \"View docs\" : \"Explore\"}\n        </LinkButton>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,OACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,qCAAsC2B,gBAAiB,EACzD,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,SAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,cAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,KACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}
+{"version":3,"sources":["../../src/core/ProductTile.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\nimport LinkButton from \"./LinkButton\";\nimport { ProductName, products } from \"./ProductTile/data\";\nimport ProductIcon from \"./ProductTile/ProductIcon\";\nimport ProductLabel from \"./ProductTile/ProductLabel\";\nimport ProductDescription from \"./ProductTile/ProductDescription\";\n\n/**\n * Props for the ProductTile component.\n */\nexport type ProductTileProps = {\n  /**\n   * The name of the product.\n   */\n  name: ProductName;\n\n  /**\n   * Indicates if the product tile is selected. If `undefined`, the product tile is not selectable.\n   * @default false\n   */\n  selected?: boolean;\n\n  /**\n   * Indicates if the product tile is on the \"current\" page. Changes CTA copy.\n   * @default false\n   */\n  currentPage?: boolean;\n\n  /**\n   * Additional CSS class names to apply to the product tile outer container.\n   */\n  className?: string;\n\n  /**\n   * Additional CSS class names to apply to the product description container.\n   */\n  descriptionClassName?: string;\n\n  /**\n   * Additional CSS class names to apply to the product name / label container.\n   */\n  labelClassName?: string;\n\n  /**\n   * Callback function to handle click events on the product tile.\n   */\n  onClick?: () => void;\n\n  /**\n   * Indicates if the product description should be shown.\n   * @default true\n   */\n  showDescription?: boolean;\n\n  /**\n   * Indicates if the product label should be shown.\n   * @default true\n   */\n  showLabel?: boolean;\n\n  /**\n   * The size of the product icon.\n   * @default \"40px\"\n   */\n  size?: IconSize;\n\n  /**\n   * Indicates if the product icons should be animated.\n   * @default false\n   */\n  animateIcons?: boolean;\n};\n\nconst CONTAINER_GAP_RATIO = 3;\n\nconst ProductTile = ({\n  name,\n  selected,\n  currentPage,\n  className,\n  onClick,\n  showDescription = true,\n  showLabel = true,\n  size = \"40px\",\n  animateIcons = false,\n  descriptionClassName,\n  labelClassName,\n}: ProductTileProps) => {\n  const { icon, hoverIcon, label, description, link, unavailable } =\n    products[name] ?? {};\n  const numericalSize = parseInt(size, 10);\n  const containerPresent = showDescription || showLabel;\n\n  return (\n    <div\n      className={cn(\n        \"transition-colors group/product-tile\",\n        { \"flex flex-col p-3 rounded-lg gap-2\": containerPresent },\n        { \"bg-neutral-1300 dark:bg-neutral-000\": selected },\n        {\n          \"bg-neutral-000 dark:bg-neutral-1300\": !selected,\n        },\n        {\n          \"hover:bg-neutral-100 dark:hover:bg-neutral-1200\":\n            selected === false && !unavailable,\n        },\n        { \"cursor-pointer\": selected !== undefined && !unavailable },\n        { \"pointer-events-none\": unavailable },\n        { [`${className}`]: className },\n      )}\n      aria-hidden={unavailable}\n      onClick={onClick}\n    >\n      <div\n        className={cn(\n          \"items-center\",\n          { flex: containerPresent },\n          { \"inline-flex\": !containerPresent },\n        )}\n        style={{\n          gap: containerPresent ? numericalSize / CONTAINER_GAP_RATIO : 0,\n        }}\n      >\n        <ProductIcon\n          size={numericalSize}\n          name={icon}\n          hoverName={animateIcons ? hoverIcon : undefined}\n          selected={selected}\n          unavailable={!!unavailable}\n        />\n        <ProductLabel\n          label={label}\n          selected={selected}\n          unavailable={!!unavailable}\n          numericalSize={numericalSize}\n          showLabel={showLabel}\n          className={labelClassName}\n        />\n      </div>\n      <ProductDescription\n        description={description}\n        selected={selected}\n        unavailable={!!unavailable}\n        showDescription={showDescription}\n        className={descriptionClassName}\n      />\n      {selected && link ? (\n        <LinkButton\n          variant=\"secondary\"\n          size=\"xs\"\n          className=\"mt-2 !text-neutral-000 dark:!text-neutral-1300\"\n          rightIcon=\"icon-gui-arrow-right-micro\"\n          iconColor=\"text-orange-600\"\n          href={link}\n        >\n          {currentPage ? \"View docs\" : \"Explore\"}\n        </LinkButton>\n      ) : null}\n    </div>\n  );\n};\n\nexport default ProductTile;\n"],"names":["React","cn","LinkButton","products","ProductIcon","ProductLabel","ProductDescription","CONTAINER_GAP_RATIO","ProductTile","name","selected","currentPage","className","onClick","showDescription","showLabel","size","animateIcons","descriptionClassName","labelClassName","icon","hoverIcon","label","description","link","unavailable","numericalSize","parseInt","containerPresent","div","undefined","aria-hidden","flex","style","gap","hoverName","variant","rightIcon","iconColor","href"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAE5B,QAAOC,eAAgB,cAAe,AACtC,QAAsBC,QAAQ,KAAQ,oBAAqB,AAC3D,QAAOC,gBAAiB,2BAA4B,AACpD,QAAOC,iBAAkB,4BAA6B,AACtD,QAAOC,uBAAwB,kCAAmC,CAoElE,MAAMC,oBAAsB,EAE5B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,QAAQ,CACRC,WAAW,CACXC,SAAS,CACTC,OAAO,CACPC,gBAAkB,IAAI,CACtBC,UAAY,IAAI,CAChBC,KAAO,MAAM,CACbC,aAAe,KAAK,CACpBC,oBAAoB,CACpBC,cAAc,CACG,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DtB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMiB,cAAgBC,SAASX,KAAM,IACrC,MAAMY,iBAAmBd,iBAAmBC,UAE5C,oBACE,oBAACc,OACCjB,UAAWX,GACT,uCACA,CAAE,qCAAsC2B,gBAAiB,EACzD,CAAE,sCAAuClB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACe,WAC3B,EACA,CAAE,iBAAkBf,WAAaoB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEb,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCmB,cAAaN,YACbZ,QAASA,sBAET,oBAACgB,OACCjB,UAAWX,GACT,eACA,CAAE+B,KAAMJ,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCK,MAAO,CACLC,IAAKN,iBAAmBF,cAAgBnB,oBAAsB,CAChE,gBAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNe,UAAWlB,aAAeI,UAAYS,UACtCpB,SAAUA,SACVe,YAAa,CAAC,CAACA,2BAEjB,oBAACpB,cACCiB,MAAOA,MACPZ,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfX,UAAWA,UACXH,UAAWO,+BAGf,oBAACb,oBACCiB,YAAaA,YACbb,SAAUA,SACVe,YAAa,CAAC,CAACA,YACfX,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYc,kBACX,oBAACtB,YACCkC,QAAQ,YACRpB,KAAK,KACLJ,UAAU,iDACVyB,UAAU,6BACVC,UAAU,kBACVC,KAAMf,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}

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"}),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"}))};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 /*#__PURE__*/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&&/*#__PURE__*/React.createElement(Icon,{name:leftIcon,size:iconSizes[size],"aria-hidden":"true"}),children&&/*#__PURE__*/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&&/*#__PURE__*/React.createElement(Icon,{name:rightIcon,size:iconSizes[size],"aria-hidden":"true"}))};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\";\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 name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" />\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 name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" />\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","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAiB1B,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,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE1D3B,UACC,oBAAC4B,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,WACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,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\";\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 name={leftIcon} size={iconSizes[size]} aria-hidden=\"true\" />\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 name={rightIcon} size={iconSizes[size]} aria-hidden=\"true\" />\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","span"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,AACjD,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,CAiB1B,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,oBACE,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,uBACC,oBAACJ,MAAKmC,KAAM/B,SAAUI,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAE1D3B,uBACC,oBAAC4B,QACCnC,UAAWH,GACT,kCACAkB,kBAAkB,CAACV,QAAQ,CAACiB,UAAU,CACtCb,UACE,wHAGHF,UAGJJ,wBACC,oBAACL,MAAKmC,KAAM9B,UAAWG,KAAMe,SAAS,CAACf,KAAK,CAAE4B,cAAY,SAIlE,CAEA,gBAAenC,gBAAiB"}

package/core/Slider.js

@@ -1,2 +1,2 @@
-import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-1 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-10"},React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
+import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SLIDE_TRANSITION_LENGTH=300;const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return /*#__PURE__*/React.createElement("ul",{className:`flex gap-1 left-1/2 ${isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?/*#__PURE__*/React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&/*#__PURE__*/React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):/*#__PURE__*/React.createElement("li",{key:i},/*#__PURE__*/React.createElement("span",{className:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},"⬤"))))};const setupSlides=(children,activeIndex)=>[children[activeIndex===0?children.length-1:activeIndex-1],children[activeIndex],children[activeIndex===children.length-1?0:activeIndex+1]];const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const[slides,setSlides]=useState(setupSlides(children,activeIndex));const[translationCoefficient,setTranslationCoefficient]=useState(0);const timerRef=useRef(null);const[slideLock,setSlideLock]=useState(false);const isInline=options?.controlPosition==="inline";const next=()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);resetInterval();setSlideLock(true)}};const prev=()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);resetInterval();setSlideLock(true)}};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(next,options?.interval??1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex]);return /*#__PURE__*/React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},/*#__PURE__*/React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-10"},/*#__PURE__*/React.createElement("div",{className:`flex items-center ${translationCoefficient!==0?`transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`:""} `,style:{transform:`translateX(-${(translationCoefficient+1)*100}%)`}},slides.map((child,index)=>/*#__PURE__*/React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),/*#__PURE__*/React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between"}`},/*#__PURE__*/React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`,onClick:prev},/*#__PURE__*/React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},/*#__PURE__*/React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),/*#__PURE__*/React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:options?.interval??1e4,intervalIndicator:options?.intervalIndicator,isInline:isInline}),/*#__PURE__*/React.createElement("button",{className:`${isInline?"w-8 h-8":"hidden sm:flex w-12 h-12"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},/*#__PURE__*/React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},/*#__PURE__*/React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),/*#__PURE__*/React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
 //# sourceMappingURL=Slider.js.map

package/core/Slider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  TouchEvent,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n  children: ReactNode[];\n  options?: {\n    interval?: number;\n    controlPosition?: \"inline\" | \"floating\";\n    intervalIndicator?: boolean;\n  };\n}\n\ninterface SliderIndicatorProps {\n  numSlides: number;\n  activeIndex: number;\n  interval: number;\n  intervalIndicator?: boolean;\n  isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n  numSlides,\n  activeIndex,\n  interval,\n  intervalIndicator,\n  isInline,\n}: SliderIndicatorProps) => {\n  return (\n    <ul\n      className={`flex gap-1 left-1/2 ${\n        isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n      }`}\n    >\n      {Array.from({ length: numSlides }, (_, i) =>\n        intervalIndicator ? (\n          <li\n            key={i}\n            className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n          >\n            {i === activeIndex && (\n              <span\n                className=\"absolute inset-0 rounded-full bg-active-orange\"\n                style={{\n                  animation: `fillAnimation ${interval}ms linear`,\n                }}\n              ></span>\n            )}\n          </li>\n        ) : (\n          <li key={i}>\n            <span\n              className={`ui-slider-marker ${\n                i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n              }`}\n              data-id=\"slider-marker\"\n            >\n              &#x2b24;\n            </span>\n          </li>\n        ),\n      )}\n    </ul>\n  );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n  children[activeIndex],\n  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [slides, setSlides] = useState<ReactNode[]>(\n    setupSlides(children, activeIndex),\n  );\n  const [translationCoefficient, setTranslationCoefficient] = useState(0);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const [slideLock, setSlideLock] = useState(false);\n\n  const isInline = options?.controlPosition === \"inline\";\n\n  const next = () => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n      setTranslationCoefficient(1);\n      resetInterval();\n      setSlideLock(true);\n    }\n  };\n\n  const prev = () => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) =>\n        prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n      );\n      setTranslationCoefficient(-1);\n      resetInterval();\n      setSlideLock(true);\n    }\n  };\n\n  const resetInterval = () => {\n    if (timerRef.current) clearInterval(timerRef.current);\n    timerRef.current = setInterval(next, options?.interval ?? 10000);\n  };\n\n  const handleTouchStart = (e: TouchEvent) => {\n    setTouchStartX(e.touches[0].clientX);\n  };\n\n  const handleTouchMove = (e: TouchEvent) => {\n    setTouchEndX(e.touches[0].clientX);\n  };\n\n  const handleTouchEnd = () => {\n    if (touchStartX - touchEndX > 50) {\n      next();\n    }\n    if (touchStartX - touchEndX < -50) {\n      prev();\n    }\n  };\n\n  useEffect(() => {\n    resetInterval();\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, [children.length, options?.interval]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setSlides(setupSlides(children, activeIndex));\n      setTranslationCoefficient(0);\n      setSlideLock(false);\n    }, SLIDE_TRANSITION_LENGTH);\n  }, [activeIndex]);\n\n  return (\n    <div\n      className=\"relative\"\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n    >\n      <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n        <div\n          className={`flex items-center ${\n            translationCoefficient !== 0\n              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n              : \"\"\n          } `}\n          style={{\n            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n          }}\n        >\n          {slides.map((child, index) => (\n            <div\n              key={index}\n              className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        className={`flex items-center pointer-events-none ${\n          isInline\n            ? \"ui-standard-container justify-center gap-6 -mt-4\"\n            : \"sm:flex sm:absolute inset-0 justify-between\"\n        }`}\n      >\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n          onClick={prev}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n\n        <SlideIndicator\n          numSlides={children.length}\n          activeIndex={activeIndex}\n          interval={options?.interval ?? 10000}\n          intervalIndicator={options?.intervalIndicator}\n          isInline={isInline}\n        />\n\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n          onClick={next}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","next","prevIndex","resetInterval","prev","current","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, {\n  useState,\n  useEffect,\n  useRef,\n  ReactNode,\n  TouchEvent,\n} from \"react\";\nimport Icon from \"./Icon\";\n\ninterface SliderProps {\n  children: ReactNode[];\n  options?: {\n    interval?: number;\n    controlPosition?: \"inline\" | \"floating\";\n    intervalIndicator?: boolean;\n  };\n}\n\ninterface SliderIndicatorProps {\n  numSlides: number;\n  activeIndex: number;\n  interval: number;\n  intervalIndicator?: boolean;\n  isInline?: boolean;\n}\n\nconst SLIDE_TRANSITION_LENGTH = 300;\n\nconst SlideIndicator = ({\n  numSlides,\n  activeIndex,\n  interval,\n  intervalIndicator,\n  isInline,\n}: SliderIndicatorProps) => {\n  return (\n    <ul\n      className={`flex gap-1 left-1/2 ${\n        isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\"\n      }`}\n    >\n      {Array.from({ length: numSlides }, (_, i) =>\n        intervalIndicator ? (\n          <li\n            key={i}\n            className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n          >\n            {i === activeIndex && (\n              <span\n                className=\"absolute inset-0 rounded-full bg-active-orange\"\n                style={{\n                  animation: `fillAnimation ${interval}ms linear`,\n                }}\n              ></span>\n            )}\n          </li>\n        ) : (\n          <li key={i}>\n            <span\n              className={`ui-slider-marker ${\n                i === activeIndex ? \"text-active-orange\" : \"text-cool-black\"\n              }`}\n              data-id=\"slider-marker\"\n            >\n              &#x2b24;\n            </span>\n          </li>\n        ),\n      )}\n    </ul>\n  );\n};\n\nconst setupSlides = (children: ReactNode[], activeIndex: number) => [\n  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],\n  children[activeIndex],\n  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],\n];\n\nconst Slider = ({ children, options }: SliderProps) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [slides, setSlides] = useState<ReactNode[]>(\n    setupSlides(children, activeIndex),\n  );\n  const [translationCoefficient, setTranslationCoefficient] = useState(0);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n  const [slideLock, setSlideLock] = useState(false);\n\n  const isInline = options?.controlPosition === \"inline\";\n\n  const next = () => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n      setTranslationCoefficient(1);\n      resetInterval();\n      setSlideLock(true);\n    }\n  };\n\n  const prev = () => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) =>\n        prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n      );\n      setTranslationCoefficient(-1);\n      resetInterval();\n      setSlideLock(true);\n    }\n  };\n\n  const resetInterval = () => {\n    if (timerRef.current) clearInterval(timerRef.current);\n    timerRef.current = setInterval(next, options?.interval ?? 10000);\n  };\n\n  const handleTouchStart = (e: TouchEvent) => {\n    setTouchStartX(e.touches[0].clientX);\n  };\n\n  const handleTouchMove = (e: TouchEvent) => {\n    setTouchEndX(e.touches[0].clientX);\n  };\n\n  const handleTouchEnd = () => {\n    if (touchStartX - touchEndX > 50) {\n      next();\n    }\n    if (touchStartX - touchEndX < -50) {\n      prev();\n    }\n  };\n\n  useEffect(() => {\n    resetInterval();\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, [children.length, options?.interval]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setSlides(setupSlides(children, activeIndex));\n      setTranslationCoefficient(0);\n      setSlideLock(false);\n    }, SLIDE_TRANSITION_LENGTH);\n  }, [activeIndex]);\n\n  return (\n    <div\n      className=\"relative\"\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n    >\n      <div className=\"overflow-y-visible overflow-x-clip w-full py-10\">\n        <div\n          className={`flex items-center ${\n            translationCoefficient !== 0\n              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`\n              : \"\"\n          } `}\n          style={{\n            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,\n          }}\n        >\n          {slides.map((child, index) => (\n            <div\n              key={index}\n              className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n            >\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        className={`flex items-center pointer-events-none ${\n          isInline\n            ? \"ui-standard-container justify-center gap-6 -mt-4\"\n            : \"sm:flex sm:absolute inset-0 justify-between\"\n        }`}\n      >\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}\n          onClick={prev}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n\n        <SlideIndicator\n          numSlides={children.length}\n          activeIndex={activeIndex}\n          interval={options?.interval ?? 10000}\n          intervalIndicator={options?.intervalIndicator}\n          isInline={isInline}\n        />\n\n        <button\n          className={`${\n            isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\"\n          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}\n          onClick={next}\n        >\n          <div className=\"ui-icon-cta-holder flex w-12\">\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n            <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n              <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n            </div>\n          </div>\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["React","useState","useEffect","useRef","Icon","SLIDE_TRANSITION_LENGTH","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","setupSlides","children","Slider","options","setActiveIndex","touchStartX","setTouchStartX","touchEndX","setTouchEndX","slides","setSlides","translationCoefficient","setTranslationCoefficient","timerRef","slideLock","setSlideLock","controlPosition","next","prevIndex","resetInterval","prev","current","clearInterval","setInterval","handleTouchStart","e","touches","clientX","handleTouchMove","handleTouchEnd","setTimeout","div","onTouchStart","onTouchMove","onTouchEnd","transform","map","child","index","button","onClick","name","size"],"mappings":"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"}

package/core/Status.js

@@ -1,2 +1,2 @@
-import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-2 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-2",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
+import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return /*#__PURE__*/React.createElement("span",{className:cn("inline-flex h-2 aspect-square rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return /*#__PURE__*/React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-2",additionalCSS),target:"_blank",rel:"noreferrer"},/*#__PURE__*/React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&/*#__PURE__*/React.createElement("div",{className:"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},/*#__PURE__*/React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-arrow-top-right-on-square-outline",size:"16px"})))};export default Status;
 //# sourceMappingURL=Status.js.map

package/core/Status.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n  statusUrl: string;\n  additionalCSS?: string;\n  refreshInterval?: number;\n  showDescription?: boolean;\n};\n\nexport const statusTypes = [\n  \"none\",\n  \"operational\",\n  \"minor\",\n  \"major\",\n  \"critical\",\n  \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n  \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n  switch (indicator) {\n    case \"none\":\n    case \"operational\":\n      return \"bg-gui-success-green\";\n    case \"minor\":\n      return \"bg-yellow-500\";\n    case \"major\":\n      return \"bg-orange-500\";\n    case \"critical\":\n      return \"bg-gui-error-red\";\n    default:\n      return \"bg-neutral-500\";\n  }\n};\n\nexport const StatusIcon = ({\n  statusUrl,\n  refreshInterval = 1000 * 60,\n}: StatusProps) => {\n  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex h-2 aspect-square rounded-full\",\n        indicatorClass(data?.status?.indicator),\n        { \"animate-pulse\": isLoading || error },\n      )}\n    ></span>\n  );\n};\n\nconst Status = ({\n  statusUrl = StatusUrl,\n  additionalCSS,\n  refreshInterval = 1000 * 60,\n  showDescription = false,\n}: StatusProps) => {\n  const { data } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <a\n      href=\"https://status.ably.com\"\n      className={cn(\n        \"inline-flex group/status items-center gap-2\",\n        additionalCSS,\n      )}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n    >\n      <StatusIcon\n        statusUrl={statusUrl}\n        refreshInterval={refreshInterval ?? 1000 * 60}\n      />\n      {showDescription && data?.status?.description && (\n        <div className=\"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n          <span>\n            {data.status.description.charAt(0).toUpperCase() +\n              data.status.description.slice(1).toLowerCase()}\n          </span>\n          <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n        </div>\n      )}\n    </a>\n  );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,OACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,OACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,cAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,aAChC,oBAACC,OAAIV,UAAU,gLACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,IAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}
+{"version":3,"sources":["../../src/core/Status.tsx"],"sourcesContent":["import React from \"react\";\nimport useSWR from \"swr\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\n\ntype StatusProps = {\n  statusUrl: string;\n  additionalCSS?: string;\n  refreshInterval?: number;\n  showDescription?: boolean;\n};\n\nexport const statusTypes = [\n  \"none\",\n  \"operational\",\n  \"minor\",\n  \"major\",\n  \"critical\",\n  \"unknown\",\n] as const;\n\nexport type StatusType = (typeof statusTypes)[number];\n\nexport const StatusUrl =\n  \"https://ntqy1wz94gjv.statuspage.io/api/v2/status.json\";\n\n// Our SWR fetcher function\nconst fetcher = (url: string) => fetch(url).then((res) => res.json());\n\nconst indicatorClass = (indicator?: StatusType) => {\n  switch (indicator) {\n    case \"none\":\n    case \"operational\":\n      return \"bg-gui-success-green\";\n    case \"minor\":\n      return \"bg-yellow-500\";\n    case \"major\":\n      return \"bg-orange-500\";\n    case \"critical\":\n      return \"bg-gui-error-red\";\n    default:\n      return \"bg-neutral-500\";\n  }\n};\n\nexport const StatusIcon = ({\n  statusUrl,\n  refreshInterval = 1000 * 60,\n}: StatusProps) => {\n  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <span\n      className={cn(\n        \"inline-flex h-2 aspect-square rounded-full\",\n        indicatorClass(data?.status?.indicator),\n        { \"animate-pulse\": isLoading || error },\n      )}\n    ></span>\n  );\n};\n\nconst Status = ({\n  statusUrl = StatusUrl,\n  additionalCSS,\n  refreshInterval = 1000 * 60,\n  showDescription = false,\n}: StatusProps) => {\n  const { data } = useSWR(statusUrl, fetcher, {\n    refreshInterval,\n  });\n\n  return (\n    <a\n      href=\"https://status.ably.com\"\n      className={cn(\n        \"inline-flex group/status items-center gap-2\",\n        additionalCSS,\n      )}\n      target=\"_blank\"\n      rel=\"noreferrer\"\n    >\n      <StatusIcon\n        statusUrl={statusUrl}\n        refreshInterval={refreshInterval ?? 1000 * 60}\n      />\n      {showDescription && data?.status?.description && (\n        <div className=\"flex gap-2 ui-text-label4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors\">\n          <span>\n            {data.status.description.charAt(0).toUpperCase() +\n              data.status.description.slice(1).toLowerCase()}\n          </span>\n          <Icon name=\"icon-gui-arrow-top-right-on-square-outline\" size=\"16px\" />\n        </div>\n      )}\n    </a>\n  );\n};\n\nexport default Status;\n"],"names":["React","useSWR","cn","Icon","statusTypes","StatusUrl","fetcher","url","fetch","then","res","json","indicatorClass","indicator","StatusIcon","statusUrl","refreshInterval","data","error","isLoading","span","className","status","Status","additionalCSS","showDescription","a","href","target","rel","description","div","charAt","toUpperCase","slice","toLowerCase","name","size"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAY,KAAM,AACzB,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAS1B,QAAO,MAAMC,YAAc,CACzB,OACA,cACA,QACA,QACA,WACA,UACD,AAAU,AAIX,QAAO,MAAMC,UACX,uDAAwD,CAG1D,MAAMC,QAAU,AAACC,KAAgBC,MAAMD,KAAKE,IAAI,CAAC,AAACC,KAAQA,IAAIC,IAAI,IAElE,MAAMC,eAAiB,AAACC,YACtB,OAAQA,WACN,IAAK,OACL,IAAK,cACH,MAAO,sBACT,KAAK,QACH,MAAO,eACT,KAAK,QACH,MAAO,eACT,KAAK,WACH,MAAO,kBACT,SACE,MAAO,gBACX,CACF,CAEA,QAAO,MAAMC,WAAa,CAAC,CACzBC,SAAS,CACTC,gBAAkB,IAAO,EAAE,CACf,IACZ,KAAM,CAAEC,IAAI,CAAEC,KAAK,CAAEC,SAAS,CAAE,CAAGlB,OAAOc,UAAWT,QAAS,CAC5DU,eACF,GAEA,oBACE,oBAACI,QACCC,UAAWnB,GACT,6CACAU,eAAeK,MAAMK,QAAQT,WAC7B,CAAE,gBAAiBM,WAAaD,KAAM,IAI9C,CAAE,CAEF,MAAMK,OAAS,CAAC,CACdR,UAAYV,SAAS,CACrBmB,aAAa,CACbR,gBAAkB,IAAO,EAAE,CAC3BS,gBAAkB,KAAK,CACX,IACZ,KAAM,CAAER,IAAI,CAAE,CAAGhB,OAAOc,UAAWT,QAAS,CAC1CU,eACF,GAEA,oBACE,oBAACU,KACCC,KAAK,0BACLN,UAAWnB,GACT,8CACAsB,eAEFI,OAAO,SACPC,IAAI,2BAEJ,oBAACf,YACCC,UAAWA,UACXC,gBAAiBA,iBAAmB,IAAO,KAE5CS,iBAAmBR,MAAMK,QAAQQ,0BAChC,oBAACC,OAAIV,UAAU,6LACb,oBAACD,YACEH,KAAKK,MAAM,CAACQ,WAAW,CAACE,MAAM,CAAC,GAAGC,WAAW,GAC5ChB,KAAKK,MAAM,CAACQ,WAAW,CAACI,KAAK,CAAC,GAAGC,WAAW,iBAEhD,oBAAChC,MAAKiC,KAAK,6CAA6CC,KAAK,UAKvE,CAEA,gBAAed,MAAO"}

package/core/TabMenu.js

@@ -1,2 +1,2 @@
-import React,{useEffect}from"react";import*as Tabs from"@radix-ui/react-tabs";import throttle from"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};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"lodash.throttle";import cn from"./utils/cn";const DEFAULT_TAILWIND_ANIMATION_DURATION=150;const TabMenu=({tabs=[],contents=[],tabOnClick,tabClassName,rootClassName,contentClassName,options})=>{const{defaultTabIndex=0,underline=true,animated:animatedOption=true,flexibleTabWidth=false,flexibleTabHeight=false}=options??{};const listRef=React.useRef(null);const[animated,setAnimated]=React.useState(false);const[highlight,setHighlight]=React.useState({offset:0,width:0});useEffect(()=>{if(animatedOption&&highlight.width>0){setTimeout(()=>{setAnimated(true)},DEFAULT_TAILWIND_ANIMATION_DURATION)}},[animatedOption,highlight.width]);useEffect(()=>{const handleResize=throttle(()=>{const activeTabElement=listRef.current?.querySelector(`[data-state="active"]`);if(activeTabElement){updateHighlightDimensions(activeTabElement)}},100);handleResize();window.addEventListener("resize",handleResize);return()=>{window.removeEventListener("resize",handleResize)}},[]);const updateHighlightDimensions=element=>{const{left:parentLeft}=listRef.current?.getBoundingClientRect()??{};const{left,width}=element.getBoundingClientRect()??{};setHighlight({offset:(left??0)-(parentLeft??0),width:width??0})};const handleTabClick=(event,index)=>{tabOnClick?.(index);updateHighlightDimensions(event.currentTarget)};const tabTriggerContent=tab=>{if(!tab){return null}if(/*#__PURE__*/React.isValidElement(tab)||typeof tab==="string"){return tab}if(typeof tab==="object"&&"label"in tab){return tab.label}return null};return /*#__PURE__*/React.createElement(Tabs.Root,{defaultValue:`tab-${defaultTabIndex}`,className:cn({"h-full":flexibleTabHeight},rootClassName)},/*#__PURE__*/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&&/*#__PURE__*/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))),/*#__PURE__*/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)=>/*#__PURE__*/React.createElement(Tabs.Content,{key:`tab-${index}`,value:`tab-${index}`,className:contentClassName},content)))};export default TabMenu;
 //# sourceMappingURL=TabMenu.js.map

package/core/TabMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\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  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  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","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","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":"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"}
+{"version":3,"sources":["../../src/core/TabMenu.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\nimport * as Tabs from \"@radix-ui/react-tabs\";\nimport throttle from \"lodash.throttle\";\nimport cn from \"./utils/cn\";\n\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  useEffect(() => {\n    const handleResize = throttle(() => {\n      const activeTabElement =\n        listRef.current?.querySelector<HTMLButtonElement>(\n          `[data-state=\"active\"]`,\n        );\n\n      if (activeTabElement) {\n        updateHighlightDimensions(activeTabElement);\n      }\n    }, 100);\n\n    handleResize();\n\n    window.addEventListener(\"resize\", handleResize);\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, []);\n\n  const updateHighlightDimensions = (element: HTMLButtonElement) => {\n    const { left: parentLeft } = listRef.current?.getBoundingClientRect() ?? {};\n    const { left, width } = element.getBoundingClientRect() ?? {};\n\n    setHighlight({\n      offset: (left ?? 0) - (parentLeft ?? 0),\n      width: width ?? 0,\n    });\n  };\n\n  const handleTabClick = (\n    event: React.MouseEvent<HTMLButtonElement>,\n    index: number,\n  ) => {\n    tabOnClick?.(index);\n    updateHighlightDimensions(event.currentTarget as HTMLButtonElement);\n  };\n\n  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","handleResize","activeTabElement","current","querySelector","updateHighlightDimensions","window","addEventListener","removeEventListener","element","left","parentLeft","getBoundingClientRect","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":"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"}

package/core/Table/Table.js

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

package/core/Table/Table.js.map

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

package/core/Table/TableCell.js

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

package/core/Table/TableCell.js.map

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

package/core/Table/TableRow.js

@@ -1,2 +1,2 @@
-import React from"react";const CtaRow=({children})=>React.createElement("tr",null,React.createElement("td",{className:"hidden sm:block"}),children);const TableRow=({children,isHeader,...rest})=>React.createElement("tr",rest,isHeader&&React.createElement("td",{className:"bg-white"}),children);export{TableRow,CtaRow};
+import React from"react";const CtaRow=({children})=>/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"hidden sm:block"}),children);const TableRow=({children,isHeader,...rest})=>/*#__PURE__*/React.createElement("tr",rest,isHeader&&/*#__PURE__*/React.createElement("td",{className:"bg-white"}),children);export{TableRow,CtaRow};
 //# sourceMappingURL=TableRow.js.map

package/core/Table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Table/TableRow.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nconst CtaRow = ({ children }: PropsWithChildren) => (\n  <tr>\n    <td className=\"hidden sm:block\"></td>\n    {children}\n  </tr>\n);\n\ntype RowProps = {\n  isHeader?: boolean;\n} & React.HTMLAttributes<HTMLTableRowElement>;\n\nconst TableRow = ({\n  children,\n  isHeader,\n  ...rest\n}: PropsWithChildren<RowProps>) => (\n  <tr {...rest}>\n    {isHeader && <td className=\"bg-white\" />}\n    {children}\n  </tr>\n);\n\nexport { TableRow, CtaRow };\n"],"names":["React","CtaRow","children","tr","td","className","TableRow","isHeader","rest"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,CAEjD,MAAMC,OAAS,CAAC,CAAEC,QAAQ,CAAqB,GAC7C,oBAACC,UACC,oBAACC,MAAGC,UAAU,oBACbH,UAQL,MAAMI,SAAW,CAAC,CAChBJ,QAAQ,CACRK,QAAQ,CACR,GAAGC,KACyB,GAC5B,oBAACL,KAAOK,KACLD,UAAY,oBAACH,MAAGC,UAAU,aAC1BH,SAIL,QAASI,QAAQ,CAAEL,MAAM,CAAG"}
+{"version":3,"sources":["../../../src/core/Table/TableRow.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nconst CtaRow = ({ children }: PropsWithChildren) => (\n  <tr>\n    <td className=\"hidden sm:block\"></td>\n    {children}\n  </tr>\n);\n\ntype RowProps = {\n  isHeader?: boolean;\n} & React.HTMLAttributes<HTMLTableRowElement>;\n\nconst TableRow = ({\n  children,\n  isHeader,\n  ...rest\n}: PropsWithChildren<RowProps>) => (\n  <tr {...rest}>\n    {isHeader && <td className=\"bg-white\" />}\n    {children}\n  </tr>\n);\n\nexport { TableRow, CtaRow };\n"],"names":["React","CtaRow","children","tr","td","className","TableRow","isHeader","rest"],"mappings":"AAAA,OAAOA,UAAkC,OAAQ,CAEjD,MAAMC,OAAS,CAAC,CAAEC,QAAQ,CAAqB,gBAC7C,oBAACC,uBACC,oBAACC,MAAGC,UAAU,oBACbH,UAQL,MAAMI,SAAW,CAAC,CAChBJ,QAAQ,CACRK,QAAQ,CACR,GAAGC,KACyB,gBAC5B,oBAACL,KAAOK,KACLD,uBAAY,oBAACH,MAAGC,UAAU,aAC1BH,SAIL,QAASI,QAAQ,CAAEL,MAAM,CAAG"}

package/core/Table/data.js

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

package/core/Table/data.js.map

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

package/core/Toggle.js

@@ -1,2 +1,2 @@
-import*as Switch from"@radix-ui/react-switch";import React from"react";import cn from"./utils/cn";const Toggle=({id,size="lg",label,className,...props})=>{const rootSize=size==="sm"?"w-[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 /*#__PURE__*/React.createElement("div",{className:"flex items-center"},/*#__PURE__*/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},/*#__PURE__*/React.createElement(Switch.Thumb,{className:cn(`block bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle transition-transform`,thumbSize)})),label?/*#__PURE__*/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-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,oBACE,oBAACM,OAAIJ,UAAU,kCACb,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,mBACC,oBAACA,SAAMC,UAAU,OAAOO,QAASV,IAC9BE,OAED,KAGV,CAEA,gBAAeH,MAAO"}

package/core/Tooltip.js

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