reso-ui 2.44.0 → 3.0.0-alpha.10

package/README.md

@@ -1,218 +1,486 @@
 # Reso UI
 
-Home to reusable React components to Reso Applications.
+React component library for Reso Applications.
 
-For more information, please see our [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/).
+**Storybook:** [reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/)
 
-## Requirements
+---
 
-1. Node 18 >
+## Table of Contents
 
-2. React ^18.2
+- [Using the Library (Client Setup)](#using-the-library-client-setup)
+  - [Requirements](#requirements)
+  - [Install](#install)
+  - [Client project files](#client-project-files)
+  - [Webpack config](#webpack-config)
+  - [Provider setup](#provider-setup)
+  - [Import styles](#import-styles)
+  - [Basic usage](#basic-usage)
+- [Overriding the Color Palette](#overriding-the-color-palette)
+- [Dev Notes](#dev-notes)
+- [CI/CD Notes](#cicd-notes)
 
-3. React Dom ^18.2
+---
 
-## Install
+## Using the Library (Client Setup)
+
+### Requirements
+
+- Node 18+
+- React `^18.2`
+- React Dom `^18.2`
+- classnames `^2.3` (peer dependency — install it if your project doesn't already have it)
+
+### Install
 
 ```bash
 npm install reso-ui
+# peer deps (if not already installed)
+npm install classnames
 ```
 
-## Basic Usage
+For the latest alpha (v3 pre-release):
 
-1. Import the styles in your project root `index.ts` or `index.tsx` or `index.js`. Import it BEFORE importing Application-spcific styles:
+```bash
+npm install reso-ui@alpha
+```
 
-```js
-import "reso-ui/styles";
+For the latest stable v2 release:
 
-// your application-specific styles should override reso-ui styles
-import "./index.css";
+```bash
+npm install reso-ui@2.x
 ```
 
-2. Import and use our components:
+---
 
-```javascript
-import { Example } from "reso-ui";
+### Client project files
 
-export const SampleApp = () => {
-  return (
-    <Example theme="light" name="john" rootClassName="example_app_styles" />
-  );
-};
-```
+#### `custom.d.ts` (project root)
 
-3. For other usage docs, please see our [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/) for information on import statements and component properties.
+Create this file so TypeScript knows how to handle SVG and font file imports:
 
-# Version Warning
+```ts
+// custom.d.ts
+declare module "*.svg" {
+  import React from "react";
+  const SVG: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default SVG;
+}
 
-Reso UI now runs on React 18. Since some components (Form Control components especially) use React hooks internally, clients with other versions of React using the latest version of this library will face "Invalid Hook Call" errors, due to conflicting React versions. Therefore, please check peer dependency requirements before updating.
+declare module "*.ttf" {
+  const content: string;
+  export default content;
+}
+```
 
-# Authors' Notes
+Then add it to your `tsconfig.json`:
 
-If you are not insterested in contributing, please ignore this section.
+```json
+{
+  "compilerOptions": { ... },
+  "include": ["src", "custom.d.ts"]
+}
+```
 
-## Run
+---
 
-```bash
-# storybook
-npm run dev
+### Webpack config
 
-# or
+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:
 
-# run a single component imported in src/index.tsx
-npm start
+1. **CSS loader** — to handle `import "reso-ui/styles"`
+2. **asset modules** — to resolve the `.ttf` font files referenced in the library CSS
 
+Minimum webpack rules:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // Handle CSS (from reso-ui and your own styles)
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      // Handle SCSS (your own styles only — reso-ui ships pre-compiled CSS)
+      {
+        test: /\.scss$/,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      // Required: resolve font files bundled with reso-ui
+      {
+        test: /\.(ttf|woff|woff2|eot)$/,
+        type: "asset/resource",
+      },
+      // TypeScript
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+  },
+};
 ```
 
-## Changes from Original
+> **Fonts:** Poppins (all weights) and DancingScript are bundled inside the npm package under `dist/fonts/`. The `asset/resource` webpack rule lets webpack resolve the font paths from `dist/styles.css` automatically — no CDN or manual font installation required.
 
-1. ImageContainer and Image are now combined to form 1 component: Image
+---
 
-2. BannerImageContainer were removed, replaced with Hero
+### Provider setup
 
-3. Flex Container now have Margins and Padding props
+Wrap your application root with `ResoUiProvider`. It provides theming and responsive context to all Reso UI components.
 
-4. Loading-Component and Loading-Container has been combined to form 1 component: Loading-Container, with a _type_ prop. For Layer type (previously Component Loader), with width has been made `fit-content`. May need to change widths of table containers accordingly.
+```tsx
+// index.tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ResoUiProvider } from "reso-ui";
+import "reso-ui/styles";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <ResoUiProvider>
+    <App />
+  </ResoUiProvider>
+);
+```
 
-5. Popup-container renamed to Modal
+---
 
-6. Banner-Image-Container renamed to Hero
+### Import styles
 
-7. multi-image-container renamed to Multi-Image-Viewer. [setViewedIndex] renamed to [setIndexOverride]. [getMiniImagePath] hook only passes the imageObj as argument. Any processing related to image types etc. is done by client.
+Import the Reso UI stylesheet **before** your own application styles so your custom styles can override them:
 
-8. Admin-Product-Panel - sales count logic is taken out from component, removed dependency on Product all together. rename onToggleArchive to onArchive. Admin-Product-Panel has been decomposed into several Panel primitive components. Clients _need to rewrite Admin-Product-Panel and Admin-User-Panel in reso-client using the library_.
+```ts
+// index.tsx (or index.ts / index.js)
+import "reso-ui/styles";         // ← reso-ui first
+import "./index.css";            // ← your app styles after
+```
 
-9. Add to Cart to be rewritted using library components.
+---
 
-10. Generic-Button renamed to Button. [fullWidth] prop renamed to [inheritWidth]
+### Basic usage
 
-11. Link-Button added as a variant of Button.
+```tsx
+import { Button, Banner, Text } from "reso-ui";
 
-12. Multiselect Button to utilize library's Button component with custom width and height.
+export const MyPage = () => (
+  <>
+    <Banner type="info" text="Welcome to My App!" />
+    <Text Element="h1">Hello World</Text>
+    <Button text="Click me" onClick={() => alert("clicked")} />
+  </>
+);
+```
 
-13. Collapse-Banner and Info-Banner combined to form 1 Component: Banner.
+All component props and usage examples are documented in the [Storybook instance](http://reso-ui-storybook.s3-website-ap-southeast-1.amazonaws.com/).
 
-14. Dashboard/Card and Product-Card to be combined into 1 component: Card. Both of these components will need to be rewritten using library components.
+---
 
-15. Modal has been decomposed to 3 parts - Container, Header, Body
+## Overriding the Color Palette
 
-16. All components now have an optional prop _theme_
+`ResoUiProvider` accepts optional `theme` and `mode` props for runtime theming with no build step required.
 
-17. Confirmation Dialog now has `type` prop to either ask yes/no questions or just an 'OK' button. Prop `question` replaced with `header`
+### Light / dark mode
 
-18. Footer is now made more generic, in which you can pass children to render whatever you want.
+```tsx
+// Light (default)
+<ResoUiProvider>…</ResoUiProvider>
 
-19. FormGroup component is now replaced with SubForm. The `heading` prop is replaced with `title`
+// Dark
+<ResoUiProvider mode="dark">…</ResoUiProvider>
 
-20. InputLabel [value] prop is replaced with [descriptionSelectedKey]
+// Follow OS preference (prefers-color-scheme)
+<ResoUiProvider mode="system">…</ResoUiProvider>
+```
 
-21. ComponentLoader is replaced with Loader, and combined with FullScreenLoader
+### Override palette semantics
+
+Pass a partial `theme.colors` object to override semantic color roles. Keys map to CSS custom properties on `--resoui-*`.
+
+```tsx
+<ResoUiProvider
+  theme={{
+    colors: {
+      brandPrimary: "#1a365d",          // primary brand (navy)
+      brandSecondary: "#c53030",        // secondary brand (coral/CTA)
+      utilityError: "#e53e3e",
+      utilitySuccess: "#276749",
+    },
+  }}
+>
+  <App />
+</ResoUiProvider>
+```
 
-## To Be Reconstructed using library in Client
+**Full `colors` keys** (`ResoPaletteSemantics`):
+
+| Key | CSS variable |
+|-----|-------------|
+| `brandPrimaryGhost` | `--resoui-brand-primary-ghost` |
+| `brandPrimaryLight` | `--resoui-brand-primary-light` |
+| `brandPrimaryMedium` | `--resoui-brand-primary-medium` |
+| `brandPrimary` | `--resoui-brand-primary` |
+| `brandPrimaryDark` | `--resoui-brand-primary-dark` |
+| `brandPrimaryDarkest` | `--resoui-brand-primary-darkest` |
+| `brandSecondaryPale` | `--resoui-brand-secondary-pale` |
+| `brandSecondaryLight` | `--resoui-brand-secondary-light` |
+| `brandSecondary` | `--resoui-brand-secondary` |
+| `brandSecondaryDark` | `--resoui-brand-secondary-dark` |
+| `brandSecondaryDarker` | `--resoui-brand-secondary-darker` |
+| `brandSecondaryGradient` | `--resoui-brand-secondary-gradient` |
+| `brandTertiaryPale` | `--resoui-brand-tertiary-pale` |
+| `brandTertiaryLight` | `--resoui-brand-tertiary-light` |
+| `brandTertiary` | `--resoui-brand-tertiary` |
+| `brandTertiaryDark` | `--resoui-brand-tertiary-dark` |
+| `brandTertiaryDarker` | `--resoui-brand-tertiary-darker` |
+| `brandQuaternaryPale` | `--resoui-brand-quaternary-pale` |
+| `brandQuaternaryLight` | `--resoui-brand-quaternary-light` |
+| `brandQuaternary` | `--resoui-brand-quaternary` |
+| `brandQuaternaryDark` | `--resoui-brand-quaternary-dark` |
+| `brandQuaternaryDarker` | `--resoui-brand-quaternary-darker` |
+| `utilitySuccessBg` | `--resoui-utility-success-bg` |
+| `utilitySuccessLight` | `--resoui-utility-success-light` |
+| `utilitySuccess` | `--resoui-utility-success` |
+| `utilitySuccessDark` | `--resoui-utility-success-dark` |
+| `utilityWarningBg` | `--resoui-utility-warning-bg` |
+| `utilityWarningLight` | `--resoui-utility-warning-light` |
+| `utilityWarning` | `--resoui-utility-warning` |
+| `utilityWarningDark` | `--resoui-utility-warning-dark` |
+| `utilityErrorBg` | `--resoui-utility-error-bg` |
+| `utilityErrorLight` | `--resoui-utility-error-light` |
+| `utilityError` | `--resoui-utility-error` |
+| `utilityErrorDark` | `--resoui-utility-error-dark` |
+| `utilityInfoBg` | `--resoui-utility-info-bg` |
+| `utilityInfoLight` | `--resoui-utility-info-light` |
+| `utilityInfo` | `--resoui-utility-info` |
+| `utilityInfoDark` | `--resoui-utility-info-dark` |
+| `neutralLightest` | `--resoui-neutral-lightest` |
+| `neutralLight` | `--resoui-neutral-light` |
+| `neutralMedium` | `--resoui-neutral-medium` |
+| `neutralDark` | `--resoui-neutral-dark` |
+| `neutralDarker` | `--resoui-neutral-darker` |
+| `neutralOverlay` | `--resoui-neutral-overlay` |
+| `baseWhite` | `--resoui-base-white` |
+| `baseBlack` | `--resoui-base-black` |
+
+### Override spacing, typography, and layout tokens
+
+```tsx
+<ResoUiProvider
+  theme={{
+    tokens: {
+      fontFamily: "'Inter', sans-serif",
+      radiusDefault: "4px",
+      radiusLg: "8px",
+      spacing4: "20px",
+    },
+  }}
+>
+  <App />
+</ResoUiProvider>
+```
 
-1. Generic Modal for Popups that utilise libary components
+**Full `tokens` keys** (`ResoTokens`):
+
+| Key | CSS variable | Default |
+|-----|-------------|---------|
+| `spacing0` … `spacing9` | `--resoui-spacing-0` … `--resoui-spacing-9` | `0px` … `96px` |
+| `fontFamily` | `--resoui-font-family` | `"Poppins", "Roboto", sans-serif` |
+| `fontSize1` … `fontSize9` | `--resoui-font-size-1` … `--resoui-font-size-9` | `10px` … `26px` |
+| `fontWeightNormal` | `--resoui-font-weight-normal` | `400` |
+| `fontWeightMedium` | `--resoui-font-weight-medium` | `500` |
+| `fontWeightSemibold` | `--resoui-font-weight-semibold` | `600` |
+| `fontWeightBold` | `--resoui-font-weight-bold` | `700` |
+| `radiusSm` | `--resoui-radius-sm` | `4px` |
+| `radiusDefault` | `--resoui-radius-default` | `8px` |
+| `radiusLg` | `--resoui-radius-lg` | `16px` |
+| `radiusFull` | `--resoui-radius-full` | `9999px` |
+| `shadowSm` | `--resoui-shadow-sm` | `0 1px 3px rgba(0,0,0,0.1)` |
+| `shadowDefault` | `--resoui-shadow-default` | `0px 2px 15px rgba(34,60,102,0.2)` |
+| `shadowLg` | `--resoui-shadow-lg` | `0px 4px 25px rgba(34,60,102,0.15)` |
+| `transitionFast` | `--resoui-transition-fast` | `0.125s` |
+| `transitionNormal` | `--resoui-transition-normal` | `0.25s` |
+| `transitionSlow` | `--resoui-transition-slow` | `0.5s` |
+
+---
+
+## Dev Notes
+
+### Available commands
+
+| Command | What it does |
+|---------|-------------|
+| `npm start` | Webpack dev server → serves `src/App.tsx` at `http://localhost:3000` |
+| `npm run storybook` | Storybook dev server at `http://localhost:6006` |
+| `npm run build` | Rollup production build → `dist/esm/`, `dist/cjs/`, `dist/styles.css` |
+| `npm run build-storybook` | Static Storybook build → `storybook-static/` |
+| `npm test` | Jest unit tests (all 65 suites) |
+| `npm run test-coverage` | Jest with coverage report → `coverage/` |
+| `npm run lint` | TSLint check (excludes stories and test files) |
+
+### Viewing the App.tsx sandbox
+
+`npm start` starts a Webpack dev server that hot-reloads `src/App.tsx`. This file is a scratchpad for manually testing components during development — it is **not** the library entry point.
 
-2. Admin-Product-Panel
+```bash
+npm start
+# → http://localhost:3000
+```
 
-3. Admin-User-Panel
+App.tsx is already wrapped with `<ResoUiProvider>` in `src/index.tsx`, so all components render with the default theme.
 
-4. Add-To-Cart
+### Running Storybook
 
-5. Update Order Status Buttons
+```bash
+npm run storybook
+# → http://localhost:6006
+```
 
-6. Analysis Title
+Storybook is the primary UI for browsing all components, their props, and usage examples.
 
-7. Dashboard/Overview
+### Library entry point
 
-8. Dashboard/Card
+The library exports everything from `src/library/index.ts`. When you run `npm run build`, Rollup compiles this to:
 
-9. Product-Card
+```
+dist/
+  esm/          ← tree-shakeable ES modules (one file per component)
+  cjs/          ← CommonJS bundle
+  styles.css    ← single compiled stylesheet for all components
+```
 
-10. Reso Footer
+`dist/` is **not committed to git** — it is built fresh in CI before every npm publish.
 
-## Development Setup
+---
 
-[Reference for Typescript and Webpack](https://dev.to/shivampawar/setup-react-application-using-typescript-and-webpack-2kn6)
+## CI/CD Notes
 
-[Jest](https://jestjs.io/docs/getting-started)
+The pipeline is defined in `.github/workflows/ci-cd.yml`.
 
-[React Webpack Typscript Jest](https://maxpolski.medium.com/react-typescript-webpack-jest-93a58c8458e5)
+### What happens on every push / PR
 
-## 1. Typescript
+1. **Lint** (`npm run lint`)
+2. **Unit tests** (`npm run test-coverage`) on Node 18 and Node 20
+3. **Library build** (`npm run build`)
+4. **Storybook build** (`npm run build-storybook`)
 
-1. Install
+PRs to `main`, `2.x`, `v3`, or `beta` must pass all four steps.
 
-   ```bash
-   npm install -D typescript ts-loader @types/node @types/react @types/react-dom
-   ```
+### Branch → npm dist-tag mapping
 
-2. Create _tsconfig.json_
+| Branch | npm dist-tag | Version format | Example |
+|--------|-------------|----------------|---------|
+| `main` | `@latest` | `x.0.0` | `3.1.0` |
+| `v3` | `@alpha` | `3.0.0-alpha.n` | `3.0.0-alpha.5` |
+| `beta` | `@beta` | `x.0.0-beta.n` | `3.1.0-beta.2` |
+| `2.x` | `@2.x` | `2.x.x` | `2.44.0` |
 
-## 2. Webpack
+### How to make a change and publish a new version
 
-1. Install
+1. **Check out `main`** (or `v3` for alpha work):
+   ```bash
+   git checkout main    # for stable releases
+   # or
+   git checkout v3      # for alpha pre-releases
+   ```
 
-```bash
-# webpack
-npm install webpack webpack-cli webpack-dev-server --save-dev
+2. **Make your changes**, commit using Conventional Commits:
+   ```bash
+   git add .
+   git commit -m "feat: add Tooltip component"
+   # or: fix: correct Button disabled opacity
+   # or: chore: update dependencies
+   ```
 
-# webpack plugins to be used
-npm install html-webpack-plugin sass sass-loader css-loader style-loader --save-dev url-loader
-```
+   Commit type determines the version bump:
+   - `fix:` → patch (`3.0.1`)
+   - `feat:` → minor (`3.1.0`)
+   - `feat!:` or `BREAKING CHANGE:` footer → major (`4.0.0`)
 
-NOTE: We dont need babel since we are using ts-loader
+3. **Push** — CI runs automatically. If all checks pass, `semantic-release` determines the next version, publishes to npm, and commits the updated `CHANGELOG.md` and `package.json` back to the branch.
+   ```bash
+   git push origin main
+   ```
 
-2. Create `webpack.config.js`
+4. **Pull the release commit** after CI finishes (semantic-release pushes a version bump commit back):
+   ```bash
+   git pull origin main
+   ```
 
-## 3. ts-lint
+### How to publish alpha (pre-release) versions
 
-1. Install
+Work on the `v3` branch. Every push that contains a `fix:` or `feat:` commit automatically publishes a new `3.0.0-alpha.n` to the `@alpha` dist-tag.
 
 ```bash
-npm install tslint tslint-react --save-dev
+git checkout v3
+# make changes
+git commit -m "feat: add Paginator component"
+git push origin v3
+# → publishes 3.0.0-alpha.5 to npm @alpha
 ```
 
-2. Create `tslint.json`
-
-3. Add lint command to `Package.json` script
+Clients can install alpha builds:
+```bash
+npm install reso-ui@alpha
+```
 
-## 4. jest
+### How to publish beta versions
 
-1. Install Globally
+Push to the `beta` branch. Follows the same Conventional Commit rules; versions are tagged `@beta`.
 
 ```bash
-npm intall jest --global
+git checkout beta
+git merge v3                     # merge alpha work into beta for wider testing
+git push origin beta
+# → publishes 3.0.0-beta.1 to npm @beta
 ```
 
-2. Install jest as devDependency
+### How to create a breaking change (new major version)
+
+Use the `BREAKING CHANGE` footer in your commit message **or** add `!` after the type:
 
 ```bash
-# install jest
-npm install jest jest-environment-jsdom --save-dev
-# use ts-jest
-npm install ts-jest @types/jest --save-dev
-```
+# Method 1 — exclamation mark
+git commit -m "feat!: remove theme prop from all components"
 
-3. Generate `jestConfig.json` file
+# Method 2 — footer
+git commit -m "feat: remove theme prop from all components
 
-```bash
-jest --init
+BREAKING CHANGE: The theme prop has been removed from all components.
+Wrap your app in <ResoUiProvider mode=\"dark\"> instead."
 ```
 
-## 5. testing-library
+When pushed to `main`, this bumps the major version (e.g. `3.0.0` → `4.0.0`).
 
-1. Install
+**Before merging a major version to `main`**, create a maintenance branch for the previous major so it can still receive patch releases:
 
 ```bash
-npm install --save-dev @testing-library/react @testing-library/jest-dom
+# Preserve current main as a maintenance line before bumping major
+git checkout main
+git checkout -b 3.x              # create 3.x maintenance branch
+git push origin 3.x
+# Add "3.x" to release.config.js branches array, then push major change to main
 ```
 
-# Notes
-
-1. Light theme should be default. If no dark theme style is provided, it fallbacks to Light theme
+### Maintaining an older major (e.g. v2 patches)
 
-   -> Done. Hence every component MUST have a light theme.
+The `2.x` branch receives security fixes and critical patches without merging v3 changes.
 
-2. provided rootClassName should override theme classNames
+```bash
+git checkout 2.x
+git commit -m "fix: correct date selector boundary validation"
+git push origin 2.x
+# → publishes 2.44.1 to npm @2.x
+```
 
-   -> Works, but Component imports must happen BEFORE style imports
+Clients pinned to v2 install patches with:
+```bash
+npm install reso-ui@2.x
+```

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

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+var styles = require('../../../utils/styles.js');
+var Button = require('../../Buttons/Button/Button.js');
+
+const TRANSITION_DURATION = 250;
+const Banner = ({ type, text = "", isShown: isShownProp, disappearsAfterMs, wrapperIsPositionFixed = false, onCloseOverride, rootClassName, rootStyles = {}, }) => {
+    const [show, setShow] = React.useState(true);
+    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(() => {
+        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 = () => {
+        if (isClosingRef.current)
+            return;
+        isClosingRef.current = true;
+        setShow(false);
+        setTimeout(() => {
+            if (typeof onCloseOverride === "function") {
+                onCloseOverride();
+            }
+        }, 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: 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,
+    }));
+    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 }))));
+};
+
+exports.Banner = Banner;
+exports.TRANSITION_DURATION = TRANSITION_DURATION;
+//# sourceMappingURL=Banner.js.map