@luscii-healthtech/web-ui 0.0.0-alpha.2fcd0e9 → 0.0.0-alpha.3570fe3

package/README.md

@@ -2,178 +2,194 @@
 
 The `web-ui` repository contains the UI components for Luscii's frontend projects. It is published to NPM for usage into our projects. It uses Storybook and is published to Chromatic for easy review and tracking of visual changes.
 
-## Running locally
+## Table of contents
 
-If you want to run Storybook locally you can use:
+- 🚀 [Getting started](#getting-started)
+  - 📖 [Fonts](#fonts)
+- 📦 [How to use](#how-to-use)
+- 🤝 [Contributing](#contributing)
+  - 📐 [Coding standards & AI guidance](#coding-standards--ai-guidance)
 
-```bash
-yarn install
-yarn dev # runs a Tailwind watcher and Storybook
-```
+## Getting started
 
-## Testing your production build
+To use WebUI, you need to add it as a dependency to your project:
 
-Assuming the following setup:
+```bash
+yarn add @luscii-healthtech/web-ui
+```
 
-- The `web-ui` and `cVitals-Web` repositories are siblings in the same folder.
-- You ran `yarn install` in `cVitals-Web`.
-- You ran `yarn build` in `web-ui`.
+Then you can use components like this:
 
-Run the script below in your terminal, _in the parent folder of the repositories_.
+```tsx
+import { Text } from "@luscii-healthtech/web-ui";
 
+function MyComponent() {
+  return <Text>Some beautiful text from WebUI!</Text>;
+}
 ```
-cp -a web-ui/dist/. cVitals-Web/node_modules/@luscii-healthtech/web-ui/dist
-```
-
-Or use the shortcut:
 
-```
-yarn test-copy-build
-```
+### Fonts
 
-When you run `cVitals-Web` again, it should contain your latest updates in the component library. Use this to make sure your changes are solid before opening a pull request.
+WebUI uses the Inter font family for most of its text. This font should be provided by your application if you're using WebUI. The weights needed to show the full gamut of weights in the design system are 300, 400, 500, 600 and 700. One way of doing this is using a Google Fonts link in your HTML file:
 
-## Contributing
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+```
 
-Thank you for your help in keeping our component library organized and easy to use!
+For some headings WebUI uses the Avenir Next LT Pro font family. If you want to use these, you need to make them available in your project. You can do this by declaring the following `@font-face` rules in your CSS:
+
+```css
+@font-face {
+  font-family: "AvenirNextLTPro-Regular";
+  src:
+    url("./<regular-font-file>.eot") format("embedded-opentype"),
+    url("./<regular-font-file>.woff2") format("woff2"),
+    url("./<regular-font-file>.woff") format("woff"),
+    url("./<regular-font-file>.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "AvenirNextLTPro-Bold";
+  src:
+    url("./<bold-font-file>.eot") format("embedded-opentype"),
+    url("./<bold-font-file>.woff2") format("woff2"),
+    url("./<bold-font-file>.woff") format("woff"),
+    url("./<bold-font-file>.ttf") format("truetype");
+}
+```
 
-When adding components, please make sure to implement them consistently in our projects and that it is clear where and when they should be used. We want to avoid having many similar components. If you want to add components, do so in the `/src/components` directory. When you create new components, add them to Storybook as well. Stories go in the `/stories` directory.
+The `font-family` property value is important, as this is what WebUI is referencing to use the font. The `src` property values should point to the font files you want to use.
 
-If you add new components, please make sure they fit in with our existing ones and that it's clear where and when they should be used. We want to avoid having too many similar components.
+If you don't declare these `@font-face` rules, the font will not be available and the headings will gracefully fall back to next available font in your application.
 
-### Documentation
+### LocaleProvider
 
-Every component should have proper documentation that explains when, where and how to use it. This sounds like a lot of work, but it doesn't have to be. And it's important, also for you, to quickly see how to best use a component.
+WebUI exposes a `LocaleProvider`, which is used to make components adjust their data formats to the locale of the application.
+You should wrap your app with the `LocaleProvider`.
 
-Component documentation should include the following parts:
+```tsx
+import { LocaleProvider } from "@luscii-healthtech/web-ui";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+function start() {
+  const root = createRoot(document.querySelector("#root"));
+  root.render(
+    <LocaleProvider value="nl-NL">
+      <App />
+    </LocaleProvider>
+  );
+}
+```
 
-- A short explanation of each prop in a JSDoc comment style.
-- A stories file (`<ComponentName>.stories.tsx`).
-- A docs file (`<ComponentName>.docs.mdx`).
+The locale passed should adhere to the `{language}-{region}` format, for example:
 
-Below is an explanation of each.
+- `nl-NL`
+- `en-GB`
+- `pt-PT`
+- `de-DE`
+- `fr-FR`
 
-#### Props documented via JSDoc comments
+### Tooltip Provider
 
-A short explanation of each prop in a JSDoc comment style. These will show up in your IDE for on the fly documentation when you need it. It will also show up in Storybook, so this is a double-whammy and provides documentation exactly where you need it.
+Install the `@radix-ui/react-tooltip` peer dependency into your project:
 
-```ts
-type Props = {
-  /**
-   * Optional description that will be shown close to the label, used to provide more
-   * detail about the field next to the concise text of the label.
-   */
-  helperText?: string;
-};
+```bash
+yarn add @radix-ui/react-tooltip
 ```
 
-#### Stories file
+Wrap your app with the `Tooltip.Provider` component:
 
-Stories files (`*stories.tsx`) will show up in Storybook as separate entries/pages for each component. Each component can have multiple stories defined for it, showing different use cases, variants and states of that component.  
-It is important to include stories for a lot of these different variants and states, because visual snapshots will be created of these stories by a tool called Chromatic. This allows us to visually track changes to the component over time, and ensure that it looks and behaves correctly across different use cases. By writing stories that showcase all the different ways your component can be used, you can catch issues early and ensure that your component is robust and reliable.
+```tsx
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+function start() {
+  const root = createRoot(document.querySelector("#root"));
+  root.render(
+    <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
+      <App />
+    </Tooltip.Provider>
+  );
+}
+```
 
-You can find the Chromatic project for WebUI [here](https://www.chromatic.com/library?appId=62b0c4d5afd432f7ee70a740).
+More about this component can be found in its [documentation](https://www.radix-ui.com/primitives/docs/components/tooltip).
 
-#### Docs file
+## How to use
 
-The component docs file brings everything together and should be considered the source of truth about the component. What should be documented:
+The primary goal of WebUI is to make frontend development faster. It does this by providing a set of commonly used components that can be composed together to build user interfaces.  
+WebUI aims to have every component well documented, both in the code and in Storybook. You can find all available components and documentation on how to
+use them at [design.luscii.com](https://design.luscii.com/).
 
-- Why we have the component and where it should be used.
-- An overview of the different variants and states.
-- Usage guidelines of when and where to use the component.
-- Best practices to show what to do and what not do when working with the component.
+### Example scenario
 
-> 🔎 If you need to e.g. create a story to show how NOT to use a component, you might not want
-> to create a snapshot for that component or show it in the sidebar of Storybook. To omit a story
-> from snapshots, add the following to its parameters:
->
-> ```ts
-> chromatic: { disableSnapshot: true },
-> ```
->
-> To hide a story from the sidebar, prefix the story (variable) name
-> with `HIDE_`.
+Say you're tasked with building a UI that contains a card. This card has a title, a subtitle, some body text and a button. You could build this UI by writing the following code:
 
-Please see examples of other components' docs files for inspiration and try to stay consistent with how they are documented.
+```tsx
+import { Card, Text, Button } from "@luscii-healthtech/web-ui";
+
+function MyComponent() {
+  return (
+    <div className="my-layout">
+      <Card>
+        <Card.Title>Heart program</Card.Title>
+        <Card.Subtitle>79 participants</Card.Subtitle>
+        <Card.Text>Some description of how great this program is.</Card.Text>
+        <Card.Button>View program</Card.Button>
+      </Card>
+    </div>
+  );
+}
+```
 
-### Accessibility
+Often times WebUI will provide a component that is a composition of other components. In this case, the `Card` component is a composition of `Card.Title`, `Card.Subtitle`, `Card.Text` and `Card.Button`. This allows you to build UIs faster, as you don't have to think about where to get a certain component. You can just use `Card` and its subcomponents and everything will be styled correctly.
 
-WebUI is not currently designed to support screen reader usage. This is because our application is designed specifically for healthcare providers and is not publicly accessible. Our primary users are caregivers who work in healthcare and do not rely on screen readers to be able to use our application.  
-However, it is important for developers to write accessible frontend code. Even if our current application is not designed to support screen reader usage. This means following best practices for web accessibility, such as using semantic HTML, providing alternative text for images, and ensuring keyboard navigation is possible. While our primary users may not rely on screen readers, it is important to make our application as inclusive as possible to all users.
+## Frequently asked questions
 
-### Testing
+<details>
+<summary>The feature I'm building needs a component from WebUI that doesn't exist.</summary>
 
-WebUI relies on two types of testing: Visual snapshot testing via Chromatic and interaction testing via Storybook.
+Please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-Visual snapshot testing is handled for you. Any story you write will be picked up by Chromatic and it will create a snapshot for it.
+</details>
 
-Interaction testing via Storybook allows to programmatically interact with the component. This is very helpful in testing any logic that the component may use internally and any states of the component that might be hard/impossible to trigger from the outside.  
-More information on how to approach writing interaction tests can be found in [this page of the Storybook documentation](https://storybook.js.org/docs/react/writing-tests/interaction-testing#write-an-interaction-test).
+<details>
+<summary>The component I'm using doesn't have the props/subcomponents to build my feature.</summary>
 
-### Adding icons
+In most cases you can build the UI you need by composing the components that are available. If for instance `Card.Text` doesn't exist, go "one level up" and find the component that is closest to what you need. In this case, you can use the `Text` component and configure it with the correct props to match the design.
 
-Add new icons by following these steps:
+In case the component is missing a prop that you need, please get in touch with the design system circle by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). We'll discuss your needs and see what would be the best way to move forward.
 
-- Add the svg file(s) in `src/components/Icons/icons`.
-- Run `yarn icons`.
+</details>
 
-The icons are optimized by SVGO and transformed into React components by [SVGR](https://react-svgr.com) which are placed in `src/components/Icons`.
+## Contributing
 
-## CI setup
+Great to have you help making WebUI better! We have a few guidelines and tips
+to make sure we can keep the library consistent and easy to use. You can find
+them in our [contributing guide](CONTRIBUTING.md).
 
-### Branching
+### Coding standards & AI guidance
 
-The `main` branch is our default branch. When you contribute, branch from there and use the following branch naming convention:
+AI-agent guidance (including the Design System governance policy) lives in
+[`CLAUDE.md`](CLAUDE.md).
 
-```
-  // Branch naming convention (enforced)
+Org-wide standards are kept in a separate repository and cloned into a local,
+git-ignored `.coding-standards/` folder. Pull them in with:
 
-  major/*      // For a new design system or changes that effect our foundations (e.g. typography, color).
-  minor/*      // For new components and stories.
-  patch/*      // For small improvements to existing components or stories.
-  bug/*        // For bugs or fixes.
-  chore/*      // For things related to development that don't impact the output for consumers and/or users.
+```bash
+yarn add-coding-standards   # first-time clone
+yarn pull-coding-standards  # update to latest
 ```
 
-We have configured at lot of magic for your convenience.
-
-### On every PR
-
-1. The module build, lint and tests are checked.
-2. The Storybook build is published to Chromatic.
-3. Labels are added based on the branch name and PR size.
-4. Branch names must follow the convention and are checked.
-
-### On merge to main
-
-1. Drafts a GitHub release.
-2. Bumps the version of the package.
-3. Publishes the new package version to NPM.
-
-## Stories
-
-### Stories using deprecated props
-
-When creating new stories for components with deprecated functionality please prefix the story name with `Deprecated`. In addition, also mark it with a "DEPRECATED" badge via the story's parameters.
-
-For example a story of a `FullPageModal` component using the deprecated `primaryButtonProps` prop would look like this:
-
-```tsx
-import { BADGES } from "../.storybook/constants";
-
-export const DeprecatedWithPrimaryButtonProps = {
-  render: OneColumTemplate,
-  args: {
-    isOpen: true,
-    primaryButtonProps: {
-      onClick: action("onClick Primary Button"),
-      text: "Primary",
-    },
-  },
-  parameters: {
-    badges: [BADGES.DEPRECATED],
-  },
-};
-```
+### Reporting bugs
 
-This groups deprecated stories together and will make it easier to remove them later on.
+If you find a bug, please report it by sending us a message in the [#design-system-circle channel](https://luscii.slack.com/archives/C03507ZKRCY). It helps us a lot knowing of anything that is not working as expected.

package/dist/.storybook/constants.d.ts

@@ -0,0 +1,35 @@
+import { type Meta } from "@storybook/react-vite";
+export declare const BADGES: {
+    readonly NEEDS_REVISION: "needs-revision";
+    readonly DOCUMENTED: "documented";
+    readonly STABLE: "stable";
+    readonly NEW: "new";
+    readonly DEPRECATED: "deprecated";
+};
+type TAGS = (typeof BADGES)[keyof typeof BADGES][];
+/**
+ * A drop-in replacements for `"@storybook/react"`'s Meta type which extends the type with web-ui's tags.
+ *
+ * @example
+ *
+ * const meta = {
+ *  title: "Layout/SplitViewLayout",
+ *  component: Component,
+ *  tags: ["new"], // `tags` is now type-checked and auto-completes
+ * } satisfies MMeta<typeof Component>;
+ */
+export type MMeta<T> = Meta<T> & {
+    tags: TAGS;
+};
+/**
+ * For stories specifically used in the Docs page that are not intended
+ * to be used for snapshots. E.g. stories that are used to demonstrate
+ * what NOT to do, or stories that are used to demonstrate a component
+ * and that don't need to show up in snapshots.
+ */
+export declare const NO_SNAPSHOT_PARAMS: {
+    chromatic: {
+        disableSnapshot: boolean;
+    };
+};
+export {};

package/dist/.storybook/decorators.d.ts

@@ -0,0 +1,35 @@
+import { type Decorator } from "@storybook/react-vite";
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from "react";
+import { ModalDialog } from "../src";
+export declare const LocaleDecorator: Decorator;
+export declare const TooltipDecorator: Decorator;
+export declare const createHoverCardDecorator: (
+/**
+ * A React Node wrapped within a `HoverCard.Trigger` to trigger the HoverCard.
+ */
+trigger: ReactNode) => Decorator;
+export declare const CenteredDecorator: Decorator;
+/**
+ * Wraps the story in a div with the provided role.
+ *
+ * @example // Wrap the story within <div role="status"><Story /></div>
+ *
+ * const story = {
+ *   // ...
+ *   decorators: [createRoleDecorator("status")]
+ * }
+ *
+ */
+export declare const createRoleDecorator: (role: HTMLAttributes<HTMLDivElement>["role"]) => Decorator;
+/**
+ * Wraps the story in a ModalDialog.
+ *
+ * @example // Wrap the story within <ModalDialog variant="side-modal" size="l"><ModalDialog.Body><Story /></ModalDialog.Body></ModalDialog>
+ *
+ * const story = {
+ *   // ...
+ *   decorators: [createModalDialogDecorator({ size: "l", variant: "side-modal" })]
+ * }
+ *
+ */
+export declare const createModalDialogDecorator: (options?: Pick<ComponentProps<typeof ModalDialog>, "variant" | "size">) => Decorator;

package/dist/codemods/v48-tag-props-update.d.ts

@@ -0,0 +1,2 @@
+import type { API, FileInfo } from "jscodeshift";
+export default function transformer(file: FileInfo, api: API): string;

package/dist/codemods/v48-tag-props-update.js

@@ -0,0 +1,163 @@
+"use strict";
+// Codemod for Tag component breaking changes.
+//
+// Handles:
+// - colorTheme="red"|"amber"|"green"|"gray"|"blue" → _type="danger"|"negative"|"positive"|"neutral"|"info"
+// - size="base" → _size="large", size="small" → _size="small"
+// - variant → _variant
+// - truncate → _truncate
+// - text="..." → children (prop removed, value becomes children)
+// - showIcon → _leadingIcon with a TODO comment (boolean → ReactNode, can't auto-migrate)
+// - as → _as (on direct <Tag> elements only)
+// - Also handles polymorphic usage via `as={Tag}` (e.g. <Stack as={Tag} variant="bordered" />),
+//   transforming Tag-specific props on the parent element (but not renaming `as` itself)
+//
+// Usage: npx jscodeshift --parser=tsx --extensions=tsx,ts -t @luscii-healthtech/web-ui/dist/codemods/v48-tag-props-update <target-dir>
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const COLOR_THEME_TO_TYPE = {
+    red: "danger",
+    amber: "negative",
+    green: "positive",
+    gray: "neutral",
+    blue: "info",
+};
+// Props that simply get an underscore prefix (no value change)
+const RENAMED_PROPS = {
+    type: "_type",
+    variant: "_variant",
+    truncate: "_truncate",
+};
+/**
+ * Transform Tag-specific props on a JSX opening element.
+ * Returns true if any changes were made.
+ */
+function transformTagProps(opening, j) {
+    var _a, _b, _c, _d, _e, _f;
+    let changed = false;
+    // --- colorTheme → _type (with value mapping) ---
+    const colorThemeAttr = findAttribute(opening, "colorTheme");
+    if (colorThemeAttr) {
+        colorThemeAttr.name = j.jsxIdentifier("_type");
+        if (((_a = colorThemeAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        else if (((_b = colorThemeAttr.value) === null || _b === void 0 ? void 0 : _b.type) === "JSXExpressionContainer" &&
+            colorThemeAttr.value.expression.type === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.expression.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        changed = true;
+    }
+    // --- size → _size (with "base" → "large") ---
+    const sizeAttr = findAttribute(opening, "size");
+    if (sizeAttr) {
+        sizeAttr.name = j.jsxIdentifier("_size");
+        if (((_c = sizeAttr.value) === null || _c === void 0 ? void 0 : _c.type) === "StringLiteral") {
+            if (sizeAttr.value.value === "base") {
+                sizeAttr.value = j.stringLiteral("large");
+            }
+        }
+        else if (((_d = sizeAttr.value) === null || _d === void 0 ? void 0 : _d.type) === "JSXExpressionContainer" &&
+            sizeAttr.value.expression.type === "StringLiteral" &&
+            sizeAttr.value.expression.value === "base") {
+            sizeAttr.value = j.stringLiteral("large");
+        }
+        changed = true;
+    }
+    // --- Simple renames (variant → _variant, truncate → _truncate) ---
+    for (const [oldName, newName] of Object.entries(RENAMED_PROPS)) {
+        const attr = findAttribute(opening, oldName);
+        if (attr) {
+            attr.name = j.jsxIdentifier(newName);
+            changed = true;
+        }
+    }
+    // --- showIcon → _leadingIcon with TODO ---
+    const showIconAttr = findAttribute(opening, "showIcon");
+    if (showIconAttr) {
+        const attrIndex = (_f = (_e = opening.attributes) === null || _e === void 0 ? void 0 : _e.indexOf(showIconAttr)) !== null && _f !== void 0 ? _f : -1;
+        if (attrIndex !== -1 && opening.attributes) {
+            opening.attributes[attrIndex] = j.jsxAttribute(j.jsxIdentifier("_leadingIcon"), j.jsxExpressionContainer(j.identifier("undefined /* TODO: showIcon was removed — pass a ReactNode icon to _leadingIcon instead */")));
+        }
+        changed = true;
+    }
+    return changed;
+}
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let hasChanges = false;
+    // --- Pass 1: Direct <Tag> elements ---
+    root.findJSXElements("Tag").forEach((path) => {
+        var _a;
+        const opening = path.value.openingElement;
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+        // --- as → _as (Tag's own polymorphic prop) ---
+        const asAttr = findAttribute(opening, "as");
+        if (asAttr) {
+            asAttr.name = j.jsxIdentifier("_as");
+            hasChanges = true;
+        }
+        // --- text="..." → children (only for direct <Tag> usage) ---
+        const textAttr = findAttribute(opening, "text");
+        if (textAttr) {
+            const textValue = textAttr.value;
+            // Remove the text attribute
+            opening.attributes = (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.filter((a) => {
+                if (a.type !== "JSXAttribute") {
+                    return true;
+                }
+                return a.name.type === "JSXIdentifier" && a.name.name !== "text";
+            });
+            // Convert self-closing to open/close if needed
+            if (path.value.openingElement.selfClosing) {
+                path.value.openingElement.selfClosing = false;
+                path.value.closingElement = j.jsxClosingElement(j.jsxIdentifier("Tag"));
+            }
+            if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "StringLiteral") {
+                path.value.children = [j.jsxText(textValue.value)];
+            }
+            else if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "JSXExpressionContainer") {
+                path.value.children = [textValue];
+            }
+            hasChanges = true;
+        }
+    });
+    // --- Pass 2: Polymorphic as={Tag} usage (e.g. <Stack as={Tag} variant="bordered" />) ---
+    root.find(j.JSXOpeningElement).forEach((path) => {
+        var _a;
+        const opening = path.value;
+        const asAttr = findAttribute(opening, "as");
+        if (!asAttr) {
+            return;
+        }
+        // Check for as={Tag}
+        const isTagAs = ((_a = asAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "JSXExpressionContainer" &&
+            asAttr.value.expression.type === "Identifier" &&
+            asAttr.value.expression.name === "Tag";
+        if (!isTagAs) {
+            return;
+        }
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+    });
+    if (!hasChanges) {
+        return file.source;
+    }
+    return root.toSource({ quote: "double" });
+}
+function findAttribute(opening, name) {
+    var _a;
+    return (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.find((attr) => attr.type === "JSXAttribute" &&
+        attr.name.type === "JSXIdentifier" &&
+        attr.name.name === name);
+}

package/dist/esm/assets/happy-star.svg.js

@@ -0,0 +1,4 @@
+var img = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e";
+
+export { img as default };
+//# sourceMappingURL=happy-star.svg.js.map

package/dist/esm/assets/happy-star.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"happy-star.svg.js","sources":["../../../src/assets/happy-star.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":"AAAG,IAAC,GAAG,GAAG;;"}

package/dist/esm/assets/image-icon.svg.js

@@ -0,0 +1,4 @@
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M18 16V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16ZM5.9 10.98L8 13.51L11.1 9.52C11.3 9.26 11.7 9.26 11.9 9.53L15.41 14.21C15.66 14.54 15.42 15.01 15.01 15.01H3.02C2.6 15.01 2.37 14.53 2.63 14.2L5.12 11C5.31 10.74 5.69 10.73 5.9 10.98Z' fill='%23D1D5DB'/%3e%3c/svg%3e";
+
+export { img as default };
+//# sourceMappingURL=image-icon.svg.js.map

package/dist/esm/assets/image-icon.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-icon.svg.js","sources":["../../../src/assets/image-icon.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M18 16V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16ZM5.9 10.98L8 13.51L11.1 9.52C11.3 9.26 11.7 9.26 11.9 9.53L15.41 14.21C15.66 14.54 15.42 15.01 15.01 15.01H3.02C2.6 15.01 2.37 14.53 2.63 14.2L5.12 11C5.31 10.74 5.69 10.73 5.9 10.98Z' fill='%23D1D5DB'/%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":"AAAG,IAAC,GAAG,GAAG;;"}

package/dist/esm/assets/loading.svg.js

@@ -0,0 +1,4 @@
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e";
+
+export { img as default };
+//# sourceMappingURL=loading.svg.js.map

package/dist/esm/assets/loading.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.svg.js","sources":["../../../src/assets/loading.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":"AAAG,IAAC,GAAG,GAAG;;"}

package/dist/esm/assets/no-open-alerts.svg.js

@@ -0,0 +1,4 @@
+var img = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
+
+export { img as default };
+//# sourceMappingURL=no-open-alerts.svg.js.map

package/dist/esm/assets/no-open-alerts.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-open-alerts.svg.js","sources":["../../../src/assets/no-open-alerts.svg"],"sourcesContent":["var img = \"data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e\";\n  export default img;"],"names":[],"mappings":"AAAG,IAAC,GAAG,GAAG;;"}