@ably/ui 17.0.0-dev.c0c91c03 → 17.0.0

package/core/Footer.js

@@ -1,2 +1,2 @@
-import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-6"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[6.375rem]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-6"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-5 h-5 group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-2 mt-4"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4"},title),React.createElement("ul",{className:"flex flex-col gap-y-3"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-2"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-6 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-6"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
+import React from"react";import cn from"./utils/cn";import Icon from"./Icon";import Status,{StatusUrl}from"./Status";import Logo from"./Logo";import Badge from"./Badge";import{bottomFooterLinks,footerLinks,socialLinks}from"./Footer/data";import{ablyAwards}from"./Meganav/data";const Footer=()=>{const textColorClassnames="ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus";return React.createElement("footer",{className:"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000","data-id":"footer"},React.createElement("div",{className:"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10"},React.createElement("div",{className:"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between"},React.createElement("div",{className:"flex-1 flex flex-col gap-6"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:"/",theme:theme,additionalLinkAttrs:{className:cn("focus-base rounded w-[6.375rem]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement(Status,{statusUrl:StatusUrl,showDescription:true}),React.createElement("div",{className:"flex gap-x-6"},socialLinks.map(link=>React.createElement("a",{key:link.key,href:link.link,target:"_blank",rel:"noreferrer noopener","aria-label":`Visit Ably on ${link.key}`,className:"w-5 h-5 flex group/social-icon"},React.createElement(Icon,{name:link.monoIcon,size:"20px",additionalCSS:"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"}),React.createElement(Icon,{name:link.colorIcon,size:"20px",additionalCSS:"hidden group-hover/social-icon:flex"})))),React.createElement("div",{className:"flex gap-2 mt-4"},ablyAwards.map(award=>React.createElement("img",{key:award.desc,src:award.image,alt:award.desc,width:"57",height:"64"})))),React.createElement("div",{className:"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12"},footerLinks.map(({title,links})=>React.createElement("div",{key:title,className:"flex-1 basis-1/3 md:basis-1"},React.createElement("h3",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4"},title),React.createElement("ul",{className:"flex flex-col gap-y-3"},links.map(({label,link,badge})=>React.createElement("li",{key:label,className:"flex gap-x-2"},React.createElement("a",{href:link,className:textColorClassnames,"aria-label":`Visit ${label}`},label),badge&&React.createElement(Badge,{size:"xs",className:"ui-text-p4 font-[10px]"},badge)))))))),React.createElement("div",{className:"pt-6 border-t border-neutral-300 dark:border-neutral-1000"},React.createElement("div",{className:"flex gap-6"},bottomFooterLinks.map(link=>React.createElement("a",{key:link.label,href:link.link,className:textColorClassnames,"aria-label":`Visit ${link.label}`},link.label))))))};export default Footer;
 //# sourceMappingURL=Footer.js.map

package/core/Footer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n  const textColorClassnames =\n    \"ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n  return (\n    <footer\n      className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10\">\n        <div className=\"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between\">\n          <div className=\"flex-1 flex flex-col gap-6\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href=\"/\"\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"focus-base rounded w-[6.375rem]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n\n            <Status statusUrl={StatusUrl} showDescription />\n\n            <div className=\"flex gap-x-6\">\n              {socialLinks.map((link) => (\n                <a\n                  key={link.key}\n                  href={link.link}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                  aria-label={`Visit Ably on ${link.key}`}\n                  className=\"w-5 h-5 group/social-icon\"\n                >\n                  <Icon\n                    name={link.monoIcon}\n                    size=\"20px\"\n                    additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n                  />\n                  <Icon\n                    name={link.colorIcon}\n                    size=\"20px\"\n                    additionalCSS=\"hidden group-hover/social-icon:flex\"\n                  />\n                </a>\n              ))}\n            </div>\n            <div className=\"flex gap-2 mt-4\">\n              {ablyAwards.map((award) => (\n                <img\n                  key={award.desc}\n                  src={award.image}\n                  alt={award.desc}\n                  width=\"57\"\n                  height=\"64\"\n                />\n              ))}\n            </div>\n          </div>\n          <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12\">\n            {footerLinks.map(({ title, links }) => (\n              <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n                <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4\">\n                  {title}\n                </h3>\n                <ul className=\"flex flex-col gap-y-3\">\n                  {links.map(({ label, link, badge }) => (\n                    <li key={label} className=\"flex gap-x-2\">\n                      <a\n                        href={link}\n                        className={textColorClassnames}\n                        aria-label={`Visit ${label}`}\n                      >\n                        {label}\n                      </a>\n                      {badge && (\n                        <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n                          {badge}\n                        </Badge>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"pt-6 border-t border-neutral-300 dark:border-neutral-1000\">\n          <div className=\"flex gap-6\">\n            {bottomFooterLinks.map((link) => (\n              <a\n                key={link.label}\n                href={link.link}\n                className={textColorClassnames}\n                aria-label={`Visit ${link.label}`}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,sOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,8BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,kCAAmC,CAC/C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,gBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,6BAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,mBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,+DACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,iEACX4B,OAEH,oBAACG,MAAG/B,UAAU,yBACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,6DACb,oBAACE,OAAIF,UAAU,cACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}
+{"version":3,"sources":["../../src/core/Footer.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport Status, { StatusUrl } from \"./Status\";\nimport { Theme } from \"./styles/colors/types\";\nimport Logo from \"./Logo\";\nimport Badge from \"./Badge\";\nimport { bottomFooterLinks, footerLinks, socialLinks } from \"./Footer/data\";\nimport { ablyAwards } from \"./Meganav/data\";\n\nconst Footer = () => {\n  const textColorClassnames =\n    \"ui-text-label3 font-medium transition-colors text-neutral-1000 dark:text-neutral-300 hover:text-neutral-1300 hover:dark:text-neutral-000 active:text-neutral-800 active:dark:text-neutral-400 focus:outline focus:outline-gui-focus\";\n\n  return (\n    <footer\n      className=\"w-full bg-neutral-100 dark:bg-neutral-1200 border-t border-neutral-300 dark:border-neutral-1000\"\n      data-id=\"footer\"\n    >\n      <div className=\"max-w-screen-xl mx-auto ui-grid-px pt-10 sm:pt-12 md:pt-16 pb-10\">\n        <div className=\"flex flex-col sm:flex-row gap-x-6 gap-y-12 mb-16 justify-between\">\n          <div className=\"flex-1 flex flex-col gap-6\">\n            {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n              <Logo\n                key={theme}\n                href=\"/\"\n                theme={theme}\n                additionalLinkAttrs={{\n                  className: cn(\"focus-base rounded w-[6.375rem]\", {\n                    \"flex dark:hidden\": theme === \"light\",\n                    \"hidden dark:flex\": theme === \"dark\",\n                  }),\n                }}\n              />\n            ))}\n\n            <Status statusUrl={StatusUrl} showDescription />\n\n            <div className=\"flex gap-x-6\">\n              {socialLinks.map((link) => (\n                <a\n                  key={link.key}\n                  href={link.link}\n                  target=\"_blank\"\n                  rel=\"noreferrer noopener\"\n                  aria-label={`Visit Ably on ${link.key}`}\n                  className=\"w-5 h-5 flex group/social-icon\"\n                >\n                  <Icon\n                    name={link.monoIcon}\n                    size=\"20px\"\n                    additionalCSS=\"text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden\"\n                  />\n                  <Icon\n                    name={link.colorIcon}\n                    size=\"20px\"\n                    additionalCSS=\"hidden group-hover/social-icon:flex\"\n                  />\n                </a>\n              ))}\n            </div>\n            <div className=\"flex gap-2 mt-4\">\n              {ablyAwards.map((award) => (\n                <img\n                  key={award.desc}\n                  src={award.image}\n                  alt={award.desc}\n                  width=\"57\"\n                  height=\"64\"\n                />\n              ))}\n            </div>\n          </div>\n          <div className=\"flex-1 md:flex-[2] flex flex-row flex-wrap gap-x-6 gap-y-12\">\n            {footerLinks.map(({ title, links }) => (\n              <div key={title} className=\"flex-1 basis-1/3 md:basis-1\">\n                <h3 className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mb-4\">\n                  {title}\n                </h3>\n                <ul className=\"flex flex-col gap-y-3\">\n                  {links.map(({ label, link, badge }) => (\n                    <li key={label} className=\"flex gap-x-2\">\n                      <a\n                        href={link}\n                        className={textColorClassnames}\n                        aria-label={`Visit ${label}`}\n                      >\n                        {label}\n                      </a>\n                      {badge && (\n                        <Badge size=\"xs\" className=\"ui-text-p4 font-[10px]\">\n                          {badge}\n                        </Badge>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"pt-6 border-t border-neutral-300 dark:border-neutral-1000\">\n          <div className=\"flex gap-6\">\n            {bottomFooterLinks.map((link) => (\n              <a\n                key={link.label}\n                href={link.link}\n                className={textColorClassnames}\n                aria-label={`Visit ${link.label}`}\n              >\n                {link.label}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n};\n\nexport default Footer;\n"],"names":["React","cn","Icon","Status","StatusUrl","Logo","Badge","bottomFooterLinks","footerLinks","socialLinks","ablyAwards","Footer","textColorClassnames","footer","className","data-id","div","map","theme","key","href","additionalLinkAttrs","statusUrl","showDescription","link","a","target","rel","aria-label","name","monoIcon","size","additionalCSS","colorIcon","award","img","desc","src","image","alt","width","height","title","links","h3","ul","label","badge","li"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAAOC,QAAUC,SAAS,KAAQ,UAAW,AAE7C,QAAOC,SAAU,QAAS,AAC1B,QAAOC,UAAW,SAAU,AAC5B,QAASC,iBAAiB,CAAEC,WAAW,CAAEC,WAAW,KAAQ,eAAgB,AAC5E,QAASC,UAAU,KAAQ,gBAAiB,CAE5C,MAAMC,OAAS,KACb,MAAMC,oBACJ,sOAEF,OACE,oBAACC,UACCC,UAAU,kGACVC,UAAQ,UAER,oBAACC,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,oEACb,oBAACE,OAAIF,UAAU,8BACZ,AAAC,CAAC,QAAS,OAAO,CAAaG,GAAG,CAAC,AAACC,OACnC,oBAACb,MACCc,IAAKD,MACLE,KAAK,IACLF,MAAOA,MACPG,oBAAqB,CACnBP,UAAWb,GAAG,kCAAmC,CAC/C,mBAAoBiB,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAIJ,oBAACf,QAAOmB,UAAWlB,UAAWmB,gBAAAA,OAE9B,oBAACP,OAAIF,UAAU,gBACZL,YAAYQ,GAAG,CAAC,AAACO,MAChB,oBAACC,KACCN,IAAKK,KAAKL,GAAG,CACbC,KAAMI,KAAKA,IAAI,CACfE,OAAO,SACPC,IAAI,sBACJC,aAAY,CAAC,cAAc,EAAEJ,KAAKL,GAAG,CAAC,CAAC,CACvCL,UAAU,kCAEV,oBAACZ,MACC2B,KAAML,KAAKM,QAAQ,CACnBC,KAAK,OACLC,cAAc,2EAEhB,oBAAC9B,MACC2B,KAAML,KAAKS,SAAS,CACpBF,KAAK,OACLC,cAAc,2CAKtB,oBAAChB,OAAIF,UAAU,mBACZJ,WAAWO,GAAG,CAAC,AAACiB,OACf,oBAACC,OACChB,IAAKe,MAAME,IAAI,CACfC,IAAKH,MAAMI,KAAK,CAChBC,IAAKL,MAAME,IAAI,CACfI,MAAM,KACNC,OAAO,UAKf,oBAACzB,OAAIF,UAAU,+DACZN,YAAYS,GAAG,CAAC,CAAC,CAAEyB,KAAK,CAAEC,KAAK,CAAE,GAChC,oBAAC3B,OAAIG,IAAKuB,MAAO5B,UAAU,+BACzB,oBAAC8B,MAAG9B,UAAU,iEACX4B,OAEH,oBAACG,MAAG/B,UAAU,yBACX6B,MAAM1B,GAAG,CAAC,CAAC,CAAE6B,KAAK,CAAEtB,IAAI,CAAEuB,KAAK,CAAE,GAChC,oBAACC,MAAG7B,IAAK2B,MAAOhC,UAAU,gBACxB,oBAACW,KACCL,KAAMI,KACNV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEkB,MAAM,CAAC,EAE3BA,OAEFC,OACC,oBAACzC,OAAMyB,KAAK,KAAKjB,UAAU,0BACxBiC,cAWnB,oBAAC/B,OAAIF,UAAU,6DACb,oBAACE,OAAIF,UAAU,cACZP,kBAAkBU,GAAG,CAAC,AAACO,MACtB,oBAACC,KACCN,IAAKK,KAAKsB,KAAK,CACf1B,KAAMI,KAAKA,IAAI,CACfV,UAAWF,oBACXgB,aAAY,CAAC,MAAM,EAAEJ,KAAKsB,KAAK,CAAC,CAAC,EAEhCtB,KAAKsB,KAAK,MAQ3B,CAEA,gBAAenC,MAAO"}

package/core/Icon.js

@@ -1,2 +1,2 @@
-import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed},"inline-block"),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
+import React,{useCallback}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}return React.createElement("svg",{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes},React.createElement("use",{xlinkHref:`#sprite-${iconName}`}))},[iconName,size,color,additionalCSS,additionalAttributes,lightSecondaryColor,darkSecondaryColor]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
 //# sourceMappingURL=Icon.js.map

package/core/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: IconSize;\n  color?: ColorClass | ColorThemeSet;\n  secondaryColor?: ColorClass | ColorThemeSet;\n  additionalCSS?: string;\n  variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n  name,\n  size = \"0.75rem\",\n  color,\n  secondaryColor,\n  additionalCSS = \"\",\n  variant,\n  ...additionalAttributes\n}: IconProps) => {\n  const [lightSecondaryColor, darkSecondaryColor] = (\n    secondaryColor ?? \"\"\n  ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n  const iconName =\n    variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n  const iconSvg = useCallback(\n    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n      let secondaryColorValue;\n      if (secondaryColor) {\n        secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n      } else if (defaultIconSecondaryColor(name)) {\n        secondaryColorValue = convertTailwindClassToVar(\n          defaultIconSecondaryColor(name),\n        );\n      }\n\n      return (\n        <svg\n          className={cn(\n            { [`${color}`]: color },\n            { [`${additionalCSS}`]: additionalCSS },\n            {\n              \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n            },\n            {\n              \"dark:hidden\": secondaryColor && isDark && isThemed,\n            },\n            \"inline-block\",\n          )}\n          style={\n            {\n              width: size,\n              height: size,\n              ...(secondaryColorValue && {\n                \"--ui-icon-secondary-color\": secondaryColorValue,\n              }),\n            } as CSSProperties\n          }\n          {...additionalAttributes}\n        >\n          <use xlinkHref={`#sprite-${iconName}`} />\n        </svg>\n      );\n    },\n    [\n      iconName,\n      size,\n      color,\n      additionalCSS,\n      additionalAttributes,\n      lightSecondaryColor,\n      darkSecondaryColor,\n    ],\n  );\n\n  if (lightSecondaryColor && darkSecondaryColor) {\n    return (\n      <>\n        {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n        {iconSvg(darkSecondaryColor, true, true)}\n      </>\n    );\n  } else if (lightSecondaryColor) {\n    return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n  } else {\n    return iconSvg();\n  }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,EACA,gBAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGT,oBAAoB,EAExB,oBAACe,OAAIC,UAAW,CAAC,QAAQ,EAAEZ,SAAS,CAAC,GAG3C,EACA,CACEA,SACAT,KACAC,MACAE,cACAE,qBACAC,oBACAC,mBACD,EAGH,GAAID,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGI,QAAQL,oBAAqB,MAAO,CAAC,CAACC,oBACtCI,QAAQJ,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOK,QAAQL,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOI,SACT,CACF,CAEA,gBAAeb,IAAK"}
+{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback } from \"react\";\n\nimport { defaultIconSecondaryColor } from \"./Icon/utils\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n  name: IconName;\n  size?: IconSize;\n  color?: ColorClass | ColorThemeSet;\n  secondaryColor?: ColorClass | ColorThemeSet;\n  additionalCSS?: string;\n  variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\nconst Icon = ({\n  name,\n  size = \"0.75rem\",\n  color,\n  secondaryColor,\n  additionalCSS = \"\",\n  variant,\n  ...additionalAttributes\n}: IconProps) => {\n  const [lightSecondaryColor, darkSecondaryColor] = (\n    secondaryColor ?? \"\"\n  ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n  const iconName =\n    variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n  const iconSvg = useCallback(\n    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n      let secondaryColorValue;\n      if (secondaryColor) {\n        secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n      } else if (defaultIconSecondaryColor(name)) {\n        secondaryColorValue = convertTailwindClassToVar(\n          defaultIconSecondaryColor(name),\n        );\n      }\n\n      return (\n        <svg\n          className={cn(\n            { [`${color}`]: color },\n            { [`${additionalCSS}`]: additionalCSS },\n            {\n              \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n            },\n            {\n              \"dark:hidden\": secondaryColor && isDark && isThemed,\n            },\n          )}\n          style={\n            {\n              width: size,\n              height: size,\n              ...(secondaryColorValue && {\n                \"--ui-icon-secondary-color\": secondaryColorValue,\n              }),\n            } as CSSProperties\n          }\n          {...additionalAttributes}\n        >\n          <use xlinkHref={`#sprite-${iconName}`} />\n        </svg>\n      );\n    },\n    [\n      iconName,\n      size,\n      color,\n      additionalCSS,\n      additionalAttributes,\n      lightSecondaryColor,\n      darkSecondaryColor,\n    ],\n  );\n\n  if (lightSecondaryColor && darkSecondaryColor) {\n    return (\n      <>\n        {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n        {iconSvg(darkSecondaryColor, true, true)}\n      </>\n    );\n  } else if (lightSecondaryColor) {\n    return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n  } else {\n    return iconSvg();\n  }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","defaultIconSecondaryColor","convertTailwindClassToVar","cn","Icon","name","size","color","secondaryColor","additionalCSS","variant","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","iconName","endsWith","iconSvg","isDark","isThemed","secondaryColorValue","svg","className","style","width","height","use","xlinkHref"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,KAAQ,OAAQ,AAE1D,QAASC,yBAAyB,KAAQ,cAAe,AAGzD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBC,OAAO,CACP,GAAGC,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDL,CAAAA,gBAAkB,EAAC,EACnBM,KAAK,CAAC,UAER,MAAMC,SACJL,SAAW,CAACL,KAAKW,QAAQ,CAAC,CAAC,CAAC,EAAEN,QAAQ,CAAC,EAAI,CAAC,EAAEL,KAAK,CAAC,EAAEK,QAAQ,CAAC,CAAGL,KAEpE,MAAMY,QAAUjB,YACd,CAACQ,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBlB,0BAA0BM,eAClD,MAAO,GAAIP,0BAA0BI,MAAO,CAC1Ce,oBAAsBlB,0BACpBD,0BAA0BI,MAE9B,CAEA,OACE,oBAACgB,OACCC,UAAWnB,GACT,CAAE,CAAC,CAAC,EAAEI,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,GAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGT,oBAAoB,EAExB,oBAACe,OAAIC,UAAW,CAAC,QAAQ,EAAEZ,SAAS,CAAC,GAG3C,EACA,CACEA,SACAT,KACAC,MACAE,cACAE,qBACAC,oBACAC,mBACD,EAGH,GAAID,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGI,QAAQL,oBAAqB,MAAO,CAAC,CAACC,oBACtCI,QAAQJ,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOK,QAAQL,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOI,SACT,CACF,CAEA,gBAAeb,IAAK"}

package/core/remote-session-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
+{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n  const sessionLoaded = (payload = {}) =>\n    store.dispatch({ type: \"session/loaded\", payload });\n\n  try {\n    if (!sessionUrl) {\n      console.log(\n        `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n      );\n      sessionLoaded();\n      return;\n    }\n\n    const options = {\n      headers: {\n        accept: \"application/json\",\n      },\n      cache: \"no-cache\",\n    };\n\n    if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n      options.credentials = \"include\";\n    }\n\n    const res = await fetch(sessionUrl, options);\n    const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n    if (!jsonResponse) {\n      throw new Error(\"Session endpoint is not serving json\");\n    }\n\n    const payload = await res.json();\n\n    if (payload.error === NOT_FOUND_ERROR_CODE) {\n      sessionLoaded();\n    } else {\n      sessionLoaded(payload);\n    }\n  } catch (e) {\n    sessionLoaded();\n    console.warn(\"Could not fetch session data due to error:\", e);\n  }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n  [REDUCER_KEY]: (state = initialState, action) => {\n    switch (action.type) {\n      case \"session/loaded\":\n        return { ...state, data: action.payload };\n      default:\n        return state;\n    }\n  },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GAuCW,MAvC4B,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}

package/package.json

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

package/tailwind.config.js

@@ -195,26 +195,6 @@ module.exports = {
         "monospace",
       ],
     },
-    padding: (theme) => ({
-      btn: "var(--spacing-btn)",
-      "btn-small": "var(--spacing-btn-small)",
-      "btn-xsmall": "var(--spacing-btn-xsmall)",
-      "btn-large": "var(--spacing-btn-large)",
-      "menu-row": "var(--spacing-menu-row)",
-      "menu-row-snug": "var(--spacing-menu-row-snug)",
-      "menu-row-title": "var(--spacing-menu-row-title)",
-      media: "var(--spacing-media)",
-      input: "var(--spacing-input)",
-      ...theme("spacing"),
-    }),
-    boxShadow: {
-      subtle: "0px 1px 0px var(--color-neutral-500)",
-      tooltip: "0px 5px 10px 0px #00000022",
-      container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
-      "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
-      input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
-      quote: "0rem 1.5rem 2rem 0rem #0000000d",
-    },
     extend: {
       backgroundImage: {
         "gradient-active-orange": "var(--gradient-active-orange)",
@@ -246,6 +226,25 @@ module.exports = {
         snug: "var(--lh-snug)",
         relaxed: "var(--lh-relaxed)",
       },
+      padding: {
+        btn: "var(--spacing-btn)",
+        "btn-small": "var(--spacing-btn-small)",
+        "btn-xsmall": "var(--spacing-btn-xsmall)",
+        "btn-large": "var(--spacing-btn-large)",
+        "menu-row": "var(--spacing-menu-row)",
+        "menu-row-snug": "var(--spacing-menu-row-snug)",
+        "menu-row-title": "var(--spacing-menu-row-title)",
+        media: "var(--spacing-media)",
+        input: "var(--spacing-input)",
+      },
+      boxShadow: {
+        subtle: "0px 1px 0px var(--color-neutral-500)",
+        tooltip: "0px 5px 10px 0px #00000022",
+        container: "0px 40px 40px rgba(0, 0, 0, 0.1)",
+        "container-subtle": "0px 16px 64px rgba(0, 0, 0, 0.1)",
+        input: "0px 0px 8px 0px rgba(8, 103, 196, 1)", // color-gui-hover at 50%
+        quote: "0rem 1.5rem 2rem 0rem #0000000d",
+      },
       keyframes: {
         tooltipEntry: {
           "0%": { transform: "translateY(8px)", opacity: 0 },
@@ -315,5 +314,8 @@ module.exports = {
       circle: "circle",
     },
   },
+  corePlugins: {
+    preflight: false,
+  },
   plugins: [require("@tailwindcss/container-queries")],
 };