@intlayer/design-system 3.5.4 → 3.5.6

package/dist/components/Breadcrumb/breadcrumb.content.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const intlayer = require("intlayer");
+const breadCrumbContent = {
+  key: "breadcrumb",
+  content: {
+    linkLabel: intlayer.t({
+      en: "Go to",
+      fr: "Aller à",
+      es: "Ir a",
+      "en-GB": "Go to",
+      de: "Gehe zu",
+      ja: "に移動",
+      ko: "로 이동",
+      zh: "转到",
+      it: "Vai a",
+      pt: "Ir para",
+      hi: "कर जाएं",
+      ar: "اذهب إلى",
+      ru: "Перейти на"
+    })
+  }
+};
+exports.breadCrumbContent = breadCrumbContent;
+exports.default = breadCrumbContent;
+//# sourceMappingURL=breadcrumb.content.cjs.map

package/dist/components/Breadcrumb/breadcrumb.content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.content.cjs","sources":["../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":["import { type DeclarationContent, t } from 'intlayer';\n\nexport const breadCrumbContent = {\n  key: 'breadcrumb',\n  content: {\n    linkLabel: t({\n      en: 'Go to',\n      fr: 'Aller à',\n      es: 'Ir a',\n      'en-GB': 'Go to',\n      de: 'Gehe zu',\n      ja: 'に移動',\n      ko: '로 이동',\n      zh: '转到',\n      it: 'Vai a',\n      pt: 'Ir para',\n      hi: 'कर जाएं',\n      ar: 'اذهب إلى',\n      ru: 'Перейти на',\n    }),\n  },\n} satisfies DeclarationContent;\n\nexport default breadCrumbContent;\n"],"names":["t"],"mappings":";;;AAEO,MAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,WAAWA,SAAAA,EAAE;AAAA,MACX,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;;;"}

package/dist/components/Breadcrumb/breadcrumb.content.d.ts

@@ -0,0 +1,8 @@
+export declare const breadCrumbContent: {
+    key: string;
+    content: {
+        linkLabel: import('@intlayer/core').TranslationContent<string>;
+    };
+};
+export default breadCrumbContent;
+//# sourceMappingURL=breadcrumb.content.d.ts.map

package/dist/components/Breadcrumb/breadcrumb.content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.content.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/breadcrumb.content.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;CAmBA,CAAC;AAE/B,eAAe,iBAAiB,CAAC"}

package/dist/components/Breadcrumb/breadcrumb.content.mjs

@@ -0,0 +1,26 @@
+import { t } from "intlayer";
+const breadCrumbContent = {
+  key: "breadcrumb",
+  content: {
+    linkLabel: t({
+      en: "Go to",
+      fr: "Aller à",
+      es: "Ir a",
+      "en-GB": "Go to",
+      de: "Gehe zu",
+      ja: "に移動",
+      ko: "로 이동",
+      zh: "转到",
+      it: "Vai a",
+      pt: "Ir para",
+      hi: "कर जाएं",
+      ar: "اذهب إلى",
+      ru: "Перейти на"
+    })
+  }
+};
+export {
+  breadCrumbContent,
+  breadCrumbContent as default
+};
+//# sourceMappingURL=breadcrumb.content.mjs.map

package/dist/components/Breadcrumb/breadcrumb.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.content.mjs","sources":["../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":["import { type DeclarationContent, t } from 'intlayer';\n\nexport const breadCrumbContent = {\n  key: 'breadcrumb',\n  content: {\n    linkLabel: t({\n      en: 'Go to',\n      fr: 'Aller à',\n      es: 'Ir a',\n      'en-GB': 'Go to',\n      de: 'Gehe zu',\n      ja: 'に移動',\n      ko: '로 이동',\n      zh: '转到',\n      it: 'Vai a',\n      pt: 'Ir para',\n      hi: 'कर जाएं',\n      ar: 'اذهب إلى',\n      ru: 'Перейти на',\n    }),\n  },\n} satisfies DeclarationContent;\n\nexport default breadCrumbContent;\n"],"names":[],"mappings":";AAEO,MAAM,oBAAoB;AAAA,EAC/B,KAAK;AAAA,EACL,SAAS;AAAA,IACP,WAAW,EAAE;AAAA,MACX,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACL,CAAA;AAAA,EAAA;AAEL;"}

package/dist/components/Breadcrumb/index.cjs

@@ -1,43 +1,82 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../jsx-runtime-XHKiWCTo.cjs");
 const lucideReact = require("lucide-react");
 const require$$0 = require("react");
+const reactIntlayer = require("react-intlayer");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Button_Button = require("../Button/Button.cjs");
 const components_Link_Link = require("../Link/Link.cjs");
-const LinkLink = ({ href, children, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  components_Link_Link.Link,
-  {
-    href,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    label: `Go to ${children}`,
-    color: "text",
-    onClick,
-    itemProp: "itemListElement",
-    children
-  }
-);
-const ButtonLink = ({ children: text, onClick }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  components_Button_Button.Button,
-  {
-    onClick,
-    label: `Go to ${text}`,
-    variant: "link",
-    "aria-label": `Go to ${text}`,
-    color: "text",
-    itemProp: "itemListElement",
-    children: text
-  }
-);
-const Span = ({ children }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { "aria-label": `Go to ${children}`, itemProp: "itemListElement", children });
+const components_Breadcrumb_breadcrumb_content = require("./breadcrumb.content.cjs");
+const LinkLink = ({
+  href,
+  lang,
+  children,
+  onClick,
+  color,
+  position,
+  locale,
+  ...props
+}) => {
+  const { linkLabel } = reactIntlayer.useDictionary(components_Breadcrumb_breadcrumb_content.breadCrumbContent);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_Link_Link.Link,
+      {
+        href,
+        locale,
+        color,
+        onClick,
+        itemProp: "item",
+        itemScope: true,
+        itemType: "https://schema.org/WebPage",
+        ...props,
+        label: `${linkLabel} ${children}`,
+        itemID: href,
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { itemProp: "name", children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+  ] });
+};
+const ButtonLink = ({
+  children: text,
+  onClick,
+  color,
+  position,
+  ...props
+}) => {
+  const { linkLabel } = reactIntlayer.useDictionary(components_Breadcrumb_breadcrumb_content.breadCrumbContent);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      components_Button_Button.Button,
+      {
+        onClick,
+        variant: "link",
+        label: `${linkLabel} ${text}`,
+        color,
+        itemProp: "item",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { itemProp: "name", children: text })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+  ] });
+};
+const Span = ({ children, position, ...props }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { itemProp: "item", children: [
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { itemProp: "name", ...props, children }),
+  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+] });
 const Breadcrumb = ({
   links,
   className,
+  color = "text",
+  locale,
+  elementType = "page",
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-  "div",
+}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  "ol",
   {
     className: utils_cn.cn(
       "flex flex-row flex-wrap items-center gap-2 text-sm",
@@ -50,22 +89,55 @@ const Breadcrumb = ({
       const isLastLink = index === links.length - 1;
       const isLink = typeof link === "object" && typeof link.href === "string";
       const isButton = typeof link === "object" && typeof link.onClick === "function";
+      const isActive = index === links.length - 1;
+      const ariaCurrent = isActive ? elementType : void 0;
       const text = link.text ?? link;
-      let Section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Span, { children: text });
+      let section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Span, { position: index + 1, "aria-current": ariaCurrent, children: text }, text);
       if (isLink) {
-        Section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(LinkLink, { href: link.href, children: text }, text);
+        section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          LinkLink,
+          {
+            href: link.href,
+            color,
+            position: index + 1,
+            locale,
+            "aria-current": ariaCurrent,
+            children: text
+          },
+          text
+        );
       } else if (isButton) {
-        Section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ButtonLink, { onClick: link.onClick, children: text }, text);
+        section = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          ButtonLink,
+          {
+            onClick: link.onClick,
+            color,
+            position: index + 1,
+            "aria-current": ariaCurrent,
+            children: text
+          },
+          text
+        );
       }
+      const listElement = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        "li",
+        {
+          itemProp: "itemListElement",
+          itemScope: true,
+          itemType: "https://schema.org/ListItem",
+          children: section
+        },
+        text
+      );
       if (isLastLink) {
-        return Section;
+        return listElement;
       }
       return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(require$$0.Fragment, { children: [
-        Section,
+        listElement,
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(lucideReact.ChevronRightIcon, { size: 10 })
       ] }, text);
     })
   }
-);
+) });
 exports.Breadcrumb = Breadcrumb;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Breadcrumb/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, HTMLAttributes, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Link } from '../Link';\n\ntype LinkProps = {\n  href: string;\n  children: string;\n  onClick?: () => void;\n};\n\nconst LinkLink: FC<LinkProps> = ({ href, children, onClick }) => (\n  <Link\n    href={href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    label={`Go to ${children}`}\n    color=\"text\"\n    onClick={onClick}\n    itemProp=\"itemListElement\"\n  >\n    {children}\n  </Link>\n);\n\ntype ButtonProps = {\n  children: string;\n  onClick: () => void;\n};\n\nconst ButtonLink: FC<ButtonProps> = ({ children: text, onClick }) => (\n  <Button\n    onClick={onClick}\n    label={`Go to ${text}`}\n    variant=\"link\"\n    aria-label={`Go to ${text}`}\n    color=\"text\"\n    itemProp=\"itemListElement\"\n  >\n    {text}\n  </Button>\n);\n\ntype SpanProps = {\n  children: string;\n};\n\nconst Span: FC<SpanProps> = ({ children }) => (\n  <span aria-label={`Go to ${children}`} itemProp=\"itemListElement\">\n    {children}\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\ntype BreadcrumbProps = {\n  links: BreadcrumbLink[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'flex flex-row flex-wrap items-center gap-2 text-sm',\n      className\n    )}\n    itemScope\n    itemType=\"http://schema.org/BreadcrumbList\"\n    {...props}\n  >\n    {links.map((link, index) => {\n      const isLastLink = index === links.length - 1;\n      const isLink = typeof link === 'object' && typeof link.href === 'string';\n      const isButton =\n        typeof link === 'object' && typeof link.onClick === 'function';\n\n      const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n      let Section = <Span>{text}</Span>;\n\n      if (isLink) {\n        Section = (\n          <LinkLink key={text} href={link.href!}>\n            {text}\n          </LinkLink>\n        );\n      } else if (isButton) {\n        Section = (\n          <ButtonLink key={text} onClick={link.onClick!}>\n            {text}\n          </ButtonLink>\n        );\n      }\n\n      if (isLastLink) {\n        return Section;\n      }\n\n      return (\n        <Fragment key={text}>\n          {Section}\n          <ChevronRightIcon size={10} />\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"names":["jsx","Link","Button","cn","Fragment","ChevronRightIcon"],"mappings":";;;;;;;;AAYA,MAAM,WAA0B,CAAC,EAAE,MAAM,UAAU,QACjD,MAAAA,2BAAA,kBAAA;AAAA,EAACC,qBAAA;AAAA,EAAA;AAAA,IACC;AAAA,IACA,QAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAO,SAAS,QAAQ;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,UAAS;AAAA,IAER;AAAA,EAAA;AACH;AAQF,MAAM,aAA8B,CAAC,EAAE,UAAU,MAAM,QACrD,MAAAD,2BAAA,kBAAA;AAAA,EAACE,yBAAA;AAAA,EAAA;AAAA,IACC;AAAA,IACA,OAAO,SAAS,IAAI;AAAA,IACpB,SAAQ;AAAA,IACR,cAAY,SAAS,IAAI;AAAA,IACzB,OAAM;AAAA,IACN,UAAS;AAAA,IAER,UAAA;AAAA,EAAA;AACH;AAOF,MAAM,OAAsB,CAAC,EAAE,SAC7B,MAAAF,2BAAA,kBAAA,IAAC,QAAK,EAAA,cAAY,SAAS,QAAQ,IAAI,UAAS,mBAC7C,SACH,CAAA;AAcK,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWG,SAAA;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAS;AAAA,IACT,UAAS;AAAA,IACR,GAAG;AAAA,IAEH,UAAM,MAAA,IAAI,CAAC,MAAM,UAAU;AACpB,YAAA,aAAa,UAAU,MAAM,SAAS;AAC5C,YAAM,SAAS,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS;AAChE,YAAM,WACJ,OAAO,SAAS,YAAY,OAAO,KAAK,YAAY;AAEhD,YAAA,OAAQ,KAAgC,QAAQ;AAElD,UAAA,UAAWH,2BAAAA,kBAAAA,IAAA,MAAA,EAAM,UAAK,KAAA,CAAA;AAE1B,UAAI,QAAQ;AACV,mEACG,UAAoB,EAAA,MAAM,KAAK,MAC7B,kBADY,IAEf;AAAA,iBAEO,UAAU;AACnB,mEACG,YAAsB,EAAA,SAAS,KAAK,SAClC,kBADc,IAEjB;AAAA,MAAA;AAIJ,UAAI,YAAY;AACP,eAAA;AAAA,MAAA;AAGT,+DACGI,qBACE,EAAA,UAAA;AAAA,QAAA;AAAA,QACDJ,2BAAAA,kBAAAA,IAACK,YAAiB,kBAAA,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,GAFf,IAGf;AAAA,IAEH,CAAA;AAAA,EAAA;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, HTMLAttributes, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\nimport { Link, type LinkProps } from '../Link';\nimport { breadCrumbContent } from './breadcrumb.content';\n\ntype LinkLinkProps = {\n  children: string;\n  position: number;\n  locale?: Locales;\n} & Omit<LinkProps, 'children' | 'label'>;\n\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  ...props\n}) => {\n  const { linkLabel } = useDictionary(breadCrumbContent);\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype ButtonButtonProps = {\n  children: string;\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  ...props\n}) => {\n  const { linkLabel } = useDictionary(breadCrumbContent);\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant=\"link\"\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype SpanProps = {\n  children: string;\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\nconst Span: FC<SpanProps> = ({ children, position, ...props }) => (\n  <span itemProp=\"item\">\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  links: BreadcrumbLink[];\n  color?:\n    | 'primary'\n    | 'destructive'\n    | 'neutral'\n    | 'light'\n    | 'dark'\n    | 'text'\n    | 'custom';\n  locale?: Locales;\n  elementType?: 'page' | 'location';\n} & HTMLAttributes<HTMLOListElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = 'text',\n  locale,\n  elementType = 'page',\n  ...props\n}) => (\n  <nav aria-label=\"breadcrumb\">\n    <ol\n      className={cn(\n        'flex flex-row flex-wrap items-center gap-2 text-sm',\n        className\n      )}\n      itemScope\n      itemType=\"http://schema.org/BreadcrumbList\"\n      {...props}\n    >\n      {links.map((link, index) => {\n        const isLastLink = index === links.length - 1;\n        const isLink =\n          typeof link === 'object' && typeof link.href === 'string';\n        const isButton =\n          typeof link === 'object' && typeof link.onClick === 'function';\n        const isActive = index === links.length - 1;\n        const ariaCurrent = isActive ? elementType : undefined;\n\n        const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n        let section = (\n          <Span key={text} position={index + 1} aria-current={ariaCurrent}>\n            {text}\n          </Span>\n        );\n\n        if (isLink) {\n          section = (\n            <LinkLink\n              key={text}\n              href={link.href!}\n              color={color}\n              position={index + 1}\n              locale={locale}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </LinkLink>\n          );\n        } else if (isButton) {\n          section = (\n            <ButtonLink\n              key={text}\n              onClick={link.onClick!}\n              color={color}\n              position={index + 1}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </ButtonLink>\n          );\n        }\n\n        const listElement = (\n          <li\n            itemProp=\"itemListElement\"\n            itemScope\n            itemType=\"https://schema.org/ListItem\"\n            key={text}\n          >\n            {section}\n          </li>\n        );\n\n        if (isLastLink) {\n          return listElement;\n        }\n\n        return (\n          <Fragment key={text}>\n            {listElement}\n            <ChevronRightIcon size={10} />\n          </Fragment>\n        );\n      })}\n    </ol>\n  </nav>\n);\n"],"names":["useDictionary","breadCrumbContent","jsxs","Fragment","jsx","Link","Button","cn","ChevronRightIcon"],"mappings":"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"}

package/dist/components/Breadcrumb/index.d.ts

@@ -1,3 +1,4 @@
+import { Locales } from '@intlayer/config/client';
 import { HTMLAttributes, FC } from 'react';
 type DetailedBreadcrumbLink = {
     href?: string;
@@ -5,9 +6,12 @@ type DetailedBreadcrumbLink = {
     onClick?: () => void;
 };
 export type BreadcrumbLink = string | DetailedBreadcrumbLink;
-type BreadcrumbProps = {
+export type BreadcrumbProps = {
     links: BreadcrumbLink[];
-} & HTMLAttributes<HTMLDivElement>;
+    color?: 'primary' | 'destructive' | 'neutral' | 'light' | 'dark' | 'text' | 'custom';
+    locale?: Locales;
+    elementType?: 'page' | 'location';
+} & HTMLAttributes<HTMLOListElement>;
 export declare const Breadcrumb: FC<BreadcrumbProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAqD1D,KAAK,sBAAsB,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,sBAAsB,CAAC;AAE7D,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkD1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,OAAO,EAAY,cAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AA4F1D,KAAK,sBAAsB,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,sBAAsB,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAC,EACF,SAAS,GACT,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CACnC,GAAG,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAErC,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAsF1C,CAAC"}

package/dist/components/Breadcrumb/index.mjs

@@ -1,41 +1,80 @@
+"use client";
 import { j as jsxRuntimeExports } from "../../jsx-runtime-DaNGiM0W.js";
 import { ChevronRightIcon } from "lucide-react";
 import { Fragment } from "react";
+import { useDictionary } from "react-intlayer";
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Link } from "../Link/Link.mjs";
-const LinkLink = ({ href, children, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Link,
-  {
-    href,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    label: `Go to ${children}`,
-    color: "text",
-    onClick,
-    itemProp: "itemListElement",
-    children
-  }
-);
-const ButtonLink = ({ children: text, onClick }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Button,
-  {
-    onClick,
-    label: `Go to ${text}`,
-    variant: "link",
-    "aria-label": `Go to ${text}`,
-    color: "text",
-    itemProp: "itemListElement",
-    children: text
-  }
-);
-const Span = ({ children }) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-label": `Go to ${children}`, itemProp: "itemListElement", children });
+import { breadCrumbContent } from "./breadcrumb.content.mjs";
+const LinkLink = ({
+  href,
+  lang,
+  children,
+  onClick,
+  color,
+  position,
+  locale,
+  ...props
+}) => {
+  const { linkLabel } = useDictionary(breadCrumbContent);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Link,
+      {
+        href,
+        locale,
+        color,
+        onClick,
+        itemProp: "item",
+        itemScope: true,
+        itemType: "https://schema.org/WebPage",
+        ...props,
+        label: `${linkLabel} ${children}`,
+        itemID: href,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { itemProp: "name", children })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+  ] });
+};
+const ButtonLink = ({
+  children: text,
+  onClick,
+  color,
+  position,
+  ...props
+}) => {
+  const { linkLabel } = useDictionary(breadCrumbContent);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        onClick,
+        variant: "link",
+        label: `${linkLabel} ${text}`,
+        color,
+        itemProp: "item",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { itemProp: "name", children: text })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+  ] });
+};
+const Span = ({ children, position, ...props }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { itemProp: "item", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { itemProp: "name", ...props, children }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { itemProp: "position", content: position.toString() })
+] });
 const Breadcrumb = ({
   links,
   className,
+  color = "text",
+  locale,
+  elementType = "page",
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "div",
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "ol",
   {
     className: cn(
       "flex flex-row flex-wrap items-center gap-2 text-sm",
@@ -48,23 +87,56 @@ const Breadcrumb = ({
       const isLastLink = index === links.length - 1;
       const isLink = typeof link === "object" && typeof link.href === "string";
       const isButton = typeof link === "object" && typeof link.onClick === "function";
+      const isActive = index === links.length - 1;
+      const ariaCurrent = isActive ? elementType : void 0;
       const text = link.text ?? link;
-      let Section = /* @__PURE__ */ jsxRuntimeExports.jsx(Span, { children: text });
+      let section = /* @__PURE__ */ jsxRuntimeExports.jsx(Span, { position: index + 1, "aria-current": ariaCurrent, children: text }, text);
       if (isLink) {
-        Section = /* @__PURE__ */ jsxRuntimeExports.jsx(LinkLink, { href: link.href, children: text }, text);
+        section = /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LinkLink,
+          {
+            href: link.href,
+            color,
+            position: index + 1,
+            locale,
+            "aria-current": ariaCurrent,
+            children: text
+          },
+          text
+        );
       } else if (isButton) {
-        Section = /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonLink, { onClick: link.onClick, children: text }, text);
+        section = /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ButtonLink,
+          {
+            onClick: link.onClick,
+            color,
+            position: index + 1,
+            "aria-current": ariaCurrent,
+            children: text
+          },
+          text
+        );
       }
+      const listElement = /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "li",
+        {
+          itemProp: "itemListElement",
+          itemScope: true,
+          itemType: "https://schema.org/ListItem",
+          children: section
+        },
+        text
+      );
       if (isLastLink) {
-        return Section;
+        return listElement;
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-        Section,
+        listElement,
         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRightIcon, { size: 10 })
       ] }, text);
     })
   }
-);
+) });
 export {
   Breadcrumb
 };

package/dist/components/Breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["import { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, HTMLAttributes, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { Link } from '../Link';\n\ntype LinkProps = {\n  href: string;\n  children: string;\n  onClick?: () => void;\n};\n\nconst LinkLink: FC<LinkProps> = ({ href, children, onClick }) => (\n  <Link\n    href={href}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    label={`Go to ${children}`}\n    color=\"text\"\n    onClick={onClick}\n    itemProp=\"itemListElement\"\n  >\n    {children}\n  </Link>\n);\n\ntype ButtonProps = {\n  children: string;\n  onClick: () => void;\n};\n\nconst ButtonLink: FC<ButtonProps> = ({ children: text, onClick }) => (\n  <Button\n    onClick={onClick}\n    label={`Go to ${text}`}\n    variant=\"link\"\n    aria-label={`Go to ${text}`}\n    color=\"text\"\n    itemProp=\"itemListElement\"\n  >\n    {text}\n  </Button>\n);\n\ntype SpanProps = {\n  children: string;\n};\n\nconst Span: FC<SpanProps> = ({ children }) => (\n  <span aria-label={`Go to ${children}`} itemProp=\"itemListElement\">\n    {children}\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\ntype BreadcrumbProps = {\n  links: BreadcrumbLink[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'flex flex-row flex-wrap items-center gap-2 text-sm',\n      className\n    )}\n    itemScope\n    itemType=\"http://schema.org/BreadcrumbList\"\n    {...props}\n  >\n    {links.map((link, index) => {\n      const isLastLink = index === links.length - 1;\n      const isLink = typeof link === 'object' && typeof link.href === 'string';\n      const isButton =\n        typeof link === 'object' && typeof link.onClick === 'function';\n\n      const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n      let Section = <Span>{text}</Span>;\n\n      if (isLink) {\n        Section = (\n          <LinkLink key={text} href={link.href!}>\n            {text}\n          </LinkLink>\n        );\n      } else if (isButton) {\n        Section = (\n          <ButtonLink key={text} onClick={link.onClick!}>\n            {text}\n          </ButtonLink>\n        );\n      }\n\n      if (isLastLink) {\n        return Section;\n      }\n\n      return (\n        <Fragment key={text}>\n          {Section}\n          <ChevronRightIcon size={10} />\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"names":["jsx"],"mappings":";;;;;;AAYA,MAAM,WAA0B,CAAC,EAAE,MAAM,UAAU,QACjD,MAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,QAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAO,SAAS,QAAQ;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,UAAS;AAAA,IAER;AAAA,EAAA;AACH;AAQF,MAAM,aAA8B,CAAC,EAAE,UAAU,MAAM,QACrD,MAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,OAAO,SAAS,IAAI;AAAA,IACpB,SAAQ;AAAA,IACR,cAAY,SAAS,IAAI;AAAA,IACzB,OAAM;AAAA,IACN,UAAS;AAAA,IAER,UAAA;AAAA,EAAA;AACH;AAOF,MAAM,OAAsB,CAAC,EAAE,SAC7B,MAAAA,kCAAA,IAAC,QAAK,EAAA,cAAY,SAAS,QAAQ,IAAI,UAAS,mBAC7C,SACH,CAAA;AAcK,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAS;AAAA,IACT,UAAS;AAAA,IACR,GAAG;AAAA,IAEH,UAAM,MAAA,IAAI,CAAC,MAAM,UAAU;AACpB,YAAA,aAAa,UAAU,MAAM,SAAS;AAC5C,YAAM,SAAS,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS;AAChE,YAAM,WACJ,OAAO,SAAS,YAAY,OAAO,KAAK,YAAY;AAEhD,YAAA,OAAQ,KAAgC,QAAQ;AAElD,UAAA,UAAWA,kCAAAA,IAAA,MAAA,EAAM,UAAK,KAAA,CAAA;AAE1B,UAAI,QAAQ;AACV,wDACG,UAAoB,EAAA,MAAM,KAAK,MAC7B,kBADY,IAEf;AAAA,iBAEO,UAAU;AACnB,wDACG,YAAsB,EAAA,SAAS,KAAK,SAClC,kBADc,IAEjB;AAAA,MAAA;AAIJ,UAAI,YAAY;AACP,eAAA;AAAA,MAAA;AAGT,oDACG,UACE,EAAA,UAAA;AAAA,QAAA;AAAA,QACDA,kCAAAA,IAAC,kBAAiB,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,GAFf,IAGf;AAAA,IAEH,CAAA;AAAA,EAAA;AACH;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport { Locales } from '@intlayer/config/client';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, HTMLAttributes, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\nimport { Link, type LinkProps } from '../Link';\nimport { breadCrumbContent } from './breadcrumb.content';\n\ntype LinkLinkProps = {\n  children: string;\n  position: number;\n  locale?: Locales;\n} & Omit<LinkProps, 'children' | 'label'>;\n\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  ...props\n}) => {\n  const { linkLabel } = useDictionary(breadCrumbContent);\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype ButtonButtonProps = {\n  children: string;\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  ...props\n}) => {\n  const { linkLabel } = useDictionary(breadCrumbContent);\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant=\"link\"\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype SpanProps = {\n  children: string;\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\nconst Span: FC<SpanProps> = ({ children, position, ...props }) => (\n  <span itemProp=\"item\">\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  links: BreadcrumbLink[];\n  color?:\n    | 'primary'\n    | 'destructive'\n    | 'neutral'\n    | 'light'\n    | 'dark'\n    | 'text'\n    | 'custom';\n  locale?: Locales;\n  elementType?: 'page' | 'location';\n} & HTMLAttributes<HTMLOListElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = 'text',\n  locale,\n  elementType = 'page',\n  ...props\n}) => (\n  <nav aria-label=\"breadcrumb\">\n    <ol\n      className={cn(\n        'flex flex-row flex-wrap items-center gap-2 text-sm',\n        className\n      )}\n      itemScope\n      itemType=\"http://schema.org/BreadcrumbList\"\n      {...props}\n    >\n      {links.map((link, index) => {\n        const isLastLink = index === links.length - 1;\n        const isLink =\n          typeof link === 'object' && typeof link.href === 'string';\n        const isButton =\n          typeof link === 'object' && typeof link.onClick === 'function';\n        const isActive = index === links.length - 1;\n        const ariaCurrent = isActive ? elementType : undefined;\n\n        const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n        let section = (\n          <Span key={text} position={index + 1} aria-current={ariaCurrent}>\n            {text}\n          </Span>\n        );\n\n        if (isLink) {\n          section = (\n            <LinkLink\n              key={text}\n              href={link.href!}\n              color={color}\n              position={index + 1}\n              locale={locale}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </LinkLink>\n          );\n        } else if (isButton) {\n          section = (\n            <ButtonLink\n              key={text}\n              onClick={link.onClick!}\n              color={color}\n              position={index + 1}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </ButtonLink>\n          );\n        }\n\n        const listElement = (\n          <li\n            itemProp=\"itemListElement\"\n            itemScope\n            itemType=\"https://schema.org/ListItem\"\n            key={text}\n          >\n            {section}\n          </li>\n        );\n\n        if (isLastLink) {\n          return listElement;\n        }\n\n        return (\n          <Fragment key={text}>\n            {listElement}\n            <ChevronRightIcon size={10} />\n          </Fragment>\n        );\n      })}\n    </ol>\n  </nav>\n);\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;AAkBA,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,UAAA,IAAc,cAAc,iBAAiB;AAErD,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAS;AAAA,QACT,WAAS;AAAA,QACT,UAAS;AAAA,QACR,GAAG;AAAA,QACJ,OAAO,GAAG,SAAS,IAAI,QAAQ;AAAA,QAC/B,QAAQ;AAAA,QAER,UAACA,kCAAA,IAAA,QAAA,EAAK,UAAS,QAAQ,SAAS,CAAA;AAAA,MAAA;AAAA,IAClC;AAAA,0CACC,QAAK,EAAA,UAAS,YAAW,SAAS,SAAS,WAAY,CAAA;AAAA,EAAA,GAC1D;AAEJ;AAOA,MAAM,aAAoC,CAAC;AAAA,EACzC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,UAAA,IAAc,cAAc,iBAAiB;AAErD,SAEIF,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,OAAO,GAAG,SAAS,IAAI,IAAI;AAAA,QAC3B;AAAA,QACA,UAAS;AAAA,QACR,GAAG;AAAA,QAEJ,UAACA,kCAAA,IAAA,QAAA,EAAK,UAAS,QAAQ,UAAK,KAAA,CAAA;AAAA,MAAA;AAAA,IAC9B;AAAA,0CACC,QAAK,EAAA,UAAS,YAAW,SAAS,SAAS,WAAY,CAAA;AAAA,EAAA,GAC1D;AAEJ;AAOA,MAAM,OAAsB,CAAC,EAAE,UAAU,UAAU,GAAG,MAAA,MACpDF,kCAAA,KAAC,QAAK,EAAA,UAAS,QACb,UAAA;AAAA,EAAAE,kCAAA,IAAC,QAAK,EAAA,UAAS,QAAQ,GAAG,OACvB,UACH;AAAA,wCACC,QAAK,EAAA,UAAS,YAAW,SAAS,SAAS,WAAY,CAAA;AAAA,GAC1D;AAwBK,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MACEA,kCAAAA,IAAC,OAAI,EAAA,cAAW,cACd,UAAAA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACA,WAAS;AAAA,IACT,UAAS;AAAA,IACR,GAAG;AAAA,IAEH,UAAM,MAAA,IAAI,CAAC,MAAM,UAAU;AACpB,YAAA,aAAa,UAAU,MAAM,SAAS;AAC5C,YAAM,SACJ,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS;AACnD,YAAM,WACJ,OAAO,SAAS,YAAY,OAAO,KAAK,YAAY;AAChD,YAAA,WAAW,UAAU,MAAM,SAAS;AACpC,YAAA,cAAc,WAAW,cAAc;AAEvC,YAAA,OAAQ,KAAgC,QAAQ;AAElD,UAAA,gDACD,MAAgB,EAAA,UAAU,QAAQ,GAAG,gBAAc,aACjD,UAAA,KAAA,GADQ,IAEX;AAGF,UAAI,QAAQ;AAER,kBAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAM,KAAK;AAAA,YACX;AAAA,YACA,UAAU,QAAQ;AAAA,YAClB;AAAA,YACA,gBAAc;AAAA,YAEb,UAAA;AAAA,UAAA;AAAA,UAPI;AAAA,QAQP;AAAA,iBAEO,UAAU;AAEjB,kBAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,KAAK;AAAA,YACd;AAAA,YACA,UAAU,QAAQ;AAAA,YAClB,gBAAc;AAAA,YAEb,UAAA;AAAA,UAAA;AAAA,UANI;AAAA,QAOP;AAAA,MAAA;AAIJ,YAAM,cACJA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAS;AAAA,UACT,UAAS;AAAA,UAGR,UAAA;AAAA,QAAA;AAAA,QAFI;AAAA,MAGP;AAGF,UAAI,YAAY;AACP,eAAA;AAAA,MAAA;AAIP,aAAAF,kCAAA,KAACC,UAAA,EACE,UAAA;AAAA,QAAA;AAAA,QACDC,kCAAAA,IAAC,kBAAiB,EAAA,MAAM,GAAI,CAAA;AAAA,MAAA,EAAA,GAFf,IAGf;AAAA,IAEH,CAAA;AAAA,EAAA;AACH,EACF,CAAA;"}

package/dist/components/Button/Button.cjs

@@ -31,10 +31,10 @@ const buttonVariants = classVarianceAuthority.cva(
         md: "min-h-8 px-6 max-md:py-2 text-sm",
         lg: "min-h-10 px-8 max-md:py-3 text-base",
         xl: "min-h-11 px-10 max-md:py-4 text-lg",
-        "icon-sm": "p-0",
-        "icon-md": "p-0",
-        "icon-lg": "p-0",
-        "icon-xl": "p-0"
+        "icon-sm": "p-0.5",
+        "icon-md": "p-1",
+        "icon-lg": "p-1.5",
+        "icon-xl": "p-2"
       },
       variant: {
         default: "rounded-lg text-text-opposite dark:text-text-opposite-dark",
@@ -42,7 +42,7 @@ const buttonVariants = classVarianceAuthority.cva(
         outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
         link: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent",
         "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10",
+        hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10",
         input: [
           "w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark",
           "border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus",
@@ -107,8 +107,7 @@ const Button = require$$0.forwardRef(
       {
         ref,
         disabled: isLoading || disabled,
-        "aria-current": isActive,
-        "aria-selected": isActive,
+        "aria-current": isActive ? "page" : void 0,
         "aria-label": label,
         "aria-busy": isLoading,
         role: isLink ? "link" : void 0,
@@ -142,7 +141,7 @@ const Button = require$$0.forwardRef(
               isLoading
             }
           ),
-          typeof children !== "undefined" && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1", children }),
+          typeof children !== "undefined" && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex-1 truncate", children }),
           IconRight && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
             IconRight,
             {

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0',\n        'icon-md': 'p-0',\n        'icon-lg': 'p-0',\n        'icon-xl': 'p-0',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive}\n        aria-selected={isActive}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","cn","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0.5',\n        'icon-md': 'p-1',\n        'icon-lg': 'p-1.5',\n        'icon-xl': 'p-2',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive ? 'page' : undefined}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1 truncate\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","cn","Loader"],"mappings":";;;;;;;AAWA,MAAM,qBAAqBA,2BAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAED,MAAM,iBAAiBA,uBAAA;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,QACF,MAAM;AAAA,QACN,kBACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAEJ;AAAA,MACA,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,gBACE;AAAA,QACF,OACE;AAAA,QACF,SACE;AAAA,QACF,QAAQ;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;AAmBO,MAAM,SAASC,WAAA;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,IACd,YAAY,YAAY,SAAS;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,KAEL,QACG;AACG,UAAA,SAAS,YAAY,UAAU,YAAY;AAG/C,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa;AAAA,QACvB,gBAAc,WAAW,SAAS;AAAA,QAClC,cAAY;AAAA,QACZ,aAAW;AAAA,QACX,MAAM,SAAS,SAAS;AAAA,QACxB;AAAA,QACA,WAAW,eAAe;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,CAAC,aACRC,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,UAGFD,2BAAA,kBAAA;AAAA,YAACE,wBAAA;AAAA,YAAA;AAAA,cACC,WAAWD,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cACF;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,OAAO,aAAa,gEAClB,OAAI,EAAA,WAAU,mBAAmB,UAAS;AAAA,UAG5C,aACCD,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEA,OAAO,cAAc;;"}