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

package/README.md

@@ -1,23 +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)
 
@@ -85,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
+```
 
-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:
+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).
+
+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
@@ -132,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.
@@ -385,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/components/Buttons/Back/Back.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var React = require('react');
+var ChevronSingleLeft = require('../../../icons/svg/ChevronSingleLeft.svg.js');
+var Icon = require('../../Icon/Icon.js');
 var styles = require('../../../utils/styles.js');
 
 const Back = ({ to, text = "Back", disabled = false, rootClassName, rootStyles = {}, linkClassName, linkStyles = {}, ...spacingsProps }) => {
@@ -13,7 +15,7 @@ const Back = ({ to, text = "Back", disabled = false, rootClassName, rootStyles =
     const linkClasses = styles.createComponentStyles(styles.createLayoutStyles({}, linkClassName));
     return (React.createElement("div", { "data-testid": "back-root", className: containerStyles, style: rootStyles, role: "navigation" },
         React.createElement("a", { rel: "noreferrer", href: to, className: linkClasses, style: linkStyles, "data-testid": "back-link" },
-            "<",
+            React.createElement(Icon.Icon, { SvgIcon: ChevronSingleLeft.default, width: 14, height: 14 }),
             " ",
             text)));
 };

package/dist/cjs/components/Buttons/Back/Back.js.map

@@ -1 +1 @@
-{"version":3,"file":"Back.js","sources":["../../../../../src/library/components/Buttons/Back/Back.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps"],"mappings":";;;;;AAyBO,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACL,KAAI;AACf,IAAA,MAAM,eAAe,GAAGA,4BAAqB,CAC3CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,qBAAqB,EAAE,IAAI;AAC5B,KAAA,EACD,aAAa,CACd,EACD,aAAa,EACb;QACE,QAAQ;AACR,QAAA,gBAAgB,EAAE,IAAI;AACvB,KAAA,CACF,CACF;IAED,MAAM,WAAW,GAAGF,4BAAqB,CACvCC,yBAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACtC;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,WAAW,EACvB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,YAAY,EAAA;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,UAAU,iBACL,WAAW,EAAA;YAEtB,GAAG;;YAAG,IAAI,CACT,CACA;AAEV;;;;"}
+{"version":3,"file":"Back.js","sources":["../../../../../src/library/components/Buttons/Back/Back.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps","Icon","ChevronSingleLeft"],"mappings":";;;;;;;AA4BO,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACL,KAAI;AACf,IAAA,MAAM,eAAe,GAAGA,4BAAqB,CAC3CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,qBAAqB,EAAE,IAAI;AAC5B,KAAA,EACD,aAAa,CACd,EACD,aAAa,EACb;QACE,QAAQ;AACR,QAAA,gBAAgB,EAAE,IAAI;AACvB,KAAA,CACF,CACF;IAED,MAAM,WAAW,GAAGF,4BAAqB,CACvCC,yBAAkB,CAAC,EAAE,EAAE,aAAa,CAAC,CACtC;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,WAAW,EACvB,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,YAAY,EAAA;AAEjB,QAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAC,YAAY,EAChB,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,WAAW,EACtB,KAAK,EAAE,UAAU,iBACL,WAAW,EAAA;AAEvB,YAAA,KAAA,CAAA,aAAA,CAACE,SAAI,EAAA,EAAC,OAAO,EAAEC,yBAAiB,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAA,CAAI;;YAAE,IAAI,CAC/D,CACA;AAEV;;;;"}

package/dist/cjs/components/Card/Dashboard-Overview-Card/Dashboard-Overview-Card.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var styles = require('../../../utils/styles.js');
+
+const DashboardOverviewCard = ({ label, value, badge, onClick, rootClassName, rootStyles = {}, ...spacingsProps }) => {
+    const containerStyles = styles.createComponentStyles(styles.createLayoutStyles(styles.withSpacingsProps({
+        resoui_dashboard_overview_card: true,
+        resoui_dashboard_overview_card_clickable: !!onClick,
+    }, spacingsProps), rootClassName));
+    return (React.createElement("div", { className: containerStyles, style: rootStyles, "data-testid": "dashboard-overview-card-root", onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick();
+                }
+            }
+            : undefined },
+        React.createElement("div", { className: "resoui_dashboard_overview_card_label" },
+            React.createElement("span", { className: "resoui_dashboard_overview_card_label_text" }, label),
+            badge != null && badge > 0 && (React.createElement("span", { className: "resoui_dashboard_overview_card_badge" },
+                "+",
+                badge))),
+        React.createElement("div", { className: "resoui_dashboard_overview_card_value" }, value)));
+};
+
+exports.DashboardOverviewCard = DashboardOverviewCard;
+//# sourceMappingURL=Dashboard-Overview-Card.js.map

package/dist/cjs/components/Card/Dashboard-Overview-Card/Dashboard-Overview-Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard-Overview-Card.js","sources":["../../../../../src/library/components/Card/Dashboard-Overview-Card/Dashboard-Overview-Card.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps"],"mappings":";;;;;AAqBO,MAAM,qBAAqB,GAAG,CAAC,EACpC,KAAK,EACL,KAAK,EACL,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACY,KAAI;AAChC,IAAA,MAAM,eAAe,GAAGA,4BAAqB,CAC3CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,8BAA8B,EAAE,IAAI;QACpC,wCAAwC,EAAE,CAAC,CAAC,OAAO;AACpD,KAAA,EACD,aAAa,CACd,EACD,aAAa,CACd,CACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,UAAU,iBACL,8BAA8B,EAC1C,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,EACpC,QAAQ,EAAE,OAAO,GAAG,CAAC,GAAG,SAAS,EACjC,SAAS,EACP;AACE,cAAE,CAAC,CAAC,KAAI;AACJ,gBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;oBACtC,CAAC,CAAC,cAAc,EAAE;AAClB,oBAAA,OAAO,EAAE;gBACX;YACF;AACF,cAAE,SAAS,EAAA;QAGf,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA;AACnD,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2CAA2C,EAAA,EACxD,KAAK,CACD;YACN,KAAK,IAAI,IAAI,IAAI,KAAK,GAAG,CAAC,KACzB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sCAAsC,EAAA;;gBAClD,KAAK,CACF,CACR,CACG;QACN,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,EAAE,KAAK,CAAO,CAC/D;AAEV;;;;"}

package/dist/cjs/components/Card/Dashboard-Overview-Card-Container/Dashboard-Overview-Card-Container.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var styles = require('../../../utils/styles.js');
+
+const DashboardOverviewCardContainer = ({ children, rootClassName, rootStyles = {}, ...spacingsProps }) => {
+    const containerStyles = styles.createComponentStyles(styles.createLayoutStyles(styles.withSpacingsProps({
+        resoui_dashboard_overview_card_container: true,
+    }, spacingsProps), rootClassName));
+    return (React.createElement("div", { className: containerStyles, style: rootStyles, "data-testid": "dashboard-overview-card-container-root" }, children));
+};
+
+exports.DashboardOverviewCardContainer = DashboardOverviewCardContainer;
+//# sourceMappingURL=Dashboard-Overview-Card-Container.js.map

package/dist/cjs/components/Card/Dashboard-Overview-Card-Container/Dashboard-Overview-Card-Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard-Overview-Card-Container.js","sources":["../../../../../src/library/components/Card/Dashboard-Overview-Card-Container/Dashboard-Overview-Card-Container.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps"],"mappings":";;;;;AAoBO,MAAM,8BAA8B,GAAG,CAAC,EAC7C,QAAQ,EACR,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACqB,KAAI;AACzC,IAAA,MAAM,eAAe,GAAGA,4BAAqB,CAC3CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,wCAAwC,EAAE,IAAI;AAC/C,KAAA,EACD,aAAa,CACd,EACD,aAAa,CACd,CACF;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,UAAU,iBACL,wCAAwC,EAAA,EAEnD,QAAQ,CACL;AAEV;;;;"}

package/dist/cjs/components/Dialog/Dialog.js

@@ -49,7 +49,7 @@ onClickYes, onClickNo, onClickOk, rootClassName, rootStyles, yesButtonClassName,
                             onClickNo();
                         }
                     }, text: noText }),
-                React.createElement(Button.Button, { rootClassName: yesButtonClasses, rootStyles: yesButtonStyles, onClick: () => {
+                React.createElement(Button.Button, { type: "primary", rootClassName: yesButtonClasses, rootStyles: yesButtonStyles, onClick: () => {
                         if (validations.methodHasValue(onClickYes)) {
                             onClickYes();
                         }

package/dist/cjs/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/library/components/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","ModalContainer","ModalHeader","methodHasValue","ModalBody","Button"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/library/components/Dialog/Dialog.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","ModalContainer","ModalHeader","methodHasValue","ModalBody","Button"],"mappings":"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"}

package/dist/cjs/components/Enlarged-Image-Modal/Enlarged-Image-Modal.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var React = require('react');
+var styles = require('../../utils/styles.js');
+var useDisableBodyScroll = require('../../hooks/useDisableBodyScroll.js');
+var ResponsiveContext = require('../../context/ResponsiveContext.js');
+require('../../context/ThemeContext.js');
+var Image = require('../Images/Image/Image.js');
+var CloseButton = require('../Buttons/Close-Button/Close-Button.js');
+var Icon = require('../Icon/Icon.js');
+var ChevronSingleLeft = require('../../icons/svg/ChevronSingleLeft.svg.js');
+var ChevronSingleRight = require('../../icons/svg/ChevronSingleRight.svg.js');
+
+const TRANSITION_DURATION = 250;
+const EnlargedImageModal = ({ isOpen = false, onClose, imageSrc, imageAlt = "Enlarged image", hasNext = false, hasPrevious = false, onNext, onPrevious, layer = 1, width = 640, height = 640, objectFit = "contain", rootClassName, rootStyles = {}, ...spacingsProps }) => {
+    useDisableBodyScroll.useDisableBodyScroll(isOpen);
+    const { isMobile } = React.useContext(ResponsiveContext.ResponsiveContext);
+    const [_isOpen, _setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+        if (isOpen) {
+            _setIsOpen(true);
+        }
+        else {
+            const timeout = setTimeout(() => _setIsOpen(false), TRANSITION_DURATION);
+            return () => clearTimeout(timeout);
+        }
+    }, [isOpen]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (!isOpen)
+            return;
+        if (e.key === "Escape") {
+            onClose();
+        }
+        else if (e.key === "ArrowRight" && hasNext && onNext) {
+            onNext();
+        }
+        else if (e.key === "ArrowLeft" && hasPrevious && onPrevious) {
+            onPrevious();
+        }
+    }, [isOpen, onClose, hasNext, hasPrevious, onNext, onPrevious]);
+    React.useEffect(() => {
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [handleKeyDown]);
+    const backdropClasses = styles.createComponentStyles(styles.createLayoutStyles({
+        resoui_enlarged_image_modal_backdrop: true,
+        resoui_enlarged_image_modal_backdrop_transition: true,
+        resoui_enlarged_image_modal_backdrop_open: isOpen ? _isOpen : isOpen,
+    }));
+    const containerClasses = styles.createComponentStyles(styles.createLayoutStyles(styles.withSpacingsProps({
+        resoui_enlarged_image_modal_container: true,
+        resoui_enlarged_image_modal_container_transition: true,
+        resoui_enlarged_image_modal_container_open: isOpen ? _isOpen : isOpen,
+    }, spacingsProps), rootClassName));
+    const computedZIndex = layer + 10;
+    const getIsOpen = () => (isOpen ? isOpen : _isOpen);
+    const imageSize = isMobile ? 360 : width;
+    const imageHeight = isMobile ? 360 : height;
+    return (getIsOpen() && (React.createElement("div", { className: backdropClasses, style: { zIndex: computedZIndex }, "data-testid": "enlarged-image-modal-backdrop", role: "dialog", "aria-modal": "true", "aria-label": imageAlt },
+        React.createElement("div", { className: "resoui_enlarged_image_modal_close" },
+            React.createElement(CloseButton.CloseButton, { onClick: onClose })),
+        React.createElement("div", { className: containerClasses, style: { zIndex: computedZIndex + 1, ...rootStyles }, "data-testid": "enlarged-image-modal-root" },
+            React.createElement(Image.Image, { rootStyles: {
+                    width: `${imageSize}px`,
+                    height: `${imageHeight}px`,
+                }, src: imageSrc, alt: imageAlt, onClick: onClose, clickable: "zoomOut", objectFit: objectFit })),
+        hasPrevious && onPrevious && (React.createElement("button", { className: "resoui_enlarged_image_modal_nav resoui_enlarged_image_modal_nav_previous resoui_no_select", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onPrevious();
+            }, "data-testid": "enlarged-image-modal-nav-previous", "aria-label": "Previous image", type: "button" },
+            React.createElement(Icon.Icon, { SvgIcon: ChevronSingleLeft.default, width: 24, height: 24 }))),
+        hasNext && onNext && (React.createElement("button", { className: "resoui_enlarged_image_modal_nav resoui_enlarged_image_modal_nav_next resoui_no_select", onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onNext();
+            }, "data-testid": "enlarged-image-modal-nav-next", "aria-label": "Next image", type: "button" },
+            React.createElement(Icon.Icon, { SvgIcon: ChevronSingleRight.default, width: 24, height: 24 }))))));
+};
+
+exports.EnlargedImageModal = EnlargedImageModal;
+//# sourceMappingURL=Enlarged-Image-Modal.js.map

package/dist/cjs/components/Enlarged-Image-Modal/Enlarged-Image-Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Enlarged-Image-Modal.js","sources":["../../../../src/library/components/Enlarged-Image-Modal/Enlarged-Image-Modal.tsx"],"sourcesContent":[null],"names":["useDisableBodyScroll","useContext","ResponsiveContext","useState","useEffect","useCallback","createComponentStyles","createLayoutStyles","withSpacingsProps","CloseButton","Image","Icon","ChevronSingleLeft","ChevronSingleRight"],"mappings":"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"}

package/dist/cjs/components/Icon/Icon.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var styles = require('../../utils/styles.js');
 
-const Icon = ({ SvgIcon, width = 32, height = 32, inline = false, fill = "#434B59", stroke = "current", rootClassName, rootStyles = {}, ...spacingsProps }) => {
+const Icon = ({ SvgIcon, width = 32, height = 32, inline = false, fill = "currentColor", stroke = "current", rootClassName, rootStyles = {}, ...spacingsProps }) => {
     const containerClasses = styles.createComponentStyles(styles.createLayoutStyles(styles.withSpacingsProps({
         resoui_icon_container: true,
         resoui_icon_container_inline: inline,

package/dist/cjs/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../src/library/components/Icon/Icon.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps"],"mappings":";;;;;AA4BO,MAAM,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,SAAS,EAClB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACL,KAAI;AACf,IAAA,MAAM,gBAAgB,GAAGA,4BAAqB,CAC5CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,4BAA4B,EAAE,MAAM;AACrC,KAAA,EACD,aAAa,CACd,EACD,aAAa,CACd,CACF;IAED,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,WAAW,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,UAAU,EAAA;QAEjB,KAAA,CAAA,aAAA,CAAC,OAAO,mBACM,eAAe,EAC3B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EAAA,CACd,CACE;AAEV;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../src/library/components/Icon/Icon.tsx"],"sourcesContent":[null],"names":["createComponentStyles","createLayoutStyles","withSpacingsProps"],"mappings":";;;;;AA4BO,MAAM,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,EAAE,EACX,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,cAAc,EACrB,MAAM,GAAG,SAAS,EAClB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,aAAa,EACL,KAAI;AACf,IAAA,MAAM,gBAAgB,GAAGA,4BAAqB,CAC5CC,yBAAkB,CAChBC,wBAAiB,CACf;AACE,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,4BAA4B,EAAE,MAAM;AACrC,KAAA,EACD,aAAa,CACd,EACD,aAAa,CACd,CACF;IAED,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,WAAW,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,UAAU,EAAA;QAEjB,KAAA,CAAA,aAAA,CAAC,OAAO,mBACM,eAAe,EAC3B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EAAA,CACd,CACE;AAEV;;;;"}

package/dist/cjs/components/Infinite-Scroll-Container/Infinite-Scroll-Container.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var Loader = require('../Loaders/Loader/Loader.js');
 var styles = require('../../utils/styles.js');
 
 const InfiniteScrollContainer = ({ children, isLoading = true, currentPage = 1, setCurrentPage, totalPages = 1, fetchedForPage, onFetchData, height = "100%", loader, scrollThreshold = 1, rootClassName, rootStyles = {}, ...spacingsProps }) => {
@@ -35,7 +36,7 @@ const InfiniteScrollContainer = ({ children, isLoading = true, currentPage = 1,
     };
     return (React.createElement("div", { className: containerStyles, style: { height, maxHeight: height, ...rootStyles }, "data-testid": "infinite-scroll-container-root", onScroll: handleScroll },
         children,
-        isLoading && (React.createElement("div", { ref: loaderRef, className: "resoui_infiniteScroll_loader", "data-testid": "infinite-scroll-loader" }, loader || React.createElement("span", null, "Loading...")))));
+        isLoading && (React.createElement("div", { ref: loaderRef, className: "resoui_infiniteScroll_loader", "data-testid": "infinite-scroll-loader" }, loader || React.createElement(Loader.Loader, { size: "small" })))));
 };
 
 exports.InfiniteScrollContainer = InfiniteScrollContainer;