acinguiux-ds-react-framework 0.1.24 → 0.1.25

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+# Changelog
+# acinguiux-ds-react-framewo

package/LICENSE

@@ -0,0 +1,16 @@
+# *************************************************************************
+#
+# Acinguiux Information Technology International B.V.
+#
+# Copyright (c) 2025 Acinguiux Information Technology International B.V. All Rights Reserved.
+#
+# NOTICE: All information contained herein is, and remains the property of 
+# Acinguiux Information Technology International B.V. and its suppliers, if any.
+# The intellectual and technical concepts contained herein are proprietary
+# to Acinguiux Information Technology International B.V. and its suppliers and
+# may be covered by U.S. and Foreign Patents, patents in process, and are
+# protected by trade secret or copyright law. Dissemination of this
+# information or reproduction of this material is strictly forbidden unless
+# prior written permission is obtained from Acinguiux Information Technology
+# International B.V..
+# *************************************************************************

package/README.md

@@ -0,0 +1,136 @@
+# Acinguiux Design System - React Framework
+
+---
+
+Welcome to the [Acinguiux Design System](https://design.acinguiux) React Framework, a collection of reusable components written in ReactJS. You can explore these components on our [Storybook page](https://acinguiux-ds-react-framework.azurewebsites.net/).
+
+## Table of Contents
+
+1. [Documentation](#documentation)
+2. [Installation](#installation)
+3. [Commands](#commands)
+4. [Support](#support)
+5. [Transpiling](#transpiling)
+
+---
+
+## Documentation
+
+Our comprehensive documentation is available in the [GitHub Wiki](https://github.com/wiki).
+We provide a Storybook page to showcase and document our components:
+
+- beta (release/minor_patch branch): [https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/](https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/)
+- next-major (release/major branch): [https://acinguiux-ds-major-react-framework.azurewebsites.net/](https://acinguiux-ds-major-react-framework.azurewebsites.net/)
+- stable (main branch): [https://acinguiux-ds-react-framework.azurewebsites.net/](https://acinguiux-ds-react-framework.azurewebsites.net/)
+
+---
+
+## Usage in Acinguiux
+
+If you are creating a new repository, we recommend you to leverage the [Client React Web](https://github.com/arjunsedani/Template-Client-React-Web) template to ensure you comply with Acinguiux standards.
+
+## Installation
+
+To use the Acinguiux Design System React Framework in your project, follow these steps:
+
+### Step 1: Generate GitHub Token
+
+1. Go to [GitHub Tokens](https://github.com/settings/tokens) or navigate to GitHub Settings => Developer Settings => Personal Access Tokens.
+2. Generate a new token with at least the repo and read:packages scopes.
+3. Copy the token and, if prompted, configure SSO authorization in the `arjunsedani` organization.
+
+Add the token to the file `~/.npmrc` (if it does not exist, create it):
+
+> ⚠️ Make sure you insert the token in the configuration of your home directory (~). \
+> You should **never** push the token into your codebase.
+
+```
+//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE
+```
+
+If you do not have access to this file or you are in a Windows OS, you can run the following command:
+
+```
+npm login --scope=acinguiux --registry=https://npm.pkg.github.com
+> Username: USERNAME
+> Password: TOKEN
+> Email: PUBLIC-EMAIL-ADDRESS
+```
+
+### Step 2: Update NPM Registry
+
+Update your npm registry. Create or edit a `.npmrc` file in your project root folder and add:
+
+```
+acinguiux:registry=https://npm.pkg.github.com
+```
+
+Your other dependencies will still be downloaded from the default npm registry.
+
+### Step 3: Install the Framework
+
+Run the following command:
+
+```
+npm install --save acinguiux-ds-react-framework
+```
+
+### Step 4: Add Fonts
+
+Add the following font link to your `index.html`:
+
+```html
+<link href="https://acinguiux-fonts.azureedge.net/index.css" rel="stylesheet" />
+```
+
+### Step 5: Theme Provider
+
+In your app entry point (e.g., `src/App.tsx` for Create React App), add the following snippet:
+
+```js
+import React, { ReactElement } from 'react';
+import { AcinguiuxThemeProvider } from 'acinguiux-ds-react-framework';
+
+function App(): ReactElement {
+  return <AcinguiuxThemeProvider theme="light"><!-- Your app content --></AcinguiuxThemeProvider>;
+}
+
+export default App;
+```
+
+Choose between the light and dark themes.
+
+### 🤖 CI setup
+
+In order to correctly setup your CI, make sure **no tokens** are pushed directly in your codebase and you are following the [SEMS guidelines on secret management](https://devkit.acinguiux.com/content/sems/guidelines/SecretManagement). If you're having troubles installing packages in your CI, you can read more on how to authenticate on [GitHub docs](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry).
+
+---
+
+## Commands
+
+- `pnpm start`: launches the Storybook app
+- `pnpm test`: runs tests for all `*.test.ts?x` files
+- `pnpm test:watch`: watches all `*.test.ts?x` files and runs tests on each change
+- `pnpm build`: builds the application for distribution as a NPM package
+- `pnpm lint`: runs TS and Styled Component linters
+- `pnpm format`: formats all files based on Prettier configurations
+
+---
+
+## Support
+
+For support or inquiries, please contact the Acinguiux Design System Team:
+
+- [GitHub issues page](https://github.com/issues)
+- [SDS Teams channel](https://teams.microsoft.com/l/channel/19%3Aac0e8c95a3c840c2a1095a7440206c51%40thread.tacv2/Questions?groupId=dd072cdc-70c5-4aaf-a665-284c4fdeef4d&tenantId=db1e96a8-a3da-442a-930b-235cac24cd5c)
+- [mail: GX-GL-AcinguiuxDesignSystemTeam@acinguiux.com](mailto:GX-GL-AcinguiuxDesignSystemTeam@acinguiux.com)
+
+---
+
+## Transpiling
+
+Transpiling documentation can be found in the [root README.md file](../../README.md).
+
+---
+
+> See root README here: https://github.com/README.md

package/build/cjs/components/Alert/Alert.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("react"),P=require("classnames"),R=require("acinguiux-ds-fabrics"),i=require("../../react-base/src/consts/index.js"),I=require("../../react-base/src/components/Alert/Alert.consts.js"),d=require("../../react-base/src/components/Alert/Alert.utils.js"),T=require("../Icon/components/Cross.js"),t=require("./Alert.styles.js"),u=require("./utils/alertUtils.js"),_=require("../../react-base/src/consts/classes.js"),L=o.forwardRef(({className:b,size:r=`${i.Sizes.Medium}`,label:p,title:z,children:a,autoClose:A=!1,sentiment:l=R.FabricsVariables.Sentiments.Neutral,icon:x,closeButton:m=!1,onDismissClick:C,onClose:j,autoCloseTimeout:f=I.consts.DEFAULT_AUTOCLOSE_TIMEOUT_MS,alignment:n=`${i.Directions.Vertical}`,highlight:B=!1,banner:S=!1,actions:h,variant:s=`${i.Variants.Outlined}`,...E},M)=>{const q=z??p,g=o.useRef(null),$=o.useCallback(c=>{c?(C?.(c),j?.()):C?g.current?.click():j?.()},[C,j]);return o.useEffect(()=>{A&&setTimeout(()=>{$()},f)},[A,$,f]),e.jsxs(t.Alert,{$banner:S,$size:r,className:P(_.ALERT_CLASS,b),$sentiment:l,$variant:s,$alignment:n,ref:M,...E,children:[A&&e.jsx(t.AutoCloseContainer,{$sentiment:l,$variant:s,$autoCloseTimeout:f}),B&&!S&&e.jsx(t.HighlightIndicator,{$size:r,$alignment:n,$sentiment:l,$variant:s}),e.jsx(t.AlertContentContainer,{$size:r,$alignment:n,$variant:s,children:e.jsxs(t.InnerContainer,{$size:r,$alignment:n,children:[e.jsxs(t.MessageAndButtonContainer,{$size:r,$alignment:n,children:[e.jsxs(t.MessageAndIconVerticalContainer,{$size:r,$alignment:n,children:[!!x&&e.jsx(t.IconContainer,{$size:r,$alignment:n,children:o.cloneElement(x,{className:`${_.ALERT_CLASS}-icon`,"aria-label":"alert icon",...x.props})}),e.jsxs(t.AlertMessageContainer,{$size:r,$alignment:n,$variant:s,children:[q&&e.jsx(t.AlertTitle,{$size:r,$alignment:n,children:q}),typeof a=="string"&&a.length>0?e.jsx(t.AlertMessage,{size:u.getAlertTextSize(r),children:a}):a]})]}),m&&n===i.Directions.Vertical&&e.jsx(t.CloseButton,{ref:g,sentiment:l,sentimentProminence:d.getProminence(s),size:u.getAlertCloseButtonSize(r),title:"Close",onClick:$,variant:i.Variants.Transparent,iconOnly:!0,icon:e.jsx(T,{}),"aria-label":"Close"})]}),!!h?.length&&e.jsx(t.Actions,{$size:r,$alignment:n,children:h.map(({label:c,action:V,props:O})=>e.jsx(t.ActionButton,{sentiment:l,sentimentProminence:d.getProminence(s),onClick:V,size:u.getAlertButtonSize(r),...O,children:c},c))}),m&&n===i.Directions.Horizontal&&e.jsx(t.CloseButton,{ref:g,sentiment:l,sentimentProminence:d.getProminence(s),size:u.getAlertCloseButtonSize(r),title:"Close",onClick:$,variant:i.Variants.Transparent,iconOnly:!0,icon:e.jsx(T,{}),"aria-label":"Close"})]})})]})});module.exports=L;
+"use strict";const e=require("react/jsx-runtime"),o=require("react"),P=require("classnames"),R=require("acinguiux-ds-fabrics"),i=require("../../react-base/src/consts/index.js"),L=require("../../react-base/src/components/Alert/Alert.consts.js"),d=require("../../react-base/src/components/Alert/Alert.utils.js"),q=require("../Icon/components/Cross.js"),t=require("./Alert.styles.js"),$=require("./utils/alertUtils.js"),T=require("../../react-base/src/consts/classes.js"),y=o.forwardRef(({className:b,size:n=`${i.Sizes.Medium}`,label:_,title:p,children:a,autoClose:A=!1,sentiment:l=R.FabricsVariables.Sentiments.Neutral,icon:x,closeButton:h=!1,onDismissClick:C,onClose:j,autoCloseTimeout:f=L.consts.DEFAULT_AUTOCLOSE_TIMEOUT_MS,alignment:r=`${i.Directions.Vertical}`,highlight:z=!1,banner:B=!1,actions:m,variant:s=`${i.Variants.Outlined}`,...E},M)=>{const S=p??_,g=o.useRef(null),u=o.useCallback(c=>{c?(C?.(c),j?.()):C?g.current?.click():j?.()},[C,j]);return o.useEffect(()=>{A&&setTimeout(()=>{u()},f)},[A,u,f]),e.jsxs(t.Alert,{$banner:B,$highlight:z,$size:n,className:P(T.ALERT_CLASS,b),$sentiment:l,$variant:s,$alignment:r,ref:M,...E,children:[A&&e.jsx(t.AutoCloseContainer,{$sentiment:l,$variant:s,$autoCloseTimeout:f}),e.jsx(t.AlertContentContainer,{$size:n,$alignment:r,$variant:s,children:e.jsxs(t.InnerContainer,{$size:n,$alignment:r,children:[e.jsxs(t.MessageAndButtonContainer,{$size:n,$alignment:r,children:[e.jsxs(t.MessageAndIconVerticalContainer,{$size:n,$alignment:r,children:[!!x&&e.jsx(t.IconContainer,{$size:n,$alignment:r,children:o.cloneElement(x,{className:`${T.ALERT_CLASS}-icon`,"aria-label":"alert icon",...x.props})}),e.jsxs(t.AlertMessageContainer,{$size:n,$alignment:r,$variant:s,children:[S&&e.jsx(t.AlertTitle,{$size:n,$alignment:r,children:S}),typeof a=="string"&&a.length>0?e.jsx(t.AlertMessage,{size:$.getAlertTextSize(n),children:a}):a]})]}),h&&r===i.Directions.Vertical&&e.jsx(t.CloseButton,{ref:g,sentiment:l,sentimentProminence:d.getProminence(s),size:$.getAlertCloseButtonSize(n),title:"Close",onClick:u,variant:i.Variants.Transparent,iconOnly:!0,icon:e.jsx(q,{}),"aria-label":"Close"})]}),!!m?.length&&e.jsx(t.Actions,{$size:n,$alignment:r,children:m.map(({label:c,action:V,props:O})=>e.jsx(t.ActionButton,{sentiment:l,sentimentProminence:d.getProminence(s),onClick:V,size:$.getAlertButtonSize(n),...O,children:c},c))}),h&&r===i.Directions.Horizontal&&e.jsx(t.CloseButton,{ref:g,sentiment:l,sentimentProminence:d.getProminence(s),size:$.getAlertCloseButtonSize(n),title:"Close",onClick:u,variant:i.Variants.Transparent,iconOnly:!0,icon:e.jsx(q,{}),"aria-label":"Close"})]})})]})});module.exports=y;
 //# sourceMappingURL=Alert.js.map

package/build/cjs/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":"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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        $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":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react/jsx-runtime"),o=require("../../react-base/src/consts/index.js"),a=require("../../react-base/src/theme/types/layer.js"),n=require("../../react-base/src/components/Alert/Alert.consts.js"),d=require("acinguiux-ds-fabrics"),e=require("styled-components"),g=require("../../react-base/src/utils/sizesUtils.js"),m=require("../Text/components/Label/Label.js"),u=require("../Text/components/Text/Text.js"),x=require("../Button/OnSentimentButton.js"),w=require("./utils/alertUtils.js"),S=require("../../react-base/src/consts/classes.js"),f=t=>t===o.Variants.Filled?d.FabricsVariables.SentimentProminences.Strong:t===o.Variants.Subtle?d.FabricsVariables.SentimentProminences.Subtle:d.FabricsVariables.SentimentProminences.Transparent,V=e.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),s=require("../../react-base/src/consts/index.js"),d=require("../../react-base/src/theme/types/layer.js"),n=require("../../react-base/src/components/Alert/Alert.consts.js"),p=require("acinguiux-ds-fabrics"),t=require("styled-components"),f=require("../../react-base/src/utils/sizesUtils.js"),m=require("../Text/components/Label/Label.js"),h=require("../Text/components/Text/Text.js"),x=require("../Button/OnSentimentButton.js"),S=require("./utils/alertUtils.js"),V=require("../../react-base/src/consts/classes.js"),C=e=>e===s.Variants.Filled?p.FabricsVariables.SentimentProminences.Strong:e===s.Variants.Subtle?p.FabricsVariables.SentimentProminences.Subtle:p.FabricsVariables.SentimentProminences.Transparent,A=t.keyframes`
   from {
     width: 0;
   }
@@ -6,7 +6,7 @@
   to {
     width: 100%;
   }
-`,C=e.keyframes`
+`,v=t.keyframes`
   from {
     opacity: 0;
   }
@@ -14,7 +14,7 @@
   to {
     opacity: 1;
   }
-`,A=e.keyframes`
+`,P=t.keyframes`
   from {
     opacity: 0;
   }
@@ -22,11 +22,11 @@
   to {
     opacity: .1;
   }
-`,y=e.styled.div`
-  ${({$sentiment:t,$variant:i,$autoCloseTimeout:s,theme:r})=>{const c=r.layer({sentiment:t,sentimentProminence:d.FabricsVariables.SentimentProminences.Strong});return e.css`
+`,g=t.styled.div`
+  ${({$sentiment:e,$variant:i,$autoCloseTimeout:o,theme:c})=>{const a=c.layer({sentiment:e,sentimentProminence:p.FabricsVariables.SentimentProminences.Strong});return t.css`
       position: absolute;
       inset-block: 0;
-      opacity: ${i===o.Variants.Filled?1:.1};
+      opacity: ${i===s.Variants.Filled?1:.1};
       left: 0;
       right: 0;
       overflow: hidden;
@@ -40,94 +40,93 @@
 
         @media (prefers-reduced-motion: no-preference) {
           width: 0;
-          opacity: ${i===o.Variants.Filled?.1:1};
+          opacity: ${i===s.Variants.Filled?.1:1};
           will-change: width;
-          animation: ${V} ${s}ms ease-out forwards;
+          animation: ${A} ${o}ms ease-out forwards;
         }
 
         @media (prefers-reduced-motion: reduce) {
           width: 100%;
           opacity: 0;
           will-change: opacity;
-          animation: ${i===o.Variants.Filled?A:C} 1s ease-out forwards;
+          animation: ${i===s.Variants.Filled?P:v} 1s ease-out forwards;
         }
-        background-color: ${c[a.Variables.BackgroundSentiment]};
-        ${i===o.Variants.Filled&&e.css`
+        background-color: ${a[d.Variables.BackgroundSentiment]};
+        ${i===s.Variants.Filled&&t.css`
           mix-blend-mode: difference;
         `}
       }
     `}};
-`,v=e.styled.div`
-  ${({$size:t,$sentiment:i,$banner:s,$variant:r,$alignment:c,theme:l})=>{const b={sentiment:i,sentimentProminence:f(r)},p=l.layer(b);return e.css`
+`,y=t.styled.div`
+  ${({$size:e,$alignment:i,$variant:o})=>t.css`
+    position: relative;
+    display: flex;
+    flex: 1 0 0;
+    min-width: 0;
+    min-height: 100%;
+    overflow: hidden;
+    padding: ${n.consts[e][i].padding.vertical}px
+      ${n.consts[e][i].padding.horizontal}px;
+
+    ${o===s.Variants.Outlined&&t.css`
+      padding: ${n.consts[e][i].padding.vertical-1}px
+        ${n.consts[e][i].padding.horizontal-1}px;
+    `}
+  `};
+`,k=t.styled.div`
+  ${({$size:e,$sentiment:i,$banner:o,$highlight:c,$variant:a,$alignment:r,theme:b})=>{const w={sentiment:i,sentimentProminence:C(a)},l=b.layer(w);return t.css`
       position: relative;
-      background-color: ${p[a.Variables.BackgroundSentiment]};
-      color: ${p[a.Variables.TextOnSentimentOnBackground]};
-      border-color: ${p[a.Variables.BorderOnSentimentOnBackground]};
+      background-color: ${l[d.Variables.BackgroundSentiment]};
+      color: ${l[d.Variables.TextOnSentimentOnBackground]};
+      border-color: ${l[d.Variables.BorderOnSentimentOnBackground]};
 
       display: flex;
       align-items: flex-start;
       width: 100%;
       &,
-      & > ${y} {
-        border-radius: ${s?0:n.consts[t][c].radius}px;
+      & > ${g} {
+        border-radius: ${o?0:n.consts[e][r].radius}px;
       }
       box-sizing: border-box;
-      min-height: ${n.consts[t][c].minHeight}px;
+      min-height: ${n.consts[e][r].minHeight}px;
       min-width: 0;
       margin: 0;
       padding: 0;
 
-      ${r===o.Variants.Outlined&&e.css`
+      ${c&&!o&&t.css`
+        & > ${y} {
+          margin-left: ${n.consts[e][r].highlightContainerWidth}px;
+
+          &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            top: ${n.consts[e][r].highlightPadding}px;
+            bottom: ${n.consts[e][r].highlightPadding}px;
+            left: calc(${n.consts[e][r].highlightContainerOffset}px);
+            width: ${n.consts[e][r].highlightWidth}px;
+            border-radius: 10000px;
+            background-color: ${l[d.Variables.ForegroundOnSentiment]};
+          }
+        }
+      `};
+
+      ${a===s.Variants.Outlined&&t.css`
         border-width: 1px;
         border-style: solid;
       `}
 
-      ${c===o.Directions.Horizontal&&e.css`
+      ${r===s.Directions.Horizontal&&t.css`
         justify-content: center;
       `}
       
-      ${s&&r===o.Variants.Outlined&&e.css`
+      ${o&&a===s.Variants.Outlined&&t.css`
         border-right-width: 0;
         border-left-width: 0;
       `}
     `}}
-`,P=e.styled.div`
-  ${({theme:t,$sentiment:i,$size:s,$alignment:r,$variant:c})=>{const l=t.layer({sentiment:i,sentimentProminence:f(c)});return e.css`
-      position: relative;
-      padding: 0;
-      margin: 0;
-      height: 100%;
-      width: ${n.consts[s][r].highlightContainerWidth}px;
-
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: ${n.consts[s][r].highlightPadding}px;
-        bottom: ${n.consts[s][r].highlightPadding}px;
-        left: calc(100% + ${n.consts[s][r].highlightContainerOffset}px);
-        width: ${n.consts[s][r].highlightWidth}px;
-        border-radius: 10000px;
-        background-color: ${l[a.Variables.ForegroundOnSentiment]};
-      }
-    `}};
-`,k=e.styled.div`
-  ${({$size:t,$alignment:i,$variant:s})=>e.css`
-    display: flex;
-    flex: 1 0 0;
-    min-width: 0;
-    min-height: 100%;
-    overflow: hidden;
-    padding: ${n.consts[t][i].padding.vertical}px
-      ${n.consts[t][i].padding.horizontal}px;
-
-    ${s===o.Variants.Outlined&&e.css`
-      padding: ${n.consts[t][i].padding.vertical-1}px
-        ${n.consts[t][i].padding.horizontal-1}px;
-    `}
-  `};
-`,B=e.styled.div`
-  ${({$size:t,$alignment:i})=>e.css`
+`,B=t.styled.div`
+  ${({$size:e,$alignment:i})=>t.css`
     display: flex;
     flex: 1 1 100%;
     width: 100%;
@@ -135,75 +134,78 @@
     overflow: hidden;
     flex-wrap: wrap;
     align-items: flex-start;
-    gap: ${n.consts[t][i].textIconGap}px;
+    gap: ${n.consts[e][i].textIconGap}px;
   `};
-`,I=e.styled.div`
-  ${({$alignment:t,$size:i})=>e.css`
+`,q=t.styled.div`
+  ${({$alignment:e,$size:i})=>t.css`
     display: flex;
     flex: 1 0 0;
     width: 100%;
     min-width: 0;
     flex-wrap: nowrap;
-    align-items: ${t===o.Directions.Horizontal?"center":"flex-start"};
-    gap: ${n.consts[i][t].textIconGap}px;
-    padding: ${n.consts[i][t].innerPadding.top}px
-      ${n.consts[i][t].innerPadding.right}px
-      ${n.consts[i][t].innerPadding.bottom}px
-      ${n.consts[i][t].innerPadding.left}px;
-
-    ${t===o.Directions.Vertical&&e.css`
+    align-items: ${e===s.Directions.Horizontal?"center":"flex-start"};
+    gap: ${n.consts[i][e].textIconGap}px;
+    padding: ${n.consts[i][e].innerPadding.top}px
+      ${n.consts[i][e].innerPadding.right}px
+      ${n.consts[i][e].innerPadding.bottom}px
+      ${n.consts[i][e].innerPadding.left}px;
+
+    ${e===s.Directions.Vertical&&t.css`
       padding-right: 0;
     `};
   `};
-`,q=e.styled.div`
-  ${({$alignment:t,$size:i})=>e.css`
+`,D=t.styled.div`
+  ${({$alignment:e,$size:i})=>t.css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
-    min-width: ${n.consts[i][t].minIconSize??n.consts[i][t].iconSize}px;
-    min-height: ${n.consts[i][t].minIconSize??n.consts[i][t].iconSize}px;
+    min-width: ${n.consts[i][e].minIconSize??n.consts[i][e].iconSize}px;
+    min-height: ${n.consts[i][e].minIconSize??n.consts[i][e].iconSize}px;
 
     & > svg {
-      width: ${n.consts[i][t].iconSize}px;
-      height: ${n.consts[i][t].iconSize}px;
+      width: ${n.consts[i][e].iconSize}px;
+      height: ${n.consts[i][e].iconSize}px;
     }
   `};
-`,D=e.styled.div`
-  ${({$size:t,$alignment:i})=>e.css`
+`,O=t.styled.div`
+  ${({$size:e,$alignment:i})=>t.css`
     display: flex;
     flex: 1 1 100%;
     justify-content: space-between;
     flex-wrap: nowrap;
     min-width: 0;
-    gap: ${n.consts[t][i].innerGap}px;
+    gap: ${n.consts[e][i].innerGap}px;
     align-self: stretch;
     align-items: center;
 
-    ${i===o.Directions.Vertical&&e.css`
+    ${i===s.Directions.Vertical&&t.css`
       flex-direction: column;
       align-items: flex-start;
     `}
   `}
-`,O=e.styled.div`
-  ${({$size:t,$variant:i,$alignment:s,theme:r})=>e.css`
-    ${r.typography("paragraph",w.getAlertBodySize(t))};
+`,F=t.styled.div`
+  ${({$size:e,$variant:i,$alignment:o,theme:c})=>t.css`
+    ${c.typography("paragraph",S.getAlertBodySize(e))};
     display: flex;
     flex: 1 0 0;
-    padding: 0 ${n.consts[t][s].innerPadding.right}px 0
-      ${n.consts[t][s].innerPadding.left}px;
+    padding: 0 ${n.consts[e][o].innerPadding.right}px 0
+      ${n.consts[e][o].innerPadding.left}px;
 
-    ${s===o.Directions.Horizontal&&e.css`
+    ${o===s.Directions.Horizontal&&t.css`
       padding-left: 0;
       padding-right: 0;
     `};
 
     overflow: hidden;
 
-    > * {
+    * {
       color: inherit;
-      ${(!i||i==="filled")&&e.css`
-        .${S.LINK_CLASS} a {
+      margin: 0;
+      padding: 0;
+
+      ${(!i||i==="filled")&&t.css`
+        .${V.LINK_CLASS} a {
           &,
           &:hover,
           &:visited {
@@ -213,40 +215,40 @@
         }
       `};
 
-      ${s===o.Directions.Horizontal&&e.css`
+      ${o===s.Directions.Horizontal&&t.css`
         white-space: nowrap;
       `};
     }
 
-    ${s===o.Directions.Horizontal&&e.css`
+    ${o===s.Directions.Horizontal&&t.css`
       > p {
         overflow: hidden;
         text-overflow: ellipsis;
       }
     `};
 
-    gap: ${n.consts[t][s].textGap}px;
+    gap: ${n.consts[e][o].textGap}px;
 
-    ${s===o.Directions.Horizontal&&e.css`
+    ${o===s.Directions.Horizontal&&t.css`
       align-items: baseline;
     `}
 
-    ${s===o.Directions.Vertical&&e.css`
+    ${o===s.Directions.Vertical&&t.css`
       align-items: flex-start;
       flex-direction: column;
     `}
   `};
-`,F=({$size:t,$alignment:i,children:s})=>i===o.Directions.Vertical?t===o.Sizes.Large?h.jsx(u,{bold:!0,size:g.getLargerSize(t),children:s}):h.jsx(m,{bold:!0,size:g.getLargerSize(t),children:s}):h.jsx(u,{bold:!0,size:t,children:s}),M=e.styled(u)``,j=e.styled.div`
-  ${({$size:t,$alignment:i})=>e.css`
+`,I=({$size:e,$alignment:i,children:o})=>i===s.Directions.Vertical?e===s.Sizes.Large?u.jsx(h,{bold:!0,size:f.getLargerSize(e),children:o}):u.jsx(m,{bold:!0,size:f.getLargerSize(e),children:o}):u.jsx(h,{bold:!0,size:e,children:o}),M=t.styled(h)``,j=t.styled.div`
+  ${({$size:e,$alignment:i})=>t.css`
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     justify-content: flex-end;
-    gap: ${n.consts[t][i].buttonGap}px;
+    gap: ${n.consts[e][i].buttonGap}px;
 
-    ${i===o.Directions.Vertical&&e.css`
+    ${i===s.Directions.Vertical&&t.css`
       align-self: stretch;
     `};
   `};
-`,H=e.styled(x)``,$=e.styled(x)``;exports.ActionButton=H;exports.Actions=j;exports.Alert=v;exports.AlertContentContainer=k;exports.AlertMessage=M;exports.AlertMessageContainer=O;exports.AlertTitle=F;exports.AutoCloseContainer=y;exports.CloseButton=$;exports.HighlightIndicator=P;exports.IconContainer=q;exports.InnerContainer=D;exports.MessageAndButtonContainer=B;exports.MessageAndIconVerticalContainer=I;
+`,H=t.styled(x)``,L=t.styled(x)``;exports.ActionButton=H;exports.Actions=j;exports.Alert=k;exports.AlertContentContainer=y;exports.AlertMessage=M;exports.AlertMessageContainer=F;exports.AlertTitle=I;exports.AutoCloseContainer=g;exports.CloseButton=L;exports.IconContainer=D;exports.InnerContainer=O;exports.MessageAndButtonContainer=B;exports.MessageAndIconVerticalContainer=q;
 //# sourceMappingURL=Alert.styles.js.map