acinguiux-ds-react-framework 0.1.18 → 0.1.19

package/build/cjs/react-base/src/utils/stylesUtils.js

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),t=require("acinguiux-ds-fabrics"),s=require("../theme/types/layer.js"),a=e=>l.css`
-  outline: 3px solid ${e.globals("others").focus};
-  outline-offset: 2px;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),t=require("acinguiux-ds-fabrics"),s=require("../theme/types/layer.js"),a=(e,o=!1)=>l.css`
+  outline: 2px solid ${e.globals("others").focus};
+  outline-offset: ${o?"1px":"-1px"};
 `,r=(e,o)=>({color:e.layer({foundation:"surface",disabled:o?t.FabricsVariables.Disableds.True:void 0})[s.Variables.TextOnFoundationStrong]}),n=(e,o)=>({color:e.layer({foundation:"surface",disabled:o?t.FabricsVariables.Disableds.True:void 0})[s.Variables.TextOnFoundationSubtle],fontStyle:"normal"});exports.getFocusStyles=a;exports.getLabelFontStyles=r;exports.getPlaceholderFontStyles=n;
 //# sourceMappingURL=stylesUtils.js.map

package/build/cjs/react-base/src/utils/stylesUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"stylesUtils.js","sources":["../../../../../../react-base/src/utils/stylesUtils.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\n\nimport { Theme, Variables } from '../theme';\n\nexport const getFocusStyles = (theme: Theme) => css`\n  outline: 3px solid ${theme.globals('others').focus};\n  outline-offset: 2px;\n`;\n\nexport const getLabelFontStyles = (theme: Theme, disabled?: boolean) => ({\n  color: theme.layer({\n    foundation: 'surface',\n    disabled: disabled ? FabricsVariables.Disableds.True : undefined,\n  })[Variables.TextOnFoundationStrong],\n});\n\nexport const getPlaceholderFontStyles = (theme: Theme, disabled?: boolean) => ({\n  color: theme.layer({\n    foundation: 'surface',\n    disabled: disabled ? FabricsVariables.Disableds.True : undefined,\n  })[Variables.TextOnFoundationSubtle],\n  fontStyle: 'normal',\n});\n"],"names":["getFocusStyles","theme","css","getLabelFontStyles","disabled","FabricsVariables","Variables","getPlaceholderFontStyles"],"mappings":"wNAKaA,EAAkBC,GAAiBC,EAAAA;AAAAA,uBACzBD,EAAM,QAAQ,QAAQ,EAAE,KAAK;AAAA;AAAA,EAIvCE,EAAqB,CAACF,EAAcG,KAAwB,CACvE,MAAOH,EAAM,MAAM,CACjB,WAAY,UACZ,SAAUG,EAAWC,mBAAiB,UAAU,KAAO,MAAA,CACxD,EAAEC,EAAAA,UAAU,sBAAsB,CACrC,GAEaC,EAA2B,CAACN,EAAcG,KAAwB,CAC7E,MAAOH,EAAM,MAAM,CACjB,WAAY,UACZ,SAAUG,EAAWC,mBAAiB,UAAU,KAAO,MAAA,CACxD,EAAEC,EAAAA,UAAU,sBAAsB,EACnC,UAAW,QACb"}
+{"version":3,"file":"stylesUtils.js","sources":["../../../../../../react-base/src/utils/stylesUtils.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\n\nimport { Theme, Variables } from '../theme';\n\nexport const getFocusStyles = (theme: Theme, offset: boolean = false) => css`\n  outline: 2px solid ${theme.globals('others').focus};\n  outline-offset: ${offset ? '1px' : '-1px'};\n`;\n\nexport const getLabelFontStyles = (theme: Theme, disabled?: boolean) => ({\n  color: theme.layer({\n    foundation: 'surface',\n    disabled: disabled ? FabricsVariables.Disableds.True : undefined,\n  })[Variables.TextOnFoundationStrong],\n});\n\nexport const getPlaceholderFontStyles = (theme: Theme, disabled?: boolean) => ({\n  color: theme.layer({\n    foundation: 'surface',\n    disabled: disabled ? FabricsVariables.Disableds.True : undefined,\n  })[Variables.TextOnFoundationSubtle],\n  fontStyle: 'normal',\n});\n"],"names":["getFocusStyles","theme","offset","css","getLabelFontStyles","disabled","FabricsVariables","Variables","getPlaceholderFontStyles"],"mappings":"wNAKaA,EAAiB,CAACC,EAAcC,EAAkB,KAAUC,EAAAA;AAAAA,uBAClDF,EAAM,QAAQ,QAAQ,EAAE,KAAK;AAAA,oBAChCC,EAAS,MAAQ,MAAM;AAAA,EAG9BE,EAAqB,CAACH,EAAcI,KAAwB,CACvE,MAAOJ,EAAM,MAAM,CACjB,WAAY,UACZ,SAAUI,EAAWC,mBAAiB,UAAU,KAAO,MAAA,CACxD,EAAEC,EAAAA,UAAU,sBAAsB,CACrC,GAEaC,EAA2B,CAACP,EAAcI,KAAwB,CAC7E,MAAOJ,EAAM,MAAM,CACjB,WAAY,UACZ,SAAUI,EAAWC,mBAAiB,UAAU,KAAO,MAAA,CACxD,EAAEC,EAAAA,UAAU,sBAAsB,EACnC,UAAW,QACb"}

package/build/esm/components/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
 import A from "classnames";
 import { TextElementTypes as v } from "../../react-base/src/consts/index.js";
 import { useProps as b, HeadingLevel as C } from "../../react-base/src/components/Accordion/Accordion.utils.js";
@@ -13,47 +13,47 @@ import j from "../Badge/Badge.js";
 import D from "../Tag/Tag.js";
 import { ACCORDION_CLASS as d } from "../../react-base/src/consts/classes.js";
 const E = ({
-  size: e,
+  size: r,
   title: t,
-  label: o,
-  disabled: r
+  label: e,
+  disabled: o
 }) => /* @__PURE__ */ f(x, { flexDirection: "column", flexGrow: 1, children: [
-  /* @__PURE__ */ n(y, { type: v.Span, level: C[e], disabled: r, children: t }),
-  !!o && /* @__PURE__ */ n(L, { contrast: "subtle", disabled: r, size: e, children: o })
+  /* @__PURE__ */ i(y, { type: v.Span, level: C[r], disabled: o, children: t }),
+  !!e && /* @__PURE__ */ i(L, { contrast: "subtle", disabled: o, size: r, children: e })
 ] }), N = ({
-  size: e,
+  size: r,
   tag: t,
-  badge: o,
-  icon: r
+  badge: e,
+  icon: o
 }) => /* @__PURE__ */ f(x, { flexDirection: "row", alignItems: "center", justifyContent: "flex-start", flexGrow: 1, children: [
-  !!o && /* @__PURE__ */ n(j, { size: e, ...o }),
-  !!t && /* @__PURE__ */ n(D, { size: e, ...t }),
-  r
-] }), P = (e, t = !1, o) => (o == null ? void 0 : o.map(({ key: r, title: i, label: c, tag: a, badge: l, icon: m, content: s }) => ({
-  key: r,
-  label: /* @__PURE__ */ n(E, { size: e, title: i, label: c, disabled: t }),
-  extra: /* @__PURE__ */ n(N, { size: e, tag: a, badge: l, icon: m }),
-  children: s
-}))) ?? [], K = ({ className: e, items: t, ...o }) => {
-  const { size: r, disabled: i, indicator: c, contained: a, indicatorPosition: l, ...m } = b(o), s = P(r, i, t), h = ({ isActive: I }) => {
+  !!e && /* @__PURE__ */ i(j, { size: r, ...e }),
+  !!t && /* @__PURE__ */ i(D, { size: r, ...t }),
+  o
+] }), P = (r, t = !1, e) => e?.map(({ key: o, title: n, label: c, tag: m, badge: s, icon: a, content: l }) => ({
+  key: o,
+  label: /* @__PURE__ */ i(E, { size: r, title: n, label: c, disabled: t }),
+  extra: /* @__PURE__ */ i(N, { size: r, tag: m, badge: s, icon: a }),
+  children: l
+})) ?? [], K = ({ className: r, items: t, ...e }) => {
+  const { size: o, disabled: n, indicator: c, contained: m, indicatorPosition: s, ...a } = b(e), l = P(o, n, t), h = ({ isActive: I }) => {
     const u = S[c][I ? "active" : "inactive"];
-    return /* @__PURE__ */ n(u, { width: p[r].iconSize, height: p[r].iconSize });
+    return /* @__PURE__ */ i(u, { width: p[o].iconSize, height: p[o].iconSize });
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ i(
     g,
     {
-      className: A(d, e),
+      className: A(d, r),
       prefixCls: d,
-      size: r,
-      disabled: i,
+      size: o,
+      disabled: n,
       expandIcon: h,
-      contained: a,
-      indicatorPosition: l,
+      contained: m,
+      indicatorPosition: s,
       destroyInactivePanel: !0,
       openMotion: w,
-      items: s,
-      collapsible: i ? "disabled" : void 0,
-      ...m
+      items: l,
+      collapsible: n ? "disabled" : void 0,
+      ...a
     }
   );
 };

package/build/esm/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport type { CollapsePanelProps } from 'rc-collapse';\nimport { ACCORDION_CLASS, TextElementTypes } from 'acinguiux-ds-react-base/consts';\nimport {\n  AccordionUtils,\n  type AccordionTypes,\n  AccordionConsts,\n} from 'acinguiux-ds-react-base/components/Accordion';\nimport type { TagTypes } from 'acinguiux-ds-react-base/components/Tag';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport type { ItemType } from 'rc-collapse/es/interface';\n\nimport { AccordionIcon } from './Accordion.consts';\nimport * as Styled from './Accordion.styles';\nimport type { IAccordionProps } from './Accordion.types';\nimport { collapseMotion } from './utils/motionUtils';\nimport Flexbox from '../Flexbox/Flexbox';\nimport Heading from '../Text/components/Heading/Heading';\nimport Label from '../Text/components/Label/Label';\nimport Badge from '../Badge/Badge';\nimport Tag from '../Tag/Tag';\n\nconst AccordionLabel = ({\n  size,\n  title,\n  label,\n  disabled,\n}: {\n  size: AccordionTypes.Size;\n  title: string;\n  label?: string;\n  disabled?: boolean;\n}) => (\n  <Flexbox flexDirection=\"column\" flexGrow={1}>\n    <Heading type={TextElementTypes.Span} level={AccordionUtils.HeadingLevel[size]} disabled={disabled}>\n      {title}\n    </Heading>\n    {!!label && (\n      <Label contrast=\"subtle\" disabled={disabled} size={size}>\n        {label}\n      </Label>\n    )}\n  </Flexbox>\n);\n\nconst AccordionExtra = ({\n  size,\n  tag,\n  badge,\n  icon,\n}: {\n  size: AccordionTypes.Size;\n  tag?: TagTypes.IProps;\n  badge?: BadgeTypes.IProps;\n  icon?: ReactNode;\n}) => (\n  <Flexbox flexDirection=\"row\" alignItems=\"center\" justifyContent=\"flex-start\" flexGrow={1}>\n    {!!badge && <Badge size={size} {...badge} />}\n    {!!tag && <Tag size={size} {...tag} />}\n    {icon}\n  </Flexbox>\n);\n\nconst prepareItems = (size: AccordionTypes.Size, disabled = false, items?: AccordionTypes.ItemType[]): ItemType[] =>\n  items?.map(({ key, title, label, tag, badge, icon, content }) => ({\n    key,\n    label: <AccordionLabel size={size} title={title} label={label} disabled={disabled} />,\n    extra: <AccordionExtra size={size} tag={tag} badge={badge} icon={icon} />,\n    children: content,\n  })) ?? [];\n\nconst Accordion = ({ className, items, ...props }: IAccordionProps): ReactElement => {\n  const { size, disabled, indicator, contained, indicatorPosition, ...rest } = AccordionUtils.useProps(props);\n\n  const accordionItems = prepareItems(size, disabled, items);\n\n  const handleExpandIcon = ({ isActive }: CollapsePanelProps): ReactElement => {\n    const Icon = AccordionIcon[indicator][isActive ? 'active' : 'inactive'];\n\n    return <Icon width={AccordionConsts.consts[size].iconSize} height={AccordionConsts.consts[size].iconSize} />;\n  };\n\n  return (\n    <Styled.Accordion\n      className={classNames(ACCORDION_CLASS, className)}\n      prefixCls={ACCORDION_CLASS}\n      size={size}\n      disabled={disabled}\n      expandIcon={handleExpandIcon}\n      contained={contained}\n      indicatorPosition={indicatorPosition}\n      destroyInactivePanel={true}\n      openMotion={collapseMotion}\n      items={accordionItems}\n      collapsible={disabled ? 'disabled' : undefined}\n      {...rest}\n    />\n  );\n};\n\nexport default Accordion;\n"],"names":["AccordionLabel","size","title","label","disabled","jsxs","Flexbox","jsx","Heading","TextElementTypes","AccordionUtils.HeadingLevel","Label","AccordionExtra","tag","badge","icon","Badge","Tag","prepareItems","items","key","content","Accordion","className","props","indicator","contained","indicatorPosition","rest","AccordionUtils.useProps","accordionItems","handleExpandIcon","isActive","Icon","AccordionIcon","AccordionConsts.consts","Styled.Accordion","classNames","ACCORDION_CLASS","collapseMotion"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAME,gBAAAC,EAACC,GAAA,EAAQ,eAAc,UAAS,UAAU,GACxC,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ,MAAMC,EAAiB,MAAM,OAAOC,EAA4BT,CAAI,GAAG,UAAAG,GAC7E,UAAAF,EAAA,CACH;AAAA,EACC,CAAC,CAACC,KACD,gBAAAI,EAACI,KAAM,UAAS,UAAS,UAAAP,GAAoB,MAAAH,GAC1C,UAAAE,EAAA,CACH;AAAA,GAEJ,GAGIS,IAAiB,CAAC;AAAA,EACtB,MAAAX;AAAA,EACA,KAAAY;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AACF,MAME,gBAAAV,EAACC,KAAQ,eAAc,OAAM,YAAW,UAAS,gBAAe,cAAa,UAAU,GACpF,UAAA;AAAA,EAAA,CAAC,CAACQ,KAAS,gBAAAP,EAACS,GAAA,EAAM,MAAAf,GAAa,GAAGa,GAAO;AAAA,EACzC,CAAC,CAACD,uBAAQI,GAAA,EAAI,MAAAhB,GAAa,GAAGY,GAAK;AAAA,EACnCE;AAAA,GACH,GAGIG,IAAe,CAACjB,GAA2BG,IAAW,IAAOe,OACjEA,KAAA,gBAAAA,EAAO,IAAI,CAAC,EAAE,KAAAC,GAAK,OAAAlB,GAAO,OAAAC,GAAO,KAAAU,GAAK,OAAAC,GAAO,MAAAC,GAAM,SAAAM,SAAe;AAAA,EAChE,KAAAD;AAAA,EACA,OAAO,gBAAAb,EAACP,GAAA,EAAe,MAAAC,GAAY,OAAAC,GAAc,OAAAC,GAAc,UAAAC,GAAoB;AAAA,EACnF,OAAO,gBAAAG,EAACK,GAAA,EAAe,MAAAX,GAAY,KAAAY,GAAU,OAAAC,GAAc,MAAAC,GAAY;AAAA,EACvE,UAAUM;AACZ,QAAO,CAAA,GAEHC,IAAY,CAAC,EAAE,WAAAC,GAAW,OAAAJ,GAAO,GAAGK,QAA2C;AACnF,QAAM,EAAE,MAAAvB,GAAM,UAAAG,GAAU,WAAAqB,GAAW,WAAAC,GAAW,mBAAAC,GAAmB,GAAGC,EAAA,IAASC,EAAwBL,CAAK,GAEpGM,IAAiBZ,EAAajB,GAAMG,GAAUe,CAAK,GAEnDY,IAAmB,CAAC,EAAE,UAAAC,QAAiD;AAC3E,UAAMC,IAAOC,EAAcT,CAAS,EAAEO,IAAW,WAAW,UAAU;AAEtE,WAAO,gBAAAzB,EAAC0B,GAAA,EAAK,OAAOE,EAAuBlC,CAAI,EAAE,UAAU,QAAQkC,EAAuBlC,CAAI,EAAE,SAAA,CAAU;AAAA,EAC5G;AAEA,SACE,gBAAAM;AAAA,IAAC6B;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAiBf,CAAS;AAAA,MAChD,WAAWe;AAAA,MACX,MAAArC;AAAA,MACA,UAAAG;AAAA,MACA,YAAY2B;AAAA,MACZ,WAAAL;AAAA,MACA,mBAAAC;AAAA,MACA,sBAAsB;AAAA,MACtB,YAAYY;AAAA,MACZ,OAAOT;AAAA,MACP,aAAa1B,IAAW,aAAa;AAAA,MACpC,GAAGwB;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport type { CollapsePanelProps } from 'rc-collapse';\nimport { ACCORDION_CLASS, TextElementTypes } from 'acinguiux-ds-react-base/consts';\nimport {\n  AccordionUtils,\n  type AccordionTypes,\n  AccordionConsts,\n} from 'acinguiux-ds-react-base/components/Accordion';\nimport type { TagTypes } from 'acinguiux-ds-react-base/components/Tag';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport type { ItemType } from 'rc-collapse/es/interface';\n\nimport { AccordionIcon } from './Accordion.consts';\nimport * as Styled from './Accordion.styles';\nimport type { IAccordionProps } from './Accordion.types';\nimport { collapseMotion } from './utils/motionUtils';\nimport Flexbox from '../Flexbox/Flexbox';\nimport Heading from '../Text/components/Heading/Heading';\nimport Label from '../Text/components/Label/Label';\nimport Badge from '../Badge/Badge';\nimport Tag from '../Tag/Tag';\n\nconst AccordionLabel = ({\n  size,\n  title,\n  label,\n  disabled,\n}: {\n  size: AccordionTypes.Size;\n  title: string;\n  label?: string;\n  disabled?: boolean;\n}) => (\n  <Flexbox flexDirection=\"column\" flexGrow={1}>\n    <Heading type={TextElementTypes.Span} level={AccordionUtils.HeadingLevel[size]} disabled={disabled}>\n      {title}\n    </Heading>\n    {!!label && (\n      <Label contrast=\"subtle\" disabled={disabled} size={size}>\n        {label}\n      </Label>\n    )}\n  </Flexbox>\n);\n\nconst AccordionExtra = ({\n  size,\n  tag,\n  badge,\n  icon,\n}: {\n  size: AccordionTypes.Size;\n  tag?: TagTypes.IProps;\n  badge?: BadgeTypes.IProps;\n  icon?: ReactNode;\n}) => (\n  <Flexbox flexDirection=\"row\" alignItems=\"center\" justifyContent=\"flex-start\" flexGrow={1}>\n    {!!badge && <Badge size={size} {...badge} />}\n    {!!tag && <Tag size={size} {...tag} />}\n    {icon}\n  </Flexbox>\n);\n\nconst prepareItems = (size: AccordionTypes.Size, disabled = false, items?: AccordionTypes.ItemType[]): ItemType[] =>\n  items?.map(({ key, title, label, tag, badge, icon, content }) => ({\n    key,\n    label: <AccordionLabel size={size} title={title} label={label} disabled={disabled} />,\n    extra: <AccordionExtra size={size} tag={tag} badge={badge} icon={icon} />,\n    children: content,\n  })) ?? [];\n\nconst Accordion = ({ className, items, ...props }: IAccordionProps): ReactElement => {\n  const { size, disabled, indicator, contained, indicatorPosition, ...rest } = AccordionUtils.useProps(props);\n\n  const accordionItems = prepareItems(size, disabled, items);\n\n  const handleExpandIcon = ({ isActive }: CollapsePanelProps): ReactElement => {\n    const Icon = AccordionIcon[indicator][isActive ? 'active' : 'inactive'];\n\n    return <Icon width={AccordionConsts.consts[size].iconSize} height={AccordionConsts.consts[size].iconSize} />;\n  };\n\n  return (\n    <Styled.Accordion\n      className={classNames(ACCORDION_CLASS, className)}\n      prefixCls={ACCORDION_CLASS}\n      size={size}\n      disabled={disabled}\n      expandIcon={handleExpandIcon}\n      contained={contained}\n      indicatorPosition={indicatorPosition}\n      destroyInactivePanel={true}\n      openMotion={collapseMotion}\n      items={accordionItems}\n      collapsible={disabled ? 'disabled' : undefined}\n      {...rest}\n    />\n  );\n};\n\nexport default Accordion;\n"],"names":["AccordionLabel","size","title","label","disabled","jsxs","Flexbox","jsx","Heading","TextElementTypes","AccordionUtils.HeadingLevel","Label","AccordionExtra","tag","badge","icon","Badge","Tag","prepareItems","items","key","content","Accordion","className","props","indicator","contained","indicatorPosition","rest","AccordionUtils.useProps","accordionItems","handleExpandIcon","isActive","Icon","AccordionIcon","AccordionConsts.consts","Styled.Accordion","classNames","ACCORDION_CLASS","collapseMotion"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAME,gBAAAC,EAACC,GAAA,EAAQ,eAAc,UAAS,UAAU,GACxC,UAAA;AAAA,EAAA,gBAAAC,EAACC,GAAA,EAAQ,MAAMC,EAAiB,MAAM,OAAOC,EAA4BT,CAAI,GAAG,UAAAG,GAC7E,UAAAF,EAAA,CACH;AAAA,EACC,CAAC,CAACC,KACD,gBAAAI,EAACI,KAAM,UAAS,UAAS,UAAAP,GAAoB,MAAAH,GAC1C,UAAAE,EAAA,CACH;AAAA,GAEJ,GAGIS,IAAiB,CAAC;AAAA,EACtB,MAAAX;AAAA,EACA,KAAAY;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AACF,MAME,gBAAAV,EAACC,KAAQ,eAAc,OAAM,YAAW,UAAS,gBAAe,cAAa,UAAU,GACpF,UAAA;AAAA,EAAA,CAAC,CAACQ,KAAS,gBAAAP,EAACS,GAAA,EAAM,MAAAf,GAAa,GAAGa,GAAO;AAAA,EACzC,CAAC,CAACD,uBAAQI,GAAA,EAAI,MAAAhB,GAAa,GAAGY,GAAK;AAAA,EACnCE;AAAA,GACH,GAGIG,IAAe,CAACjB,GAA2BG,IAAW,IAAOe,MACjEA,GAAO,IAAI,CAAC,EAAE,KAAAC,GAAK,OAAAlB,GAAO,OAAAC,GAAO,KAAAU,GAAK,OAAAC,GAAO,MAAAC,GAAM,SAAAM,SAAe;AAAA,EAChE,KAAAD;AAAA,EACA,OAAO,gBAAAb,EAACP,GAAA,EAAe,MAAAC,GAAY,OAAAC,GAAc,OAAAC,GAAc,UAAAC,GAAoB;AAAA,EACnF,OAAO,gBAAAG,EAACK,GAAA,EAAe,MAAAX,GAAY,KAAAY,GAAU,OAAAC,GAAc,MAAAC,GAAY;AAAA,EACvE,UAAUM;AACZ,EAAE,KAAK,CAAA,GAEHC,IAAY,CAAC,EAAE,WAAAC,GAAW,OAAAJ,GAAO,GAAGK,QAA2C;AACnF,QAAM,EAAE,MAAAvB,GAAM,UAAAG,GAAU,WAAAqB,GAAW,WAAAC,GAAW,mBAAAC,GAAmB,GAAGC,EAAA,IAASC,EAAwBL,CAAK,GAEpGM,IAAiBZ,EAAajB,GAAMG,GAAUe,CAAK,GAEnDY,IAAmB,CAAC,EAAE,UAAAC,QAAiD;AAC3E,UAAMC,IAAOC,EAAcT,CAAS,EAAEO,IAAW,WAAW,UAAU;AAEtE,WAAO,gBAAAzB,EAAC0B,GAAA,EAAK,OAAOE,EAAuBlC,CAAI,EAAE,UAAU,QAAQkC,EAAuBlC,CAAI,EAAE,SAAA,CAAU;AAAA,EAC5G;AAEA,SACE,gBAAAM;AAAA,IAAC6B;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,GAAiBf,CAAS;AAAA,MAChD,WAAWe;AAAA,MACX,MAAArC;AAAA,MACA,UAAAG;AAAA,MACA,YAAY2B;AAAA,MACZ,WAAAL;AAAA,MACA,mBAAAC;AAAA,MACA,sBAAsB;AAAA,MACtB,YAAYY;AAAA,MACZ,OAAOT;AAAA,MACP,aAAa1B,IAAW,aAAa;AAAA,MACpC,GAAGwB;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/build/esm/components/Alert/Alert.js

@@ -1,113 +1,112 @@
-import { jsxs as $, jsx as t } from "react/jsx-runtime";
-import { forwardRef as _, useRef as y, useCallback as H, useEffect as L, cloneElement as U } from "react";
-import j from "classnames";
-import { FabricsVariables as F } from "acinguiux-ds-fabrics";
-import { Directions as g, Variants as h, Sizes as w } from "../../react-base/src/consts/index.js";
-import { consts as q } from "../../react-base/src/components/Alert/Alert.consts.js";
-import { getProminence as T } from "../../react-base/src/components/Alert/Alert.utils.js";
-import z from "../Icon/components/Cross.js";
-import { Alert as G, AutoCloseContainer as J, HighlightIndicator as K, AlertContentContainer as Q, InnerContainer as W, MessageAndButtonContainer as X, MessageAndIconVerticalContainer as Y, IconContainer as Z, AlertMessageContainer as k, AlertTitle as v, AlertMessage as D, CloseButton as E, Actions as ee, ActionButton as re } from "./Alert.styles.js";
-import { getAlertTextSize as te, getAlertCloseButtonSize as O, getAlertButtonSize as ne } from "./utils/alertUtils.js";
-import { ALERT_CLASS as B } from "../../react-base/src/consts/classes.js";
-const de = _(
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as _, useRef as k, useCallback as y, useEffect as H, cloneElement as L } from "react";
+import U from "classnames";
+import { FabricsVariables as j } from "acinguiux-ds-fabrics";
+import { Directions as C, Variants as d, Sizes as F } from "../../react-base/src/consts/index.js";
+import { consts as w } from "../../react-base/src/components/Alert/Alert.consts.js";
+import { getProminence as u } from "../../react-base/src/components/Alert/Alert.utils.js";
+import M from "../Icon/components/Cross.js";
+import { Alert as q, AutoCloseContainer as D, HighlightIndicator as G, AlertContentContainer as J, InnerContainer as K, MessageAndButtonContainer as Q, MessageAndIconVerticalContainer as W, IconContainer as X, AlertMessageContainer as Y, AlertTitle as Z, AlertMessage as v, CloseButton as b, Actions as ee, ActionButton as re } from "./Alert.styles.js";
+import { getAlertTextSize as te, getAlertCloseButtonSize as z, getAlertButtonSize as ne } from "./utils/alertUtils.js";
+import { ALERT_CLASS as E } from "../../react-base/src/consts/classes.js";
+const Ce = _(
   ({
-    className: I,
-    size: e = `${w.Medium}`,
-    label: V,
-    title: x,
-    children: c,
-    autoClose: A = !1,
-    sentiment: i = F.Sentiments.Neutral,
-    icon: p,
-    closeButton: S = !1,
-    onDismissClick: a,
-    onClose: l,
-    autoCloseTimeout: d = q.DEFAULT_AUTOCLOSE_TIMEOUT_MS,
-    alignment: r = `${g.Vertical}`,
-    highlight: C = !1,
-    banner: M = !1,
-    actions: f,
-    variant: n = `${h.Outlined}`,
-    ...N
-  }, P) => {
-    const b = x ?? V, u = y(null), m = H(
-      (o) => {
-        var s;
-        o ? (a == null || a(o), l == null || l()) : a ? (s = u.current) == null || s.click() : l == null || l();
+    className: O,
+    size: e = `${F.Medium}`,
+    label: B,
+    title: I,
+    children: a,
+    autoClose: c = !1,
+    sentiment: l = j.Sentiments.Neutral,
+    icon: $,
+    closeButton: g = !1,
+    onDismissClick: m,
+    onClose: f,
+    autoCloseTimeout: A = w.DEFAULT_AUTOCLOSE_TIMEOUT_MS,
+    alignment: r = `${C.Vertical}`,
+    highlight: V = !1,
+    banner: h = !1,
+    actions: T,
+    variant: n = `${d.Outlined}`,
+    ...x
+  }, N) => {
+    const S = I ?? B, p = k(null), s = y(
+      (i) => {
+        i ? (m?.(i), f?.()) : m ? p.current?.click() : f?.();
       },
-      [a, l]
+      [m, f]
     );
-    return L(() => {
-      A && setTimeout(() => {
-        m();
-      }, d);
-    }, [A, m, d]), /* @__PURE__ */ $(
-      G,
+    return H(() => {
+      c && setTimeout(() => {
+        s();
+      }, A);
+    }, [c, s, A]), /* @__PURE__ */ o(
+      q,
       {
-        $banner: M,
+        $banner: h,
         $size: e,
-        className: j(B, I),
-        $sentiment: i,
+        className: U(E, O),
+        $sentiment: l,
         $variant: n,
         $alignment: r,
-        ref: P,
-        ...N,
+        ref: N,
+        ...x,
         children: [
-          A && /* @__PURE__ */ t(J, { $sentiment: i, $variant: n, $autoCloseTimeout: d }),
-          C && !M && /* @__PURE__ */ t(K, { $size: e, $alignment: r, $sentiment: i, $variant: n }),
-          /* @__PURE__ */ t(Q, { $size: e, $alignment: r, $variant: n, children: /* @__PURE__ */ $(W, { $size: e, $alignment: r, children: [
-            /* @__PURE__ */ $(X, { $size: e, $alignment: r, children: [
-              /* @__PURE__ */ $(Y, { $size: e, $alignment: r, children: [
-                !!p && /* @__PURE__ */ t(Z, { $size: e, $alignment: r, children: U(p, {
-                  className: `${B}-icon`,
+          c && /* @__PURE__ */ t(D, { $sentiment: l, $variant: n, $autoCloseTimeout: A }),
+          V && !h && /* @__PURE__ */ t(G, { $size: e, $alignment: r, $sentiment: l, $variant: n }),
+          /* @__PURE__ */ t(J, { $size: e, $alignment: r, $variant: n, children: /* @__PURE__ */ o(K, { $size: e, $alignment: r, children: [
+            /* @__PURE__ */ o(Q, { $size: e, $alignment: r, children: [
+              /* @__PURE__ */ o(W, { $size: e, $alignment: r, children: [
+                !!$ && /* @__PURE__ */ t(X, { $size: e, $alignment: r, children: L($, {
+                  className: `${E}-icon`,
                   "aria-label": "alert icon",
-                  ...p.props
+                  ...$.props
                 }) }),
-                /* @__PURE__ */ $(k, { $size: e, $alignment: r, $variant: n, children: [
-                  b && /* @__PURE__ */ t(v, { $size: e, $alignment: r, children: b }),
-                  typeof c == "string" && c.length > 0 ? /* @__PURE__ */ t(D, { size: te(e), children: c }) : c
+                /* @__PURE__ */ o(Y, { $size: e, $alignment: r, $variant: n, children: [
+                  S && /* @__PURE__ */ t(Z, { $size: e, $alignment: r, children: S }),
+                  typeof a == "string" && a.length > 0 ? /* @__PURE__ */ t(v, { size: te(e), children: a }) : a
                 ] })
               ] }),
-              S && r === g.Vertical && /* @__PURE__ */ t(
-                E,
+              g && r === C.Vertical && /* @__PURE__ */ t(
+                b,
                 {
-                  ref: u,
-                  sentiment: i,
-                  sentimentProminence: T(n),
-                  size: O(e),
+                  ref: p,
+                  sentiment: l,
+                  sentimentProminence: u(n),
+                  size: z(e),
                   title: "Close",
-                  onClick: m,
-                  variant: h.Transparent,
+                  onClick: s,
+                  variant: d.Transparent,
                   iconOnly: !0,
-                  icon: /* @__PURE__ */ t(z, {}),
+                  icon: /* @__PURE__ */ t(M, {}),
                   "aria-label": "Close"
                 }
               )
             ] }),
-            !!(f != null && f.length) && /* @__PURE__ */ t(ee, { $size: e, $alignment: r, children: f.map(({ label: o, action: s, props: R }) => /* @__PURE__ */ t(
+            !!T?.length && /* @__PURE__ */ t(ee, { $size: e, $alignment: r, children: T.map(({ label: i, action: P, props: R }) => /* @__PURE__ */ t(
               re,
               {
-                sentiment: i,
-                sentimentProminence: T(n),
-                onClick: s,
+                sentiment: l,
+                sentimentProminence: u(n),
+                onClick: P,
                 size: ne(e),
                 ...R,
-                children: o
+                children: i
               },
-              o
+              i
             )) }),
-            S && r === g.Horizontal && /* @__PURE__ */ t(
-              E,
+            g && r === C.Horizontal && /* @__PURE__ */ t(
+              b,
               {
-                ref: u,
-                sentiment: i,
-                sentimentProminence: T(n),
-                size: O(e),
+                ref: p,
+                sentiment: l,
+                sentimentProminence: u(n),
+                size: z(e),
                 title: "Close",
-                onClick: m,
-                variant: h.Transparent,
+                onClick: s,
+                variant: d.Transparent,
                 iconOnly: !0,
-                icon: /* @__PURE__ */ t(z, {}),
+                icon: /* @__PURE__ */ t(M, {}),
                 "aria-label": "Close"
               }
             )
@@ -118,6 +117,6 @@ const de = _(
   }
 );
 export {
-  de as default
+  Ce as default
 };
 //# sourceMappingURL=Alert.js.map

package/build/esm/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, ReactElement, useCallback, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Sizes, Directions, Variants, ALERT_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { AlertConsts, AlertUtils } from 'acinguiux-ds-react-base/components/Alert';\n\nimport Cross from '../Icon/components/Cross';\nimport * as Styled from './Alert.styles';\nimport type { IAlertProps } from './Alert.types';\nimport { getAlertButtonSize, getAlertCloseButtonSize, getAlertTextSize } from './utils/alertUtils';\n\nconst Alert = forwardRef<HTMLDivElement, IAlertProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      label,\n      title,\n      children,\n      autoClose = false,\n      sentiment = FabricsVariables.Sentiments.Neutral,\n      icon,\n      closeButton = false,\n      onDismissClick,\n      onClose,\n      autoCloseTimeout = AlertConsts.consts.DEFAULT_AUTOCLOSE_TIMEOUT_MS,\n      alignment = `${Directions.Vertical}`,\n      highlight = false,\n      banner = false,\n      actions,\n      variant = `${Variants.Outlined}`,\n      ...rest\n    },\n    ref,\n  ): ReactElement => {\n    const alertTitle = title ?? label;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    // Note: Acceptable tech debt until onDismissClick is removed.\n    const onCloseHandler = useCallback(\n      (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (event) {\n          onDismissClick?.(event);\n          onClose?.();\n        } else if (onDismissClick) {\n          closeButtonRef.current?.click();\n        } else {\n          onClose?.();\n        }\n      },\n      [onDismissClick, onClose],\n    );\n\n    useEffect(() => {\n      if (autoClose) {\n        setTimeout(() => {\n          onCloseHandler();\n        }, autoCloseTimeout);\n      }\n    }, [autoClose, onCloseHandler, autoCloseTimeout]);\n\n    return (\n      <Styled.Alert\n        $banner={banner}\n        $size={size}\n        className={classNames(ALERT_CLASS, className)}\n        $sentiment={sentiment}\n        $variant={variant}\n        $alignment={alignment}\n        ref={ref}\n        {...rest}\n      >\n        {autoClose && (\n          <Styled.AutoCloseContainer $sentiment={sentiment} $variant={variant} $autoCloseTimeout={autoCloseTimeout} />\n        )}\n        {highlight && !banner && (\n          <Styled.HighlightIndicator $size={size} $alignment={alignment} $sentiment={sentiment} $variant={variant} />\n        )}\n        <Styled.AlertContentContainer $size={size} $alignment={alignment} $variant={variant}>\n          <Styled.InnerContainer $size={size} $alignment={alignment}>\n            <Styled.MessageAndButtonContainer $size={size} $alignment={alignment}>\n              <Styled.MessageAndIconVerticalContainer $size={size} $alignment={alignment}>\n                {!!icon && (\n                  <Styled.IconContainer $size={size} $alignment={alignment}>\n                    {cloneElement(icon, {\n                      className: `${ALERT_CLASS}-icon`,\n                      'aria-label': 'alert icon',\n                      ...icon.props,\n                    })}\n                  </Styled.IconContainer>\n                )}\n                <Styled.AlertMessageContainer $size={size} $alignment={alignment} $variant={variant}>\n                  {alertTitle && (\n                    <Styled.AlertTitle $size={size} $alignment={alignment}>\n                      {alertTitle}\n                    </Styled.AlertTitle>\n                  )}\n                  {typeof children === 'string' && children.length > 0 ? (\n                    <Styled.AlertMessage size={getAlertTextSize(size)}>{children}</Styled.AlertMessage>\n                  ) : (\n                    children\n                  )}\n                </Styled.AlertMessageContainer>\n              </Styled.MessageAndIconVerticalContainer>\n              {closeButton && alignment === Directions.Vertical && (\n                <Styled.CloseButton\n                  ref={closeButtonRef}\n                  sentiment={sentiment}\n                  sentimentProminence={AlertUtils.getProminence(variant)}\n                  size={getAlertCloseButtonSize(size)}\n                  title=\"Close\"\n                  onClick={onCloseHandler}\n                  variant={Variants.Transparent}\n                  iconOnly={true}\n                  icon={<Cross />}\n                  aria-label=\"Close\"\n                />\n              )}\n            </Styled.MessageAndButtonContainer>\n            {!!actions?.length && (\n              <Styled.Actions $size={size} $alignment={alignment}>\n                {actions.map(({ label: actionLabel, action, props }) => (\n                  <Styled.ActionButton\n                    sentiment={sentiment}\n                    sentimentProminence={AlertUtils.getProminence(variant)}\n                    key={actionLabel}\n                    onClick={action}\n                    size={getAlertButtonSize(size)}\n                    {...props}\n                  >\n                    {actionLabel}\n                  </Styled.ActionButton>\n                ))}\n              </Styled.Actions>\n            )}\n            {closeButton && alignment === Directions.Horizontal && (\n              <Styled.CloseButton\n                ref={closeButtonRef}\n                sentiment={sentiment}\n                sentimentProminence={AlertUtils.getProminence(variant)}\n                size={getAlertCloseButtonSize(size)}\n                title=\"Close\"\n                onClick={onCloseHandler}\n                variant={Variants.Transparent}\n                iconOnly={true}\n                icon={<Cross />}\n                aria-label=\"Close\"\n              />\n            )}\n          </Styled.InnerContainer>\n        </Styled.AlertContentContainer>\n      </Styled.Alert>\n    );\n  },\n);\n\nexport default Alert;\n"],"names":["Alert","forwardRef","className","size","Sizes","label","title","children","autoClose","sentiment","FabricsVariables","icon","closeButton","onDismissClick","onClose","autoCloseTimeout","AlertConsts.consts","alignment","Directions","highlight","banner","actions","variant","Variants","rest","ref","alertTitle","closeButtonRef","useRef","onCloseHandler","useCallback","event","_a","useEffect","jsxs","Styled.Alert","classNames","ALERT_CLASS","jsx","Styled.AutoCloseContainer","Styled.HighlightIndicator","Styled.AlertContentContainer","Styled.InnerContainer","Styled.MessageAndButtonContainer","Styled.MessageAndIconVerticalContainer","Styled.IconContainer","cloneElement","Styled.AlertMessageContainer","Styled.AlertTitle","Styled.AlertMessage","getAlertTextSize","Styled.CloseButton","AlertUtils.getProminence","getAlertCloseButtonSize","Cross","Styled.Actions","actionLabel","action","props","Styled.ActionButton","getAlertButtonSize"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, ReactElement, useCallback, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Sizes, Directions, Variants, ALERT_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { AlertConsts, AlertUtils } from 'acinguiux-ds-react-base/components/Alert';\n\nimport Cross from '../Icon/components/Cross';\nimport * as Styled from './Alert.styles';\nimport type { IAlertProps } from './Alert.types';\nimport { getAlertButtonSize, getAlertCloseButtonSize, getAlertTextSize } from './utils/alertUtils';\n\nconst Alert = forwardRef<HTMLDivElement, IAlertProps>(\n  (\n    {\n      className,\n      size = `${Sizes.Medium}`,\n      label,\n      title,\n      children,\n      autoClose = false,\n      sentiment = FabricsVariables.Sentiments.Neutral,\n      icon,\n      closeButton = false,\n      onDismissClick,\n      onClose,\n      autoCloseTimeout = AlertConsts.consts.DEFAULT_AUTOCLOSE_TIMEOUT_MS,\n      alignment = `${Directions.Vertical}`,\n      highlight = false,\n      banner = false,\n      actions,\n      variant = `${Variants.Outlined}`,\n      ...rest\n    },\n    ref,\n  ): ReactElement => {\n    const alertTitle = title ?? label;\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    // Note: Acceptable tech debt until onDismissClick is removed.\n    const onCloseHandler = useCallback(\n      (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (event) {\n          onDismissClick?.(event);\n          onClose?.();\n        } else if (onDismissClick) {\n          closeButtonRef.current?.click();\n        } else {\n          onClose?.();\n        }\n      },\n      [onDismissClick, onClose],\n    );\n\n    useEffect(() => {\n      if (autoClose) {\n        setTimeout(() => {\n          onCloseHandler();\n        }, autoCloseTimeout);\n      }\n    }, [autoClose, onCloseHandler, autoCloseTimeout]);\n\n    return (\n      <Styled.Alert\n        $banner={banner}\n        $size={size}\n        className={classNames(ALERT_CLASS, className)}\n        $sentiment={sentiment}\n        $variant={variant}\n        $alignment={alignment}\n        ref={ref}\n        {...rest}\n      >\n        {autoClose && (\n          <Styled.AutoCloseContainer $sentiment={sentiment} $variant={variant} $autoCloseTimeout={autoCloseTimeout} />\n        )}\n        {highlight && !banner && (\n          <Styled.HighlightIndicator $size={size} $alignment={alignment} $sentiment={sentiment} $variant={variant} />\n        )}\n        <Styled.AlertContentContainer $size={size} $alignment={alignment} $variant={variant}>\n          <Styled.InnerContainer $size={size} $alignment={alignment}>\n            <Styled.MessageAndButtonContainer $size={size} $alignment={alignment}>\n              <Styled.MessageAndIconVerticalContainer $size={size} $alignment={alignment}>\n                {!!icon && (\n                  <Styled.IconContainer $size={size} $alignment={alignment}>\n                    {cloneElement(icon, {\n                      className: `${ALERT_CLASS}-icon`,\n                      'aria-label': 'alert icon',\n                      ...icon.props,\n                    })}\n                  </Styled.IconContainer>\n                )}\n                <Styled.AlertMessageContainer $size={size} $alignment={alignment} $variant={variant}>\n                  {alertTitle && (\n                    <Styled.AlertTitle $size={size} $alignment={alignment}>\n                      {alertTitle}\n                    </Styled.AlertTitle>\n                  )}\n                  {typeof children === 'string' && children.length > 0 ? (\n                    <Styled.AlertMessage size={getAlertTextSize(size)}>{children}</Styled.AlertMessage>\n                  ) : (\n                    children\n                  )}\n                </Styled.AlertMessageContainer>\n              </Styled.MessageAndIconVerticalContainer>\n              {closeButton && alignment === Directions.Vertical && (\n                <Styled.CloseButton\n                  ref={closeButtonRef}\n                  sentiment={sentiment}\n                  sentimentProminence={AlertUtils.getProminence(variant)}\n                  size={getAlertCloseButtonSize(size)}\n                  title=\"Close\"\n                  onClick={onCloseHandler}\n                  variant={Variants.Transparent}\n                  iconOnly={true}\n                  icon={<Cross />}\n                  aria-label=\"Close\"\n                />\n              )}\n            </Styled.MessageAndButtonContainer>\n            {!!actions?.length && (\n              <Styled.Actions $size={size} $alignment={alignment}>\n                {actions.map(({ label: actionLabel, action, props }) => (\n                  <Styled.ActionButton\n                    sentiment={sentiment}\n                    sentimentProminence={AlertUtils.getProminence(variant)}\n                    key={actionLabel}\n                    onClick={action}\n                    size={getAlertButtonSize(size)}\n                    {...props}\n                  >\n                    {actionLabel}\n                  </Styled.ActionButton>\n                ))}\n              </Styled.Actions>\n            )}\n            {closeButton && alignment === Directions.Horizontal && (\n              <Styled.CloseButton\n                ref={closeButtonRef}\n                sentiment={sentiment}\n                sentimentProminence={AlertUtils.getProminence(variant)}\n                size={getAlertCloseButtonSize(size)}\n                title=\"Close\"\n                onClick={onCloseHandler}\n                variant={Variants.Transparent}\n                iconOnly={true}\n                icon={<Cross />}\n                aria-label=\"Close\"\n              />\n            )}\n          </Styled.InnerContainer>\n        </Styled.AlertContentContainer>\n      </Styled.Alert>\n    );\n  },\n);\n\nexport default Alert;\n"],"names":["Alert","forwardRef","className","size","Sizes","label","title","children","autoClose","sentiment","FabricsVariables","icon","closeButton","onDismissClick","onClose","autoCloseTimeout","AlertConsts.consts","alignment","Directions","highlight","banner","actions","variant","Variants","rest","ref","alertTitle","closeButtonRef","useRef","onCloseHandler","useCallback","event","useEffect","jsxs","Styled.Alert","classNames","ALERT_CLASS","jsx","Styled.AutoCloseContainer","Styled.HighlightIndicator","Styled.AlertContentContainer","Styled.InnerContainer","Styled.MessageAndButtonContainer","Styled.MessageAndIconVerticalContainer","Styled.IconContainer","cloneElement","Styled.AlertMessageContainer","Styled.AlertTitle","Styled.AlertMessage","getAlertTextSize","Styled.CloseButton","AlertUtils.getProminence","getAlertCloseButtonSize","Cross","Styled.Actions","actionLabel","action","props","Styled.ActionButton","getAlertButtonSize"],"mappings":"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"}

package/build/esm/components/Button/Button.styles.d.ts

@@ -1,8 +1,7 @@
-import { type ButtonTypes } from '../../react-base/src/components/Button';
+import { ButtonTypes } from '../../react-base/src/components/Button';
 import type { StyledButtonProps, StyledOnBrandButtonProps, StyledOnSelectedButtonProps, StyledOnSentimentButtonProps, StyledSentimentButtonProps } from './Button.types';
 export declare const ButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const ButtonLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const CommonStyles: import("styled-components").RuleSet<StyledButtonProps>;
 export declare const buttonCssWithVariant: (variant?: ButtonTypes.Variant) => import("styled-components").RuleSet<StyledButtonProps>;
 export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
 export declare const ButtonLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledButtonProps>> & string;

package/build/esm/components/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,WAAW,EAAe,MAAM,2CAA2C,CAAC;AAIxG,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,2BAA2B,EAC3B,4BAA4B,EAC5B,0BAA0B,EAC3B,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,+NAAgB,CAAC;AACzC,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AA4BlD,eAAO,MAAM,YAAY,wDAExB,CAAC;AA+BF,eAAO,MAAM,oBAAoB,aAAc,WAAW,CAAC,OAAO,2DASjE,CAAC;AAEF,eAAO,MAAM,MAAM,kQAElB,CAAC;AAEF,eAAO,MAAM,UAAU,kQA2BtB,CAAC;AAEF,eAAO,MAAM,eAAe,2QAU3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,6QAI7B,CAAC;AAEF,eAAO,MAAM,aAAa,yQAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,4QAS5B,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,WAAW,EAAe,MAAM,2CAA2C,CAAC;AAInG,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACxB,2BAA2B,EAC3B,4BAA4B,EAC5B,0BAA0B,EAC3B,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,WAAW,+NAAgB,CAAC;AACzC,eAAO,MAAM,oBAAoB,+NAAgB,CAAC;AA0DlD,eAAO,MAAM,oBAAoB,aAAc,WAAW,CAAC,OAAO,2DASjE,CAAC;AAEF,eAAO,MAAM,MAAM,kQAElB,CAAC;AAEF,eAAO,MAAM,UAAU,kQA2BtB,CAAC;AAEF,eAAO,MAAM,eAAe,2QAW3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,6QAQ7B,CAAC;AAEF,eAAO,MAAM,aAAa,yQAKzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,4QAU5B,CAAC"}

package/build/esm/components/Button/Button.styles.js

@@ -1,112 +1,122 @@
-import { styled as s, css as i } from "styled-components";
+import { styled as i, css as o } from "styled-components";
 import { getFocusStyles as S } from "../../react-base/src/utils/stylesUtils.js";
 import { Variables as m } from "../../react-base/src/theme/types/layer.js";
-import { getFabricStyles as b, getSizeStyles as $, getSvgStyles as p } from "../../react-base/src/components/Button/Button.utils.js";
-import { containerStylesForVariant as g, stylesForVariant as y } from "../../react-base/src/components/Button/Button.styles.js";
-import { FabricsVariables as o } from "acinguiux-ds-fabrics";
+import { getSizeStyles as u, getSvgStyles as b, getFabricStyles as p } from "../../react-base/src/components/Button/Button.utils.js";
+import { containerStylesForVariant as g, stylesForVariant as $ } from "../../react-base/src/components/Button/Button.styles.js";
+import { FabricsVariables as s } from "acinguiux-ds-fabrics";
 import { Variants as f } from "../../react-base/src/consts/index.js";
-const F = s.span``, d = s.span``, u = (e) => i`
-  ${({ $size: t, theme: n }) => i`
-    ${g()};
-    &[aria-busy='true'] {
-      & > ${d}, & > ${d} > svg,
-      & ${d} > ${F} {
-        opacity: 0;
-        min-height: 0;
-        height: 0;
+const y = i.span``, c = i.span``, l = (t, e) => o(
+  ({ $size: n, theme: r }) => o`
+      ${g(t)};
+      &[aria-busy='true'] {
+        & > ${c}, & > ${c} > svg,
+        & ${c} > ${y} {
+          opacity: 0;
+          min-height: 0;
+          height: 0;
+        }
       }
-    }
 
-    & ${d}, &:is(a) {
-      ${y()};
-      ${$(n, t)};
-      & > svg {
-        ${p(t)};
+      & ${c}, &:is(a) {
+        ${$(t)};
+        ${u(r, n)};
+        & > svg {
+          ${b(n)};
+        }
       }
-    }
 
-    &:focus-visible {
-      ${S(n)};
-    }
-  `};
-`, a = i`
-  ${u()};
-`, r = (e, t, n = f.Filled, c = {}) => {
-  const l = b(e, n, t, c);
-  return i`
+      &:focus-visible {
+        ${S(r, t === "filled" && e !== "Foundation")};
+      }
+    `
+), a = (t, e, n = f.Filled, r = {}) => {
+  const d = p(t, n, e, r);
+  return o`
     &,
     &:not(:disabled) {
-      ${l.resting};
+      ${d.resting};
     }
 
     &:disabled {
       cursor: not-allowed;
-      ${l.disabled};
+      ${d.disabled};
     }
 
     &:not(:disabled):hover {
-      ${l.hover};
+      ${d.hover};
     }
 
     &:not(:disabled):active {
-      ${l.press};
+      ${d.press};
     }
   `;
-}, B = (e) => i`
-  ${u()};
-  ${({ $variant: t, theme: n }) => r(n, "Foundation", t, {
-  transparentRestingState: t === "filled" ? o.TransparentRestingStates.False : o.TransparentRestingStates.True
+}, F = (t) => o`
+  ${l(t)};
+  ${({ $variant: e, theme: n }) => a(n, "Foundation", e, {
+  transparentRestingState: e === "filled" ? s.TransparentRestingStates.False : s.TransparentRestingStates.True
 })};
-`, h = s.button`
-  ${B()};
-`, k = s.a`
-  ${a};
-  text-decoration: underline;
+`, k = i.button`
+  ${F()};
+`, h = i.a(
+  ({ $variant: t, theme: e, $disabled: n }) => o`
+    ${l()};
+    text-decoration: underline;
 
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
 
-  ${({ $variant: e, theme: t, $disabled: n }) => e && e !== "filled" && i`
+    ${t && t !== "filled" && o`
       &:link:visited {
-        color: ${t.layer({ disabled: n })[m.TextOnFoundationLinkVisited]};
-        border-color: ${t.layer({ disabled: n })[m.TextOnFoundationLinkVisited]};
+        color: ${e.layer({ disabled: n })[m.TextOnFoundationLinkVisited]};
+        border-color: ${e.layer({ disabled: n })[m.TextOnFoundationLinkVisited]};
       }
     `};
 
-  ${({ $variant: e, theme: t, $disabled: n }) => r(t, "Link", e, {
-  disabled: n,
-  transparentRestingState: e === "filled" ? o.TransparentRestingStates.False : o.TransparentRestingStates.True
-})};
-`, x = s.button`
-  ${a};
-  ${({ $variant: e, theme: t, $sentiment: n }) => r(t, "Sentiment", e, {
-  sentiment: n,
-  sentimentProminence: e === "filled" ? o.SentimentProminences.Strong : o.SentimentProminences.Transparent
-})};
-`, C = s.button`
-  ${a};
-  ${({ $variant: e, theme: t, $sentiment: n, $sentimentProminence: c }) => r(t, "On Sentiment", e, { sentiment: n, sentimentProminence: c })};
-`, w = s.button`
-  ${a};
-  ${({ $variant: e, theme: t, $brand: n }) => r(t, "On Brand", e, { brand: n })};
-`, W = s.button`
-  ${a};
-  ${({ $variant: e, theme: t }) => r(t, "On Selected", e, {
-  selectedProminence: e === "filled" ? o.SelectedProminences.Strong : o.SelectedProminences.Subtle
-})};
-`;
+    ${a(e, "Link", t, {
+    disabled: n,
+    transparentRestingState: t === "filled" ? s.TransparentRestingStates.False : s.TransparentRestingStates.True
+  })};
+  `
+), x = i.button(
+  ({ $variant: t, theme: e, $sentiment: n }) => o`
+    ${l(t, "Sentiment")};
+    ${a(e, "Sentiment", t, {
+    sentiment: n,
+    sentimentProminence: t === "filled" ? s.SentimentProminences.Strong : s.SentimentProminences.Transparent
+  })};
+  `
+), w = i.button(
+  ({ $variant: t, theme: e, $sentiment: n, $sentimentProminence: r }) => o`
+    ${l(t, "On Sentiment")};
+    ${a(e, "On Sentiment", t, {
+    sentiment: n,
+    sentimentProminence: r
+  })};
+  `
+), C = i.button(
+  ({ $variant: t, theme: e, $brand: n }) => o`
+    ${l(t, "On Brand")};
+    ${a(e, "On Brand", t, { brand: n })};
+  `
+), W = i.button(
+  ({ $variant: t, theme: e }) => o`
+    ${l(t, "On Selected")};
+    ${a(e, "On Selected", t, {
+    selectedProminence: t === "filled" ? s.SelectedProminences.Strong : s.SelectedProminences.Subtle
+  })};
+  `
+);
 export {
-  h as Button,
-  F as ButtonLabel,
-  d as ButtonLabelContainer,
-  k as ButtonLink,
-  a as CommonStyles,
-  w as OnBrandButton,
+  k as Button,
+  y as ButtonLabel,
+  c as ButtonLabelContainer,
+  h as ButtonLink,
+  C as OnBrandButton,
   W as OnSelectedButton,
-  C as OnSentimentButton,
+  w as OnSentimentButton,
   x as SentimentButton,
-  B as buttonCssWithVariant
+  F as buttonCssWithVariant
 };
 //# sourceMappingURL=Button.styles.js.map