@lidofinance/lido-ui 4.0.0-alpha.12 → 4.0.0-alpha.120

package/README.md

@@ -1,8 +1,8 @@
 # Lido UI Components v4
 
-> React components (v4) for Lido Finance projects. (Released February 2025)
+> React components (v4) for Lido Finance projects. (Released February 2026)
 
-Check out our Storybook at [https://ui.lido.fi](https://ui.lido.fi)
+Check out our Storybook at [https://ui.lido.fi/v4](https://ui.lido.fi/v4)
 
 For release a new version of the library you need to create a commit with `!` like this - `feat!: ui v4`
 
@@ -37,11 +37,35 @@ function App({ Component }) {
 import '@lidofinance/lido-ui/index.css';
 ```
 
-4. To use typography across your application, you need to import the provided CSS styles for typography.
-Insert the following line at the top of `_app.js` file to import the typography styles
-```tsx
-import '@lidofinance/lido-ui/styles/typography.css';
-```
+4. CSS variables are initially embedded in the `index.css` file. To use typography styles across your application, you have two options:
+
+   1. **Include the CSS file**:  
+      If you want to use ready-made classes with styles, you need to import an additional CSS file.  
+      Insert the following line at the top of your `_app.js` file to import the typography styles:
+      ```tsx
+      import '@lidofinance/lido-ui/styles/typography.css';
+      ```
+
+   2. **Use PostCSS mixins**:  
+      If you prefer to use PostCSS mixins for typography, you need to configure PostCSS in your project. Add the `postcss-mixins` plugin to your PostCSS configuration and include the typography mixins provided by the library.  
+      Example `postcss.config.js` configuration:
+      ```js
+      module.exports = {
+        plugins: [
+          ...
+          [
+            "postcss-mixins",
+            {
+               mixinsDir: path.resolve('./node_modules/@lidofinance/lido-ui/dist/styles'),
+            },
+         ],
+        ],
+      };
+      ```  
+      Once configured, you can use the typography mixins directly in your CSS files. For example:
+      ```css
+      @mixin font-h2;
+      ```
 
 ## Usage
 
@@ -79,8 +103,7 @@ yarn build
 
 4. Run the storybook:
 
-```
-yarn dev
+```yarn dev
 ```
 
 ## Publishing
@@ -88,3 +111,100 @@ yarn dev
 Packages are automatically published to npm when you push to master. The publication is based on [semantic-release](https://github.com/semantic-release/semantic-release) and [@qiwi/multi-semantic-release](https://github.com/qiwi/multi-semantic-release).
 
 For correct version detection, please follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/).
+
+## Customizing CSS Variables
+
+Lido UI provides a comprehensive set of CSS variables that can be overridden to match your application's design system. This allows you to maintain the functionality of Lido UI components while adapting their appearance to your brand.
+
+### Override Method
+
+To customize the CSS variables, create a CSS file in your project with new definitions:
+
+```css
+:root {
+  /* Override typography */
+  --lido-ui-font-family: "Your-Custom-Font", sans-serif;
+  --lido-ui-font-size-body: 16px;
+  --lido-ui-line-height-body: 24px;
+
+  /* Override colors */
+  --lido-ui-color-text-primary: #your-primary-color;
+}
+```
+
+Import this file after the Lido UI styles in your application:
+
+```tsx
+import '@lidofinance/lido-ui/index.css';
+import './your-custom-variables.css'; // Import your overrides after Lido UI styles
+```
+
+### Customizable Categories
+
+Lido UI provides several categories of CSS variables that can be customized:
+
+1. **Typography**
+   - Font family: `--lido-ui-font-family`
+   - Font sizes: `--lido-ui-font-size-*` (h1, h2, h3, h4, subheader, control, body, description)
+   - Font weights: `--lido-ui-font-weight-*` (bold, medium, regular, light, extra-light)
+   - Line heights: `--lido-ui-line-height-*` (h1, h2, h3, h4, subheader, control, body, description)
+
+2. **Colors**
+   - Theme colors: `--lido-ui-color-*` (background, foreground, primary, text, etc.)
+
+3. **Border Radiuses**
+   - `--lido-ui-border-radius-*` (4, 40, 50, 60, 70)
+
+4. **Theme-Specific Variables**
+   - Light/dark mode visibility: `--lido-ui-light-mode-visibility`, `--lido-ui-dark-mode-visibility`
+   - Display properties: `--lido-ui-light-display`, `--lido-ui-dark-display`
+
+### Media Queries
+
+Some variables like font sizes and line heights have responsive variants defined in media queries. You can also override these for specific breakpoints:
+
+```css
+@media (--lido-ui-breakpoint-md-down) {
+  :root {
+    --lido-ui-font-size-h1: 48px;
+    --lido-ui-line-height-h1: 52px;
+  }
+}
+```
+
+### Theme Initialization
+
+By default, the theme will be set to the value obtained after calling the `themeScriptValueString` method and will be the same as all other Lido products. This ensures consistent theming across the Lido ecosystem.
+
+### When to Use Different Theme Providers
+
+- **For products with theme switching**: You must use `CookieThemeProvider` and `ThemeToggler` components
+- **For products without theme switching**: You must use `ThemeProvider` with your chosen theme. Or `CookieThemeProvider` with hardcoded `overrideThemeName` and `initialThemeName`
+
+
+The `CookieThemeProvider` determines the theme based on the following priority:
+1. Override theme (if provided)
+2. URL query parameter
+3. Cookie value
+4. Initial theme (if provided)
+5. System preference (light/dark mode)
+6. Default theme
+
+## Adding Icons
+
+1. Add the SVG file to one of the category folders in `packages/icons/svg/`:
+   - `base/` - Basic UI icons (arrows, close, info, etc.)
+   - `defi/` - DeFi-related icons (protocols, networks, wallets)
+   - `general/` - General purpose icons (social media, docs, etc.)
+   - `lido/` - Lido-specific icons (projects, teams)
+   - `logo/` - Brand logos
+   - `strategies/` - Strategy-related icons
+   - `token/` - Token/cryptocurrency icons
+
+2. Commit changes. The conversion will run automatically and the result will be added to the current commit
+
+Or - run the conversion script manually - `yarn icons:convert`
+
+**Note**: Icon names are automatically converted to PascalCase. Icons in different categories get specific suffixes:
+- `logo/` → `IconNameLogo`
+- `defi/networks/arbitrum` → `Arbitrum.tsx`

package/dist/cjs/accordion/Accordion.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const Accordion_module = require('./Accordion.module.css.js');
+const cn = require('classnames');
+const reactCollapsed = require('react-collapsed');
+const jsxRuntime = require('react/jsx-runtime');
+const DownChevron = require('../icons/components/base/DownChevron.js');
+require('@inline-svg-unique-id/react');
+
+const Accordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    title,
+    expanded: _expanded,
+    defaultExpanded,
+    children,
+    className,
+    dataTestId,
+    ...rest
+  } = _ref;
+  const {
+    getCollapseProps,
+    getToggleProps,
+    isExpanded,
+    setExpanded
+  } = reactCollapsed.useCollapse({
+    defaultExpanded
+  });
+  React.useEffect(() => {
+    if (_expanded != null) {
+      setExpanded(_expanded);
+    }
+  }, [_expanded, setExpanded]);
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setExpanded(!isExpanded);
+    }
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    ref: ref,
+    className: cn(className, Accordion_module.accordion),
+    "data-testid": dataTestId?.root,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: cn(Accordion_module.header, {
+        [Accordion_module.opened]: isExpanded
+      }),
+      "data-testid": dataTestId?.header,
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": isExpanded,
+      onKeyDown: handleKeyDown,
+      ...getToggleProps(),
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: Accordion_module.title,
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx(DownChevron.DownChevron, {
+        className: cn(Accordion_module.chevronIcon, {
+          [Accordion_module.opened]: isExpanded
+        }),
+        "aria-hidden": "true",
+        "data-testid": dataTestId?.icon
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: cn(Accordion_module.content, {
+        [Accordion_module.opened]: isExpanded
+      }),
+      "data-testid": dataTestId?.content,
+      ...getCollapseProps(),
+      children: children
+    })]
+  });
+});
+Accordion.displayName = 'Accordion';
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/cjs/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../packages/accordion/Accordion.tsx"],"sourcesContent":["import {\n  ReactNode,\n  ComponentPropsWithoutRef,\n  useEffect,\n  forwardRef,\n  KeyboardEvent,\n} from 'react'\nimport styles from './Accordion.module.css'\nimport cn from 'classnames'\nimport { useCollapse } from 'react-collapsed'\nimport { DownChevron } from '../icons'\n\nexport type AccordionDataTestId = {\n  root?: string\n  header?: string\n  content?: string\n  icon?: string\n}\n\nexport type AccordionProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {\n  title?: ReactNode\n  defaultExpanded?: boolean\n  expanded?: boolean\n  dataTestId?: AccordionDataTestId\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      title,\n      expanded: _expanded,\n      defaultExpanded,\n      children,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getCollapseProps, getToggleProps, isExpanded, setExpanded } =\n      useCollapse({\n        defaultExpanded,\n      })\n\n    useEffect(() => {\n      if (_expanded != null) {\n        setExpanded(_expanded)\n      }\n    }, [_expanded, setExpanded])\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault()\n        setExpanded(!isExpanded)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(className, styles.accordion)}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <div\n          className={cn(styles.header, { [styles.opened]: isExpanded })}\n          data-testid={dataTestId?.header}\n          role='button'\n          tabIndex={0}\n          aria-expanded={isExpanded}\n          onKeyDown={handleKeyDown}\n          {...getToggleProps()}\n        >\n          <span className={styles.title}>{title}</span>\n\n          <DownChevron\n            className={cn(styles.chevronIcon, {\n              [styles.opened]: isExpanded,\n            })}\n            aria-hidden='true'\n            data-testid={dataTestId?.icon}\n          />\n        </div>\n\n        <div\n          className={cn(styles.content, {\n            [styles.opened]: isExpanded,\n          })}\n          data-testid={dataTestId?.content}\n          {...getCollapseProps()}\n        >\n          {children}\n        </div>\n      </div>\n    )\n  },\n)\n\nAccordion.displayName = 'Accordion'\n"],"names":["Accordion","forwardRef","_ref","ref","title","expanded","_expanded","defaultExpanded","children","className","dataTestId","rest","getCollapseProps","getToggleProps","isExpanded","setExpanded","useCollapse","useEffect","handleKeyDown","event","key","preventDefault","_jsxs","cn","styles","accordion","root","header","opened","role","tabIndex","onKeyDown","_jsx","DownChevron","chevronIcon","icon","content","displayName"],"mappings":";;;;;;;;;;;;AA0BO,MAAMA,SAAS,gBAAGC,gBAAU,CACjC,CAAAC,IAAA,EAUEC,GAAG,KACA;EAAA,IAVH;IACEC,KAAK;AACLC,IAAAA,QAAQ,EAAEC,SAAS;IACnBC,eAAe;IACfC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAT,IAAA,CAAA;EAGD,MAAM;IAAEU,gBAAgB;IAAEC,cAAc;IAAEC,UAAU;AAAEC,IAAAA,WAAAA;GAAa,GACjEC,0BAAW,CAAC;AACVT,IAAAA,eAAAA;AACF,GAAC,CAAC,CAAA;AAEJU,EAAAA,eAAS,CAAC,MAAM;IACd,IAAIX,SAAS,IAAI,IAAI,EAAE;MACrBS,WAAW,CAACT,SAAS,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAE,CAACA,SAAS,EAAES,WAAW,CAAC,CAAC,CAAA;EAE5B,MAAMG,aAAa,GAAIC,KAAoC,IAAK;IAC9D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC9CD,KAAK,CAACE,cAAc,EAAE,CAAA;MACtBN,WAAW,CAAC,CAACD,UAAU,CAAC,CAAA;AAC1B,KAAA;GACD,CAAA;AAED,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;AACEnB,IAAAA,GAAG,EAAEA,GAAI;IACTM,SAAS,EAAEc,EAAE,CAACd,SAAS,EAAEe,gBAAM,CAACC,SAAS,CAAE;IAC3C,aAAaf,EAAAA,UAAU,EAAEgB,IAAK;AAAA,IAAA,GAC1Bf,IAAI;AAAAH,IAAAA,QAAA,gBAERc,eAAA,CAAA,KAAA,EAAA;AACEb,MAAAA,SAAS,EAAEc,EAAE,CAACC,gBAAM,CAACG,MAAM,EAAE;QAAE,CAACH,gBAAM,CAACI,MAAM,GAAGd,UAAAA;AAAW,OAAC,CAAE;MAC9D,aAAaJ,EAAAA,UAAU,EAAEiB,MAAO;AAChCE,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,QAAQ,EAAE,CAAE;AACZ,MAAA,eAAA,EAAehB,UAAW;AAC1BiB,MAAAA,SAAS,EAAEb,aAAc;MAAA,GACrBL,cAAc,EAAE;AAAAL,MAAAA,QAAA,gBAEpBwB,cAAA,CAAA,MAAA,EAAA;QAAMvB,SAAS,EAAEe,gBAAM,CAACpB,KAAM;AAAAI,QAAAA,QAAA,EAAEJ,KAAAA;AAAK,OAAO,CAAC,eAE7C4B,cAAA,CAACC,uBAAW,EAAA;AACVxB,QAAAA,SAAS,EAAEc,EAAE,CAACC,gBAAM,CAACU,WAAW,EAAE;UAChC,CAACV,gBAAM,CAACI,MAAM,GAAGd,UAAAA;AACnB,SAAC,CAAE;AACH,QAAA,aAAA,EAAY,MAAM;AAClB,QAAA,aAAA,EAAaJ,UAAU,EAAEyB,IAAAA;AAAK,OAC/B,CAAC,CAAA;KACC,CAAC,eAENH,cAAA,CAAA,KAAA,EAAA;AACEvB,MAAAA,SAAS,EAAEc,EAAE,CAACC,gBAAM,CAACY,OAAO,EAAE;QAC5B,CAACZ,gBAAM,CAACI,MAAM,GAAGd,UAAAA;AACnB,OAAC,CAAE;MACH,aAAaJ,EAAAA,UAAU,EAAE0B,OAAQ;MAAA,GAC7BxB,gBAAgB,EAAE;AAAAJ,MAAAA,QAAA,EAErBA,QAAAA;AAAQ,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV,CACF,EAAC;AAEDR,SAAS,CAACqC,WAAW,GAAG,WAAW;;;;"}

package/dist/cjs/accordion/Accordion.module.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const styles = {"header":"Accordion-module_header__vGwBf","opened":"Accordion-module_opened__Ps46H","title":"Accordion-module_title__lSdAV","chevronIcon":"Accordion-module_chevronIcon__pnufg","content":"Accordion-module_content__-ez2n"};
+
+module.exports = styles;
+//# sourceMappingURL=Accordion.module.css.js.map

package/dist/cjs/accordion/Accordion.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/cjs/banners/banner/Banner.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const cn = require('classnames');
 const React = require('react');
 const Button = require('../../button/Button.js');
-const index = require('../../icons/index.js');
+require('../../button/CircleButton.js');
+const jsxRuntime = require('react/jsx-runtime');
+const Close = require('../../icons/components/base/Close.js');
+require('@inline-svg-unique-id/react');
 const Banner_module = require('./Banner.module.css.js');
-const require$$2 = require('react/jsx-runtime');
+require('../../links/link/Link.js');
+const DynamicLink = require('../../links/dynamic-link/DynamicLink.js');
 
 const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -15,7 +19,7 @@ const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     href,
     title,
-    text,
+    icon,
     onClose,
     dataTestId,
     onLinkClick,
@@ -27,38 +31,31 @@ const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleCloseBanner = e => {
     onClose && onClose(e);
   };
-  return /*#__PURE__*/require$$2.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: cn(className, Banner_module.banner, {
       [Banner_module.variantPrimary]: variant == 'primary',
       [Banner_module.variantSecondary]: variant == 'secondary'
     }),
     "data-testid": dataTestId?.root,
     ...rest,
-    children: [/*#__PURE__*/require$$2.jsx(Button.Button, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(DynamicLink.DynamicLink, {
       ref: ref,
-      textStyle: 'normal',
       onClick: handleAnchorClick,
       "data-testid": dataTestId?.mainButton,
       href: href,
       className: Banner_module.mainButton,
-      withArrow: true,
-      hideArrowOnMobile: true,
-      color: 'transparent',
-      size: 's',
-      children: /*#__PURE__*/require$$2.jsxs("div", {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: Banner_module.buttonContent,
-        children: [title && /*#__PURE__*/require$$2.jsx("div", {
-          className: Banner_module.title,
-          children: title
-        }), text && /*#__PURE__*/require$$2.jsx("div", {
-          children: text
-        })]
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: Banner_module.icon,
+          children: icon
+        }), title]
       })
-    }), /*#__PURE__*/require$$2.jsx(Button.Button, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
       size: 's',
       shape: 'circle',
-      icon: /*#__PURE__*/require$$2.jsx(index.ThinClose, {}),
-      color: 'outline',
+      icon: /*#__PURE__*/jsxRuntime.jsx(Close.Close, {}),
+      color: 'tertiary',
       "data-testid": dataTestId?.closeButton,
       className: Banner_module.closeButton,
       onClick: handleCloseBanner

package/dist/cjs/banners/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../packages/banners/banner/Banner.tsx"],"sourcesContent":["import cn from 'classnames'\n\nimport {\n  ForwardedRef,\n  forwardRef,\n  MouseEvent,\n  MouseEventHandler,\n  RefObject,\n} from 'react'\nimport { Button } from '../../button'\nimport { ThinClose } from '../../icons'\nimport styles from './Banner.module.css'\n\nexport type BannerDataTestId = {\n  root?: string\n  mainButton?: string\n  closeButton?: string\n}\n\nexport type BannerProps = {\n  variant?: 'primary' | 'secondary'\n  className?: string\n  href: string\n  text: string\n  title?: string\n  dataTestId?: BannerDataTestId\n  onClose?: MouseEventHandler\n  onLinkClick?: MouseEventHandler\n}\n\nexport const Banner = forwardRef(\n  (\n    {\n      variant = 'primary',\n      className,\n      href,\n      title,\n      text,\n      onClose,\n      dataTestId,\n      onLinkClick,\n      ...rest\n    }: BannerProps,\n    ref?: ForwardedRef<HTMLAnchorElement | HTMLButtonElement>,\n  ) => {\n    const handleAnchorClick = (e: MouseEvent) => {\n      onLinkClick && onLinkClick(e)\n    }\n    const handleCloseBanner = (e: MouseEvent) => {\n      onClose && onClose(e)\n    }\n    return (\n      <div\n        className={cn(className, styles.banner, {\n          [styles.variantPrimary]: variant == 'primary',\n          [styles.variantSecondary]: variant == 'secondary',\n        })}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <Button\n          ref={ref as RefObject<HTMLAnchorElement>}\n          textStyle={'normal'}\n          onClick={handleAnchorClick}\n          data-testid={dataTestId?.mainButton}\n          href={href}\n          className={styles.mainButton}\n          withArrow={true}\n          hideArrowOnMobile={true}\n          color={'transparent'}\n          size={'s'}\n        >\n          <div className={styles.buttonContent}>\n            {title && <div className={styles.title}>{title}</div>}\n            {text && <div>{text}</div>}\n          </div>\n        </Button>\n\n        <Button\n          size={'s'}\n          shape={'circle'}\n          icon={<ThinClose />}\n          color={'outline'}\n          data-testid={dataTestId?.closeButton}\n          className={styles.closeButton}\n          onClick={handleCloseBanner}\n        ></Button>\n      </div>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n"],"names":["Banner","forwardRef","_ref","ref","variant","className","href","title","text","onClose","dataTestId","onLinkClick","rest","handleAnchorClick","e","handleCloseBanner","_jsxs","cn","styles","banner","variantPrimary","variantSecondary","root","children","_jsx","Button","textStyle","onClick","mainButton","withArrow","hideArrowOnMobile","color","size","buttonContent","shape","icon","ThinClose","closeButton","displayName"],"mappings":";;;;;;;;;;;AA8BO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAYEC,GAAyD,KACtD;EAAA,IAZH;AACEC,IAAAA,OAAO,GAAG,SAAS;IACnBC,SAAS;IACTC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,UAAU;IACVC,WAAW;IACX,GAAGC,IAAAA;AACQ,GAAC,GAAAV,IAAA,CAAA;EAGd,MAAMW,iBAAiB,GAAIC,CAAa,IAAK;AAC3CH,IAAAA,WAAW,IAAIA,WAAW,CAACG,CAAC,CAAC,CAAA;GAC9B,CAAA;EACD,MAAMC,iBAAiB,GAAID,CAAa,IAAK;AAC3CL,IAAAA,OAAO,IAAIA,OAAO,CAACK,CAAC,CAAC,CAAA;GACtB,CAAA;AACD,EAAA,oBACEE,eAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACZ,SAAS,EAAEa,aAAM,CAACC,MAAM,EAAE;AACtC,MAAA,CAACD,aAAM,CAACE,cAAc,GAAGhB,OAAO,IAAI,SAAS;AAC7C,MAAA,CAACc,aAAM,CAACG,gBAAgB,GAAGjB,OAAO,IAAI,WAAA;AACxC,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEY,IAAK;AAAA,IAAA,GAC1BV,IAAI;IAAAW,QAAA,EAAA,cAERC,cAAA,CAACC,aAAM,EAAA;AACLtB,MAAAA,GAAG,EAAEA,GAAoC;AACzCuB,MAAAA,SAAS,EAAE,QAAS;AACpBC,MAAAA,OAAO,EAAEd,iBAAkB;MAC3B,aAAaH,EAAAA,UAAU,EAAEkB,UAAW;AACpCtB,MAAAA,IAAI,EAAEA,IAAK;MACXD,SAAS,EAAEa,aAAM,CAACU,UAAW;AAC7BC,MAAAA,SAAS,EAAE,IAAK;AAChBC,MAAAA,iBAAiB,EAAE,IAAK;AACxBC,MAAAA,KAAK,EAAE,aAAc;AACrBC,MAAAA,IAAI,EAAE,GAAI;AAAAT,MAAAA,QAAA,eAEVP,eAAA,CAAA,KAAA,EAAA;QAAKX,SAAS,EAAEa,aAAM,CAACe,aAAc;QAAAV,QAAA,EAAA,CAClChB,KAAK,iBAAIiB,cAAA,CAAA,KAAA,EAAA;UAAKnB,SAAS,EAAEa,aAAM,CAACX,KAAM;AAAAgB,UAAAA,QAAA,EAAEhB,KAAAA;AAAK,SAAM,CAAC,EACpDC,IAAI,iBAAIgB,cAAA,CAAA,KAAA,EAAA;AAAAD,UAAAA,QAAA,EAAMf,IAAAA;AAAI,SAAM,CAAC,CAAA;OACvB,CAAA;AAAC,KACA,CAAC,eAETgB,cAAA,CAACC,aAAM,EAAA;AACLO,MAAAA,IAAI,EAAE,GAAI;AACVE,MAAAA,KAAK,EAAE,QAAS;AAChBC,MAAAA,IAAI,eAAEX,cAAA,CAACY,eAAS,IAAE,CAAE;AACpBL,MAAAA,KAAK,EAAE,SAAU;MACjB,aAAarB,EAAAA,UAAU,EAAE2B,WAAY;MACrChC,SAAS,EAAEa,aAAM,CAACmB,WAAY;AAC9BV,MAAAA,OAAO,EAAEZ,iBAAAA;AAAkB,KACpB,CAAC,CAAA;AAAA,GACP,CAAC,CAAA;AAEV,CACF,EAAC;AACDf,MAAM,CAACsC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../../packages/banners/banner/Banner.tsx"],"sourcesContent":["import cn from 'classnames'\n\nimport {\n  ForwardedRef,\n  forwardRef,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n  RefObject,\n} from 'react'\nimport { Button } from '../../button'\nimport { Close } from '../../icons'\nimport styles from './Banner.module.css'\nimport { DynamicLink } from '../../links'\n\nexport type BannerDataTestId = {\n  root?: string\n  mainButton?: string\n  closeButton?: string\n}\n\nexport type BannerProps = {\n  variant?: 'primary' | 'secondary'\n  className?: string\n  href: string\n  title: string\n  icon?: ReactNode\n  dataTestId?: BannerDataTestId\n  onClose?: MouseEventHandler\n  onLinkClick?: MouseEventHandler\n}\n\nexport const Banner = forwardRef(\n  (\n    {\n      variant = 'primary',\n      className,\n      href,\n      title,\n      icon,\n      onClose,\n      dataTestId,\n      onLinkClick,\n      ...rest\n    }: BannerProps,\n    ref?: ForwardedRef<HTMLAnchorElement | HTMLButtonElement>,\n  ) => {\n    const handleAnchorClick = (e: MouseEvent) => {\n      onLinkClick && onLinkClick(e)\n    }\n    const handleCloseBanner = (e: MouseEvent) => {\n      onClose && onClose(e)\n    }\n    return (\n      <div\n        className={cn(className, styles.banner, {\n          [styles.variantPrimary]: variant == 'primary',\n          [styles.variantSecondary]: variant == 'secondary',\n        })}\n        data-testid={dataTestId?.root}\n        {...rest}\n      >\n        <DynamicLink\n          ref={ref as RefObject<HTMLAnchorElement>}\n          onClick={handleAnchorClick}\n          data-testid={dataTestId?.mainButton}\n          href={href}\n          className={styles.mainButton}\n        >\n          <div className={styles.buttonContent}>\n            {icon && <span className={styles.icon}>{icon}</span>}\n            {title}\n          </div>\n        </DynamicLink>\n        <Button\n          size={'s'}\n          shape={'circle'}\n          icon={<Close />}\n          color={'tertiary'}\n          data-testid={dataTestId?.closeButton}\n          className={styles.closeButton}\n          onClick={handleCloseBanner}\n        ></Button>\n      </div>\n    )\n  },\n)\nBanner.displayName = 'Banner'\n"],"names":["Banner","forwardRef","_ref","ref","variant","className","href","title","icon","onClose","dataTestId","onLinkClick","rest","handleAnchorClick","e","handleCloseBanner","_jsxs","cn","styles","banner","variantPrimary","variantSecondary","root","children","_jsx","DynamicLink","onClick","mainButton","buttonContent","Button","size","shape","Close","color","closeButton","displayName"],"mappings":";;;;;;;;;;;;;;;AAgCO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EAYEC,GAAyD,KACtD;EAAA,IAZH;AACEC,IAAAA,OAAO,GAAG,SAAS;IACnBC,SAAS;IACTC,IAAI;IACJC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,UAAU;IACVC,WAAW;IACX,GAAGC,IAAAA;AACQ,GAAC,GAAAV,IAAA,CAAA;EAGd,MAAMW,iBAAiB,GAAIC,CAAa,IAAK;AAC3CH,IAAAA,WAAW,IAAIA,WAAW,CAACG,CAAC,CAAC,CAAA;GAC9B,CAAA;EACD,MAAMC,iBAAiB,GAAID,CAAa,IAAK;AAC3CL,IAAAA,OAAO,IAAIA,OAAO,CAACK,CAAC,CAAC,CAAA;GACtB,CAAA;AACD,EAAA,oBACEE,eAAA,CAAA,KAAA,EAAA;IACEX,SAAS,EAAEY,EAAE,CAACZ,SAAS,EAAEa,aAAM,CAACC,MAAM,EAAE;AACtC,MAAA,CAACD,aAAM,CAACE,cAAc,GAAGhB,OAAO,IAAI,SAAS;AAC7C,MAAA,CAACc,aAAM,CAACG,gBAAgB,GAAGjB,OAAO,IAAI,WAAA;AACxC,KAAC,CAAE;IACH,aAAaM,EAAAA,UAAU,EAAEY,IAAK;AAAA,IAAA,GAC1BV,IAAI;IAAAW,QAAA,EAAA,cAERC,cAAA,CAACC,uBAAW,EAAA;AACVtB,MAAAA,GAAG,EAAEA,GAAoC;AACzCuB,MAAAA,OAAO,EAAEb,iBAAkB;MAC3B,aAAaH,EAAAA,UAAU,EAAEiB,UAAW;AACpCrB,MAAAA,IAAI,EAAEA,IAAK;MACXD,SAAS,EAAEa,aAAM,CAACS,UAAW;AAAAJ,MAAAA,QAAA,eAE7BP,eAAA,CAAA,KAAA,EAAA;QAAKX,SAAS,EAAEa,aAAM,CAACU,aAAc;QAAAL,QAAA,EAAA,CAClCf,IAAI,iBAAIgB,cAAA,CAAA,MAAA,EAAA;UAAMnB,SAAS,EAAEa,aAAM,CAACV,IAAK;AAAAe,UAAAA,QAAA,EAAEf,IAAAA;SAAW,CAAC,EACnDD,KAAK,CAAA;OACH,CAAA;AAAC,KACK,CAAC,eACdiB,cAAA,CAACK,aAAM,EAAA;AACLC,MAAAA,IAAI,EAAE,GAAI;AACVC,MAAAA,KAAK,EAAE,QAAS;AAChBvB,MAAAA,IAAI,eAAEgB,cAAA,CAACQ,WAAK,IAAE,CAAE;AAChBC,MAAAA,KAAK,EAAE,UAAW;MAClB,aAAavB,EAAAA,UAAU,EAAEwB,WAAY;MACrC7B,SAAS,EAAEa,aAAM,CAACgB,WAAY;AAC9BR,MAAAA,OAAO,EAAEX,iBAAAA;AAAkB,KACpB,CAAC,CAAA;AAAA,GACP,CAAC,CAAA;AAEV,CACF,EAAC;AACDf,MAAM,CAACmC,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/banners/banner/Banner.module.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"banner":"Banner-module_banner__VmgcM","variantPrimary":"Banner-module_variantPrimary__H2dZe","variantSecondary":"Banner-module_variantSecondary__T0NwM","mainButton":"Banner-module_mainButton__3-Y-5","closeButton":"Banner-module_closeButton__locSQ","title":"Banner-module_title__O2cKZ","content":"Banner-module_content__JvOvM","buttonContent":"Banner-module_buttonContent__r-btC"};
+const styles = {"banner":"Banner-module_banner__VmgcM","variantPrimary":"Banner-module_variantPrimary__H2dZe","mainButton":"Banner-module_mainButton__3-Y-5","closeButton":"Banner-module_closeButton__locSQ","variantSecondary":"Banner-module_variantSecondary__T0NwM","content":"Banner-module_content__JvOvM","buttonContent":"Banner-module_buttonContent__r-btC","icon":"Banner-module_icon__843xo"};
 
 module.exports = styles;
 //# sourceMappingURL=Banner.module.css.js.map

package/dist/cjs/banners/cookie-banner/CookieBanner.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const cn = require('classnames');
 const Button = require('../../button/Button.js');
+require('../../button/CircleButton.js');
 const Link = require('../../links/link/Link.js');
 require('../../links/dynamic-link/DynamicLink.js');
 const CookieBanner_module = require('./CookieBanner.module.css.js');
-const require$$2 = require('react/jsx-runtime');
+const jsxRuntime = require('react/jsx-runtime');
 
 const CookieBanner = _ref => {
   let {
@@ -19,27 +20,28 @@ const CookieBanner = _ref => {
     dataTestId,
     ...rest
   } = _ref;
-  return /*#__PURE__*/require$$2.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: cn(className, CookieBanner_module.banner),
     ...rest,
     "data-testid": dataTestId?.root,
     id: 'banner-cookie',
-    children: [/*#__PURE__*/require$$2.jsxs("span", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
       className: CookieBanner_module.text,
-      children: ["Cookies are used to collect anonymous site visitation data to improve the performance of website. For more info read", ' ', /*#__PURE__*/require$$2.jsx(Link.Link, {
+      children: ["Cookies are used to collect anonymous site visitation data to improve the performance of website. For more info read", ' ', /*#__PURE__*/jsxRuntime.jsx(Link.Link, {
         target: "_blank",
         href: privacyUrl,
         children: "Privacy Notice"
       })]
-    }), /*#__PURE__*/require$$2.jsxs("div", {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: CookieBanner_module.buttons,
-      children: [/*#__PURE__*/require$$2.jsx(Button.Button, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
         className: CookieBanner_module.button,
         onClick: onAllow,
         "data-testid": dataTestId?.allowButton,
         children: "Allow"
-      }), /*#__PURE__*/require$$2.jsx(Button.Button, {
-        color: 'outline',
+      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+        color: 'tertiary',
+        size: 'm',
         className: CookieBanner_module.button,
         onClick: onDecline,
         "data-testid": dataTestId?.declineButton,

package/dist/cjs/banners/cookie-banner/CookieBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CookieBanner.js","sources":["../../../../packages/banners/cookie-banner/CookieBanner.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Button } from '../../button'\nimport { Link } from '../../links'\nimport style from './CookieBanner.module.css'\n\nexport type CookieBannerDataTestId = {\n  root?: string\n  allowButton?: string\n  declineButton?: string\n}\n\nexport type CookieBannerProps = ComponentPropsWithoutRef<'div'> & {\n  privacyUrl: string\n  onAllow: () => void\n  onDecline: () => void\n  dataTestId?: CookieBannerDataTestId\n}\n\nexport const CookieBanner = ({\n  className,\n  children,\n  privacyUrl,\n  onAllow,\n  onDecline,\n  dataTestId,\n  ...rest\n}: CookieBannerProps) => {\n  return (\n    <div\n      className={cn(className, style.banner)}\n      {...rest}\n      data-testid={dataTestId?.root}\n      id={'banner-cookie'}\n    >\n      <span className={style.text}>\n        Cookies are used to collect anonymous site visitation data to improve\n        the performance of website. For more info read{' '}\n        <Link target='_blank' href={privacyUrl}>\n          Privacy Notice\n        </Link>\n      </span>\n      <div className={style.buttons}>\n        <Button\n          className={style.button}\n          onClick={onAllow}\n          data-testid={dataTestId?.allowButton}\n        >\n          Allow\n        </Button>\n        <Button\n          color={'outline'}\n          className={style.button}\n          onClick={onDecline}\n          data-testid={dataTestId?.declineButton}\n        >\n          Decline\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["CookieBanner","_ref","className","children","privacyUrl","onAllow","onDecline","dataTestId","rest","_jsxs","cn","style","banner","root","id","text","_jsx","Link","target","href","buttons","Button","button","onClick","allowButton","color","declineButton"],"mappings":";;;;;;;;;;;AAmBaA,MAAAA,YAAY,GAAGC,IAAA,IAQH;EAAA,IARI;IAC3BC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAP,IAAA,CAAA;AAClB,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;IACEP,SAAS,EAAEQ,EAAE,CAACR,SAAS,EAAES,mBAAK,CAACC,MAAM,CAAE;AAAA,IAAA,GACnCJ,IAAI;IACR,aAAaD,EAAAA,UAAU,EAAEM,IAAK;AAC9BC,IAAAA,EAAE,EAAE,eAAgB;AAAAX,IAAAA,QAAA,gBAEpBM,eAAA,CAAA,MAAA,EAAA;MAAMP,SAAS,EAAES,mBAAK,CAACI,IAAK;AAAAZ,MAAAA,QAAA,GAAC,sHAEmB,EAAC,GAAG,eAClDa,cAAA,CAACC,SAAI,EAAA;AAACC,QAAAA,MAAM,EAAC,QAAQ;AAACC,QAAAA,IAAI,EAAEf,UAAW;AAAAD,QAAAA,QAAA,EAAC,gBAAA;AAExC,OAAM,CAAC,CAAA;KACH,CAAC,eACPM,eAAA,CAAA,KAAA,EAAA;MAAKP,SAAS,EAAES,mBAAK,CAACS,OAAQ;MAAAjB,QAAA,EAAA,cAC5Ba,cAAA,CAACK,aAAM,EAAA;QACLnB,SAAS,EAAES,mBAAK,CAACW,MAAO;AACxBC,QAAAA,OAAO,EAAElB,OAAQ;QACjB,aAAaE,EAAAA,UAAU,EAAEiB,WAAY;AAAArB,QAAAA,QAAA,EACtC,OAAA;AAED,OAAQ,CAAC,eACTa,cAAA,CAACK,aAAM,EAAA;AACLI,QAAAA,KAAK,EAAE,SAAU;QACjBvB,SAAS,EAAES,mBAAK,CAACW,MAAO;AACxBC,QAAAA,OAAO,EAAEjB,SAAU;QACnB,aAAaC,EAAAA,UAAU,EAAEmB,aAAc;AAAAvB,QAAAA,QAAA,EACxC,SAAA;AAED,OAAQ,CAAC,CAAA;AAAA,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"CookieBanner.js","sources":["../../../../packages/banners/cookie-banner/CookieBanner.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Button } from '../../button'\nimport { Link } from '../../links'\nimport style from './CookieBanner.module.css'\n\nexport type CookieBannerDataTestId = {\n  root?: string\n  allowButton?: string\n  declineButton?: string\n}\n\nexport type CookieBannerProps = ComponentPropsWithoutRef<'div'> & {\n  privacyUrl: string\n  onAllow: () => void\n  onDecline: () => void\n  dataTestId?: CookieBannerDataTestId\n}\n\nexport const CookieBanner = ({\n  className,\n  children,\n  privacyUrl,\n  onAllow,\n  onDecline,\n  dataTestId,\n  ...rest\n}: CookieBannerProps) => {\n  return (\n    <div\n      className={cn(className, style.banner)}\n      {...rest}\n      data-testid={dataTestId?.root}\n      id={'banner-cookie'}\n    >\n      <span className={style.text}>\n        Cookies are used to collect anonymous site visitation data to improve\n        the performance of website. For more info read{' '}\n        <Link target='_blank' href={privacyUrl}>\n          Privacy Notice\n        </Link>\n      </span>\n      <div className={style.buttons}>\n        <Button\n          className={style.button}\n          onClick={onAllow}\n          data-testid={dataTestId?.allowButton}\n        >\n          Allow\n        </Button>\n        <Button\n          color={'tertiary'}\n          size={'m'}\n          className={style.button}\n          onClick={onDecline}\n          data-testid={dataTestId?.declineButton}\n        >\n          Decline\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["CookieBanner","_ref","className","children","privacyUrl","onAllow","onDecline","dataTestId","rest","_jsxs","cn","style","banner","root","id","text","_jsx","Link","target","href","buttons","Button","button","onClick","allowButton","color","size","declineButton"],"mappings":";;;;;;;;;;;;AAmBaA,MAAAA,YAAY,GAAGC,IAAA,IAQH;EAAA,IARI;IAC3BC,SAAS;IACTC,QAAQ;IACRC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACc,GAAC,GAAAP,IAAA,CAAA;AAClB,EAAA,oBACEQ,eAAA,CAAA,KAAA,EAAA;IACEP,SAAS,EAAEQ,EAAE,CAACR,SAAS,EAAES,mBAAK,CAACC,MAAM,CAAE;AAAA,IAAA,GACnCJ,IAAI;IACR,aAAaD,EAAAA,UAAU,EAAEM,IAAK;AAC9BC,IAAAA,EAAE,EAAE,eAAgB;AAAAX,IAAAA,QAAA,gBAEpBM,eAAA,CAAA,MAAA,EAAA;MAAMP,SAAS,EAAES,mBAAK,CAACI,IAAK;AAAAZ,MAAAA,QAAA,GAAC,sHAEmB,EAAC,GAAG,eAClDa,cAAA,CAACC,SAAI,EAAA;AAACC,QAAAA,MAAM,EAAC,QAAQ;AAACC,QAAAA,IAAI,EAAEf,UAAW;AAAAD,QAAAA,QAAA,EAAC,gBAAA;AAExC,OAAM,CAAC,CAAA;KACH,CAAC,eACPM,eAAA,CAAA,KAAA,EAAA;MAAKP,SAAS,EAAES,mBAAK,CAACS,OAAQ;MAAAjB,QAAA,EAAA,cAC5Ba,cAAA,CAACK,aAAM,EAAA;QACLnB,SAAS,EAAES,mBAAK,CAACW,MAAO;AACxBC,QAAAA,OAAO,EAAElB,OAAQ;QACjB,aAAaE,EAAAA,UAAU,EAAEiB,WAAY;AAAArB,QAAAA,QAAA,EACtC,OAAA;AAED,OAAQ,CAAC,eACTa,cAAA,CAACK,aAAM,EAAA;AACLI,QAAAA,KAAK,EAAE,UAAW;AAClBC,QAAAA,IAAI,EAAE,GAAI;QACVxB,SAAS,EAAES,mBAAK,CAACW,MAAO;AACxBC,QAAAA,OAAO,EAAEjB,SAAU;QACnB,aAAaC,EAAAA,UAAU,EAAEoB,aAAc;AAAAxB,QAAAA,QAAA,EACxC,SAAA;AAED,OAAQ,CAAC,CAAA;AAAA,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}

package/dist/cjs/banners/emergency-banner/EmergencyBanner.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const cn = require('classnames');
 const Button = require('../../button/Button.js');
+require('../../button/CircleButton.js');
 const UrgentIcon = require('./assets/UrgentIcon.js');
 const EmergencyBanner_module = require('./EmergencyBanner.module.css.js');
-const require$$2 = require('react/jsx-runtime');
+const jsxRuntime = require('react/jsx-runtime');
 
 const EmergencyBanner = _ref => {
   let {
@@ -18,29 +19,28 @@ const EmergencyBanner = _ref => {
     linkText,
     ...rest
   } = _ref;
-  return /*#__PURE__*/require$$2.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: cn(className, EmergencyBanner_module.banner),
     "data-testid": dataTestId?.root,
     ...rest,
-    children: /*#__PURE__*/require$$2.jsxs("div", {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: EmergencyBanner_module.content,
-      children: [/*#__PURE__*/require$$2.jsx(UrgentIcon.UrgentIcon, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(UrgentIcon.UrgentIcon, {
         className: EmergencyBanner_module.icon,
         width: 80,
         height: 80
-      }), /*#__PURE__*/require$$2.jsx("div", {
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: EmergencyBanner_module.title,
         children: title
-      }), /*#__PURE__*/require$$2.jsx("div", {
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
         className: EmergencyBanner_module.description,
         children: description
-      }), /*#__PURE__*/require$$2.jsx(Button.Button, {
+      }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
         rel: "noreferrer",
         className: EmergencyBanner_module.button,
         href: link,
         size: 's',
         "data-testid": dataTestId?.button,
-        textStyle: 'semibold',
         target: "_blank",
         children: linkText
       })]

package/dist/cjs/banners/emergency-banner/EmergencyBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmergencyBanner.js","sources":["../../../../packages/banners/emergency-banner/EmergencyBanner.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { ComponentPropsWithoutRef, ReactNode } from 'react'\nimport { Button } from '../../button'\nimport { UrgentIcon } from './assets/UrgentIcon'\n\nimport styles from './EmergencyBanner.module.css'\n\nexport type EmergencyBannerDataTestId = {\n  root?: string\n  button?: string\n}\n\nexport type EmergencyBannerDataProps = {\n  title?: ReactNode\n  description?: ReactNode\n  link?: string\n  linkText?: string\n  dataTestId?: EmergencyBannerDataTestId\n}\n\nexport type EmergencyBannerProps = ComponentPropsWithoutRef<'div'> &\n  EmergencyBannerDataProps\n\nexport const EmergencyBanner = ({\n  className,\n  title,\n  description,\n  link,\n  dataTestId,\n  linkText,\n  ...rest\n}: EmergencyBannerProps) => {\n  return (\n    <div\n      className={cn(className, styles.banner)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.content}>\n        <UrgentIcon className={styles.icon} width={80} height={80} />\n        <div className={styles.title}>{title}</div>\n        <div className={styles.description}>{description}</div>\n\n        <Button\n          rel='noreferrer'\n          className={styles.button}\n          href={link}\n          size={'s'}\n          data-testid={dataTestId?.button}\n          textStyle={'semibold'}\n          target='_blank'\n        >\n          {linkText}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["EmergencyBanner","_ref","className","title","description","link","dataTestId","linkText","rest","_jsx","cn","styles","banner","root","children","_jsxs","content","UrgentIcon","icon","width","height","Button","rel","button","href","size","textStyle","target"],"mappings":";;;;;;;;;;AAuBaA,MAAAA,eAAe,GAAGC,IAAA,IAQH;EAAA,IARI;IAC9BC,SAAS;IACTC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACR,GAAGC,IAAAA;AACiB,GAAC,GAAAP,IAAA,CAAA;AACrB,EAAA,oBACEQ,cAAA,CAAA,KAAA,EAAA;IACEP,SAAS,EAAEQ,EAAE,CAACR,SAAS,EAAES,sBAAM,CAACC,MAAM,CAAE;IACxC,aAAaN,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;MAAKb,SAAS,EAAES,sBAAM,CAACK,OAAQ;MAAAF,QAAA,EAAA,cAC7BL,cAAA,CAACQ,qBAAU,EAAA;QAACf,SAAS,EAAES,sBAAM,CAACO,IAAK;AAACC,QAAAA,KAAK,EAAE,EAAG;AAACC,QAAAA,MAAM,EAAE,EAAA;OAAK,CAAC,eAC7DX,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,sBAAM,CAACR,KAAM;AAAAW,QAAAA,QAAA,EAAEX,KAAAA;OAAW,CAAC,eAC3CM,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,sBAAM,CAACP,WAAY;AAAAU,QAAAA,QAAA,EAAEV,WAAAA;AAAW,OAAM,CAAC,eAEvDK,cAAA,CAACY,aAAM,EAAA;AACLC,QAAAA,GAAG,EAAC,YAAY;QAChBpB,SAAS,EAAES,sBAAM,CAACY,MAAO;AACzBC,QAAAA,IAAI,EAAEnB,IAAK;AACXoB,QAAAA,IAAI,EAAE,GAAI;QACV,aAAanB,EAAAA,UAAU,EAAEiB,MAAO;AAChCG,QAAAA,SAAS,EAAE,UAAW;AACtBC,QAAAA,MAAM,EAAC,QAAQ;AAAAb,QAAAA,QAAA,EAEdP,QAAAA;AAAQ,OACH,CAAC,CAAA;KACN,CAAA;AAAC,GACH,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"EmergencyBanner.js","sources":["../../../../packages/banners/emergency-banner/EmergencyBanner.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { ComponentPropsWithoutRef, ReactNode } from 'react'\nimport { Button } from '../../button'\nimport { UrgentIcon } from './assets/UrgentIcon'\n\nimport styles from './EmergencyBanner.module.css'\n\nexport type EmergencyBannerDataTestId = {\n  root?: string\n  button?: string\n}\n\nexport type EmergencyBannerDataProps = {\n  title?: ReactNode\n  description?: ReactNode\n  link?: string\n  linkText?: string\n  dataTestId?: EmergencyBannerDataTestId\n}\n\nexport type EmergencyBannerProps = ComponentPropsWithoutRef<'div'> &\n  EmergencyBannerDataProps\n\nexport const EmergencyBanner = ({\n  className,\n  title,\n  description,\n  link,\n  dataTestId,\n  linkText,\n  ...rest\n}: EmergencyBannerProps) => {\n  return (\n    <div\n      className={cn(className, styles.banner)}\n      data-testid={dataTestId?.root}\n      {...rest}\n    >\n      <div className={styles.content}>\n        <UrgentIcon className={styles.icon} width={80} height={80} />\n        <div className={styles.title}>{title}</div>\n        <div className={styles.description}>{description}</div>\n\n        <Button\n          rel='noreferrer'\n          className={styles.button}\n          href={link}\n          size={'s'}\n          data-testid={dataTestId?.button}\n          target='_blank'\n        >\n          {linkText}\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":["EmergencyBanner","_ref","className","title","description","link","dataTestId","linkText","rest","_jsx","cn","styles","banner","root","children","_jsxs","content","UrgentIcon","icon","width","height","Button","rel","button","href","size","target"],"mappings":";;;;;;;;;;;AAuBaA,MAAAA,eAAe,GAAGC,IAAA,IAQH;EAAA,IARI;IAC9BC,SAAS;IACTC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,UAAU;IACVC,QAAQ;IACR,GAAGC,IAAAA;AACiB,GAAC,GAAAP,IAAA,CAAA;AACrB,EAAA,oBACEQ,cAAA,CAAA,KAAA,EAAA;IACEP,SAAS,EAAEQ,EAAE,CAACR,SAAS,EAAES,sBAAM,CAACC,MAAM,CAAE;IACxC,aAAaN,EAAAA,UAAU,EAAEO,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;MAAKb,SAAS,EAAES,sBAAM,CAACK,OAAQ;MAAAF,QAAA,EAAA,cAC7BL,cAAA,CAACQ,qBAAU,EAAA;QAACf,SAAS,EAAES,sBAAM,CAACO,IAAK;AAACC,QAAAA,KAAK,EAAE,EAAG;AAACC,QAAAA,MAAM,EAAE,EAAA;OAAK,CAAC,eAC7DX,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,sBAAM,CAACR,KAAM;AAAAW,QAAAA,QAAA,EAAEX,KAAAA;OAAW,CAAC,eAC3CM,cAAA,CAAA,KAAA,EAAA;QAAKP,SAAS,EAAES,sBAAM,CAACP,WAAY;AAAAU,QAAAA,QAAA,EAAEV,WAAAA;AAAW,OAAM,CAAC,eAEvDK,cAAA,CAACY,aAAM,EAAA;AACLC,QAAAA,GAAG,EAAC,YAAY;QAChBpB,SAAS,EAAES,sBAAM,CAACY,MAAO;AACzBC,QAAAA,IAAI,EAAEnB,IAAK;AACXoB,QAAAA,IAAI,EAAE,GAAI;QACV,aAAanB,EAAAA,UAAU,EAAEiB,MAAO;AAChCG,QAAAA,MAAM,EAAC,QAAQ;AAAAZ,QAAAA,QAAA,EAEdP,QAAAA;AAAQ,OACH,CAAC,CAAA;KACN,CAAA;AAAC,GACH,CAAC,CAAA;AAEV;;;;"}

package/dist/cjs/banners/emergency-banner/assets/UrgentIcon.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const React = require('react');
-const require$$2 = require('react/jsx-runtime');
+const jsxRuntime = require('react/jsx-runtime');
 
 const UrgentIcon = /*#__PURE__*/React.forwardRef(function UrgentIcon(props, svgRef) {
-  return /*#__PURE__*/require$$2.jsxs("svg", {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
     width: "80",
     height: "80",
     viewBox: "0 0 80 80",
@@ -14,25 +14,25 @@ const UrgentIcon = /*#__PURE__*/React.forwardRef(function UrgentIcon(props, svgR
     ref: svgRef,
     ...props,
     xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/require$$2.jsxs("g", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("g", {
       clipPath: "url(#clip0_3376_2905)",
-      children: [/*#__PURE__*/require$$2.jsx("g", {
+      children: [/*#__PURE__*/jsxRuntime.jsx("g", {
         opacity: "0.5",
         filter: "url(#filter0_f_3376_2905)",
-        children: /*#__PURE__*/require$$2.jsx("path", {
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M43.3953 9.71582C41.8296 7.20248 38.1708 7.20247 36.6051 9.71582L9.96087 52.4868C8.30108 55.1512 10.2169 58.6018 13.356 58.6018H66.6444C69.7835 58.6018 71.6993 55.1512 70.0395 52.4868L43.3953 9.71582ZM37.1207 21.341C37.0971 20.7728 37.5512 20.2993 38.1199 20.2993H41.8804C42.449 20.2993 42.9032 20.7728 42.8795 21.341L41.9886 42.7233C41.9663 43.2589 41.5255 43.6816 40.9894 43.6816H39.0108C38.4747 43.6816 38.034 43.2589 38.0117 42.7233L37.1207 21.341ZM37.0774 48.553C37.0774 46.9388 38.386 45.6302 40.0002 45.6302C41.6144 45.6302 42.923 46.9388 42.923 48.553C42.923 50.1672 41.6144 51.4757 40.0002 51.4757C38.386 51.4757 37.0774 50.1672 37.0774 48.553Z",
           fill: "url(#paint0_radial_3376_2905)"
         })
-      }), /*#__PURE__*/require$$2.jsx("path", {
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
         fillRule: "evenodd",
         clipRule: "evenodd",
         d: "M43.3953 14.6729C41.8296 12.1595 38.1708 12.1595 36.6051 14.6728L9.96087 57.4438C8.30108 60.1082 10.2169 63.5588 13.356 63.5588H66.6444C69.7835 63.5588 71.6993 60.1082 70.0395 57.4438L43.3953 14.6729ZM37.1207 26.298C37.0971 25.7299 37.5512 25.2564 38.1199 25.2564H41.8804C42.449 25.2564 42.9032 25.7299 42.8795 26.298L41.9886 47.6803C41.9663 48.2159 41.5255 48.6387 40.9894 48.6387H39.0108C38.4747 48.6387 38.034 48.2159 38.0117 47.6803L37.1207 26.298ZM37.0774 53.51C37.0774 51.8957 38.386 50.5872 40.0002 50.5872C41.6144 50.5872 42.923 51.8957 42.923 53.51C42.923 55.1242 41.6144 56.4327 40.0002 56.4327C38.386 56.4327 37.0774 55.1242 37.0774 53.51Z",
         fill: "url(#paint1_radial_3376_2905)"
       })]
-    }), /*#__PURE__*/require$$2.jsxs("defs", {
-      children: [/*#__PURE__*/require$$2.jsxs("filter", {
+    }), /*#__PURE__*/jsxRuntime.jsxs("defs", {
+      children: [/*#__PURE__*/jsxRuntime.jsxs("filter", {
         id: "filter0_f_3376_2905",
         x: "-2.65039",
         y: "-4.16919",
@@ -40,49 +40,49 @@ const UrgentIcon = /*#__PURE__*/React.forwardRef(function UrgentIcon(props, svgR
         height: "74.771",
         filterUnits: "userSpaceOnUse",
         colorInterpolationFilters: "sRGB",
-        children: [/*#__PURE__*/require$$2.jsx("feFlood", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("feFlood", {
           floodOpacity: "0",
           result: "BackgroundImageFix"
-        }), /*#__PURE__*/require$$2.jsx("feBlend", {
+        }), /*#__PURE__*/jsxRuntime.jsx("feBlend", {
           mode: "normal",
           in: "SourceGraphic",
           in2: "BackgroundImageFix",
           result: "shape"
-        }), /*#__PURE__*/require$$2.jsx("feGaussianBlur", {
+        }), /*#__PURE__*/jsxRuntime.jsx("feGaussianBlur", {
           stdDeviation: "6",
           result: "effect1_foregroundBlur_3376_2905"
         })]
-      }), /*#__PURE__*/require$$2.jsxs("radialGradient", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("radialGradient", {
         id: "paint0_radial_3376_2905",
         cx: "0",
         cy: "0",
         r: "1",
         gradientUnits: "userSpaceOnUse",
         gradientTransform: "translate(40.0002 33.2163) rotate(86.9482) scale(41.3557 49.9342)",
-        children: [/*#__PURE__*/require$$2.jsx("stop", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
           stopColor: "white"
-        }), /*#__PURE__*/require$$2.jsx("stop", {
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
           offset: "1",
           stopColor: "white",
           stopOpacity: "0.5"
         })]
-      }), /*#__PURE__*/require$$2.jsxs("radialGradient", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("radialGradient", {
         id: "paint1_radial_3376_2905",
         cx: "0",
         cy: "0",
         r: "1",
         gradientUnits: "userSpaceOnUse",
         gradientTransform: "translate(40.0002 38.1733) rotate(86.9482) scale(41.3557 49.9342)",
-        children: [/*#__PURE__*/require$$2.jsx("stop", {
+        children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
           stopColor: "white"
-        }), /*#__PURE__*/require$$2.jsx("stop", {
+        }), /*#__PURE__*/jsxRuntime.jsx("stop", {
           offset: "1",
           stopColor: "white",
           stopOpacity: "0.5"
         })]
-      }), /*#__PURE__*/require$$2.jsx("clipPath", {
+      }), /*#__PURE__*/jsxRuntime.jsx("clipPath", {
         id: "clip0_3376_2905",
-        children: /*#__PURE__*/require$$2.jsx("rect", {
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {
           width: "80",
           height: "80",
           fill: "white"