@ably/ui 17.7.1 → 17.7.3

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      onKeyDown={\n        onClick\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick();\n              }\n            }\n          : undefined\n      }\n      role={onClick ? \"button\" : undefined}\n      tabIndex={onClick ? 0 : undefined}\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","onKeyDown","e","key","preventDefault","role","tabIndex","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,QACTmB,UACEnB,QACI,AAACoB,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBtB,SACF,CACF,EACAiB,UAENM,KAAMvB,QAAU,SAAWiB,UAC3BO,SAAUxB,QAAU,EAAIiB,WAExB,oBAACD,OACCjB,UAAWX,GACT,eACA,CAAEqC,KAAMV,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCW,MAAO,CACLC,IAAKZ,iBAAmBF,cAAgBnB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMU,cACNjB,KAAMW,KACNqB,UAAWxB,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,YACCwC,QAAQ,YACR1B,KAAK,KACLJ,UAAU,iDACV+B,UAAU,6BACVC,UAAU,kBACVC,KAAMrB,MAELb,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}

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,useCallback}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 nextRef=useRef();const next=useCallback(()=>{if(!slideLock){setActiveIndex(prevIndex=>(prevIndex+1)%children.length);setTranslationCoefficient(1);setSlideLock(true)}},[children.length,slideLock]);const prev=useCallback(()=>{if(!slideLock){setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);setTranslationCoefficient(-1);setSlideLock(true)}},[children.length,slideLock]);nextRef.current=next;const resetInterval=useCallback(()=>{if(timerRef.current)clearInterval(timerRef.current);timerRef.current=setInterval(()=>{if(nextRef.current){nextRef.current()}},options?.interval??1e4)},[options?.interval]);const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next();resetInterval()}if(touchStartX-touchEndX<-50){prev();resetInterval()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options?.interval,resetInterval]);useEffect(()=>{setTimeout(()=>{setSlides(setupSlides(children,activeIndex));setTranslationCoefficient(0);setSlideLock(false)},SLIDE_TRANSITION_LENGTH)},[activeIndex,children]);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();resetInterval()}},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();resetInterval()}},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;
 //# 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  useCallback,\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 nextRef = useRef<() => void>();\n\n  const next = useCallback(() => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);\n      setTranslationCoefficient(1);\n      setSlideLock(true);\n    }\n  }, [children.length, slideLock]);\n\n  const prev = useCallback(() => {\n    if (!slideLock) {\n      setActiveIndex((prevIndex) =>\n        prevIndex > 0 ? prevIndex - 1 : children.length - 1,\n      );\n      setTranslationCoefficient(-1);\n      setSlideLock(true);\n    }\n  }, [children.length, slideLock]);\n\n  // Update the ref whenever next changes\n  nextRef.current = next;\n\n  const resetInterval = useCallback(() => {\n    if (timerRef.current) clearInterval(timerRef.current);\n    timerRef.current = setInterval(() => {\n      if (nextRef.current) {\n        nextRef.current();\n      }\n    }, options?.interval ?? 10000);\n  }, [options?.interval]);\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      resetInterval();\n    }\n    if (touchStartX - touchEndX < -50) {\n      prev();\n      resetInterval();\n    }\n  };\n\n  useEffect(() => {\n    resetInterval();\n    return () => {\n      if (timerRef.current) clearInterval(timerRef.current);\n    };\n  }, [children.length, options?.interval, resetInterval]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setSlides(setupSlides(children, activeIndex));\n      setTranslationCoefficient(0);\n      setSlideLock(false);\n    }, SLIDE_TRANSITION_LENGTH);\n  }, [activeIndex, children]);\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={() => {\n            prev();\n            resetInterval();\n          }}\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={() => {\n            next();\n            resetInterval();\n          }}\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","useCallback","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","nextRef","next","prevIndex","prev","current","resetInterval","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/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=()=>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",{href:"/",className:"ui-link"},row.label),React.createElement(Tooltip,null,"Example tooltip")),row.cells.map(cell=>React.createElement(Table.Cell,{key:cell.label,className:"last:mb-4 sm:mb-0"},React.createElement("div",{className:"flex-1 sm:hidden !text-dark-grey ui-text-overline2"},cell.column),cell.content)))))),React.createElement(Table.Row,null,React.createElement(Table.Cell,null),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn-secondary"},"Get started")),React.createElement(Table.CtaCell,null,React.createElement("a",{href:"/",className:"ui-btn"},"Contact sales"))))))};
 //# sourceMappingURL=data.js.map

package/core/Table/data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/Table/data.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\n\nimport Tooltip from \"../Tooltip\";\nimport Table from \"../Table\";\nimport Icon from \"../Icon\";\n\nconst Supported = () => (\n  <Icon\n    name=\"icon-gui-check-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-success\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"supported-icon\"\n  />\n);\n\nconst Unsupported = () => (\n  <Icon\n    name=\"icon-gui-x-circle-solid\"\n    size=\"1.5rem\"\n    color=\"text-gui-error\"\n    additionalCSS=\"flex-grow-0 flex-shrink-0\"\n    data-testid=\"unsupported-icon\"\n  />\n);\n\nconst testRow = (index: number) => ({\n  label: `Label ${index + 1}`,\n  cells: [\n    { label: \"text\", content: \"Cell content\", column: \"Free\" },\n    {\n      label: \"yes\",\n      content: (\n        <div className=\"flex items-center sm:flex-col sm:items-start\">\n          <span className=\"sm:order-1 px-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 href=\"/\" className=\"ui-link\">\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":"AAAA,OAAOA,OAASC,QAAQ,KAAQ,OAAQ,AAExC,QAAOC,YAAa,YAAa,AACjC,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,CAE3B,MAAMC,UAAY,IAChB,oBAACD,MACCE,KAAK,8BACLC,KAAK,SACLC,MAAM,mBACNC,cAAc,4BACdC,cAAY,mBAIhB,MAAMC,YAAc,IAClB,oBAACP,MACCE,KAAK,0BACLC,KAAK,SACLC,MAAM,iBACNC,cAAc,4BACdC,cAAY,qBAIhB,MAAME,QAAU,AAACC,OAAmB,CAAA,CAClCC,MAAO,CAAC,MAAM,EAAED,MAAQ,EAAE,CAAC,CAC3BE,MAAO,CACL,CAAED,MAAO,OAAQE,QAAS,eAAgBC,OAAQ,MAAO,EACzD,CACEH,MAAO,MACPE,QACE,oBAACE,OAAIC,UAAU,gDACb,oBAACC,QAAKD,UAAU,uCAAsC,aACtD,oBAACC,QAAKD,UAAU,cACd,oBAACd,kBAIPY,OAAQ,MACV,EACA,CACEH,MAAO,KACPE,QACE,oBAACE,OAAIC,UAAU,iDACb,oBAACC,QAAKD,UAAU,uCAAsC,eAGtD,oBAACC,QAAKD,UAAU,cACd,oBAACR,oBAIPM,OAAQ,QACV,EACD,AACH,CAAA,EAEA,MAAMI,SAAW,CAAC,WAAY,UAAW,oBAAoB,CAACC,GAAG,CAAC,AAACR,OAAW,CAAA,CAC5EA,MACAS,KAAM,IAAIC,MAAM,GAAG,CAACF,GAAG,CAAC,CAACG,EAAGC,IAAMd,QAAQc,GAC5C,CAAA,EAEA,QAAO,MAAMC,iBAAmB,KAC9B,OACE,oBAACT,OAAIC,UAAU,yBACb,oBAACS,MAAGT,UAAU,8BAA6B,sBAC3C,oBAACU,KAAEV,UAAU,mBAAkB,mBAC/B,oBAAChB,MAAM2B,IAAI,MACT,oBAAC3B,MAAM4B,MAAM,MACX,oBAAC5B,MAAM6B,GAAG,MACR,oBAAC7B,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,SAE/C,oBAAChB,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,SAE/C,oBAAChB,MAAM8B,IAAI,MACT,oBAACb,QAAKD,UAAU,8BAA6B,aAInD,oBAAChB,MAAM+B,IAAI,MACRb,SAASC,GAAG,CAAC,AAACa,SACb,oBAAClC,UAASmC,IAAKD,QAAQrB,KAAK,EAC1B,oBAACX,MAAMkC,SAAS,MACd,oBAAClC,MAAM8B,IAAI,EAACK,QAAS,GAAIH,QAAQrB,KAAK,GAEvCqB,QAAQZ,IAAI,CAACD,GAAG,CAAC,AAACiB,KACjB,oBAACpC,MAAM6B,GAAG,EAACI,IAAKG,IAAIzB,KAAK,EACvB,oBAACX,MAAMqC,SAAS,EACdJ,IAAKG,IAAIzB,KAAK,CACdK,UAAU,8BAEV,oBAACsB,KAAEC,KAAK,IAAIvB,UAAU,WACnBoB,IAAIzB,KAAK,EAEZ,oBAACZ,aAAQ,oBAEVqC,IAAIxB,KAAK,CAACO,GAAG,CAAC,AAACqB,MACd,oBAACxC,MAAM8B,IAAI,EAACG,IAAKO,KAAK7B,KAAK,CAAEK,UAAU,qBACrC,oBAACD,OAAIC,UAAU,sDACZwB,KAAK1B,MAAM,EAEb0B,KAAK3B,OAAO,OAOzB,oBAACb,MAAM6B,GAAG,MACR,oBAAC7B,MAAM8B,IAAI,OACX,oBAAC9B,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,oBAAmB,gBAI3C,oBAAChB,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,oBAAmB,gBAI3C,oBAAChB,MAAMyC,OAAO,MACZ,oBAACH,KAAEC,KAAK,IAAIvB,UAAU,UAAS,qBAS7C,CAAE"}

package/core/icons/display/icon-display-ui-mono.svg

@@ -0,0 +1,22 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4 6.75H44C45.7949 6.75 47.25 8.20507 47.25 10V38C47.25 39.7949 45.7949 41.25 44 41.25H4C2.20507 41.25 0.75 39.7949 0.75 38V10C0.75 8.20507 2.20507 6.75 4 6.75Z"
+    stroke="currentColor" stroke-width="1.5" />
+  <path d="M0.5 13.5H47.5" stroke="currentColor" stroke-width="1.5" />
+  <path
+    d="M4.25 11.25C4.80228 11.25 5.25 10.8023 5.25 10.25C5.25 9.69772 4.80228 9.25 4.25 9.25C3.69772 9.25 3.25 9.69772 3.25 10.25C3.25 10.8023 3.69772 11.25 4.25 11.25Z"
+    fill="currentColor" />
+  <path
+    d="M7.25 11.25C7.80228 11.25 8.25 10.8023 8.25 10.25C8.25 9.69772 7.80228 9.25 7.25 9.25C6.69772 9.25 6.25 9.69772 6.25 10.25C6.25 10.8023 6.69772 11.25 7.25 11.25Z"
+    fill="currentColor" />
+  <path
+    d="M10.25 11.25C10.8023 11.25 11.25 10.8023 11.25 10.25C11.25 9.69772 10.8023 9.25 10.25 9.25C9.69772 9.25 9.25 9.69772 9.25 10.25C9.25 10.8023 9.69772 11.25 10.25 11.25Z"
+    fill="currentColor" />
+  <path
+    d="M31.0035 21C31.0035 19 32.0035 18 34.0035 18H38.0035C40.0035 18 41.0035 19 41.0035 20.9999V33C41.0035 35 40.0035 36 38.0035 36H34.0035C32.0035 36 31.0035 35 31.0035 33V21Z"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 4" />
+  <path d="M6 21C6 19 7 18 9 18H24C26 18 27 19 27 20.9999V22C27 24 26 25 24 25H9C7 25 6 24 6 22V21Z"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 4" />
+  <path d="M6 32C6 30 7 29 9 29H24C26 29 27 30 27 31.9999V33C27 35 26 36 24 36H9C7 36 6 35 6 33V32Z"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 4" />
+</svg>

package/core/icons/display/icon-display-ui.svg

@@ -0,0 +1,22 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M4 6.75H44C45.7949 6.75 47.25 8.20507 47.25 10V38C47.25 39.7949 45.7949 41.25 44 41.25H4C2.20507 41.25 0.75 39.7949 0.75 38V10C0.75 8.20507 2.20507 6.75 4 6.75Z"
+    stroke="currentColor" stroke-width="1.5" />
+  <path d="M0.5 13.5H47.5" stroke="currentColor" stroke-width="1.5" />
+  <path
+    d="M4.25 11.25C4.80228 11.25 5.25 10.8023 5.25 10.25C5.25 9.69772 4.80228 9.25 4.25 9.25C3.69772 9.25 3.25 9.69772 3.25 10.25C3.25 10.8023 3.69772 11.25 4.25 11.25Z"
+    fill="currentColor" />
+  <path
+    d="M7.25 11.25C7.80228 11.25 8.25 10.8023 8.25 10.25C8.25 9.69772 7.80228 9.25 7.25 9.25C6.69772 9.25 6.25 9.69772 6.25 10.25C6.25 10.8023 6.69772 11.25 7.25 11.25Z"
+    fill="currentColor" />
+  <path
+    d="M10.25 11.25C10.8023 11.25 11.25 10.8023 11.25 10.25C11.25 9.69772 10.8023 9.25 10.25 9.25C9.69772 9.25 9.25 9.69772 9.25 10.25C9.25 10.8023 9.69772 11.25 10.25 11.25Z"
+    fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M31.2232 18.2197C31.9135 17.5294 32.8879 17.25 34.0035 17.25H38.0035C39.1191 17.25 40.0936 17.5294 40.7839 18.2197C41.4741 18.9099 41.7535 19.8844 41.7535 20.9999V33C41.7535 34.1156 41.4741 35.0901 40.7839 35.7803C40.0936 36.4706 39.1191 36.75 38.0035 36.75H34.0035C32.8879 36.75 31.9135 36.4706 31.2232 35.7803C30.533 35.0901 30.2535 34.1156 30.2535 33V21C30.2535 19.8844 30.533 18.9099 31.2232 18.2197Z"
+    fill="#FF5416" />
+  <path d="M6 21C6 19 7 18 9 18H24C26 18 27 19 27 20.9999V22C27 24 26 25 24 25H9C7 25 6 24 6 22V21Z"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 4" />
+  <path d="M6 32C6 30 7 29 9 29H24C26 29 27 30 27 31.9999V33C27 35 26 36 24 36H9C7 36 6 35 6 33V32Z"
+    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="3 4" />
+</svg>