acinguiux-ds-react-framework 0.1.24 → 0.1.26

package/build/esm/components/Accordion/Accordion.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAEnF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,OAAO,GAAG,aAAa,CAAC,EACjE,cAAc,CAAC,MAAM;CAAG"}
+{"version":3,"file":"Accordion.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAEnF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,OAAO,GAAG,aAAa,CAAC,EAAE,cAAc,CAAC,MAAM;CAAG"}

package/build/esm/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAYtG,QAAA,MAAM,KAAK,8OA+IV,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiF,MAAM,OAAO,CAAC;AAYtG,QAAA,MAAM,KAAK,8OA6IV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1,23 +1,23 @@
 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 { forwardRef as _, useRef as k, useCallback as y, useEffect as L, cloneElement as U } from "react";
+import j from "classnames";
+import { FabricsVariables as F } from "acinguiux-ds-fabrics";
+import { Directions as C, Variants as u, Sizes as H } 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 = _(
+import { getProminence as d } from "../../react-base/src/components/Alert/Alert.utils.js";
+import S from "../Icon/components/Cross.js";
+import { Alert as q, AutoCloseContainer as D, AlertContentContainer as G, InnerContainer as J, MessageAndButtonContainer as K, MessageAndIconVerticalContainer as Q, IconContainer as W, AlertMessageContainer as X, AlertTitle as Y, AlertMessage as Z, CloseButton as b, Actions as v, ActionButton as ee } from "./Alert.styles.js";
+import { getAlertTextSize as re, getAlertCloseButtonSize as M, getAlertButtonSize as te } from "./utils/alertUtils.js";
+import { ALERT_CLASS as z } from "../../react-base/src/consts/classes.js";
+const pe = _(
   ({
-    className: O,
-    size: e = `${F.Medium}`,
-    label: B,
-    title: I,
+    className: E,
+    size: e = `${H.Medium}`,
+    label: O,
+    title: B,
     children: a,
     autoClose: c = !1,
-    sentiment: l = j.Sentiments.Neutral,
+    sentiment: l = F.Sentiments.Neutral,
     icon: $,
     closeButton: g = !1,
     onDismissClick: m,
@@ -25,46 +25,46 @@ const Ce = _(
     autoCloseTimeout: A = w.DEFAULT_AUTOCLOSE_TIMEOUT_MS,
     alignment: r = `${C.Vertical}`,
     highlight: V = !1,
-    banner: h = !1,
-    actions: T,
-    variant: n = `${d.Outlined}`,
-    ...x
+    banner: x = !1,
+    actions: h,
+    variant: n = `${u.Outlined}`,
+    ...I
   }, N) => {
-    const S = I ?? B, p = k(null), s = y(
+    const T = B ?? O, p = k(null), s = y(
       (i) => {
         i ? (m?.(i), f?.()) : m ? p.current?.click() : f?.();
       },
       [m, f]
     );
-    return H(() => {
+    return L(() => {
       c && setTimeout(() => {
         s();
       }, A);
     }, [c, s, A]), /* @__PURE__ */ o(
       q,
       {
-        $banner: h,
+        $banner: x,
+        $highlight: V,
         $size: e,
-        className: U(E, O),
+        className: j(z, E),
         $sentiment: l,
         $variant: n,
         $alignment: r,
         ref: N,
-        ...x,
+        ...I,
         children: [
           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`,
+          /* @__PURE__ */ t(G, { $size: e, $alignment: r, $variant: n, children: /* @__PURE__ */ o(J, { $size: e, $alignment: r, children: [
+            /* @__PURE__ */ o(K, { $size: e, $alignment: r, children: [
+              /* @__PURE__ */ o(Q, { $size: e, $alignment: r, children: [
+                !!$ && /* @__PURE__ */ t(W, { $size: e, $alignment: r, children: U($, {
+                  className: `${z}-icon`,
                   "aria-label": "alert icon",
                   ...$.props
                 }) }),
-                /* @__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
+                /* @__PURE__ */ o(X, { $size: e, $alignment: r, $variant: n, children: [
+                  T && /* @__PURE__ */ t(Y, { $size: e, $alignment: r, children: T }),
+                  typeof a == "string" && a.length > 0 ? /* @__PURE__ */ t(Z, { size: re(e), children: a }) : a
                 ] })
               ] }),
               g && r === C.Vertical && /* @__PURE__ */ t(
@@ -72,24 +72,24 @@ const Ce = _(
                 {
                   ref: p,
                   sentiment: l,
-                  sentimentProminence: u(n),
-                  size: z(e),
+                  sentimentProminence: d(n),
+                  size: M(e),
                   title: "Close",
                   onClick: s,
-                  variant: d.Transparent,
+                  variant: u.Transparent,
                   iconOnly: !0,
-                  icon: /* @__PURE__ */ t(M, {}),
+                  icon: /* @__PURE__ */ t(S, {}),
                   "aria-label": "Close"
                 }
               )
             ] }),
-            !!T?.length && /* @__PURE__ */ t(ee, { $size: e, $alignment: r, children: T.map(({ label: i, action: P, props: R }) => /* @__PURE__ */ t(
-              re,
+            !!h?.length && /* @__PURE__ */ t(v, { $size: e, $alignment: r, children: h.map(({ label: i, action: P, props: R }) => /* @__PURE__ */ t(
+              ee,
               {
                 sentiment: l,
-                sentimentProminence: u(n),
+                sentimentProminence: d(n),
                 onClick: P,
-                size: ne(e),
+                size: te(e),
                 ...R,
                 children: i
               },
@@ -100,13 +100,13 @@ const Ce = _(
               {
                 ref: p,
                 sentiment: l,
-                sentimentProminence: u(n),
-                size: z(e),
+                sentimentProminence: d(n),
+                size: M(e),
                 title: "Close",
                 onClick: s,
-                variant: d.Transparent,
+                variant: u.Transparent,
                 iconOnly: !0,
-                icon: /* @__PURE__ */ t(M, {}),
+                icon: /* @__PURE__ */ t(S, {}),
                 "aria-label": "Close"
               }
             )
@@ -117,6 +117,6 @@ const Ce = _(
   }
 );
 export {
-  Ce as default
+  pe 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","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":";;;;;;;;;;;AAYA,MAAMA,KAAQC;AAAA,EACZ,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAYC,EAAiB,WAAW;AAAA,IACxC,MAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC,IAAmBC,EAAmB;AAAA,IACtC,WAAAC,IAAY,GAAGC,EAAW,QAAQ;AAAA,IAClC,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,SAAAC;AAAA,IACA,SAAAC,IAAU,GAAGC,EAAS,QAAQ;AAAA,IAC9B,GAAGC;AAAA,EAAA,GAELC,MACiB;AACjB,UAAMC,IAAapB,KAASD,GACtBsB,IAAiBC,EAA0B,IAAI,GAG/CC,IAAiBC;AAAA,MACrB,CAACC,MAA4D;AAC3D,QAAIA,KACFlB,IAAiBkB,CAAK,GACtBjB,IAAA,KACSD,IACTc,EAAe,SAAS,MAAA,IAExBb,IAAA;AAAA,MAEJ;AAAA,MACA,CAACD,GAAgBC,CAAO;AAAA,IAAA;AAG1B,WAAAkB,EAAU,MAAM;AACd,MAAIxB,KACF,WAAW,MAAM;AACf,QAAAqB,EAAA;AAAA,MACF,GAAGd,CAAgB;AAAA,IAEvB,GAAG,CAACP,GAAWqB,GAAgBd,CAAgB,CAAC,GAG9C,gBAAAkB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,SAASd;AAAA,QACT,OAAOjB;AAAA,QACP,WAAWgC,EAAWC,GAAalC,CAAS;AAAA,QAC5C,YAAYO;AAAA,QACZ,UAAUa;AAAA,QACV,YAAYL;AAAA,QACZ,KAAAQ;AAAA,QACC,GAAGD;AAAA,QAEH,UAAA;AAAA,UAAAhB,KACC,gBAAA6B,EAACC,GAAA,EAA0B,YAAY7B,GAAW,UAAUa,GAAS,mBAAmBP,GAAkB;AAAA,UAE3GI,KAAa,CAACC,KACb,gBAAAiB,EAACE,GAAA,EAA0B,OAAOpC,GAAM,YAAYc,GAAW,YAAYR,GAAW,UAAUa,EAAA,CAAS;AAAA,4BAE1GkB,GAAA,EAA6B,OAAOrC,GAAM,YAAYc,GAAW,UAAUK,GAC1E,4BAACmB,GAAA,EAAsB,OAAOtC,GAAM,YAAYc,GAC9C,UAAA;AAAA,YAAA,gBAAAgB,EAACS,GAAA,EAAiC,OAAOvC,GAAM,YAAYc,GACzD,UAAA;AAAA,cAAA,gBAAAgB,EAACU,GAAA,EAAuC,OAAOxC,GAAM,YAAYc,GAC9D,UAAA;AAAA,gBAAA,CAAC,CAACN,KACD,gBAAA0B,EAACO,GAAA,EAAqB,OAAOzC,GAAM,YAAYc,GAC5C,UAAA4B,EAAalC,GAAM;AAAA,kBAClB,WAAW,GAAGyB,CAAW;AAAA,kBACzB,cAAc;AAAA,kBACd,GAAGzB,EAAK;AAAA,gBAAA,CACT,GACH;AAAA,gBAEF,gBAAAsB,EAACa,GAAA,EAA6B,OAAO3C,GAAM,YAAYc,GAAW,UAAUK,GACzE,UAAA;AAAA,kBAAAI,KACC,gBAAAW,EAACU,GAAA,EAAkB,OAAO5C,GAAM,YAAYc,GACzC,UAAAS,GACH;AAAA,kBAED,OAAOnB,KAAa,YAAYA,EAAS,SAAS,IACjD,gBAAA8B,EAACW,GAAA,EAAoB,MAAMC,GAAiB9C,CAAI,GAAI,UAAAI,GAAS,IAE7DA;AAAA,gBAAA,EAAA,CAEJ;AAAA,cAAA,GACF;AAAA,cACCK,KAAeK,MAAcC,EAAW,YACvC,gBAAAmB;AAAA,gBAACa;AAAAA,gBAAA;AAAA,kBACC,KAAKvB;AAAA,kBACL,WAAAlB;AAAA,kBACA,qBAAqB0C,EAAyB7B,CAAO;AAAA,kBACrD,MAAM8B,EAAwBjD,CAAI;AAAA,kBAClC,OAAM;AAAA,kBACN,SAAS0B;AAAA,kBACT,SAASN,EAAS;AAAA,kBAClB,UAAU;AAAA,kBACV,wBAAO8B,GAAA,EAAM;AAAA,kBACb,cAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,YACb,GAEJ;AAAA,YACC,CAAC,CAAChC,GAAS,4BACTiC,IAAA,EAAe,OAAOnD,GAAM,YAAYc,GACtC,UAAAI,EAAQ,IAAI,CAAC,EAAE,OAAOkC,GAAa,QAAAC,GAAQ,OAAAC,QAC1C,gBAAApB;AAAA,cAACqB;AAAAA,cAAA;AAAA,gBACC,WAAAjD;AAAA,gBACA,qBAAqB0C,EAAyB7B,CAAO;AAAA,gBAErD,SAASkC;AAAA,gBACT,MAAMG,GAAmBxD,CAAI;AAAA,gBAC5B,GAAGsD;AAAA,gBAEH,UAAAF;AAAA,cAAA;AAAA,cALIA;AAAA,YAAA,CAOR,GACH;AAAA,YAED3C,KAAeK,MAAcC,EAAW,cACvC,gBAAAmB;AAAA,cAACa;AAAAA,cAAA;AAAA,gBACC,KAAKvB;AAAA,gBACL,WAAAlB;AAAA,gBACA,qBAAqB0C,EAAyB7B,CAAO;AAAA,gBACrD,MAAM8B,EAAwBjD,CAAI;AAAA,gBAClC,OAAM;AAAA,gBACN,SAAS0B;AAAA,gBACT,SAASN,EAAS;AAAA,gBAClB,UAAU;AAAA,gBACV,wBAAO8B,GAAA,EAAM;AAAA,gBACb,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,EAAA,CAEJ,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"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        $highlight={highlight}\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        <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.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":";;;;;;;;;;;AAYA,MAAMA,KAAQC;AAAA,EACZ,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO,GAAGC,EAAM,MAAM;AAAA,IACtB,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAYC,EAAiB,WAAW;AAAA,IACxC,MAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC,IAAmBC,EAAmB;AAAA,IACtC,WAAAC,IAAY,GAAGC,EAAW,QAAQ;AAAA,IAClC,WAAAC,IAAY;AAAA,IACZ,QAAAC,IAAS;AAAA,IACT,SAAAC;AAAA,IACA,SAAAC,IAAU,GAAGC,EAAS,QAAQ;AAAA,IAC9B,GAAGC;AAAA,EAAA,GAELC,MACiB;AACjB,UAAMC,IAAapB,KAASD,GACtBsB,IAAiBC,EAA0B,IAAI,GAG/CC,IAAiBC;AAAA,MACrB,CAACC,MAA4D;AAC3D,QAAIA,KACFlB,IAAiBkB,CAAK,GACtBjB,IAAA,KACSD,IACTc,EAAe,SAAS,MAAA,IAExBb,IAAA;AAAA,MAEJ;AAAA,MACA,CAACD,GAAgBC,CAAO;AAAA,IAAA;AAG1B,WAAAkB,EAAU,MAAM;AACd,MAAIxB,KACF,WAAW,MAAM;AACf,QAAAqB,EAAA;AAAA,MACF,GAAGd,CAAgB;AAAA,IAEvB,GAAG,CAACP,GAAWqB,GAAgBd,CAAgB,CAAC,GAG9C,gBAAAkB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,SAASd;AAAA,QACT,YAAYD;AAAA,QACZ,OAAOhB;AAAA,QACP,WAAWgC,EAAWC,GAAalC,CAAS;AAAA,QAC5C,YAAYO;AAAA,QACZ,UAAUa;AAAA,QACV,YAAYL;AAAA,QACZ,KAAAQ;AAAA,QACC,GAAGD;AAAA,QAEH,UAAA;AAAA,UAAAhB,KACC,gBAAA6B,EAACC,GAAA,EAA0B,YAAY7B,GAAW,UAAUa,GAAS,mBAAmBP,GAAkB;AAAA,4BAE3GwB,GAAA,EAA6B,OAAOpC,GAAM,YAAYc,GAAW,UAAUK,GAC1E,4BAACkB,GAAA,EAAsB,OAAOrC,GAAM,YAAYc,GAC9C,UAAA;AAAA,YAAA,gBAAAgB,EAACQ,GAAA,EAAiC,OAAOtC,GAAM,YAAYc,GACzD,UAAA;AAAA,cAAA,gBAAAgB,EAACS,GAAA,EAAuC,OAAOvC,GAAM,YAAYc,GAC9D,UAAA;AAAA,gBAAA,CAAC,CAACN,KACD,gBAAA0B,EAACM,GAAA,EAAqB,OAAOxC,GAAM,YAAYc,GAC5C,UAAA2B,EAAajC,GAAM;AAAA,kBAClB,WAAW,GAAGyB,CAAW;AAAA,kBACzB,cAAc;AAAA,kBACd,GAAGzB,EAAK;AAAA,gBAAA,CACT,GACH;AAAA,gBAEF,gBAAAsB,EAACY,GAAA,EAA6B,OAAO1C,GAAM,YAAYc,GAAW,UAAUK,GACzE,UAAA;AAAA,kBAAAI,KACC,gBAAAW,EAACS,GAAA,EAAkB,OAAO3C,GAAM,YAAYc,GACzC,UAAAS,GACH;AAAA,kBAED,OAAOnB,KAAa,YAAYA,EAAS,SAAS,IACjD,gBAAA8B,EAACU,GAAA,EAAoB,MAAMC,GAAiB7C,CAAI,GAAI,UAAAI,GAAS,IAE7DA;AAAA,gBAAA,EAAA,CAEJ;AAAA,cAAA,GACF;AAAA,cACCK,KAAeK,MAAcC,EAAW,YACvC,gBAAAmB;AAAA,gBAACY;AAAAA,gBAAA;AAAA,kBACC,KAAKtB;AAAA,kBACL,WAAAlB;AAAA,kBACA,qBAAqByC,EAAyB5B,CAAO;AAAA,kBACrD,MAAM6B,EAAwBhD,CAAI;AAAA,kBAClC,OAAM;AAAA,kBACN,SAAS0B;AAAA,kBACT,SAASN,EAAS;AAAA,kBAClB,UAAU;AAAA,kBACV,wBAAO6B,GAAA,EAAM;AAAA,kBACb,cAAW;AAAA,gBAAA;AAAA,cAAA;AAAA,YACb,GAEJ;AAAA,YACC,CAAC,CAAC/B,GAAS,4BACTgC,GAAA,EAAe,OAAOlD,GAAM,YAAYc,GACtC,UAAAI,EAAQ,IAAI,CAAC,EAAE,OAAOiC,GAAa,QAAAC,GAAQ,OAAAC,QAC1C,gBAAAnB;AAAA,cAACoB;AAAAA,cAAA;AAAA,gBACC,WAAAhD;AAAA,gBACA,qBAAqByC,EAAyB5B,CAAO;AAAA,gBAErD,SAASiC;AAAA,gBACT,MAAMG,GAAmBvD,CAAI;AAAA,gBAC5B,GAAGqD;AAAA,gBAEH,UAAAF;AAAA,cAAA;AAAA,cALIA;AAAA,YAAA,CAOR,GACH;AAAA,YAED1C,KAAeK,MAAcC,EAAW,cACvC,gBAAAmB;AAAA,cAACY;AAAAA,cAAA;AAAA,gBACC,KAAKtB;AAAA,gBACL,WAAAlB;AAAA,gBACA,qBAAqByC,EAAyB5B,CAAO;AAAA,gBACrD,MAAM6B,EAAwBhD,CAAI;AAAA,gBAClC,OAAM;AAAA,gBACN,SAAS0B;AAAA,gBACT,SAASN,EAAS;AAAA,gBAClB,UAAU;AAAA,gBACV,wBAAO6B,GAAA,EAAM;AAAA,gBACb,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,EAAA,CAEJ,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

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

@@ -3,9 +3,8 @@ import { PickTransient } from '../../react-base/src/types';
 import { TextTypes } from '../../react-base/src/components/Text';
 import type { IAlertProps } from './Alert.types';
 declare const AutoCloseContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "variant">> & Required<PickTransient<IAlertProps, "sentiment">> & Required<PickTransient<IAlertProps, "autoCloseTimeout">>>> & string;
-declare const Alert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">> & Required<PickTransient<IAlertProps, "variant">> & Required<PickTransient<IAlertProps, "sentiment">> & Required<PickTransient<IAlertProps, "banner">>>> & string;
-declare const HighlightIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">> & Required<PickTransient<IAlertProps, "variant">> & Required<PickTransient<IAlertProps, "sentiment">>>> & string;
 declare const AlertContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">> & Required<PickTransient<IAlertProps, "variant">>>> & string;
+declare const Alert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">> & Required<PickTransient<IAlertProps, "variant">> & Required<PickTransient<IAlertProps, "sentiment">> & Required<PickTransient<IAlertProps, "banner">> & Required<PickTransient<IAlertProps, "highlight">>>> & string;
 declare const MessageAndButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">>>> & string;
 declare const MessageAndIconVerticalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">>>> & string;
 declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<PickTransient<IAlertProps, "size" | "alignment">>>> & string;
@@ -50,5 +49,5 @@ declare const CloseButton: import("styled-components/dist/types").IStyledCompone
 } & {
     css?: import("styled-components").Interpolation<import("../../react-base/src/theme").Theme>;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
-export { ActionButton, Actions, Alert, AutoCloseContainer, AlertContentContainer, AlertTitle, AlertMessage, AlertMessageContainer, CloseButton, HighlightIndicator, IconContainer, InnerContainer, MessageAndButtonContainer, MessageAndIconVerticalContainer, };
+export { ActionButton, Actions, Alert, AutoCloseContainer, AlertContentContainer, AlertTitle, AlertMessage, AlertMessageContainer, CloseButton, IconContainer, InnerContainer, MessageAndButtonContainer, MessageAndIconVerticalContainer, };
 //# sourceMappingURL=Alert.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,EAAc,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAoDjD,QAAA,MAAM,kBAAkB,mYA2CvB,CAAC;AAEF,QAAA,MAAM,KAAK,sbA2CV,CAAC;AAEF,QAAA,MAAM,kBAAkB,qYAwBvB,CAAC;AAEF,QAAA,MAAM,qBAAqB,iVAgB1B,CAAC;AAEF,QAAA,MAAM,yBAAyB,+RAW9B,CAAC;AAEF,QAAA,MAAM,+BAA+B,+RAmBpC,CAAC;AAEF,QAAA,MAAM,aAAa,+RAelB,CAAC;AAEF,QAAA,MAAM,cAAc,+RAiBnB,CAAC;AAEF,QAAA,MAAM,qBAAqB,iVAyD1B,CAAC;AAEF,QAAA,MAAM,UAAU,qCAIb,iBAAiB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,4CAsB/E,CAAC;AAEF,QAAA,MAAM,YAAY;;+SAAiB,CAAC;AAEpC,QAAA,MAAM,OAAO,+RAaZ,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;6GAA8B,CAAC;AAEjD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;6GAA8B,CAAC;AAEhD,OAAO,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,yBAAyB,EACzB,+BAA+B,GAChC,CAAC"}
+{"version":3,"file":"Alert.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAM9D,OAAO,EAAc,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIhF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAqDjD,QAAA,MAAM,kBAAkB,mYA2CvB,CAAC;AAEF,QAAA,MAAM,qBAAqB,iVAiB1B,CAAC;AAEF,QAAA,MAAM,KAAK,0eAiEV,CAAC;AAEF,QAAA,MAAM,yBAAyB,+RAW9B,CAAC;AAEF,QAAA,MAAM,+BAA+B,+RAmBpC,CAAC;AAEF,QAAA,MAAM,aAAa,+RAelB,CAAC;AAEF,QAAA,MAAM,cAAc,+RAiBnB,CAAC;AAEF,QAAA,MAAM,qBAAqB,iVA4D1B,CAAC;AAEF,QAAA,MAAM,UAAU,qCAIb,iBAAiB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,4CAsB/E,CAAC;AAEF,QAAA,MAAM,YAAY;;+SAAiB,CAAC;AAEpC,QAAA,MAAM,OAAO,+RAaZ,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;6GAA8B,CAAC;AAEjD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;6GAA8B,CAAC;AAEhD,OAAO,EACL,YAAY,EACZ,OAAO,EACP,KAAK,EACL,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,yBAAyB,EACzB,+BAA+B,GAChC,CAAC"}

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

@@ -1,16 +1,16 @@
 import { jsx as x } from "react/jsx-runtime";
-import { Variants as a, Directions as l, Sizes as S } from "../../react-base/src/consts/index.js";
-import { Variables as c } from "../../react-base/src/theme/types/layer.js";
+import { Variants as l, Directions as d, Sizes as S } from "../../react-base/src/consts/index.js";
+import { Variables as s } from "../../react-base/src/theme/types/layer.js";
 import { consts as i } from "../../react-base/src/components/Alert/Alert.consts.js";
-import { FabricsVariables as s } from "acinguiux-ds-fabrics";
-import { css as r, styled as d, keyframes as m } from "styled-components";
+import { FabricsVariables as h } from "acinguiux-ds-fabrics";
+import { css as o, styled as n, keyframes as m } from "styled-components";
 import { getLargerSize as u } from "../../react-base/src/utils/sizesUtils.js";
 import v from "../Text/components/Label/Label.js";
 import g from "../Text/components/Text/Text.js";
 import w from "../Button/OnSentimentButton.js";
 import { getAlertBodySize as P } from "./utils/alertUtils.js";
 import { LINK_CLASS as C } from "../../react-base/src/consts/classes.js";
-const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle ? s.SentimentProminences.Subtle : s.SentimentProminences.Transparent, A = m`
+const A = (t) => t === l.Filled ? h.SentimentProminences.Strong : t === l.Subtle ? h.SentimentProminences.Subtle : h.SentimentProminences.Transparent, k = m`
   from {
     width: 0;
   }
@@ -18,7 +18,7 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
   to {
     width: 100%;
   }
-`, k = m`
+`, O = m`
   from {
     opacity: 0;
   }
@@ -26,7 +26,7 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
   to {
     opacity: 1;
   }
-`, O = m`
+`, B = m`
   from {
     opacity: 0;
   }
@@ -34,16 +34,16 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
   to {
     opacity: .1;
   }
-`, B = d.div`
-  ${({ $sentiment: t, $variant: e, $autoCloseTimeout: o, theme: n }) => {
-  const p = n.layer({
+`, V = n.div`
+  ${({ $sentiment: t, $variant: e, $autoCloseTimeout: r, theme: p }) => {
+  const c = p.layer({
     sentiment: t,
-    sentimentProminence: s.SentimentProminences.Strong
+    sentimentProminence: h.SentimentProminences.Strong
   });
-  return r`
+  return o`
       position: absolute;
       inset-block: 0;
-      opacity: ${e === a.Filled ? 1 : 0.1};
+      opacity: ${e === l.Filled ? 1 : 0.1};
       left: 0;
       right: 0;
       overflow: hidden;
@@ -57,101 +57,97 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
 
         @media (prefers-reduced-motion: no-preference) {
           width: 0;
-          opacity: ${e === a.Filled ? 0.1 : 1};
+          opacity: ${e === l.Filled ? 0.1 : 1};
           will-change: width;
-          animation: ${A} ${o}ms ease-out forwards;
+          animation: ${k} ${r}ms ease-out forwards;
         }
 
         @media (prefers-reduced-motion: reduce) {
           width: 100%;
           opacity: 0;
           will-change: opacity;
-          animation: ${e === a.Filled ? O : k} 1s ease-out forwards;
+          animation: ${e === l.Filled ? B : O} 1s ease-out forwards;
         }
-        background-color: ${p[c.BackgroundSentiment]};
-        ${e === a.Filled && r`
+        background-color: ${c[s.BackgroundSentiment]};
+        ${e === l.Filled && o`
           mix-blend-mode: difference;
         `}
       }
     `;
 }};
-`, K = d.div`
-  ${({ $size: t, $sentiment: e, $banner: o, $variant: n, $alignment: p, theme: f }) => {
-  const b = { sentiment: e, sentimentProminence: y(n) }, h = f.layer(b);
-  return r`
+`, I = n.div`
+  ${({ $size: t, $alignment: e, $variant: r }) => o`
+    position: relative;
+    display: flex;
+    flex: 1 0 0;
+    min-width: 0;
+    min-height: 100%;
+    overflow: hidden;
+    padding: ${i[t][e].padding.vertical}px
+      ${i[t][e].padding.horizontal}px;
+
+    ${r === l.Outlined && o`
+      padding: ${i[t][e].padding.vertical - 1}px
+        ${i[t][e].padding.horizontal - 1}px;
+    `}
+  `};
+`, _ = n.div`
+  ${({ $size: t, $sentiment: e, $banner: r, $highlight: p, $variant: c, $alignment: a, theme: y }) => {
+  const b = { sentiment: e, sentimentProminence: A(c) }, f = y.layer(b);
+  return o`
       position: relative;
-      background-color: ${h[c.BackgroundSentiment]};
-      color: ${h[c.TextOnSentimentOnBackground]};
-      border-color: ${h[c.BorderOnSentimentOnBackground]};
+      background-color: ${f[s.BackgroundSentiment]};
+      color: ${f[s.TextOnSentimentOnBackground]};
+      border-color: ${f[s.BorderOnSentimentOnBackground]};
 
       display: flex;
       align-items: flex-start;
       width: 100%;
       &,
-      & > ${B} {
-        border-radius: ${o ? 0 : i[t][p].radius}px;
+      & > ${V} {
+        border-radius: ${r ? 0 : i[t][a].radius}px;
       }
       box-sizing: border-box;
-      min-height: ${i[t][p].minHeight}px;
+      min-height: ${i[t][a].minHeight}px;
       min-width: 0;
       margin: 0;
       padding: 0;
 
-      ${n === a.Outlined && r`
+      ${p && !r && o`
+        & > ${I} {
+          margin-left: ${i[t][a].highlightContainerWidth}px;
+
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            top: ${i[t][a].highlightPadding}px;
+            bottom: ${i[t][a].highlightPadding}px;
+            left: calc(${i[t][a].highlightContainerOffset}px);
+            width: ${i[t][a].highlightWidth}px;
+            border-radius: 10000px;
+            background-color: ${f[s.ForegroundOnSentiment]};
+          }
+        }
+      `};
+
+      ${c === l.Outlined && o`
         border-width: 1px;
         border-style: solid;
       `}
 
-      ${p === l.Horizontal && r`
+      ${a === d.Horizontal && o`
         justify-content: center;
       `}
       
-      ${o && n === a.Outlined && r`
+      ${r && c === l.Outlined && o`
         border-right-width: 0;
         border-left-width: 0;
       `}
     `;
 }}
-`, N = d.div`
-  ${({ theme: t, $sentiment: e, $size: o, $alignment: n, $variant: p }) => {
-  const f = t.layer({ sentiment: e, sentimentProminence: y(p) });
-  return r`
-      position: relative;
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: ${i[o][n].highlightContainerWidth}px;
-
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: ${i[o][n].highlightPadding}px;
-        bottom: ${i[o][n].highlightPadding}px;
-        left: calc(100% + ${i[o][n].highlightContainerOffset}px);
-        width: ${i[o][n].highlightWidth}px;
-        border-radius: 10000px;
-        background-color: ${f[c.ForegroundOnSentiment]};
-      }
-    `;
-}};
-`, _ = d.div`
-  ${({ $size: t, $alignment: e, $variant: o }) => r`
-    display: flex;
-    flex: 1 0 0;
-    min-width: 0;
-    min-height: 100%;
-    overflow: hidden;
-    padding: ${i[t][e].padding.vertical}px
-      ${i[t][e].padding.horizontal}px;
-
-    ${o === a.Outlined && r`
-      padding: ${i[t][e].padding.vertical - 1}px
-        ${i[t][e].padding.horizontal - 1}px;
-    `}
-  `};
-`, q = d.div`
-  ${({ $size: t, $alignment: e }) => r`
+`, q = n.div`
+  ${({ $size: t, $alignment: e }) => o`
     display: flex;
     flex: 1 1 100%;
     width: 100%;
@@ -161,26 +157,26 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
     align-items: flex-start;
     gap: ${i[t][e].textIconGap}px;
   `};
-`, E = d.div`
-  ${({ $alignment: t, $size: e }) => r`
+`, E = n.div`
+  ${({ $alignment: t, $size: e }) => o`
     display: flex;
     flex: 1 0 0;
     width: 100%;
     min-width: 0;
     flex-wrap: nowrap;
-    align-items: ${t === l.Horizontal ? "center" : "flex-start"};
+    align-items: ${t === d.Horizontal ? "center" : "flex-start"};
     gap: ${i[e][t].textIconGap}px;
     padding: ${i[e][t].innerPadding.top}px
       ${i[e][t].innerPadding.right}px
       ${i[e][t].innerPadding.bottom}px
       ${i[e][t].innerPadding.left}px;
 
-    ${t === l.Vertical && r`
+    ${t === d.Vertical && o`
       padding-right: 0;
     `};
   `};
-`, J = d.div`
-  ${({ $alignment: t, $size: e }) => r`
+`, J = n.div`
+  ${({ $alignment: t, $size: e }) => o`
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -193,8 +189,8 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
       height: ${i[e][t].iconSize}px;
     }
   `};
-`, Q = d.div`
-  ${({ $size: t, $alignment: e }) => r`
+`, Q = n.div`
+  ${({ $size: t, $alignment: e }) => o`
     display: flex;
     flex: 1 1 100%;
     justify-content: space-between;
@@ -204,29 +200,32 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
     align-self: stretch;
     align-items: center;
 
-    ${e === l.Vertical && r`
+    ${e === d.Vertical && o`
       flex-direction: column;
       align-items: flex-start;
     `}
   `}
-`, R = d.div`
-  ${({ $size: t, $variant: e, $alignment: o, theme: n }) => r`
-    ${n.typography("paragraph", P(t))};
+`, R = n.div`
+  ${({ $size: t, $variant: e, $alignment: r, theme: p }) => o`
+    ${p.typography("paragraph", P(t))};
     display: flex;
     flex: 1 0 0;
-    padding: 0 ${i[t][o].innerPadding.right}px 0
-      ${i[t][o].innerPadding.left}px;
+    padding: 0 ${i[t][r].innerPadding.right}px 0
+      ${i[t][r].innerPadding.left}px;
 
-    ${o === l.Horizontal && r`
+    ${r === d.Horizontal && o`
       padding-left: 0;
       padding-right: 0;
     `};
 
     overflow: hidden;
 
-    > * {
+    * {
       color: inherit;
-      ${(!e || e === "filled") && r`
+      margin: 0;
+      padding: 0;
+
+      ${(!e || e === "filled") && o`
         .${C} a {
           &,
           &:hover,
@@ -237,25 +236,25 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
         }
       `};
 
-      ${o === l.Horizontal && r`
+      ${r === d.Horizontal && o`
         white-space: nowrap;
       `};
     }
 
-    ${o === l.Horizontal && r`
+    ${r === d.Horizontal && o`
       > p {
         overflow: hidden;
         text-overflow: ellipsis;
       }
     `};
 
-    gap: ${i[t][o].textGap}px;
+    gap: ${i[t][r].textGap}px;
 
-    ${o === l.Horizontal && r`
+    ${r === d.Horizontal && o`
       align-items: baseline;
     `}
 
-    ${o === l.Vertical && r`
+    ${r === d.Vertical && o`
       align-items: flex-start;
       flex-direction: column;
     `}
@@ -263,31 +262,30 @@ const y = (t) => t === a.Filled ? s.SentimentProminences.Strong : t === a.Subtle
 `, U = ({
   $size: t,
   $alignment: e,
-  children: o
-}) => e === l.Vertical ? t === S.Large ? /* @__PURE__ */ x(g, { bold: !0, size: u(t), children: o }) : /* @__PURE__ */ x(v, { bold: !0, size: u(t), children: o }) : /* @__PURE__ */ x(g, { bold: !0, size: t, children: o }), X = d(g)``, Y = d.div`
-  ${({ $size: t, $alignment: e }) => r`
+  children: r
+}) => e === d.Vertical ? t === S.Large ? /* @__PURE__ */ x(g, { bold: !0, size: u(t), children: r }) : /* @__PURE__ */ x(v, { bold: !0, size: u(t), children: r }) : /* @__PURE__ */ x(g, { bold: !0, size: t, children: r }), X = n(g)``, Y = n.div`
+  ${({ $size: t, $alignment: e }) => o`
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: flex-end;
     gap: ${i[t][e].buttonGap}px;
 
-    ${e === l.Vertical && r`
+    ${e === d.Vertical && o`
       align-self: stretch;
     `};
   `};
-`, Z = d(w)``, z = d(w)``;
+`, Z = n(w)``, z = n(w)``;
 export {
   Z as ActionButton,
   Y as Actions,
-  K as Alert,
-  _ as AlertContentContainer,
+  _ as Alert,
+  I as AlertContentContainer,
   X as AlertMessage,
   R as AlertMessageContainer,
   U as AlertTitle,
-  B as AutoCloseContainer,
+  V as AutoCloseContainer,
   z as CloseButton,
-  N as HighlightIndicator,
   J as IconContainer,
   Q as InnerContainer,
   q as MessageAndButtonContainer,