reso-ui 3.0.0-alpha.2 → 3.0.0-alpha.20

package/README.md

@@ -1,22 +1,40 @@
 # Reso UI
 
-React component library for Reso Applications.
+A React component library built with TypeScript + SCSS. Ships as tree-shakeable ESM + CJS output via Rollup.
 
 **Storybook:** [reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/)
 
 ---
 
+## Guiding Principles
+
+1. **Customizability-first** — Clients can and should be able to override most if not all units of a UI component. Override the entire palette via `<ResoUiProvider theme={...}>`, or override colours and behaviour directly on individual components via props. Clients should NOT override styles by hacky CSS means (e.g. directly overwriting compiled CSS class names in their projects).
+
+2. **Clean and minimalistic** — We eliminate clutter and prioritize ease of interaction for app users AND ease of component use for developers. Maximum configurability, yet minimal complication. Easy. Simple. Minimal.
+
+3. **In-house solutions** — We build everything ourselves (drag and drop, date selector calculations, etc). No dependencies on third-party component libraries unless absolutely necessary.
+
+4. **Performant and zero runtime cost** — Theming via CSS custom properties; no theme object traversal at render time.
+
+---
+
 ## Table of Contents
 
 - [Using the Library (Client Setup)](#using-the-library-client-setup)
   - [Requirements](#requirements)
   - [Install](#install)
   - [Client project files](#client-project-files)
-  - [Webpack config](#webpack-config)
+  - [Bundler Setup](#bundler-setup)
+    - [Vite](#vite)
+    - [Webpack](#webpack)
+    - [Next.js](#nextjs)
+    - [Create React App (CRA)](#create-react-app-cra)
   - [Provider setup](#provider-setup)
   - [Import styles](#import-styles)
   - [Basic usage](#basic-usage)
+- [Theming & Dark Mode Setup](#theming--dark-mode-setup)
 - [Overriding the Color Palette](#overriding-the-color-palette)
+- [Utility Classes](#utility-classes)
 - [Dev Notes](#dev-notes)
 - [CI/CD Notes](#cicd-notes)
 
@@ -84,13 +102,71 @@ Then add it to your `tsconfig.json`:
 
 ---
 
-### Webpack config
+### Bundler Setup
+
+The library ships pre-compiled JS (ESM + CJS), a single CSS file, and the Poppins and DancingScript font files — all locally bundled with no external network dependency.
+
+Pick the section that matches your bundler:
+
+---
+
+#### Vite
+
+Tested with Vite **6.x** (`@vitejs/plugin-react` 5.x).
+
+Vite handles CSS imports and font asset resolution out of the box. **No `vite.config.ts` changes are required** for reso-ui to work.
+
+Install the core Vite dependencies:
+
+```bash
+npm install -D vite@^6.4.2 @vitejs/plugin-react@^5.2.0
+```
+
+If your project uses its own SCSS files, install the `sass` package:
+
+```bash
+npm install -D sass@^1.87.0
+```
+
+If your project imports `.svg` files as React components, add `vite-plugin-svgr`:
+
+```bash
+npm install -D vite-plugin-svgr@^5.2.0
+```
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+
+export default defineConfig({
+  plugins: [react(), svgr()],
+});
+```
+
+That's it — `import "reso-ui/styles"` works immediately since Vite natively processes CSS from `node_modules` and resolves the relative `url(fonts/...)` paths in the stylesheet.
+
+---
+
+#### Webpack
+
+Tested with Webpack **5.x** (matches the Reso online-store and web-storefront projects).
 
-The library ships pre-compiled JS (ESM + CJS), a single CSS file, and the Poppins and DancingScript font files — all locally bundled with no external network dependency. Your webpack config needs:
+Your webpack config needs:
 
 1. **CSS loader** — to handle `import "reso-ui/styles"`
 2. **asset modules** — to resolve the `.ttf` font files referenced in the library CSS
 
+Install the required loaders:
+
+```bash
+npm install -D webpack@^5.99.6 webpack-cli@^6.0.1 webpack-dev-server@^5.2.1 \
+  ts-loader@^9.5.2 style-loader@^4.0.0 css-loader@^7.1.2 \
+  sass-loader@^16.0.5 sass@^1.87.0 \
+  html-webpack-plugin@^5.6.3
+```
+
 Minimum webpack rules:
 
 ```js
@@ -131,6 +207,146 @@ module.exports = {
 
 ---
 
+#### Next.js
+
+Tested with Next.js **15.x** (App Router and Pages Router).
+
+Next.js handles CSS imports, font asset resolution, and TypeScript out of the box. **No `next.config` changes are required** for reso-ui to work.
+
+```bash
+npm install next@^15.5.18 react@^18.2.0 react-dom@^18.2.0
+npm install reso-ui classnames
+```
+
+If your project uses its own SCSS files:
+
+```bash
+npm install -D sass@^1.87.0
+```
+
+If your project imports `.svg` files as React components, configure `@svgr/webpack` in `next.config`:
+
+```js
+// next.config.mjs
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+```bash
+npm install -D @svgr/webpack@^8.1.0
+```
+
+##### App Router setup
+
+Reso UI components use React context and hooks internally, so they require a `"use client"` boundary. Create a client-side provider wrapper:
+
+```tsx
+// src/providers/ResoUiClientProvider.tsx
+"use client";
+
+import { ResoUiProvider } from "reso-ui";
+
+export const ResoUiClientProvider = ({ children }: { children: React.ReactNode }) => (
+  <ResoUiProvider mode="system">
+    {children}
+  </ResoUiProvider>
+);
+```
+
+Then import the styles and provider in your root layout:
+
+```tsx
+// src/app/layout.tsx
+import "reso-ui/styles";
+import "./globals.css";
+import { ResoUiClientProvider } from "@/providers/ResoUiClientProvider";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ResoUiClientProvider>
+          {children}
+        </ResoUiClientProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+Use reso-ui components in any Client Component:
+
+```tsx
+// src/app/dashboard/page.tsx
+"use client";
+
+import { Button, Text, View } from "reso-ui";
+
+export default function DashboardPage() {
+  return (
+    <View pt={9} ph={4}>
+      <Text Element="h1">Dashboard</Text>
+      <Button text="Click me" onClick={() => alert("clicked")} />
+    </View>
+  );
+}
+```
+
+##### Pages Router setup
+
+Import styles and wrap with the provider in `_app.tsx`:
+
+```tsx
+// pages/_app.tsx
+import "reso-ui/styles";
+import "../styles/globals.css";
+import { ResoUiProvider } from "reso-ui";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <ResoUiProvider mode="system">
+      <Component {...pageProps} />
+    </ResoUiProvider>
+  );
+}
+```
+
+> **Note:** Reso UI does not ship `"use client"` directives. In the App Router, all pages and components that use reso-ui components must be Client Components (marked with `"use client"`), or the reso-ui components must be wrapped in a Client Component.
+
+---
+
+#### Create React App (CRA)
+
+Tested with **react-scripts 5.x**.
+
+CRA handles CSS imports, font asset resolution, and SVG imports out of the box. **No configuration changes are required.**
+
+```bash
+npx create-react-app my-app --template typescript
+cd my-app
+npm install reso-ui classnames
+```
+
+If your project uses its own SCSS files, install the `sass` package:
+
+```bash
+npm install -D sass@^1.87.0
+```
+
+Everything else works immediately — CRA's built-in webpack config already includes CSS loaders, asset modules for fonts, and `@svgr/webpack` for SVG imports.
+
+---
+
 ### Provider setup
 
 Wrap your application root with `ResoUiProvider`. It provides theming and responsive context to all Reso UI components.
@@ -183,6 +399,79 @@ All component props and usage examples are documented in the [Storybook instance
 
 ---
 
+## Theming & Dark Mode Setup
+
+Reso UI supports light mode, dark mode, and system-preference-based theming out of the box. Theme switching is controlled via the `mode` prop on `ResoUiProvider`.
+
+### Quick setup
+
+```tsx
+// App.tsx
+import React, { useState } from "react";
+import { ResoUiProvider, useTheme } from "reso-ui";
+import "reso-ui/styles";
+
+const ThemeToggle = () => {
+  const { resolvedMode, setMode } = useTheme();
+  return (
+    <button onClick={() => setMode(resolvedMode === "light" ? "dark" : "light")}>
+      Switch to {resolvedMode === "light" ? "dark" : "light"} mode
+    </button>
+  );
+};
+
+const App = () => (
+  <ResoUiProvider mode="system">
+    <ThemeToggle />
+    {/* your app */}
+  </ResoUiProvider>
+);
+```
+
+### Mode options
+
+| Mode | Behaviour |
+|------|-----------|
+| `"light"` (default) | Light theme applied |
+| `"dark"` | Dark theme applied |
+| `"system"` | Follows the user's OS `prefers-color-scheme` preference and reacts to changes in real time |
+
+### How it works
+
+`ResoUiProvider` wraps your app with a `ThemeProvider` that sets the `data-resoui-theme` attribute and CSS custom properties on your `#root` element. All Reso UI component styles scope their dark-mode overrides to `[data-resoui-theme="dark"]`, so switching modes is instantaneous with zero re-renders of component trees.
+
+### Using `useTheme` in your own components
+
+```tsx
+import { useTheme } from "reso-ui";
+
+const MyComponent = () => {
+  const { resolvedMode, setMode, theme } = useTheme();
+  // resolvedMode is always "light" or "dark" (resolved from "system" if needed)
+  // setMode("light" | "dark" | "system") to change the theme
+  // theme contains the current color and token overrides
+  return <div className={resolvedMode === "dark" ? "my-dark-style" : ""}>{/* ... */}</div>;
+};
+```
+
+### Styling your own components for dark mode
+
+Scope dark-mode overrides with the same attribute selector:
+
+```scss
+.my_component {
+  background: white;
+  color: #333;
+}
+
+[data-resoui-theme="dark"] .my_component {
+  background: #1e1e1e;
+  color: #e0e0e0;
+}
+```
+
+---
+
 ## Overriding the Color Palette
 
 `ResoUiProvider` accepts optional `theme` and `mode` props for runtime theming with no build step required.
@@ -311,6 +600,165 @@ Pass a partial `theme.colors` object to override semantic color roles. Keys map
 
 ---
 
+## Utility Classes
+
+Reso UI ships utility CSS classes that consumer projects can apply directly via `className` or `rootClassName`. These are included in the `reso-ui/styles` stylesheet and support dark mode automatically where applicable.
+
+### Quick Reference
+
+| Class | Category | Dark Mode | Description |
+|-------|----------|-----------|-------------|
+| [`resoui_section_border`](#section-border) | Layout | Yes | Bordered section container with default border-radius |
+| [`resoui_table_base`](#tables) | Tables | Yes | Base `<table>` styling (font, collapse, full width) |
+| [`resoui_th_base`](#tables) | Tables | Yes | Table header cell (padding, border, font-weight) |
+| [`resoui_tr_base`](#tables) | Tables | Yes | Table row (border, hover highlight) |
+| [`resoui_tr_base_selected`](#tables) | Tables | Yes | Selected table row highlight |
+| [`resoui_td_base`](#tables) | Tables | No | Table data cell (padding) |
+| [`resoui_navItem_base`](#nav-item-base) | Navigation | No | Nav item base layout for custom NavItem renders |
+| [`resoui_dropdown_option_base`](#dropdown-option-base) | Forms | Yes | Dropdown option base for custom DropdownSelect options |
+| [`resoui_no_select`](#general-utilities) | General | No | Disable text selection |
+| [`resoui_component_disabled`](#general-utilities) | General | No | Disabled overlay with pointer-events disabled |
+| [`resoui_background_image`](#general-utilities) | General | No | Background image with cover |
+| [`resoui_truncate`](#text-utilities) | Text | No | Truncate text with ellipsis |
+| [`resoui_text_no_block_margin`](#text-utilities) | Text | No | Remove default block margins |
+| [`resoui_text_no_inline_margin`](#text-utilities) | Text | No | Remove default inline margins |
+
+### Section Border
+
+A bordered container for card-like content sections. Apply via `rootClassName` on `Flex` or `View`.
+
+```tsx
+import { Flex, Text } from "reso-ui";
+
+<Flex direction="column" rootClassName="resoui_section_border" pa={5}>
+  <Text Element="h3">Section Title</Text>
+  <Text>Section content goes here.</Text>
+</Flex>
+```
+
+Light mode: `1px solid` neutral border + default border-radius. Dark mode: border color automatically darkens.
+
+### Tables
+
+Base styles for native HTML `<table>` elements. Apply via the `className` attribute. Dark mode is handled automatically.
+
+| Class | Apply to | What it does |
+|-------|----------|-------------|
+| `resoui_table_base` | `<table>` | Font-family, border-collapse, full width, font size |
+| `resoui_th_base` | `<th>` | Padding, bottom border, font-weight 500, left-aligned |
+| `resoui_tr_base` | `<tr>` | Bottom border, hover background highlight |
+| `resoui_tr_base_selected` | `<tr>` | Selected row highlight (combine with `resoui_tr_base`) |
+| `resoui_td_base` | `<td>` | Cell padding |
+
+```tsx
+<table className="resoui_table_base">
+  <thead>
+    <tr>
+      <th className="resoui_th_base">Name</th>
+      <th className="resoui_th_base">Email</th>
+      <th className="resoui_th_base">Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="resoui_tr_base">
+      <td className="resoui_td_base">John Doe</td>
+      <td className="resoui_td_base">john@example.com</td>
+      <td className="resoui_td_base">Admin</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+For selected rows, combine both classes:
+
+```tsx
+<tr className={`resoui_tr_base ${selectedId === item.id ? "resoui_tr_base_selected" : ""}`}>
+```
+
+Add custom column-specific styles alongside the utility classes:
+
+```tsx
+<th className="resoui_th_base myPage_th_right">Amount</th>
+<td className="resoui_td_base myPage_td_mono">$120.00</td>
+```
+
+```scss
+.myPage_th_right { text-align: right; }
+.myPage_td_mono { font-family: monospace; font-size: 12px; }
+```
+
+### Nav Item Base
+
+Base layout class for custom nav items rendered inside `NavItem` via `renderCustomNavItem`. Provides standard sizing consistent with the `Navbar`.
+
+```tsx
+import { NavItem } from "reso-ui";
+import { Link, useLocation } from "react-router-dom";
+
+const AppNavItem = ({ to, children }) => {
+  const { pathname } = useLocation();
+
+  return (
+    <NavItem
+      renderCustomNavItem={() => (
+        <Link
+          to={to}
+          className={`navItem_base ${pathname === to ? "my_nav_active" : ""}`}
+        >
+          {children}
+        </Link>
+      )}
+    >
+      {children}
+    </NavItem>
+  );
+};
+```
+
+### Dropdown Option Base
+
+Base class for custom dropdown options rendered inside `DropdownSelect`. Provides consistent sizing, padding, and dark mode text color.
+
+```tsx
+import { DropdownSelect } from "reso-ui";
+import { Link } from "react-router-dom";
+
+<DropdownSelect label="Account">
+  <Link to="/profile" className="resoui_dropdown_option_base">My Profile</Link>
+  <Link to="/settings" className="resoui_dropdown_option_base">Settings</Link>
+</DropdownSelect>
+```
+
+### General Utilities
+
+| Class | What it does |
+|-------|-------------|
+| `resoui_no_select` | Prevent text selection (all browser prefixes) |
+| `resoui_component_disabled` | Semi-transparent overlay + disable pointer events |
+| `resoui_background_image` | Background image: cover, centered, no-repeat |
+
+```tsx
+<Flex rootClassName={isLocked ? "resoui_component_disabled" : ""}>
+  <Text>This section is locked</Text>
+</Flex>
+```
+
+### Text Utilities
+
+| Class | What it does |
+|-------|-------------|
+| `resoui_truncate` | Truncate with ellipsis (`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`) |
+| `resoui_text_no_block_margin` | Remove block margins from headings (`margin-block-start: 0`) |
+| `resoui_text_no_inline_margin` | Remove inline margins |
+
+```tsx
+<Text rootClassName="resoui_truncate" rootStyles={{ maxWidth: "200px" }}>
+  Very long product name that should be truncated
+</Text>
+```
+
+---
+
 ## Dev Notes
 
 ### Available commands

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/cjs/_virtual/_commonjsHelpers.js.map

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

package/dist/cjs/_virtual/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var index = require('../node_modules/style-to-js/cjs/index.js');
+
+var cjsExports = index.__require();
+var styleToJs = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(cjsExports);
+
+exports.default = styleToJs;
+//# sourceMappingURL=index.js.map

package/dist/cjs/_virtual/index.js.map

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

package/dist/cjs/_virtual/index2.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var index = require('../node_modules/extend/index.js');
+
+var extendExports = index.__require();
+var extend = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(extendExports);
+
+exports.default = extend;
+//# sourceMappingURL=index2.js.map

package/dist/cjs/_virtual/index2.js.map

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

package/dist/cjs/_virtual/index3.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var cjs = {};
+
+exports.__exports = cjs;
+//# sourceMappingURL=index3.js.map

package/dist/cjs/_virtual/index3.js.map

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

package/dist/cjs/_virtual/utilities.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var utilities = {};
+
+exports.__exports = utilities;
+//# sourceMappingURL=utilities.js.map

package/dist/cjs/_virtual/utilities.js.map

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

package/dist/cjs/components/Banners/Banner/Banner.js

@@ -1,41 +1,71 @@
 'use strict';
 
 var React = require('react');
+var CloseButton = require('../../Buttons/Close-Button/Close-Button.js');
 var styles = require('../../../utils/styles.js');
-var Button = require('../../Buttons/Button/Button.js');
 
-const Banner = ({ type, text, onCloseOverride, rootClassName, rootStyles = {}, }) => {
+const TRANSITION_DURATION = 250;
+const Banner = ({ type, text = "", isShown: isShownProp, disappearsAfterMs, wrapperIsPositionFixed = false, onCloseOverride, rootClassName, rootStyles = {}, }) => {
     const [show, setShow] = React.useState(true);
-    const [visible, setVisible] = React.useState(false);
+    const [_isShown, _setIsShown] = React.useState(false);
+    const isClosingRef = React.useRef(false);
+    const isShown = (isShownProp !== null && isShownProp !== void 0 ? isShownProp : true) && show;
+    // open/_open pattern: delay unmount to allow exit transition
     React.useEffect(() => {
-        // trigger slide-in on mount
-        const t = requestAnimationFrame(() => setVisible(true));
-        return () => cancelAnimationFrame(t);
-    }, []);
+        if (isShown) {
+            _setIsShown(true);
+        }
+        else {
+            const timeout = setTimeout(() => _setIsShown(false), TRANSITION_DURATION);
+            return () => clearTimeout(timeout);
+        }
+    }, [isShown]);
+    // reset internal state when isShownProp transitions to true
+    React.useEffect(() => {
+        if (isShownProp) {
+            setShow(true);
+            isClosingRef.current = false;
+        }
+    }, [isShownProp]);
     const handleClose = () => {
-        setVisible(false);
+        if (isClosingRef.current)
+            return;
+        isClosingRef.current = true;
+        setShow(false);
         setTimeout(() => {
             if (typeof onCloseOverride === "function") {
                 onCloseOverride();
             }
-            else {
-                setShow(false);
-            }
-        }, 250);
+        }, TRANSITION_DURATION);
     };
+    // auto-dismiss after disappearsAfterMs
+    React.useEffect(() => {
+        if (_isShown && disappearsAfterMs != null) {
+            const timeout = setTimeout(() => handleClose(), disappearsAfterMs);
+            return () => clearTimeout(timeout);
+        }
+    }, [_isShown, disappearsAfterMs]);
     const containerStyles = styles.createComponentStyles(styles.createLayoutStyles({
         resoui_banner_container: true,
-        resoui_banner_container_visible: visible,
+        resoui_banner_container_visible: isShown ? _isShown : isShown,
+        resoui_banner_container_fixed: wrapperIsPositionFixed,
+        resoui_banner_container_fixed_visible: wrapperIsPositionFixed
+            ? isShown
+                ? _isShown
+                : isShown
+            : false,
         [`resoui_banner_container_${type}`]: true,
     }, rootClassName, {
         resoui_position_relative: true,
     }));
-    return (show && (React.createElement("div", { className: containerStyles, style: {
+    const getIsShown = () => (isShown ? isShown : _isShown);
+    return (getIsShown() && (React.createElement("div", { className: containerStyles, style: {
             ...rootStyles,
         }, "data-testid": "banner-root" },
         React.createElement("span", null, text),
-        React.createElement(Button.Button, { text: "X", rootClassName: "resoui_banner_close_button", onClick: handleClose }))));
+        React.createElement(CloseButton.CloseButton, { rootClassName: "resoui_banner_close_button", size: "small", onClick: handleClose }))));
 };
 
 exports.Banner = Banner;
+exports.TRANSITION_DURATION = TRANSITION_DURATION;
 //# sourceMappingURL=Banner.js.map

package/dist/cjs/components/Banners/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../../src/library/components/Banners/Banner/Banner.tsx"],"sourcesContent":[null],"names":["useState","useEffect","createComponentStyles","createLayoutStyles","Button"],"mappings":";;;;;;AAsBO,MAAM,MAAM,GAAG,CAAC,EACrB,IAAI,EACJ,IAAI,EACJ,eAAe,EACf,aAAa,EACb,UAAU,GAAG,EAAE,GACF,KAAI;IACjB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAU,IAAI,CAAC;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC;IAEtDC,eAAS,CAAC,MAAK;;AAEb,QAAA,MAAM,CAAC,GAAG,qBAAqB,CAAC,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;AACvD,QAAA,OAAO,MAAM,oBAAoB,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC;IAEN,MAAM,WAAW,GAAG,MAAK;QACvB,UAAU,CAAC,KAAK,CAAC;QACjB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE;AACzC,gBAAA,eAAe,EAAE;AAClB,YAAA;AAAM,iBAAA;gBACL,OAAO,CAAC,KAAK,CAAC;AACf,YAAA;QACH,CAAC,EAAE,GAAG,CAAC;AACT,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAGC,4BAAqB,CAC3CC,yBAAkB,CAChB;AACE,QAAA,uBAAuB,EAAE,IAAI;AAC7B,QAAA,+BAA+B,EAAE,OAAO;AACxC,QAAA,CAAC,CAAA,wBAAA,EAA2B,IAAI,CAAA,CAAE,GAAG,IAAI;AAC1C,KAAA,EACD,aAAa,EACb;AACE,QAAA,wBAAwB,EAAE,IAAI;AAC/B,KAAA,CACF,CACF;IAED,QACE,IAAI,KACF,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;AACL,YAAA,GAAG,UAAU;AACd,SAAA,EAAA,aAAA,EACW,aAAa,EAAA;AAEzB,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAQ;AACnB,QAAA,KAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EACL,IAAI,EAAC,GAAG,EACR,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EAAE,WAAW,GACpB,CACE,CACP;AAEL;;;;"}
+{"version":3,"file":"Banner.js","sources":["../../../../../src/library/components/Banners/Banner/Banner.tsx"],"sourcesContent":[null],"names":["useState","useRef","useEffect","createComponentStyles","createLayoutStyles","CloseButton"],"mappings":"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"}