@ably/ui 17.11.3 → 17.11.5-dev.5f95066b

package/core/CodeSnippet/languages.js

@@ -1,2 +1,2 @@
-const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
+const languages={javascript:{label:"JavaScript",icon:"icon-tech-javascript",syntaxHighlighterKey:"javascript"},typescript:{label:"TypeScript",icon:"icon-tech-typescript",syntaxHighlighterKey:"typescript"},java:{label:"Java",icon:"icon-tech-java",syntaxHighlighterKey:"java"},kotlin:{label:"Kotlin",icon:"icon-tech-kotlin",syntaxHighlighterKey:"kotlin"},python:{label:"Python",icon:"icon-tech-python",syntaxHighlighterKey:"python"},csharp:{label:"C#",icon:"icon-tech-csharp",syntaxHighlighterKey:"csharp"},go:{label:"Go",icon:"icon-tech-go",syntaxHighlighterKey:"go"},ruby:{label:"Ruby",icon:"icon-tech-ruby",syntaxHighlighterKey:"ruby"},php:{label:"PHP",icon:"icon-tech-php",syntaxHighlighterKey:"php"},nodejs:{label:"Node.js",icon:"icon-tech-nodejs",syntaxHighlighterKey:"javascript"},react:{label:"React",icon:"icon-tech-react",syntaxHighlighterKey:"javascript"},html:{label:"HTML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},shell:{label:"Shell",icon:"icon-tech-web",syntaxHighlighterKey:"bash"},json:{label:"JSON",icon:"icon-tech-json",syntaxHighlighterKey:"json"},laravel:{label:"Laravel",icon:"icon-tech-laravel-broadcast",syntaxHighlighterKey:"php"},xml:{label:"XML",icon:"icon-tech-web",syntaxHighlighterKey:"xml"},sql:{label:"SQL",icon:"icon-tech-postgres",syntaxHighlighterKey:"sql"},swift:{label:"Swift",icon:"icon-tech-swift",syntaxHighlighterKey:"swift"},cpp:{label:"C++",icon:"icon-tech-web",syntaxHighlighterKey:"cpp"},dart:{label:"Dart",icon:"icon-tech-web",syntaxHighlighterKey:"dart"},objc:{label:"Objective-C",icon:"icon-tech-objectivec",syntaxHighlighterKey:"objc"},android:{label:"Android",icon:"icon-tech-android-head",syntaxHighlighterKey:"java"},flutter:{label:"Flutter",icon:"icon-tech-flutter",syntaxHighlighterKey:"dart"},jetpack:{label:"Jetpack Compose",icon:"icon-tech-jetpack",syntaxHighlighterKey:"kotlin"}};export const stripSdkType=lang=>{if(lang.startsWith("realtime_")||lang.startsWith("rest_")){return lang.split("_").slice(1).join("_")}return lang};export const getLanguageInfo=langKey=>{const key=stripSdkType(langKey).toLowerCase();if(languages[key]){return languages[key]}return{label:langKey,icon:"icon-tech-web",syntaxHighlighterKey:langKey}};export default languages;
 //# sourceMappingURL=languages.js.map

package/core/CodeSnippet/languages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  laravel: {\n    label: \"Laravel\",\n    icon: \"icon-tech-laravel-broadcast\",\n    syntaxHighlighterKey: \"php\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-head\",\n    syntaxHighlighterKey: \"java\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n    return lang.split(\"_\").slice(1).join(\"_\");\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,CACF,CAEA,QAAO,MAAMuB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAIpC,SAAS,CAACmC,IAAI,CAAE,CAClB,OAAOnC,SAAS,CAACmC,IAAI,AACvB,CAGA,MAAO,CACLjC,MAAOgC,QACP/B,KAAM,gBACNC,qBAAsB8B,OACxB,CACF,CAAE,AAEF,gBAAelC,SAAU"}
+{"version":3,"sources":["../../../src/core/CodeSnippet/languages.ts"],"sourcesContent":["import { IconName } from \"../Icon/types\";\n\nexport interface LanguageInfo {\n  label: string;\n  icon: IconName;\n  syntaxHighlighterKey?: string;\n}\n\nexport type LanguageMap = Record<string, LanguageInfo>;\n\nconst languages: LanguageMap = {\n  javascript: {\n    label: \"JavaScript\",\n    icon: \"icon-tech-javascript\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  typescript: {\n    label: \"TypeScript\",\n    icon: \"icon-tech-typescript\",\n    syntaxHighlighterKey: \"typescript\",\n  },\n  java: {\n    label: \"Java\",\n    icon: \"icon-tech-java\",\n    syntaxHighlighterKey: \"java\",\n  },\n  kotlin: {\n    label: \"Kotlin\",\n    icon: \"icon-tech-kotlin\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n  python: {\n    label: \"Python\",\n    icon: \"icon-tech-python\",\n    syntaxHighlighterKey: \"python\",\n  },\n  csharp: {\n    label: \"C#\",\n    icon: \"icon-tech-csharp\",\n    syntaxHighlighterKey: \"csharp\",\n  },\n  go: {\n    label: \"Go\",\n    icon: \"icon-tech-go\",\n    syntaxHighlighterKey: \"go\",\n  },\n  ruby: {\n    label: \"Ruby\",\n    icon: \"icon-tech-ruby\",\n    syntaxHighlighterKey: \"ruby\",\n  },\n  php: {\n    label: \"PHP\",\n    icon: \"icon-tech-php\",\n    syntaxHighlighterKey: \"php\",\n  },\n  nodejs: {\n    label: \"Node.js\",\n    icon: \"icon-tech-nodejs\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  react: {\n    label: \"React\",\n    icon: \"icon-tech-react\",\n    syntaxHighlighterKey: \"javascript\",\n  },\n  html: {\n    label: \"HTML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  shell: {\n    label: \"Shell\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"bash\",\n  },\n  json: {\n    label: \"JSON\",\n    icon: \"icon-tech-json\",\n    syntaxHighlighterKey: \"json\",\n  },\n  laravel: {\n    label: \"Laravel\",\n    icon: \"icon-tech-laravel-broadcast\",\n    syntaxHighlighterKey: \"php\",\n  },\n  xml: {\n    label: \"XML\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"xml\",\n  },\n  sql: {\n    label: \"SQL\",\n    icon: \"icon-tech-postgres\",\n    syntaxHighlighterKey: \"sql\",\n  },\n  swift: {\n    label: \"Swift\",\n    icon: \"icon-tech-swift\",\n    syntaxHighlighterKey: \"swift\",\n  },\n  // New entries from languageInfo.ts\n  cpp: {\n    label: \"C++\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"cpp\",\n  },\n  dart: {\n    label: \"Dart\",\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  objc: {\n    label: \"Objective-C\",\n    icon: \"icon-tech-objectivec\",\n    syntaxHighlighterKey: \"objc\",\n  },\n  android: {\n    label: \"Android\",\n    icon: \"icon-tech-android-head\",\n    syntaxHighlighterKey: \"java\",\n  },\n  flutter: {\n    label: \"Flutter\",\n    icon: \"icon-tech-flutter\",\n    syntaxHighlighterKey: \"dart\",\n  },\n  jetpack: {\n    label: \"Jetpack Compose\",\n    icon: \"icon-tech-jetpack\",\n    syntaxHighlighterKey: \"kotlin\",\n  },\n};\n\nexport const stripSdkType = (lang: string) => {\n  if (lang.startsWith(\"realtime_\") || lang.startsWith(\"rest_\")) {\n    return lang.split(\"_\").slice(1).join(\"_\");\n  }\n  return lang;\n};\n\n// Fallback function to handle languages not in the map\nexport const getLanguageInfo = (langKey: string): LanguageInfo => {\n  const key = stripSdkType(langKey).toLowerCase();\n\n  if (languages[key]) {\n    return languages[key];\n  }\n\n  // Fallback for unknown languages\n  return {\n    label: langKey,\n    icon: \"icon-tech-web\",\n    syntaxHighlighterKey: langKey,\n  };\n};\n\nexport default languages;\n"],"names":["languages","javascript","label","icon","syntaxHighlighterKey","typescript","java","kotlin","python","csharp","go","ruby","php","nodejs","react","html","shell","json","laravel","xml","sql","swift","cpp","dart","objc","android","flutter","jetpack","stripSdkType","lang","startsWith","split","slice","join","getLanguageInfo","langKey","key","toLowerCase"],"mappings":"AAUA,MAAMA,UAAyB,CAC7BC,WAAY,CACVC,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAC,WAAY,CACVH,MAAO,aACPC,KAAM,uBACNC,qBAAsB,YACxB,EACAE,KAAM,CACJJ,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAG,OAAQ,CACNL,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAI,OAAQ,CACNN,MAAO,SACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAK,OAAQ,CACNP,MAAO,KACPC,KAAM,mBACNC,qBAAsB,QACxB,EACAM,GAAI,CACFR,MAAO,KACPC,KAAM,eACNC,qBAAsB,IACxB,EACAO,KAAM,CACJT,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAQ,IAAK,CACHV,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAS,OAAQ,CACNX,MAAO,UACPC,KAAM,mBACNC,qBAAsB,YACxB,EACAU,MAAO,CACLZ,MAAO,QACPC,KAAM,kBACNC,qBAAsB,YACxB,EACAW,KAAM,CACJb,MAAO,OACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAY,MAAO,CACLd,MAAO,QACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAa,KAAM,CACJf,MAAO,OACPC,KAAM,iBACNC,qBAAsB,MACxB,EACAc,QAAS,CACPhB,MAAO,UACPC,KAAM,8BACNC,qBAAsB,KACxB,EACAe,IAAK,CACHjB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAgB,IAAK,CACHlB,MAAO,MACPC,KAAM,qBACNC,qBAAsB,KACxB,EACAiB,MAAO,CACLnB,MAAO,QACPC,KAAM,kBACNC,qBAAsB,OACxB,EAEAkB,IAAK,CACHpB,MAAO,MACPC,KAAM,gBACNC,qBAAsB,KACxB,EACAmB,KAAM,CACJrB,MAAO,OACPC,KAAM,gBACNC,qBAAsB,MACxB,EACAoB,KAAM,CACJtB,MAAO,cACPC,KAAM,uBACNC,qBAAsB,MACxB,EACAqB,QAAS,CACPvB,MAAO,UACPC,KAAM,yBACNC,qBAAsB,MACxB,EACAsB,QAAS,CACPxB,MAAO,UACPC,KAAM,oBACNC,qBAAsB,MACxB,EACAuB,QAAS,CACPzB,MAAO,kBACPC,KAAM,oBACNC,qBAAsB,QACxB,CACF,CAEA,QAAO,MAAMwB,aAAe,AAACC,OAC3B,GAAIA,KAAKC,UAAU,CAAC,cAAgBD,KAAKC,UAAU,CAAC,SAAU,CAC5D,OAAOD,KAAKE,KAAK,CAAC,KAAKC,KAAK,CAAC,GAAGC,IAAI,CAAC,IACvC,CACA,OAAOJ,IACT,CAAE,AAGF,QAAO,MAAMK,gBAAkB,AAACC,UAC9B,MAAMC,IAAMR,aAAaO,SAASE,WAAW,GAE7C,GAAIrC,SAAS,CAACoC,IAAI,CAAE,CAClB,OAAOpC,SAAS,CAACoC,IAAI,AACvB,CAGA,MAAO,CACLlC,MAAOiC,QACPhC,KAAM,gBACNC,qBAAsB+B,OACxB,CACF,CAAE,AAEF,gBAAenC,SAAU"}

package/core/Icon/components/icon-gui-square-3-stack-3d.js

@@ -0,0 +1,2 @@
+import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map

package/core/Icon/components/icon-gui-square-3-stack-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n  title?: string;\n  titleId?: string;\n}\nconst IconGuiSquare3Stack3d = ({\n  title,\n  titleId,\n  ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}

package/core/ProductTile/ProductIcon.js

@@ -1,2 +1,2 @@
-import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable})=>{if(!name){return null}const iconSize=size/6*4;return React.createElement("span",{className:"flex items-center justify-center border border-neutral-300 dark:border-neutral-1000 rounded-xl bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-000 dark:hover:bg-neutral-1300 active:bg-neutral-000 dark:active:bg-neutral-1300",style:{width:size,height:size}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})}))};export default ProductIcon;
+import React from"react";import Icon from"../Icon";import cn from"../utils/cn";const ProductIcon=({name,hoverName,selected,size,unavailable,className})=>{if(!name){return null}const iconSize=size/6*4;return React.createElement("span",{className:cn("flex items-center justify-center border border-neutral-300 dark:border-neutral-1000 rounded-xl","bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-000 dark:hover:bg-neutral-1300 active:bg-neutral-000 dark:active:bg-neutral-1300",className),style:{width:size,height:size}},hoverName?React.createElement(Icon,{name:hoverName,size:`${iconSize}px`,additionalCSS:cn({"hidden group-hover/product-tile:flex":!selected,flex:selected})}):null,React.createElement(Icon,{name:name,size:`${iconSize}px`,additionalCSS:cn({"text-neutral-000 dark:text-neutral-1300":selected&&!unavailable,"text-neutral-1300 dark:text-neutral-000":!selected&&!unavailable,"text-neutral-700 dark:text-neutral-600":selected&&unavailable,"text-neutral-600 dark:text-neutral-700":!selected&&unavailable,"flex group-hover/product-tile:hidden":hoverName&&!selected,hidden:hoverName&&selected})}))};export default ProductIcon;
 //# sourceMappingURL=ProductIcon.js.map

package/core/ProductTile/ProductIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n  name?: IconName;\n  hoverName?: IconName;\n  selected?: boolean;\n  size: number;\n  unavailable: boolean;\n};\n\nconst ProductIcon = ({\n  name,\n  hoverName,\n  selected,\n  size,\n  unavailable,\n}: ProductIconProps) => {\n  if (!name) {\n    return null;\n  }\n\n  // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n  const iconSize = (size / 6) * 4;\n\n  return (\n    // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n\n    <span\n      className=\"flex items-center justify-center border border-neutral-300 dark:border-neutral-1000 rounded-xl\n      bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-000 dark:hover:bg-neutral-1300 active:bg-neutral-000 dark:active:bg-neutral-1300\"\n      style={{ width: size, height: size }}\n    >\n      {/* The product icons themselves */}\n      {hoverName ? (\n        <Icon\n          name={hoverName}\n          size={`${iconSize}px`}\n          additionalCSS={cn({\n            \"hidden group-hover/product-tile:flex\": !selected,\n            flex: selected,\n          })}\n        />\n      ) : null}\n      <Icon\n        name={name}\n        size={`${iconSize}px`}\n        additionalCSS={cn({\n          \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n          \"text-neutral-1300 dark:text-neutral-000\": !selected && !unavailable,\n          \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n          \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n          \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n          hidden: hoverName && selected,\n        })}\n      />\n    </span>\n  );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","iconSize","span","className","style","width","height","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAU7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACM,IACjB,GAAI,CAACJ,KAAM,CACT,OAAO,IACT,CAGA,MAAMK,SAAW,AAACF,KAAO,EAAK,EAE9B,OAGE,oBAACG,QACCC,UAAU,uOAEVC,MAAO,CAAEC,MAAON,KAAMO,OAAQP,IAAK,GAGlCF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEE,SAAS,EAAE,CAAC,CACrBM,cAAeb,GAAG,CAChB,uCAAwC,CAACI,SACzCU,KAAMV,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEE,SAAS,EAAE,CAAC,CACrBM,cAAeb,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CAA2C,CAACF,UAAY,CAACE,YACzD,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDW,OAAQZ,WAAaC,QACvB,KAIR,CAEA,gBAAeH,WAAY"}
+{"version":3,"sources":["../../../src/core/ProductTile/ProductIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport cn from \"../utils/cn\";\n\ntype ProductIconProps = {\n  name?: IconName;\n  hoverName?: IconName;\n  selected?: boolean;\n  size: number;\n  unavailable: boolean;\n  className?: string;\n};\n\nconst ProductIcon = ({\n  name,\n  hoverName,\n  selected,\n  size,\n  unavailable,\n  className,\n}: ProductIconProps) => {\n  if (!name) {\n    return null;\n  }\n\n  // Padding around the icon is 1/4 the icon's size, so the icon is 4 of 6 parts\n  const iconSize = (size / 6) * 4;\n\n  return (\n    // Outer container, contains the gradient stroke (since we can't natively have CSS gradient strokes)\n\n    <span\n      className={cn(\n        \"flex items-center justify-center border border-neutral-300 dark:border-neutral-1000 rounded-xl\",\n        \"bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-000 dark:hover:bg-neutral-1300 active:bg-neutral-000 dark:active:bg-neutral-1300\",\n        className,\n      )}\n      style={{ width: size, height: size }}\n    >\n      {/* The product icons themselves */}\n      {hoverName ? (\n        <Icon\n          name={hoverName}\n          size={`${iconSize}px`}\n          additionalCSS={cn({\n            \"hidden group-hover/product-tile:flex\": !selected,\n            flex: selected,\n          })}\n        />\n      ) : null}\n      <Icon\n        name={name}\n        size={`${iconSize}px`}\n        additionalCSS={cn({\n          \"text-neutral-000 dark:text-neutral-1300\": selected && !unavailable,\n          \"text-neutral-1300 dark:text-neutral-000\": !selected && !unavailable,\n          \"text-neutral-700 dark:text-neutral-600\": selected && unavailable,\n          \"text-neutral-600 dark:text-neutral-700\": !selected && unavailable,\n          \"flex group-hover/product-tile:hidden\": hoverName && !selected,\n          hidden: hoverName && selected,\n        })}\n      />\n    </span>\n  );\n};\n\nexport default ProductIcon;\n"],"names":["React","Icon","cn","ProductIcon","name","hoverName","selected","size","unavailable","className","iconSize","span","style","width","height","additionalCSS","flex","hidden"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,OAAQ,aAAc,CAW7B,MAAMC,YAAc,CAAC,CACnBC,IAAI,CACJC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACJC,WAAW,CACXC,SAAS,CACQ,IACjB,GAAI,CAACL,KAAM,CACT,OAAO,IACT,CAGA,MAAMM,SAAW,AAACH,KAAO,EAAK,EAE9B,OAGE,oBAACI,QACCF,UAAWP,GACT,iGACA,wIACAO,WAEFG,MAAO,CAAEC,MAAON,KAAMO,OAAQP,IAAK,GAGlCF,UACC,oBAACJ,MACCG,KAAMC,UACNE,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBK,cAAeb,GAAG,CAChB,uCAAwC,CAACI,SACzCU,KAAMV,QACR,KAEA,KACJ,oBAACL,MACCG,KAAMA,KACNG,KAAM,CAAC,EAAEG,SAAS,EAAE,CAAC,CACrBK,cAAeb,GAAG,CAChB,0CAA2CI,UAAY,CAACE,YACxD,0CAA2C,CAACF,UAAY,CAACE,YACzD,yCAA0CF,UAAYE,YACtD,yCAA0C,CAACF,UAAYE,YACvD,uCAAwCH,WAAa,CAACC,SACtDW,OAAQZ,WAAaC,QACvB,KAIR,CAEA,gBAAeH,WAAY"}

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,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick?"button":undefined,tabIndex:onClick?0:undefined},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,iconClassName})=>{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,onKeyDown:onClick?e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();onClick()}}:undefined,role:onClick?"button":undefined,tabIndex:onClick?0:undefined},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,className:iconClassName}),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;
 //# 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      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"}
+{"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   * Additional CSS class names to apply to the product icon.\n   */\n  iconClassName?: string;\n\n  /**\n   * Callback function to handle click events on the product tile.\n   */\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  iconClassName,\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          className={iconClassName}\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","iconClassName","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,CA0ElE,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,CACdC,aAAa,CACI,IACjB,KAAM,CAAEC,IAAI,CAAEC,SAAS,CAAEC,KAAK,CAAEC,WAAW,CAAEC,IAAI,CAAEC,WAAW,CAAE,CAC9DvB,QAAQ,CAACM,KAAK,EAAI,CAAC,EACrB,MAAMkB,cAAgBC,SAASZ,KAAM,IACrC,MAAMa,iBAAmBf,iBAAmBC,UAE5C,OACE,oBAACe,OACClB,UAAWX,GACT,uCACA,CAAE,qCAAsC4B,gBAAiB,EACzD,CAAE,sCAAuCnB,QAAS,EAClD,CACE,sCAAuC,CAACA,QAC1C,EACA,CACE,kDACEA,WAAa,OAAS,CAACgB,WAC3B,EACA,CAAE,iBAAkBhB,WAAaqB,WAAa,CAACL,WAAY,EAC3D,CAAE,sBAAuBA,WAAY,EACrC,CAAE,CAAC,CAAC,EAAEd,UAAU,CAAC,CAAC,CAAEA,SAAU,GAEhCoB,cAAaN,YACbb,QAASA,QACToB,UACEpB,QACI,AAACqB,IACC,GAAIA,EAAEC,GAAG,GAAK,SAAWD,EAAEC,GAAG,GAAK,IAAK,CACtCD,EAAEE,cAAc,GAChBvB,SACF,CACF,EACAkB,UAENM,KAAMxB,QAAU,SAAWkB,UAC3BO,SAAUzB,QAAU,EAAIkB,WAExB,oBAACD,OACClB,UAAWX,GACT,eACA,CAAEsC,KAAMV,gBAAiB,EACzB,CAAE,cAAe,CAACA,gBAAiB,GAErCW,MAAO,CACLC,IAAKZ,iBAAmBF,cAAgBpB,oBAAsB,CAChE,GAEA,oBAACH,aACCY,KAAMW,cACNlB,KAAMY,KACNqB,UAAWzB,aAAeK,UAAYS,UACtCrB,SAAUA,SACVgB,YAAa,CAAC,CAACA,YACfd,UAAWQ,gBAEb,oBAACf,cACCkB,MAAOA,MACPb,SAAUA,SACVgB,YAAa,CAAC,CAACA,YACfC,cAAeA,cACfZ,UAAWA,UACXH,UAAWO,kBAGf,oBAACb,oBACCkB,YAAaA,YACbd,SAAUA,SACVgB,YAAa,CAAC,CAACA,YACfZ,gBAAiBA,gBACjBF,UAAWM,uBAEZR,UAAYe,KACX,oBAACvB,YACCyC,QAAQ,YACR3B,KAAK,KACLJ,UAAU,iDACVgC,UAAU,6BACVC,UAAU,kBACVC,KAAMrB,MAELd,YAAc,YAAc,WAE7B,KAGV,CAEA,gBAAeH,WAAY"}

package/index.d.ts

@@ -2413,6 +2413,17 @@ export default ForwardRef;
 //# sourceMappingURL=icon-gui-spinner-light.d.ts.map
 }
 
+declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
+import * as React from "react";
+interface SVGRProps {
+    title?: string;
+    titleId?: string;
+}
+const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
+}
+
 declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
 import * as React from "react";
 interface SVGRProps {
@@ -5811,8 +5822,9 @@ type ProductIconProps = {
     selected?: boolean;
     size: number;
     unavailable: boolean;
+    className?: string;
 };
-const ProductIcon: ({ name, hoverName, selected, size, unavailable, }: ProductIconProps) => import("react/jsx-runtime").JSX.Element | null;
+const ProductIcon: ({ name, hoverName, selected, size, unavailable, className, }: ProductIconProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ProductIcon;
 //# sourceMappingURL=ProductIcon.d.ts.map
 }
@@ -5882,6 +5894,10 @@ export type ProductTileProps = {
      * Additional CSS class names to apply to the product name / label container.
      */
     labelClassName?: string;
+    /**
+     * Additional CSS class names to apply to the product icon.
+     */
+    iconClassName?: string;
     /**
      * Callback function to handle click events on the product tile.
      */
@@ -5907,7 +5923,7 @@ export type ProductTileProps = {
      */
     animateIcons?: boolean;
 };
-const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, descriptionClassName, labelClassName, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+const ProductTile: ({ name, selected, currentPage, className, onClick, showDescription, showLabel, size, animateIcons, descriptionClassName, labelClassName, iconClassName, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTile;
 //# sourceMappingURL=ProductTile.d.ts.map
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.11.3",
+  "version": "17.11.5-dev.5f95066b",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",