acinguiux-ds-react-framework 0.1.25 → 0.1.27

package/CHANGELOG.md

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

package/LICENSE

@@ -1,16 +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..
+# *************************************************************************
+#
+# 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

@@ -1,136 +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
+# 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/Accordion/Accordion.consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.consts.js","sources":["../../../../src/components/Accordion/Accordion.consts.ts"],"sourcesContent":["import type { FC } from 'react';\n\nimport type { AccordionTypes } from 'acinguiux-ds-react-base/components/Accordion';\n\nimport Add from '../Icon/components/Add';\nimport ChevronDown from '../Icon/components/ChevronDown';\nimport ChevronUp from '../Icon/components/ChevronUp';\nimport Minus from '../Icon/components/Minus';\nimport type { IIconProps } from '../Icon/Icon.types';\n\ntype AccordionIconType = {\n  [iconSet in AccordionTypes.IndicatorIconType]: {\n    active: FC<IIconProps>;\n    inactive: FC<IIconProps>;\n  };\n};\n\nexport const AccordionIcon: AccordionIconType = {\n  chevron: {\n    active: ChevronUp,\n    inactive: ChevronDown,\n  },\n  plus: {\n    active: Minus,\n    inactive: Add,\n  },\n};\n"],"names":["AccordionIcon","ChevronUp","ChevronDown","Minus","Add"],"mappings":"8RAiBaA,EAAmC,CAC9C,QAAS,CACP,OAAQC,EACR,SAAUC,CAAA,EAEZ,KAAM,CACJ,OAAQC,EACR,SAAUC,CAAA,CAEd"}
+{"version":3,"file":"Accordion.consts.js","sources":["../../../../src/components/Accordion/Accordion.consts.ts"],"sourcesContent":["import type { FC } from 'react';\r\n\r\nimport type { AccordionTypes } from 'acinguiux-ds-react-base/components/Accordion';\r\n\r\nimport Add from '../Icon/components/Add';\r\nimport ChevronDown from '../Icon/components/ChevronDown';\r\nimport ChevronUp from '../Icon/components/ChevronUp';\r\nimport Minus from '../Icon/components/Minus';\r\nimport type { IIconProps } from '../Icon/Icon.types';\r\n\r\ntype AccordionIconType = {\r\n  [iconSet in AccordionTypes.IndicatorIconType]: {\r\n    active: FC<IIconProps>;\r\n    inactive: FC<IIconProps>;\r\n  };\r\n};\r\n\r\nexport const AccordionIcon: AccordionIconType = {\r\n  chevron: {\r\n    active: ChevronUp,\r\n    inactive: ChevronDown,\r\n  },\r\n  plus: {\r\n    active: Minus,\r\n    inactive: Add,\r\n  },\r\n};\r\n"],"names":["AccordionIcon","ChevronUp","ChevronDown","Minus","Add"],"mappings":"8RAiBaA,EAAmC,CAC9C,QAAS,CACP,OAAQC,EACR,SAAUC,CAAA,EAEZ,KAAM,CACJ,OAAQC,EACR,SAAUC,CAAA,CAEd"}

package/build/cjs/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":"8mBAwBMA,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IAMEC,EAAAA,KAACC,EAAA,CAAQ,cAAc,SAAS,SAAU,EACxC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAQ,KAAMC,EAAAA,iBAAiB,KAAM,MAAOC,EAAAA,aAA4BT,CAAI,EAAG,SAAAG,EAC7E,SAAAF,CAAA,CACH,EACC,CAAC,CAACC,GACDI,MAACI,GAAM,SAAS,SAAS,SAAAP,EAAoB,KAAAH,EAC1C,SAAAE,CAAA,CACH,CAAA,EAEJ,EAGIS,EAAiB,CAAC,CACtB,KAAAX,EACA,IAAAY,EACA,MAAAC,EACA,KAAAC,CACF,IAMEV,OAACC,GAAQ,cAAc,MAAM,WAAW,SAAS,eAAe,aAAa,SAAU,EACpF,SAAA,CAAA,CAAC,CAACQ,GAASP,MAACS,EAAA,CAAM,KAAAf,EAAa,GAAGa,EAAO,EACzC,CAAC,CAACD,SAAQI,EAAA,CAAI,KAAAhB,EAAa,GAAGY,EAAK,EACnCE,CAAA,EACH,EAGIG,EAAe,CAACjB,EAA2BG,EAAW,GAAOe,IACjEA,GAAO,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAlB,EAAO,MAAAC,EAAO,IAAAU,EAAK,MAAAC,EAAO,KAAAC,EAAM,QAAAM,MAAe,CAChE,IAAAD,EACA,MAAOb,EAAAA,IAACP,EAAA,CAAe,KAAAC,EAAY,MAAAC,EAAc,MAAAC,EAAc,SAAAC,EAAoB,EACnF,MAAOG,EAAAA,IAACK,EAAA,CAAe,KAAAX,EAAY,IAAAY,EAAU,MAAAC,EAAc,KAAAC,EAAY,EACvE,SAAUM,CACZ,EAAE,GAAK,CAAA,EAEHC,EAAY,CAAC,CAAE,UAAAC,EAAW,MAAAJ,EAAO,GAAGK,KAA2C,CACnF,KAAM,CAAE,KAAAvB,EAAM,SAAAG,EAAU,UAAAqB,EAAW,UAAAC,EAAW,kBAAAC,EAAmB,GAAGC,CAAA,EAASC,EAAAA,SAAwBL,CAAK,EAEpGM,EAAiBZ,EAAajB,EAAMG,EAAUe,CAAK,EAEnDY,EAAmB,CAAC,CAAE,SAAAC,KAAiD,CAC3E,MAAMC,EAAOC,EAAAA,cAAcT,CAAS,EAAEO,EAAW,SAAW,UAAU,EAEtE,OAAOzB,EAAAA,IAAC0B,EAAA,CAAK,MAAOE,EAAAA,OAAuBlC,CAAI,EAAE,SAAU,OAAQkC,EAAAA,OAAuBlC,CAAI,EAAE,QAAA,CAAU,CAC5G,EAEA,OACEM,EAAAA,IAAC6B,EAAAA,UAAA,CACC,UAAWC,EAAWC,EAAAA,gBAAiBf,CAAS,EAChD,UAAWe,EAAAA,gBACX,KAAArC,EACA,SAAAG,EACA,WAAY2B,EACZ,UAAAL,EACA,kBAAAC,EACA,qBAAsB,GACtB,WAAYY,EAAAA,eACZ,MAAOT,EACP,YAAa1B,EAAW,WAAa,OACpC,GAAGwB,CAAA,CAAA,CAGV"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\r\n\r\nimport classNames from 'classnames';\r\nimport type { CollapsePanelProps } from 'rc-collapse';\r\nimport { ACCORDION_CLASS, TextElementTypes } from 'acinguiux-ds-react-base/consts';\r\nimport {\r\n  AccordionUtils,\r\n  type AccordionTypes,\r\n  AccordionConsts,\r\n} from 'acinguiux-ds-react-base/components/Accordion';\r\nimport type { TagTypes } from 'acinguiux-ds-react-base/components/Tag';\r\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\r\nimport type { ItemType } from 'rc-collapse/es/interface';\r\n\r\nimport { AccordionIcon } from './Accordion.consts';\r\nimport * as Styled from './Accordion.styles';\r\nimport type { IAccordionProps } from './Accordion.types';\r\nimport { collapseMotion } from './utils/motionUtils';\r\nimport Flexbox from '../Flexbox/Flexbox';\r\nimport Heading from '../Text/components/Heading/Heading';\r\nimport Label from '../Text/components/Label/Label';\r\nimport Badge from '../Badge/Badge';\r\nimport Tag from '../Tag/Tag';\r\n\r\nconst AccordionLabel = ({\r\n  size,\r\n  title,\r\n  label,\r\n  disabled,\r\n}: {\r\n  size: AccordionTypes.Size;\r\n  title: string;\r\n  label?: string;\r\n  disabled?: boolean;\r\n}) => (\r\n  <Flexbox flexDirection=\"column\" flexGrow={1}>\r\n    <Heading type={TextElementTypes.Span} level={AccordionUtils.HeadingLevel[size]} disabled={disabled}>\r\n      {title}\r\n    </Heading>\r\n    {!!label && (\r\n      <Label contrast=\"subtle\" disabled={disabled} size={size}>\r\n        {label}\r\n      </Label>\r\n    )}\r\n  </Flexbox>\r\n);\r\n\r\nconst AccordionExtra = ({\r\n  size,\r\n  tag,\r\n  badge,\r\n  icon,\r\n}: {\r\n  size: AccordionTypes.Size;\r\n  tag?: TagTypes.IProps;\r\n  badge?: BadgeTypes.IProps;\r\n  icon?: ReactNode;\r\n}) => (\r\n  <Flexbox flexDirection=\"row\" alignItems=\"center\" justifyContent=\"flex-start\" flexGrow={1}>\r\n    {!!badge && <Badge size={size} {...badge} />}\r\n    {!!tag && <Tag size={size} {...tag} />}\r\n    {icon}\r\n  </Flexbox>\r\n);\r\n\r\nconst prepareItems = (size: AccordionTypes.Size, disabled = false, items?: AccordionTypes.ItemType[]): ItemType[] =>\r\n  items?.map(({ key, title, label, tag, badge, icon, content }) => ({\r\n    key,\r\n    label: <AccordionLabel size={size} title={title} label={label} disabled={disabled} />,\r\n    extra: <AccordionExtra size={size} tag={tag} badge={badge} icon={icon} />,\r\n    children: content,\r\n  })) ?? [];\r\n\r\nconst Accordion = ({ className, items, ...props }: IAccordionProps): ReactElement => {\r\n  const { size, disabled, indicator, contained, indicatorPosition, ...rest } = AccordionUtils.useProps(props);\r\n\r\n  const accordionItems = prepareItems(size, disabled, items);\r\n\r\n  const handleExpandIcon = ({ isActive }: CollapsePanelProps): ReactElement => {\r\n    const Icon = AccordionIcon[indicator][isActive ? 'active' : 'inactive'];\r\n\r\n    return <Icon width={AccordionConsts.consts[size].iconSize} height={AccordionConsts.consts[size].iconSize} />;\r\n  };\r\n\r\n  return (\r\n    <Styled.Accordion\r\n      className={classNames(ACCORDION_CLASS, className)}\r\n      prefixCls={ACCORDION_CLASS}\r\n      size={size}\r\n      disabled={disabled}\r\n      expandIcon={handleExpandIcon}\r\n      contained={contained}\r\n      indicatorPosition={indicatorPosition}\r\n      destroyInactivePanel={true}\r\n      openMotion={collapseMotion}\r\n      items={accordionItems}\r\n      collapsible={disabled ? 'disabled' : undefined}\r\n      {...rest}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Accordion;\r\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":"8mBAwBMA,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IAMEC,EAAAA,KAACC,EAAA,CAAQ,cAAc,SAAS,SAAU,EACxC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAQ,KAAMC,EAAAA,iBAAiB,KAAM,MAAOC,EAAAA,aAA4BT,CAAI,EAAG,SAAAG,EAC7E,SAAAF,CAAA,CACH,EACC,CAAC,CAACC,GACDI,MAACI,GAAM,SAAS,SAAS,SAAAP,EAAoB,KAAAH,EAC1C,SAAAE,CAAA,CACH,CAAA,EAEJ,EAGIS,EAAiB,CAAC,CACtB,KAAAX,EACA,IAAAY,EACA,MAAAC,EACA,KAAAC,CACF,IAMEV,OAACC,GAAQ,cAAc,MAAM,WAAW,SAAS,eAAe,aAAa,SAAU,EACpF,SAAA,CAAA,CAAC,CAACQ,GAASP,MAACS,EAAA,CAAM,KAAAf,EAAa,GAAGa,EAAO,EACzC,CAAC,CAACD,SAAQI,EAAA,CAAI,KAAAhB,EAAa,GAAGY,EAAK,EACnCE,CAAA,EACH,EAGIG,EAAe,CAACjB,EAA2BG,EAAW,GAAOe,IACjEA,GAAO,IAAI,CAAC,CAAE,IAAAC,EAAK,MAAAlB,EAAO,MAAAC,EAAO,IAAAU,EAAK,MAAAC,EAAO,KAAAC,EAAM,QAAAM,MAAe,CAChE,IAAAD,EACA,MAAOb,EAAAA,IAACP,EAAA,CAAe,KAAAC,EAAY,MAAAC,EAAc,MAAAC,EAAc,SAAAC,EAAoB,EACnF,MAAOG,EAAAA,IAACK,EAAA,CAAe,KAAAX,EAAY,IAAAY,EAAU,MAAAC,EAAc,KAAAC,EAAY,EACvE,SAAUM,CACZ,EAAE,GAAK,CAAA,EAEHC,EAAY,CAAC,CAAE,UAAAC,EAAW,MAAAJ,EAAO,GAAGK,KAA2C,CACnF,KAAM,CAAE,KAAAvB,EAAM,SAAAG,EAAU,UAAAqB,EAAW,UAAAC,EAAW,kBAAAC,EAAmB,GAAGC,CAAA,EAASC,EAAAA,SAAwBL,CAAK,EAEpGM,EAAiBZ,EAAajB,EAAMG,EAAUe,CAAK,EAEnDY,EAAmB,CAAC,CAAE,SAAAC,KAAiD,CAC3E,MAAMC,EAAOC,EAAAA,cAAcT,CAAS,EAAEO,EAAW,SAAW,UAAU,EAEtE,OAAOzB,EAAAA,IAAC0B,EAAA,CAAK,MAAOE,EAAAA,OAAuBlC,CAAI,EAAE,SAAU,OAAQkC,EAAAA,OAAuBlC,CAAI,EAAE,QAAA,CAAU,CAC5G,EAEA,OACEM,EAAAA,IAAC6B,EAAAA,UAAA,CACC,UAAWC,EAAWC,EAAAA,gBAAiBf,CAAS,EAChD,UAAWe,EAAAA,gBACX,KAAArC,EACA,SAAAG,EACA,WAAY2B,EACZ,UAAAL,EACA,kBAAAC,EACA,qBAAsB,GACtB,WAAYY,EAAAA,eACZ,MAAOT,EACP,YAAa1B,EAAW,WAAa,OACpC,GAAGwB,CAAA,CAAA,CAGV"}

package/build/cjs/components/Accordion/Accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","sources":["../../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import RCAccordion, { type CollapseProps } from 'rc-collapse';\nimport { styled, css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { AccordionConsts, AccordionUtils } from 'acinguiux-ds-react-base/components/Accordion';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport type { IAccordionProps } from './Accordion.types';\n\ntype StyledAccordionProps = Omit<IAccordionProps, 'items'> &\n  Pick<CollapseProps, 'items' | 'collapsible' | 'expandIcon'>;\n\nconst Accordion = styled(RCAccordion)<StyledAccordionProps>`\n  ${({ prefixCls, size = `${Sizes.Medium}`, indicatorPosition, contained, disabled, theme }) => {\n    const styles = AccordionUtils.getFabricStyles(theme);\n\n    return css`\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n      gap: ${contained ? AccordionConsts.consts[size].gap : 0}px;\n\n      .${prefixCls}-header {\n        display: flex;\n        flex-grow: 1;\n        align-items: center;\n        gap: ${AccordionConsts.consts[size].gap}px;\n        padding-inline: ${AccordionConsts.consts[size].paddingInline.start - (contained ? 1 : 0)}px\n          ${AccordionConsts.consts[size].paddingInline.end - (contained ? 1 : 0)}px;\n        padding-block: ${AccordionConsts.consts[size].paddingBlock - (contained ? 1 : 0)}px;\n\n        ${!disabled &&\n        css`\n          cursor: pointer;\n\n          &:hover > .${prefixCls}-expand-icon {\n            ${styles.hover};\n          }\n\n          &:active > .${prefixCls}-expand-icon {\n            ${styles.press}\n          }\n        `}\n\n        &-collapsible-only {\n          cursor: default;\n\n          .${prefixCls}-header-text {\n            cursor: pointer;\n          }\n        }\n\n        &:focus-visible {\n          outline: none;\n        }\n\n        .${prefixCls}-header-text {\n          display: flex;\n          flex-direction: row;\n          flex-grow: ${indicatorPosition === 'right' ? 'auto' : 1};\n        }\n\n        .${prefixCls}-extra {\n          display: flex;\n          flex-grow: ${indicatorPosition === 'right' ? 1 : 'auto'};\n          justify-self: flex-end;\n          align-items: center;\n\n          & > div {\n            align-items: center;\n            gap: ${AccordionConsts.consts[size].gap}px;\n          }\n\n          & > div svg {\n            width: ${AccordionConsts.consts[size].iconSize}px;\n            height: ${AccordionConsts.consts[size].iconSize}px;\n          }\n        }\n      }\n\n      .${prefixCls}-motion {\n        overflow: hidden;\n      }\n\n      .${prefixCls}-content {\n        transition:\n          height 0.3s,\n          opacity 0.3s;\n      }\n\n      .${prefixCls}-panel-content, .${prefixCls}-content-box {\n        ${AccordionUtils.getContentTextFontStyle(theme, size)}\n        padding-block: ${contained ? 1 : 0}px ${AccordionConsts.consts[size].paddingBlock - (contained ? 1 : 0)}px;\n        padding-inline: ${AccordionConsts.consts[size].paddingInline.start - (contained ? 1 : 0)}px\n          ${AccordionConsts.consts[size].paddingInline.end - (contained ? 1 : 0)}px;\n      }\n\n      .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {\n        ${!contained &&\n        css`\n          border-bottom: none;\n        `}\n      }\n\n      .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: ${styles.resting.backgroundColor};\n        width: ${AccordionConsts.consts[size].indicatorSize}px;\n        height: ${AccordionConsts.consts[size].indicatorSize}px;\n        border-radius: ${AccordionConsts.consts[size].indicatorRadius}px;\n\n        & > svg {\n          display: inline-flex;\n          width: ${AccordionConsts.consts[size].iconSize}px;\n          height: ${AccordionConsts.consts[size].iconSize}px;\n        }\n      }\n\n      ${indicatorPosition === 'right' &&\n      css`\n        .${prefixCls}-header {\n          .${prefixCls}-expand-icon {\n            order: 3;\n          }\n          .${prefixCls}-header-text {\n            order: 1;\n          }\n          .${prefixCls}-extra {\n            order: 2;\n          }\n        }\n      `}\n\n      /** Items */\n\n      .${prefixCls}-item {\n        ${styles.resting};\n        border-style: solid;\n\n        &:has(> .${prefixCls}-header:focus-visible) {\n          ${getFocusStyles(theme)};\n        }\n\n        ${!contained\n          ? css`\n              border-width: 0;\n              border-bottom-width: 1px;\n            `\n          : css`\n              border-width: 1px;\n              border-radius: ${AccordionConsts.consts[size].radius}px;\n            `}\n\n        &-disabled {\n          ${styles.disabled}\n          cursor: not-allowed;\n        }\n      }\n    `;\n  }};\n`;\n\nexport { Accordion };\n"],"names":["Accordion","styled","RCAccordion","prefixCls","size","Sizes","indicatorPosition","contained","disabled","theme","styles","AccordionUtils.getFabricStyles","css","AccordionConsts.consts","AccordionUtils.getContentTextFontStyle","getFocusStyles"],"mappings":"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"}
+{"version":3,"file":"Accordion.styles.js","sources":["../../../../src/components/Accordion/Accordion.styles.ts"],"sourcesContent":["import RCAccordion, { type CollapseProps } from 'rc-collapse';\r\nimport { styled, css } from 'styled-components';\r\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\r\nimport { AccordionConsts, AccordionUtils } from 'acinguiux-ds-react-base/components/Accordion';\r\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\r\n\r\nimport type { IAccordionProps } from './Accordion.types';\r\n\r\ntype StyledAccordionProps = Omit<IAccordionProps, 'items'> &\r\n  Pick<CollapseProps, 'items' | 'collapsible' | 'expandIcon'>;\r\n\r\nconst Accordion = styled(RCAccordion)<StyledAccordionProps>`\r\n  ${({ prefixCls, size = `${Sizes.Medium}`, indicatorPosition, contained, disabled, theme }) => {\r\n    const styles = AccordionUtils.getFabricStyles(theme);\r\n\r\n    return css`\r\n      width: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: ${contained ? AccordionConsts.consts[size].gap : 0}px;\r\n\r\n      .${prefixCls}-header {\r\n        display: flex;\r\n        flex-grow: 1;\r\n        align-items: center;\r\n        gap: ${AccordionConsts.consts[size].gap}px;\r\n        padding-inline: ${AccordionConsts.consts[size].paddingInline.start - (contained ? 1 : 0)}px\r\n          ${AccordionConsts.consts[size].paddingInline.end - (contained ? 1 : 0)}px;\r\n        padding-block: ${AccordionConsts.consts[size].paddingBlock - (contained ? 1 : 0)}px;\r\n\r\n        ${!disabled &&\r\n        css`\r\n          cursor: pointer;\r\n\r\n          &:hover > .${prefixCls}-expand-icon {\r\n            ${styles.hover};\r\n          }\r\n\r\n          &:active > .${prefixCls}-expand-icon {\r\n            ${styles.press}\r\n          }\r\n        `}\r\n\r\n        &-collapsible-only {\r\n          cursor: default;\r\n\r\n          .${prefixCls}-header-text {\r\n            cursor: pointer;\r\n          }\r\n        }\r\n\r\n        &:focus-visible {\r\n          outline: none;\r\n        }\r\n\r\n        .${prefixCls}-header-text {\r\n          display: flex;\r\n          flex-direction: row;\r\n          flex-grow: ${indicatorPosition === 'right' ? 'auto' : 1};\r\n        }\r\n\r\n        .${prefixCls}-extra {\r\n          display: flex;\r\n          flex-grow: ${indicatorPosition === 'right' ? 1 : 'auto'};\r\n          justify-self: flex-end;\r\n          align-items: center;\r\n\r\n          & > div {\r\n            align-items: center;\r\n            gap: ${AccordionConsts.consts[size].gap}px;\r\n          }\r\n\r\n          & > div svg {\r\n            width: ${AccordionConsts.consts[size].iconSize}px;\r\n            height: ${AccordionConsts.consts[size].iconSize}px;\r\n          }\r\n        }\r\n      }\r\n\r\n      .${prefixCls}-motion {\r\n        overflow: hidden;\r\n      }\r\n\r\n      .${prefixCls}-content {\r\n        transition:\r\n          height 0.3s,\r\n          opacity 0.3s;\r\n      }\r\n\r\n      .${prefixCls}-panel-content, .${prefixCls}-content-box {\r\n        ${AccordionUtils.getContentTextFontStyle(theme, size)}\r\n        padding-block: ${contained ? 1 : 0}px ${AccordionConsts.consts[size].paddingBlock - (contained ? 1 : 0)}px;\r\n        padding-inline: ${AccordionConsts.consts[size].paddingInline.start - (contained ? 1 : 0)}px\r\n          ${AccordionConsts.consts[size].paddingInline.end - (contained ? 1 : 0)}px;\r\n      }\r\n\r\n      .${prefixCls}-panel-item:last-of-type, .${prefixCls}-item:last-of-type {\r\n        ${!contained &&\r\n        css`\r\n          border-bottom: none;\r\n        `}\r\n      }\r\n\r\n      .${prefixCls}-panel-expand-icon, .${prefixCls}-expand-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background-color: ${styles.resting.backgroundColor};\r\n        width: ${AccordionConsts.consts[size].indicatorSize}px;\r\n        height: ${AccordionConsts.consts[size].indicatorSize}px;\r\n        border-radius: ${AccordionConsts.consts[size].indicatorRadius}px;\r\n\r\n        & > svg {\r\n          display: inline-flex;\r\n          width: ${AccordionConsts.consts[size].iconSize}px;\r\n          height: ${AccordionConsts.consts[size].iconSize}px;\r\n        }\r\n      }\r\n\r\n      ${indicatorPosition === 'right' &&\r\n      css`\r\n        .${prefixCls}-header {\r\n          .${prefixCls}-expand-icon {\r\n            order: 3;\r\n          }\r\n          .${prefixCls}-header-text {\r\n            order: 1;\r\n          }\r\n          .${prefixCls}-extra {\r\n            order: 2;\r\n          }\r\n        }\r\n      `}\r\n\r\n      /** Items */\r\n\r\n      .${prefixCls}-item {\r\n        ${styles.resting};\r\n        border-style: solid;\r\n\r\n        &:has(> .${prefixCls}-header:focus-visible) {\r\n          ${getFocusStyles(theme)};\r\n        }\r\n\r\n        ${!contained\r\n          ? css`\r\n              border-width: 0;\r\n              border-bottom-width: 1px;\r\n            `\r\n          : css`\r\n              border-width: 1px;\r\n              border-radius: ${AccordionConsts.consts[size].radius}px;\r\n            `}\r\n\r\n        &-disabled {\r\n          ${styles.disabled}\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n    `;\r\n  }};\r\n`;\r\n\r\nexport { Accordion };\r\n"],"names":["Accordion","styled","RCAccordion","prefixCls","size","Sizes","indicatorPosition","contained","disabled","theme","styles","AccordionUtils.getFabricStyles","css","AccordionConsts.consts","AccordionUtils.getContentTextFontStyle","getFocusStyles"],"mappings":"waAWMA,EAAYC,EAAAA,OAAOC,CAAW;AAAA,IAChC,CAAC,CAAE,UAAAC,EAAW,KAAAC,EAAO,GAAGC,EAAAA,MAAM,MAAM,GAAI,kBAAAC,EAAmB,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAA,IAAY,CAC5F,MAAMC,EAASC,EAAAA,gBAA+BF,CAAK,EAEnD,OAAOG,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,aAIEL,EAAYM,EAAAA,OAAuBT,CAAI,EAAE,IAAM,CAAC;AAAA;AAAA,SAEpDD,CAAS;AAAA;AAAA;AAAA;AAAA,eAIHU,EAAAA,OAAuBT,CAAI,EAAE,GAAG;AAAA,0BACrBS,EAAAA,OAAuBT,CAAI,EAAE,cAAc,OAASG,EAAY,EAAI,EAAE;AAAA,YACpFM,EAAAA,OAAuBT,CAAI,EAAE,cAAc,KAAOG,EAAY,EAAI,EAAE;AAAA,yBACvDM,EAAAA,OAAuBT,CAAI,EAAE,cAAgBG,EAAY,EAAI,EAAE;AAAA;AAAA,UAE9E,CAACC,GACHI,EAAAA;AAAAA;AAAAA;AAAAA,uBAGeT,CAAS;AAAA,cAClBO,EAAO,KAAK;AAAA;AAAA;AAAA,wBAGFP,CAAS;AAAA,cACnBO,EAAO,KAAK;AAAA;AAAA,SAEjB;AAAA;AAAA;AAAA;AAAA;AAAA,aAKIP,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASXA,CAAS;AAAA;AAAA;AAAA,uBAGGG,IAAsB,QAAU,OAAS,CAAC;AAAA;AAAA;AAAA,WAGtDH,CAAS;AAAA;AAAA,uBAEGG,IAAsB,QAAU,EAAI,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM9CO,EAAAA,OAAuBT,CAAI,EAAE,GAAG;AAAA;AAAA;AAAA;AAAA,qBAI9BS,EAAAA,OAAuBT,CAAI,EAAE,QAAQ;AAAA,sBACpCS,EAAAA,OAAuBT,CAAI,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,SAKlDD,CAAS;AAAA;AAAA;AAAA;AAAA,SAITA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMTA,CAAS,oBAAoBA,CAAS;AAAA,UACrCW,EAAAA,wBAAuCL,EAAOL,CAAI,CAAC;AAAA,yBACpCG,EAAY,EAAI,CAAC,MAAMM,EAAAA,OAAuBT,CAAI,EAAE,cAAgBG,EAAY,EAAI,EAAE;AAAA,0BACrFM,EAAAA,OAAuBT,CAAI,EAAE,cAAc,OAASG,EAAY,EAAI,EAAE;AAAA,YACpFM,EAAAA,OAAuBT,CAAI,EAAE,cAAc,KAAOG,EAAY,EAAI,EAAE;AAAA;AAAA;AAAA,SAGvEJ,CAAS,8BAA8BA,CAAS;AAAA,UAC/C,CAACI,GACHK,EAAAA;AAAAA;AAAAA,SAEC;AAAA;AAAA;AAAA,SAGAT,CAAS,wBAAwBA,CAAS;AAAA;AAAA;AAAA;AAAA,4BAIvBO,EAAO,QAAQ,eAAe;AAAA,iBACzCG,EAAAA,OAAuBT,CAAI,EAAE,aAAa;AAAA,kBACzCS,EAAAA,OAAuBT,CAAI,EAAE,aAAa;AAAA,yBACnCS,EAAAA,OAAuBT,CAAI,EAAE,eAAe;AAAA;AAAA;AAAA;AAAA,mBAIlDS,EAAAA,OAAuBT,CAAI,EAAE,QAAQ;AAAA,oBACpCS,EAAAA,OAAuBT,CAAI,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIjDE,IAAsB,SACxBM,EAAAA;AAAAA,WACKT,CAAS;AAAA,aACPA,CAAS;AAAA;AAAA;AAAA,aAGTA,CAAS;AAAA;AAAA;AAAA,aAGTA,CAAS;AAAA;AAAA;AAAA;AAAA,OAIf;AAAA;AAAA;AAAA;AAAA,SAIEA,CAAS;AAAA,UACRO,EAAO,OAAO;AAAA;AAAA;AAAA,mBAGLP,CAAS;AAAA,YAChBY,EAAAA,eAAeN,CAAK,CAAC;AAAA;AAAA;AAAA,UAGtBF,EAKCK,EAAAA;AAAAA;AAAAA,+BAEmBC,EAAAA,OAAuBT,CAAI,EAAE,MAAM;AAAA,cANtDQ,EAAAA;AAAAA;AAAAA;AAAAA,aAOC;AAAA;AAAA;AAAA,YAGDF,EAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,KAKzB,CAAC;AAAA"}

package/build/cjs/components/Accordion/utils/motionUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Accordion/utils/motionUtils.ts"],"sourcesContent":["import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport { ACCORDION_CLASS } from 'acinguiux-ds-react-base/consts';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node.offsetHeight });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event) => (event as TransitionEvent).propertyName === 'height';\n\nexport const collapseMotion: CSSMotionProps = {\n  motionName: `${ACCORDION_CLASS}-motion`,\n  onAppearStart: getCollapsedHeight,\n  onEnterStart: getCollapsedHeight,\n  onEnterActive: getRealHeight,\n  onLeaveStart: getCurrentHeight,\n  onLeaveActive: getCollapsedHeight,\n  onEnterEnd: skipOpacityTransition,\n  onLeaveEnd: skipOpacityTransition,\n  motionDeadline: 500,\n};\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","collapseMotion","ACCORDION_CLASS"],"mappings":"yKAGMA,EAAyC,KAAO,CAAE,OAAQ,EAAG,QAAS,CAAA,GACtEC,EAAqCC,IAAU,CAAE,OAAQA,EAAK,aAAc,QAAS,IACrFC,EAAwCD,IAAU,CAAE,OAAQA,EAAK,YAAA,GACjEE,EAA+C,CAACC,EAAGC,IAAWA,EAA0B,eAAiB,SAElGC,EAAiC,CAC5C,WAAY,GAAGC,EAAAA,eAAe,UAC9B,cAAeR,EACf,aAAcA,EACd,cAAeC,EACf,aAAcE,EACd,cAAeH,EACf,WAAYI,EACZ,WAAYA,EACZ,eAAgB,GAClB"}
+{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Accordion/utils/motionUtils.ts"],"sourcesContent":["import type { CSSMotionProps, MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\r\nimport { ACCORDION_CLASS } from 'acinguiux-ds-react-base/consts';\r\n\r\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\r\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node.scrollHeight, opacity: 1 });\r\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node.offsetHeight });\r\nconst skipOpacityTransition: MotionEndEventHandler = (_, event) => (event as TransitionEvent).propertyName === 'height';\r\n\r\nexport const collapseMotion: CSSMotionProps = {\r\n  motionName: `${ACCORDION_CLASS}-motion`,\r\n  onAppearStart: getCollapsedHeight,\r\n  onEnterStart: getCollapsedHeight,\r\n  onEnterActive: getRealHeight,\r\n  onLeaveStart: getCurrentHeight,\r\n  onLeaveActive: getCollapsedHeight,\r\n  onEnterEnd: skipOpacityTransition,\r\n  onLeaveEnd: skipOpacityTransition,\r\n  motionDeadline: 500,\r\n};\r\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","collapseMotion","ACCORDION_CLASS"],"mappings":"yKAGMA,EAAyC,KAAO,CAAE,OAAQ,EAAG,QAAS,CAAA,GACtEC,EAAqCC,IAAU,CAAE,OAAQA,EAAK,aAAc,QAAS,IACrFC,EAAwCD,IAAU,CAAE,OAAQA,EAAK,YAAA,GACjEE,EAA+C,CAACC,EAAGC,IAAWA,EAA0B,eAAiB,SAElGC,EAAiC,CAC5C,WAAY,GAAGC,EAAAA,eAAe,UAC9B,cAAeR,EACf,aAAcA,EACd,cAAeC,EACf,aAAcE,EACd,cAAeH,EACf,WAAYI,EACZ,WAAYA,EACZ,eAAgB,GAClB"}

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\n\nimport { Directions, LINK_CLASS, Sizes, Variants } from 'acinguiux-ds-react-base/consts';\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { AlertConsts, AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { styled, css, keyframes } from 'styled-components';\nimport { getLargerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { LabelTypes, TextTypes } from 'acinguiux-ds-react-base/components/Text';\n\nimport Label from '../Text/components/Label/Label';\nimport Text from '../Text/components/Text/Text';\nimport type { IAlertProps } from './Alert.types';\nimport OnSentimentButton from '../Button/OnSentimentButton';\nimport { getAlertBodySize } from './utils/alertUtils';\n\nconst getProminence = (variant: AlertTypes.Variant) => {\n  if (variant === Variants.Filled) {\n    return FabricsVariables.SentimentProminences.Strong;\n  }\n\n  if (variant === Variants.Subtle) {\n    return FabricsVariables.SentimentProminences.Subtle;\n  }\n\n  return FabricsVariables.SentimentProminences.Transparent;\n};\n\ntype AlertBasicProps = Required<PickTransient<IAlertProps, 'size' | 'alignment'>>;\ntype AlertVariantProps = Required<PickTransient<IAlertProps, 'variant'>>;\ntype AlertSentimentProps = Required<PickTransient<IAlertProps, 'sentiment'>>;\ntype AlertBannerProps = Required<PickTransient<IAlertProps, 'banner'>>;\ntype AlertHighlightProps = Required<PickTransient<IAlertProps, 'highlight'>>;\ntype AlertAutocloseProps = Required<PickTransient<IAlertProps, 'autoCloseTimeout'>>;\n\nconst fullWidth = keyframes`\n  from {\n    width: 0;\n  }\n  \n  to {\n    width: 100%;\n  }\n`;\n\nconst opacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: 1;\n  }\n`;\n\nconst miniOpacity = keyframes`\n  from {\n    opacity: 0;\n  }\n  \n  to {\n    opacity: .1;\n  }\n`;\n\nconst AutoCloseContainer = styled.div<AlertVariantProps & AlertSentimentProps & AlertAutocloseProps>`\n  ${({ $sentiment, $variant, $autoCloseTimeout, theme }) => {\n    const layer = theme.layer({\n      sentiment: $sentiment,\n      sentimentProminence: FabricsVariables.SentimentProminences.Strong,\n    });\n\n    return css`\n      position: absolute;\n      inset-block: 0;\n      opacity: ${$variant === Variants.Filled ? 1 : 0.1};\n      left: 0;\n      right: 0;\n      overflow: hidden;\n      pointer-events: none;\n\n      &::after {\n        content: '';\n        position: relative;\n        height: 100%;\n        display: block;\n\n        @media (prefers-reduced-motion: no-preference) {\n          width: 0;\n          opacity: ${$variant === Variants.Filled ? 0.1 : 1};\n          will-change: width;\n          animation: ${fullWidth} ${$autoCloseTimeout}ms ease-out forwards;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          width: 100%;\n          opacity: 0;\n          will-change: opacity;\n          animation: ${$variant === Variants.Filled ? miniOpacity : opacity} 1s ease-out forwards;\n        }\n        background-color: ${layer[Variables.BackgroundSentiment]};\n        ${$variant === Variants.Filled &&\n        css`\n          mix-blend-mode: difference;\n        `}\n      }\n    `;\n  }};\n`;\n\nconst AlertContentContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $alignment, $variant }) => css`\n    position: relative;\n    display: flex;\n    flex: 1 0 0;\n    min-width: 0;\n    min-height: 100%;\n    overflow: hidden;\n    padding: ${AlertConsts.consts[$size][$alignment].padding.vertical}px\n      ${AlertConsts.consts[$size][$alignment].padding.horizontal}px;\n\n    ${$variant === Variants.Outlined &&\n    css`\n      padding: ${AlertConsts.consts[$size][$alignment].padding.vertical - 1}px\n        ${AlertConsts.consts[$size][$alignment].padding.horizontal - 1}px;\n    `}\n  `};\n`;\n\nconst Alert = styled.div<\n  AlertBasicProps & AlertVariantProps & AlertSentimentProps & AlertBannerProps & AlertHighlightProps\n>`\n  ${({ $size, $sentiment, $banner, $highlight, $variant, $alignment, theme }) => {\n    const currentModes = { sentiment: $sentiment, sentimentProminence: getProminence($variant) };\n    const layer = theme.layer(currentModes);\n\n    return css`\n      position: relative;\n      background-color: ${layer[Variables.BackgroundSentiment]};\n      color: ${layer[Variables.TextOnSentimentOnBackground]};\n      border-color: ${layer[Variables.BorderOnSentimentOnBackground]};\n\n      display: flex;\n      align-items: flex-start;\n      width: 100%;\n      &,\n      & > ${AutoCloseContainer} {\n        border-radius: ${$banner ? 0 : AlertConsts.consts[$size][$alignment].radius}px;\n      }\n      box-sizing: border-box;\n      min-height: ${AlertConsts.consts[$size][$alignment].minHeight}px;\n      min-width: 0;\n      margin: 0;\n      padding: 0;\n\n      ${$highlight &&\n      !$banner &&\n      css`\n        & > ${AlertContentContainer} {\n          margin-left: ${AlertConsts.consts[$size][$alignment].highlightContainerWidth}px;\n\n          &::before {\n            content: '';\n            display: block;\n            position: absolute;\n            top: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n            bottom: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\n            left: calc(${AlertConsts.consts[$size][$alignment].highlightContainerOffset}px);\n            width: ${AlertConsts.consts[$size][$alignment].highlightWidth}px;\n            border-radius: 10000px;\n            background-color: ${layer[Variables.ForegroundOnSentiment]};\n          }\n        }\n      `};\n\n      ${$variant === Variants.Outlined &&\n      css`\n        border-width: 1px;\n        border-style: solid;\n      `}\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        justify-content: center;\n      `}\n      \n      ${$banner &&\n      $variant === Variants.Outlined &&\n      css`\n        border-right-width: 0;\n        border-left-width: 0;\n      `}\n    `;\n  }}\n`;\n\nconst MessageAndButtonContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n  `};\n`;\n\nconst MessageAndIconVerticalContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: flex;\n    flex: 1 0 0;\n    width: 100%;\n    min-width: 0;\n    flex-wrap: nowrap;\n    align-items: ${$alignment === Directions.Horizontal ? 'center' : 'flex-start'};\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\n    padding: ${AlertConsts.consts[$size][$alignment].innerPadding.top}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.right}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.bottom}px\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      padding-right: 0;\n    `};\n  `};\n`;\n\nconst IconContainer = styled.div<AlertBasicProps>`\n  ${({ $alignment, $size }) => css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: ${AlertConsts.consts[$size][$alignment].minIconSize ?? AlertConsts.consts[$size][$alignment].iconSize}px;\n    min-height: ${AlertConsts.consts[$size][$alignment].minIconSize ??\n    AlertConsts.consts[$size][$alignment].iconSize}px;\n\n    & > svg {\n      width: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n      height: ${AlertConsts.consts[$size][$alignment].iconSize}px;\n    }\n  `};\n`;\n\nconst InnerContainer = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    flex: 1 1 100%;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n    min-width: 0;\n    gap: ${AlertConsts.consts[$size][$alignment].innerGap}px;\n    align-self: stretch;\n    align-items: center;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      flex-direction: column;\n      align-items: flex-start;\n    `}\n  `}\n`;\n\nconst AlertMessageContainer = styled.div<AlertBasicProps & AlertVariantProps>`\n  ${({ $size, $variant, $alignment, theme }) => css`\n    ${theme.typography('paragraph', getAlertBodySize($size))};\n    display: flex;\n    flex: 1 0 0;\n    padding: 0 ${AlertConsts.consts[$size][$alignment].innerPadding.right}px 0\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      padding-left: 0;\n      padding-right: 0;\n    `};\n\n    overflow: hidden;\n\n    * {\n      color: inherit;\n      margin: 0;\n      padding: 0;\n\n      ${(!$variant || $variant === 'filled') &&\n      css`\n        .${LINK_CLASS} a {\n          &,\n          &:hover,\n          &:visited {\n            color: inherit;\n            border-color: inherit;\n          }\n        }\n      `};\n\n      ${$alignment === Directions.Horizontal &&\n      css`\n        white-space: nowrap;\n      `};\n    }\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      > p {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `};\n\n    gap: ${AlertConsts.consts[$size][$alignment].textGap}px;\n\n    ${$alignment === Directions.Horizontal &&\n    css`\n      align-items: baseline;\n    `}\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-items: flex-start;\n      flex-direction: column;\n    `}\n  `};\n`;\n\nconst AlertTitle = ({\n  $size,\n  $alignment,\n  children,\n}: PropsWithChildren<Required<PickTransient<IAlertProps, 'size' | 'alignment'>>>) => {\n  if ($alignment === Directions.Vertical) {\n    if ($size === Sizes.Large) {\n      return (\n        <Text bold={true} size={getLargerSize($size) as TextTypes.Size}>\n          {children}\n        </Text>\n      );\n    }\n\n    return (\n      <Label bold={true} size={getLargerSize($size) as LabelTypes.Size}>\n        {children}\n      </Label>\n    );\n  }\n\n  return (\n    <Text bold={true} size={$size}>\n      {children}\n    </Text>\n  );\n};\n\nconst AlertMessage = styled(Text)``;\n\nconst Actions = styled.div<AlertBasicProps>`\n  ${({ $size, $alignment }) => css`\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    justify-content: flex-end;\n    gap: ${AlertConsts.consts[$size][$alignment].buttonGap}px;\n\n    ${$alignment === Directions.Vertical &&\n    css`\n      align-self: stretch;\n    `};\n  `};\n`;\n\nconst ActionButton = styled(OnSentimentButton)``;\n\nconst CloseButton = styled(OnSentimentButton)``;\n\nexport {\n  ActionButton,\n  Actions,\n  Alert,\n  AutoCloseContainer,\n  AlertContentContainer,\n  AlertTitle,\n  AlertMessage,\n  AlertMessageContainer,\n  CloseButton,\n  IconContainer,\n  InnerContainer,\n  MessageAndButtonContainer,\n  MessageAndIconVerticalContainer,\n};\n"],"names":["getProminence","variant","Variants","FabricsVariables","fullWidth","keyframes","opacity","miniOpacity","AutoCloseContainer","styled","$sentiment","$variant","$autoCloseTimeout","theme","layer","css","Variables","AlertContentContainer","$size","$alignment","AlertConsts.consts","Alert","$banner","$highlight","currentModes","Directions","MessageAndButtonContainer","MessageAndIconVerticalContainer","IconContainer","InnerContainer","AlertMessageContainer","getAlertBodySize","LINK_CLASS","AlertTitle","children","Sizes","jsx","Text","getLargerSize","Label","AlertMessage","Actions","ActionButton","OnSentimentButton","CloseButton"],"mappings":"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"}
+{"version":3,"file":"Alert.styles.js","sources":["../../../../src/components/Alert/Alert.styles.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\r\n\r\nimport { Directions, LINK_CLASS, Sizes, Variants } from 'acinguiux-ds-react-base/consts';\r\nimport { PickTransient } from 'acinguiux-ds-react-base/types';\r\nimport { Variables } from 'acinguiux-ds-react-base/theme';\r\nimport { AlertConsts, AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\r\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\r\nimport { styled, css, keyframes } from 'styled-components';\r\nimport { getLargerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\r\nimport { LabelTypes, TextTypes } from 'acinguiux-ds-react-base/components/Text';\r\n\r\nimport Label from '../Text/components/Label/Label';\r\nimport Text from '../Text/components/Text/Text';\r\nimport type { IAlertProps } from './Alert.types';\r\nimport OnSentimentButton from '../Button/OnSentimentButton';\r\nimport { getAlertBodySize } from './utils/alertUtils';\r\n\r\nconst getProminence = (variant: AlertTypes.Variant) => {\r\n  if (variant === Variants.Filled) {\r\n    return FabricsVariables.SentimentProminences.Strong;\r\n  }\r\n\r\n  if (variant === Variants.Subtle) {\r\n    return FabricsVariables.SentimentProminences.Subtle;\r\n  }\r\n\r\n  return FabricsVariables.SentimentProminences.Transparent;\r\n};\r\n\r\ntype AlertBasicProps = Required<PickTransient<IAlertProps, 'size' | 'alignment'>>;\r\ntype AlertVariantProps = Required<PickTransient<IAlertProps, 'variant'>>;\r\ntype AlertSentimentProps = Required<PickTransient<IAlertProps, 'sentiment'>>;\r\ntype AlertBannerProps = Required<PickTransient<IAlertProps, 'banner'>>;\r\ntype AlertHighlightProps = Required<PickTransient<IAlertProps, 'highlight'>>;\r\ntype AlertAutocloseProps = Required<PickTransient<IAlertProps, 'autoCloseTimeout'>>;\r\n\r\nconst fullWidth = keyframes`\r\n  from {\r\n    width: 0;\r\n  }\r\n  \r\n  to {\r\n    width: 100%;\r\n  }\r\n`;\r\n\r\nconst opacity = keyframes`\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  \r\n  to {\r\n    opacity: 1;\r\n  }\r\n`;\r\n\r\nconst miniOpacity = keyframes`\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  \r\n  to {\r\n    opacity: .1;\r\n  }\r\n`;\r\n\r\nconst AutoCloseContainer = styled.div<AlertVariantProps & AlertSentimentProps & AlertAutocloseProps>`\r\n  ${({ $sentiment, $variant, $autoCloseTimeout, theme }) => {\r\n    const layer = theme.layer({\r\n      sentiment: $sentiment,\r\n      sentimentProminence: FabricsVariables.SentimentProminences.Strong,\r\n    });\r\n\r\n    return css`\r\n      position: absolute;\r\n      inset-block: 0;\r\n      opacity: ${$variant === Variants.Filled ? 1 : 0.1};\r\n      left: 0;\r\n      right: 0;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n\r\n      &::after {\r\n        content: '';\r\n        position: relative;\r\n        height: 100%;\r\n        display: block;\r\n\r\n        @media (prefers-reduced-motion: no-preference) {\r\n          width: 0;\r\n          opacity: ${$variant === Variants.Filled ? 0.1 : 1};\r\n          will-change: width;\r\n          animation: ${fullWidth} ${$autoCloseTimeout}ms ease-out forwards;\r\n        }\r\n\r\n        @media (prefers-reduced-motion: reduce) {\r\n          width: 100%;\r\n          opacity: 0;\r\n          will-change: opacity;\r\n          animation: ${$variant === Variants.Filled ? miniOpacity : opacity} 1s ease-out forwards;\r\n        }\r\n        background-color: ${layer[Variables.BackgroundSentiment]};\r\n        ${$variant === Variants.Filled &&\r\n        css`\r\n          mix-blend-mode: difference;\r\n        `}\r\n      }\r\n    `;\r\n  }};\r\n`;\r\n\r\nconst AlertContentContainer = styled.div<AlertBasicProps & AlertVariantProps>`\r\n  ${({ $size, $alignment, $variant }) => css`\r\n    position: relative;\r\n    display: flex;\r\n    flex: 1 0 0;\r\n    min-width: 0;\r\n    min-height: 100%;\r\n    overflow: hidden;\r\n    padding: ${AlertConsts.consts[$size][$alignment].padding.vertical}px\r\n      ${AlertConsts.consts[$size][$alignment].padding.horizontal}px;\r\n\r\n    ${$variant === Variants.Outlined &&\r\n    css`\r\n      padding: ${AlertConsts.consts[$size][$alignment].padding.vertical - 1}px\r\n        ${AlertConsts.consts[$size][$alignment].padding.horizontal - 1}px;\r\n    `}\r\n  `};\r\n`;\r\n\r\nconst Alert = styled.div<\r\n  AlertBasicProps & AlertVariantProps & AlertSentimentProps & AlertBannerProps & AlertHighlightProps\r\n>`\r\n  ${({ $size, $sentiment, $banner, $highlight, $variant, $alignment, theme }) => {\r\n    const currentModes = { sentiment: $sentiment, sentimentProminence: getProminence($variant) };\r\n    const layer = theme.layer(currentModes);\r\n\r\n    return css`\r\n      position: relative;\r\n      background-color: ${layer[Variables.BackgroundSentiment]};\r\n      color: ${layer[Variables.TextOnSentimentOnBackground]};\r\n      border-color: ${layer[Variables.BorderOnSentimentOnBackground]};\r\n\r\n      display: flex;\r\n      align-items: flex-start;\r\n      width: 100%;\r\n      &,\r\n      & > ${AutoCloseContainer} {\r\n        border-radius: ${$banner ? 0 : AlertConsts.consts[$size][$alignment].radius}px;\r\n      }\r\n      box-sizing: border-box;\r\n      min-height: ${AlertConsts.consts[$size][$alignment].minHeight}px;\r\n      min-width: 0;\r\n      margin: 0;\r\n      padding: 0;\r\n\r\n      ${$highlight &&\r\n      !$banner &&\r\n      css`\r\n        & > ${AlertContentContainer} {\r\n          margin-left: ${AlertConsts.consts[$size][$alignment].highlightContainerWidth}px;\r\n\r\n          &::before {\r\n            content: '';\r\n            display: block;\r\n            position: absolute;\r\n            top: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\r\n            bottom: ${AlertConsts.consts[$size][$alignment].highlightPadding}px;\r\n            left: calc(${AlertConsts.consts[$size][$alignment].highlightContainerOffset}px);\r\n            width: ${AlertConsts.consts[$size][$alignment].highlightWidth}px;\r\n            border-radius: 10000px;\r\n            background-color: ${layer[Variables.ForegroundOnSentiment]};\r\n          }\r\n        }\r\n      `};\r\n\r\n      ${$variant === Variants.Outlined &&\r\n      css`\r\n        border-width: 1px;\r\n        border-style: solid;\r\n      `}\r\n\r\n      ${$alignment === Directions.Horizontal &&\r\n      css`\r\n        justify-content: center;\r\n      `}\r\n      \r\n      ${$banner &&\r\n      $variant === Variants.Outlined &&\r\n      css`\r\n        border-right-width: 0;\r\n        border-left-width: 0;\r\n      `}\r\n    `;\r\n  }}\r\n`;\r\n\r\nconst MessageAndButtonContainer = styled.div<AlertBasicProps>`\r\n  ${({ $size, $alignment }) => css`\r\n    display: flex;\r\n    flex: 1 1 100%;\r\n    width: 100%;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    flex-wrap: wrap;\r\n    align-items: flex-start;\r\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\r\n  `};\r\n`;\r\n\r\nconst MessageAndIconVerticalContainer = styled.div<AlertBasicProps>`\r\n  ${({ $alignment, $size }) => css`\r\n    display: flex;\r\n    flex: 1 0 0;\r\n    width: 100%;\r\n    min-width: 0;\r\n    flex-wrap: nowrap;\r\n    align-items: ${$alignment === Directions.Horizontal ? 'center' : 'flex-start'};\r\n    gap: ${AlertConsts.consts[$size][$alignment].textIconGap}px;\r\n    padding: ${AlertConsts.consts[$size][$alignment].innerPadding.top}px\r\n      ${AlertConsts.consts[$size][$alignment].innerPadding.right}px\r\n      ${AlertConsts.consts[$size][$alignment].innerPadding.bottom}px\r\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\r\n\r\n    ${$alignment === Directions.Vertical &&\r\n    css`\r\n      padding-right: 0;\r\n    `};\r\n  `};\r\n`;\r\n\r\nconst IconContainer = styled.div<AlertBasicProps>`\r\n  ${({ $alignment, $size }) => css`\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    min-width: ${AlertConsts.consts[$size][$alignment].minIconSize ?? AlertConsts.consts[$size][$alignment].iconSize}px;\r\n    min-height: ${AlertConsts.consts[$size][$alignment].minIconSize ??\r\n    AlertConsts.consts[$size][$alignment].iconSize}px;\r\n\r\n    & > svg {\r\n      width: ${AlertConsts.consts[$size][$alignment].iconSize}px;\r\n      height: ${AlertConsts.consts[$size][$alignment].iconSize}px;\r\n    }\r\n  `};\r\n`;\r\n\r\nconst InnerContainer = styled.div<AlertBasicProps>`\r\n  ${({ $size, $alignment }) => css`\r\n    display: flex;\r\n    flex: 1 1 100%;\r\n    justify-content: space-between;\r\n    flex-wrap: nowrap;\r\n    min-width: 0;\r\n    gap: ${AlertConsts.consts[$size][$alignment].innerGap}px;\r\n    align-self: stretch;\r\n    align-items: center;\r\n\r\n    ${$alignment === Directions.Vertical &&\r\n    css`\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n    `}\r\n  `}\r\n`;\r\n\r\nconst AlertMessageContainer = styled.div<AlertBasicProps & AlertVariantProps>`\r\n  ${({ $size, $variant, $alignment, theme }) => css`\r\n    ${theme.typography('paragraph', getAlertBodySize($size))};\r\n    display: flex;\r\n    flex: 1 0 0;\r\n    padding: 0 ${AlertConsts.consts[$size][$alignment].innerPadding.right}px 0\r\n      ${AlertConsts.consts[$size][$alignment].innerPadding.left}px;\r\n\r\n    ${$alignment === Directions.Horizontal &&\r\n    css`\r\n      padding-left: 0;\r\n      padding-right: 0;\r\n    `};\r\n\r\n    overflow: hidden;\r\n\r\n    * {\r\n      color: inherit;\r\n      margin: 0;\r\n      padding: 0;\r\n\r\n      ${(!$variant || $variant === 'filled') &&\r\n      css`\r\n        .${LINK_CLASS} a {\r\n          &,\r\n          &:hover,\r\n          &:visited {\r\n            color: inherit;\r\n            border-color: inherit;\r\n          }\r\n        }\r\n      `};\r\n\r\n      ${$alignment === Directions.Horizontal &&\r\n      css`\r\n        white-space: nowrap;\r\n      `};\r\n    }\r\n\r\n    ${$alignment === Directions.Horizontal &&\r\n    css`\r\n      > p {\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n      }\r\n    `};\r\n\r\n    gap: ${AlertConsts.consts[$size][$alignment].textGap}px;\r\n\r\n    ${$alignment === Directions.Horizontal &&\r\n    css`\r\n      align-items: baseline;\r\n    `}\r\n\r\n    ${$alignment === Directions.Vertical &&\r\n    css`\r\n      align-items: flex-start;\r\n      flex-direction: column;\r\n    `}\r\n  `};\r\n`;\r\n\r\nconst AlertTitle = ({\r\n  $size,\r\n  $alignment,\r\n  children,\r\n}: PropsWithChildren<Required<PickTransient<IAlertProps, 'size' | 'alignment'>>>) => {\r\n  if ($alignment === Directions.Vertical) {\r\n    if ($size === Sizes.Large) {\r\n      return (\r\n        <Text bold={true} size={getLargerSize($size) as TextTypes.Size}>\r\n          {children}\r\n        </Text>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Label bold={true} size={getLargerSize($size) as LabelTypes.Size}>\r\n        {children}\r\n      </Label>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Text bold={true} size={$size}>\r\n      {children}\r\n    </Text>\r\n  );\r\n};\r\n\r\nconst AlertMessage = styled(Text)``;\r\n\r\nconst Actions = styled.div<AlertBasicProps>`\r\n  ${({ $size, $alignment }) => css`\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: nowrap;\r\n    justify-content: flex-end;\r\n    gap: ${AlertConsts.consts[$size][$alignment].buttonGap}px;\r\n\r\n    ${$alignment === Directions.Vertical &&\r\n    css`\r\n      align-self: stretch;\r\n    `};\r\n  `};\r\n`;\r\n\r\nconst ActionButton = styled(OnSentimentButton)``;\r\n\r\nconst CloseButton = styled(OnSentimentButton)``;\r\n\r\nexport {\r\n  ActionButton,\r\n  Actions,\r\n  Alert,\r\n  AutoCloseContainer,\r\n  AlertContentContainer,\r\n  AlertTitle,\r\n  AlertMessage,\r\n  AlertMessageContainer,\r\n  CloseButton,\r\n  IconContainer,\r\n  InnerContainer,\r\n  MessageAndButtonContainer,\r\n  MessageAndIconVerticalContainer,\r\n};\r\n"],"names":["getProminence","variant","Variants","FabricsVariables","fullWidth","keyframes","opacity","miniOpacity","AutoCloseContainer","styled","$sentiment","$variant","$autoCloseTimeout","theme","layer","css","Variables","AlertContentContainer","$size","$alignment","AlertConsts.consts","Alert","$banner","$highlight","currentModes","Directions","MessageAndButtonContainer","MessageAndIconVerticalContainer","IconContainer","InnerContainer","AlertMessageContainer","getAlertBodySize","LINK_CLASS","AlertTitle","children","Sizes","jsx","Text","getLargerSize","Label","AlertMessage","Actions","ActionButton","OnSentimentButton","CloseButton"],"mappings":"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"}

package/build/cjs/components/Alert/utils/alertUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"alertUtils.js","sources":["../../../../../src/components/Alert/utils/alertUtils.tsx"],"sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { TextTypes } from 'acinguiux-ds-react-base/components/Text';\nimport type { TypographySize } from 'acinguiux-ds-react-base/theme';\nimport type { AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\n\nexport const getAlertButtonSize = (size?: AlertTypes.Size) => {\n  switch (size) {\n    case Sizes.Large:\n      return Sizes.Medium;\n    case Sizes.XSmall:\n      return Sizes.XSmall;\n    default:\n      return Sizes.Small;\n  }\n};\n\nexport const getAlertCloseButtonSize = (size?: AlertTypes.Size) => {\n  switch (size) {\n    case Sizes.Large:\n      return Sizes.Medium;\n    case Sizes.Medium:\n      return Sizes.Small;\n    default:\n      return Sizes.XSmall;\n  }\n};\n\nexport const getAlertBodySize = (size: AlertTypes.Size): TypographySize<'paragraph'> => {\n  switch (size) {\n    case Sizes.Large:\n      return 'large';\n    case Sizes.Small:\n      return 'small';\n    case Sizes.XSmall:\n      return 'extraSmall';\n    case Sizes.Medium:\n    default:\n      return 'medium';\n  }\n};\n\nexport const getAlertTextSize = (size: AlertTypes.Size): TextTypes.Size => size;\n"],"names":["getAlertButtonSize","size","Sizes","getAlertCloseButtonSize","getAlertBodySize","getAlertTextSize"],"mappings":"uKAKaA,EAAsBC,GAA2B,CAC5D,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,OAAOA,EAAAA,MAAM,OACf,KAAKA,EAAAA,MAAM,OACT,OAAOA,EAAAA,MAAM,OACf,QACE,OAAOA,EAAAA,MAAM,KAAA,CAEnB,EAEaC,EAA2BF,GAA2B,CACjE,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,OAAOA,EAAAA,MAAM,OACf,KAAKA,EAAAA,MAAM,OACT,OAAOA,EAAAA,MAAM,MACf,QACE,OAAOA,EAAAA,MAAM,MAAA,CAEnB,EAEaE,EAAoBH,GAAuD,CACtF,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,MAAO,QACT,KAAKA,EAAAA,MAAM,MACT,MAAO,QACT,KAAKA,EAAAA,MAAM,OACT,MAAO,aACT,KAAKA,EAAAA,MAAM,OACX,QACE,MAAO,QAAA,CAEb,EAEaG,EAAoBJ,GAA0CA"}
+{"version":3,"file":"alertUtils.js","sources":["../../../../../src/components/Alert/utils/alertUtils.tsx"],"sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base/consts';\r\nimport type { TextTypes } from 'acinguiux-ds-react-base/components/Text';\r\nimport type { TypographySize } from 'acinguiux-ds-react-base/theme';\r\nimport type { AlertTypes } from 'acinguiux-ds-react-base/components/Alert';\r\n\r\nexport const getAlertButtonSize = (size?: AlertTypes.Size) => {\r\n  switch (size) {\r\n    case Sizes.Large:\r\n      return Sizes.Medium;\r\n    case Sizes.XSmall:\r\n      return Sizes.XSmall;\r\n    default:\r\n      return Sizes.Small;\r\n  }\r\n};\r\n\r\nexport const getAlertCloseButtonSize = (size?: AlertTypes.Size) => {\r\n  switch (size) {\r\n    case Sizes.Large:\r\n      return Sizes.Medium;\r\n    case Sizes.Medium:\r\n      return Sizes.Small;\r\n    default:\r\n      return Sizes.XSmall;\r\n  }\r\n};\r\n\r\nexport const getAlertBodySize = (size: AlertTypes.Size): TypographySize<'paragraph'> => {\r\n  switch (size) {\r\n    case Sizes.Large:\r\n      return 'large';\r\n    case Sizes.Small:\r\n      return 'small';\r\n    case Sizes.XSmall:\r\n      return 'extraSmall';\r\n    case Sizes.Medium:\r\n    default:\r\n      return 'medium';\r\n  }\r\n};\r\n\r\nexport const getAlertTextSize = (size: AlertTypes.Size): TextTypes.Size => size;\r\n"],"names":["getAlertButtonSize","size","Sizes","getAlertCloseButtonSize","getAlertBodySize","getAlertTextSize"],"mappings":"uKAKaA,EAAsBC,GAA2B,CAC5D,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,OAAOA,EAAAA,MAAM,OACf,KAAKA,EAAAA,MAAM,OACT,OAAOA,EAAAA,MAAM,OACf,QACE,OAAOA,EAAAA,MAAM,KAAA,CAEnB,EAEaC,EAA2BF,GAA2B,CACjE,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,OAAOA,EAAAA,MAAM,OACf,KAAKA,EAAAA,MAAM,OACT,OAAOA,EAAAA,MAAM,MACf,QACE,OAAOA,EAAAA,MAAM,MAAA,CAEnB,EAEaE,EAAoBH,GAAuD,CACtF,OAAQA,EAAA,CACN,KAAKC,EAAAA,MAAM,MACT,MAAO,QACT,KAAKA,EAAAA,MAAM,MACT,MAAO,QACT,KAAKA,EAAAA,MAAM,OACT,MAAO,aACT,KAAKA,EAAAA,MAAM,OACX,QACE,MAAO,QAAA,CAEb,EAEaG,EAAoBJ,GAA0CA"}