@designcrowd/fe-shared-lib 1.6.0 → 1.6.2-eng-4039-freemode

package/.github/workflows/claude.yml

@@ -0,0 +1,72 @@
+name: Claude Assistant
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned, labeled]
+  pull_request_review:
+    types: [submitted]
+env:
+  AWS_REGION: us-east-1
+
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+  issues: write
+  actions: read
+
+jobs:
+  claude-response:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git clone the repository
+        uses: actions/checkout@v6
+
+      - name: Detect model from trigger
+        id: config
+        env:
+          COMMENT_BODY: ${{ github.event.comment.body || github.event.issue.body || github.event.review.body || '' }}
+        run: |
+          if echo "$COMMENT_BODY" | grep -qi -- '--opus'; then
+            echo "model=us.anthropic.claude-opus-4-6" >> "$GITHUB_OUTPUT"
+          elif echo "$COMMENT_BODY" | grep -qi -- '--haiku'; then
+            echo "model=us.anthropic.claude-haiku-4-5-20251001" >> "$GITHUB_OUTPUT"
+          else
+            echo "model=us.anthropic.claude-sonnet-4-6" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.11.0'
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Configure npm for private packages
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+          echo "@designcrowd:registry=https://registry.npmjs.org/" >> ~/.npmrc
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v6
+        with:
+          role-to-assume: arn:aws:iam::104415087145:role/github-claude-action-bedrock
+          role-session-name: GitHub_to_AWS_via_FederatedOIDC
+          aws-region: ${{ env.AWS_REGION }}
+
+      - uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          claude_args: "--model ${{ steps.config.outputs.model }}"
+          assignee_trigger: "claude"
+          label_trigger: "claude"
+          base_branch: "master"
+          track_progress: "true"
+          use_sticky_comment: "true"
+          use_commit_signing: "true"
+          exclude_comments_by_actor: "*[bot]"
+          additional_permissions: |
+            actions: read

package/.storybook/main.ts

@@ -1,7 +1,6 @@
 import { mergeConfig } from 'vite';
-import type { StorybookConfig } from '@storybook/vue3-vite';
 
-const config: StorybookConfig = {
+module.exports = {
   stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-a11y',
@@ -21,7 +20,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
-  async viteFinal(config) {
+  async viteFinal(config, options) {
     const configExtension = {
       optimizeDeps: {
         include: ['deepmerge'],
@@ -35,5 +34,3 @@ const config: StorybookConfig = {
     return mergeConfig(config, configExtension);
   },
 };
-
-export default config;

package/CLAUDE.md

@@ -2,70 +2,93 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Development Commands
+## Project Overview
 
-### Starting Development
-- `npm start` - Builds Tailwind CSS files for all themes and launches Storybook development server on port 6006
-- `npm run storybook` - Same as `npm start` (alias)
+`@designcrowd/fe-shared-lib` is a shared Vue 3 component library and design system for DesignCrowd's frontend applications (BrandCrowd, Design.com, CrazyDomains, DesignCrowd, BrandPage). Published to NPM as a scoped package.
 
-### Building
-- `npm run build` - Builds production CSS using Tailwind
-- `npm run build:css` - Builds CSS files using tailwind.build.js
-- `npm run build:storybook` - Builds static Storybook for deployment
+- **Default branch**: `master`
+- **Node**: 20.x
+- **Framework**: Vue 3 + Vite + Storybook 9
 
-### Code Quality
-- `npm run lint` - Runs ESLint on TypeScript, JavaScript, and Vue files in src/
-- `npm run lint:fix` - Automatically fixes linting issues where possible
+## Commands
 
-### Testing in UAT Environment
-To test experimental versions without publishing to production:
-1. Update package.json version to `[current]-[description]`
-2. Run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN`
-3. Update consumer package reference to the new version
+```bash
+npm start                 # Build Tailwind CSS + launch Storybook on port 6006
+npm run build             # Build production CSS (all themes)
+npm run build:storybook   # Build static Storybook for S3 deployment
+npm run lint              # ESLint check (src/ directory)
+npm run lint:fix          # ESLint auto-fix
+```
 
-## Architecture Overview
+**No test runner is configured.** Vue Test Utils (`@vue/test-utils`) is installed as a dev dependency but there is no Vitest/Jest setup and no `npm test` script. Do not attempt to run tests.
 
-This is a shared component library and design system for DesignCrowd's frontend applications, published as `@designcrowd/fe-shared-lib`.
+## Architecture
 
 ### Project Structure
-- **`src/atoms/`** - Reusable UI components (Button, Modal, Icon, etc.)
-- **`src/experiences/`** - Complex, business-specific components (AuthFlow, PaymentConfig, etc.)
-- **`src/themes/`** - Tailwind CSS theme configurations for different brands
-- **`src/css/`** - Global CSS and Tailwind configuration
-- **`public/css/`** - Generated CSS output files
-
-### Theme System
-The library supports multiple brand themes through Tailwind CSS:
-- **BrandCrowd** (`bc.js`)
-- **BrandPage** (`bp.js`) 
-- **CrazyDomains** (`cd.js`)
-- **DesignCrowd** (`dc.js`)
-- **Design.com** (`dcom.js`)
-
-Themes are built using `tailwind.themes.js` and exported via `src/themes/themes.js`.
+- **`src/atoms/`** — Reusable UI components (Button, Modal, Icon, Dropdown, TextInput, etc.)
+- **`src/experiences/`** — Complex business-specific components (AuthFlow, PaymentConfig, UploadLogo, etc.)
+- **`src/themes/`** — Tailwind CSS theme configurations per brand
+- **`src/css/`** — Global CSS and Tailwind entry point
+- **`src/bundles/`** — Generated i18n translation bundles
+
+### Theme System (5 brands)
+Each brand has its own Tailwind theme extending a shared base:
+- `bc.js` (BrandCrowd), `dcom.js` (Design.com), `dc.js` (DesignCrowd), `cd.js` (CrazyDomains), `bp.js` (BrandPage)
+
+Themes are compiled into separate CSS files via `tailwind.build.js` → `dist/css/tailwind-[theme].css`
 
 ### Component Organization
-- **Atoms**: Basic UI components with stories in Storybook
-- **Experiences**: Complex components combining multiple atoms for specific workflows
-- **Icons**: Extensive icon library with brand-specific variants
-- **Mixins**: Reusable Vue.js mixins for common functionality
+- **Atoms**: Simple, reusable UI primitives with Storybook stories
+- **Experiences**: Complex multi-atom components for specific workflows (auth, payments, uploads)
+- **Icons**: Extensive icon library in `src/atoms/components/Icon/` with brand-specific variants
 
 ### Key Files
-- `index.js` - Main export file exposing all components
-- `tailwind.config.js` - Tailwind CSS configuration
-- `vite.config.ts` - Vite build configuration for development
-
-### Local Development Workflow
-Use `npm link` in this directory and `npm link @designcrowd/fe-shared-lib` in consumer projects for local development.
-
-### Storybook
-- Development server runs on port 6006
-- Live Storybook: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
-- Stories are co-located with components (`.stories.js` files)
-
-### Brand Page Integration
-For changes affecting BrandPage Tab in BC.NET:
-1. Update app.maker's reference to this library
-2. Bump app.maker version
-3. Run `npm run docker:publish:bp`
-4. Update BC.NET's reference to the new app.maker version
+- `index.js` / `index.cjs` — Main exports (dual ESM/CJS)
+- `tailwind.config.js` — Tailwind CSS configuration
+- `tailwind.build.js` — CSS build script (multi-theme)
+- `vite.config.ts` — Vite dev configuration
+
+## Coding Standards
+
+### Formatting (Prettier)
+- Single quotes (`singleQuote: true`)
+- Print width: 120 characters
+- Trailing commas: all
+- Arrow parens: always
+
+### Linting (ESLint)
+- Extends: `plugin:vue/recommended`, `@vue/airbnb`, `@vue/prettier`
+- `no-console`: warn in production
+- `import/prefer-default-export`: off
+
+### Styling
+- **Tailwind CSS** with `tw-` prefix for utility classes
+- No SCSS — PostCSS only
+- Theme-specific styles via the multi-brand theme system
+
+### Vue Components
+- Vue 3 Single File Components (`.vue`)
+- Stories co-located with components (`.stories.js` files)
+- Mixins in `src/atoms/mixin/` and `src/experiences/mixins/`
+
+## Storybook
+
+- Dev server: `npm start` → http://localhost:6006
+- Live: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+- Stories pattern: `src/**/components/**/*.stories.@(js|jsx|ts|tsx)`
+- Supports theme switching (5 brands) and locale switching (8 languages)
+
+## Local Development
+
+Use `npm link` for local development with consumer projects:
+```bash
+npm link                                           # in this directory
+npm link @designcrowd/fe-shared-lib                # in consumer project
+```
+
+## Publishing (UAT)
+
+To test experimental versions without publishing to production:
+1. Update `package.json` version to `[current]-[description]`
+2. Run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN`
+3. Update consumer package reference to the new version

package/dist/css/tailwind-brandCrowd.css

@@ -946,6 +946,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1851,6 +1857,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(208 208 208 / var(--tw-border-opacity));
+}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(0 121 172 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2122,6 +2139,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 22 50 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(145 16 38 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(222 222 222 / var(--tw-bg-opacity));
@@ -2138,6 +2159,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(71 71 71 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 53 53 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(211 238 207 / var(--tw-bg-opacity));
@@ -2150,10 +2175,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 21 23 / var(--tw-text-opacity));
-}
 .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(194 22 50 / var(--tw-text-opacity));

package/dist/css/tailwind-brandPage.css

@@ -946,6 +946,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1699,6 +1705,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -1850,6 +1859,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(208 208 208 / var(--tw-border-opacity));
+}
 .hover\:tw-bg-grayscale-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(244 244 244 / var(--tw-bg-opacity));
@@ -1862,9 +1875,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 21 23 / var(--tw-text-opacity));
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
 .hover\:tw-text-white:hover {
   --tw-text-opacity: 1;

package/dist/css/tailwind-crazyDomains.css

@@ -946,6 +946,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1851,6 +1857,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(235 238 243 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(199 204 207 / var(--tw-border-opacity));
+}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(0 129 191 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(235 238 243 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 204 207 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2122,6 +2139,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(89 138 38 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 103 28 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(218 218 218 / var(--tw-bg-opacity));
@@ -2138,6 +2159,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(58 58 58 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(226 238 213 / var(--tw-bg-opacity));
@@ -2150,10 +2175,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 145 33 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(79 89 92 / var(--tw-text-opacity));
-}
 .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(89 138 38 / var(--tw-text-opacity));

package/dist/css/tailwind-designCom.css

@@ -946,6 +946,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.75rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1851,6 +1857,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 209 209 / var(--tw-border-opacity));
+}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(50 71 197 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2122,6 +2139,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 53 148 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
@@ -2138,6 +2159,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(49 49 49 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2150,10 +2175,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(182 128 6 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
 .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(50 71 197 / var(--tw-text-opacity));

package/dist/css/tailwind-designCrowd.css

@@ -946,6 +946,9 @@ video {
 .tw-w-96 {
   width: 24rem;
 }
+.tw-w-\[14rem\] {
+  width: 14rem;
+}
 .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .tw-rounded-full {
   border-radius: 9999px;
 }
+.tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1851,6 +1857,9 @@ video {
 .tw-font-bold {
   font-weight: 700;
 }
+.tw-font-medium {
+  font-weight: 500;
+}
 .tw-font-normal {
   font-weight: 400;
 }
@@ -2062,6 +2071,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
 }
+.hover\:tw-border-grayscale-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
 .hover\:tw-border-info-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(14 121 188 / var(--tw-border-opacity));
@@ -2098,6 +2111,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2122,6 +2139,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2138,6 +2159,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));
@@ -2150,10 +2175,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(194 140 34 / var(--tw-bg-opacity));
 }
-.hover\:tw-text-grayscale-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(39 52 56 / var(--tw-text-opacity));
-}
 .hover\:tw-text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(14 121 188 / var(--tw-text-opacity));

package/index.js

@@ -31,6 +31,7 @@ export { default as Icon } from './src/atoms/components/Icon/Icon.vue';
 export { default as DcomIcon } from './src/atoms/components/design-com/Icon/Icon.vue';
 export { default as Modal } from './src/atoms/components/Modal/Modal.vue';
 export { default as Loader } from './src/atoms/components/Loader/Loader.vue';
+export { default as AiPoweredLoader } from './src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue';
 export { default as Tooltip } from './src/atoms/components/Tooltip/Tooltip.vue';
 export { default as Picture } from './src/atoms/components/Picture/Picture.vue';
 export { default as HelloBar } from './src/atoms/components/HelloBar/HelloBar.vue';
@@ -58,3 +59,4 @@ export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
 export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
+export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';