@fluentui/react-icons 2.0.324-alpha.1 → 2.0.325

package/README.md

@@ -338,7 +338,7 @@ Migrating a larger codebase to the new performant atomic imports might be a daun
 
 Use `svg` as the target path. This transformation happens at build time, so your source code remains unchanged while your bundled output gets the full tree-shaking benefits.
 
-👉 **[Build-Time Transform setup (Babel & SWC) →](./docs/build-transforms.md)**
+👉 **[Build-Time Transform setup (Babel, SWC & Webpack) →](./docs/build-transforms.md)**
 
 ## Atomic API (SVG Sprites) — ⚠️ Alpha
 
@@ -348,13 +348,13 @@ SVG sprites offer smaller bundles, faster renders, and zero runtime overhead.
 
 👉 **[Full documentation →](./docs/preview-features/svg-sprites.md)**
 
-## Base API — ⚠️ Alpha
+## Headless API — ⚠️ Alpha
 
 > **This feature is available as an alpha prerelease only.** Install via `npm i @fluentui/react-icons@alpha`
 
 A drop-in replacement for the standard API that removes the CSS-in-JS runtime — provides data-attribute selectors for styling behaviour with opt-in pre-defined vanilla CSS.
 
-👉 **[Full documentation →](./docs/preview-features/base.md)**
+👉 **[Full documentation →](./docs/preview-features/headless.md)**
 
 ## Viewing Icons
 

package/docs/build-transforms.md

@@ -20,14 +20,14 @@ import { AccessTime24Filled } from '@fluentui/react-icons/svg-sprite/access-time
 // Font icons
 import { AccessTime24Filled } from '@fluentui/react-icons/fonts/access-time';
 
-// Base API (SVG)
-import { AccessTime24Filled } from '@fluentui/react-icons/base/svg/access-time';
+// Headless API (SVG)
+import { AccessTime24Filled } from '@fluentui/react-icons/headless/svg/access-time';
 
-// Base API (SVG sprites)
-import { AccessTime24Filled } from '@fluentui/react-icons/base/svg-sprite/access-time';
+// Headless API (SVG sprites)
+import { AccessTime24Filled } from '@fluentui/react-icons/headless/svg-sprite/access-time';
 
-// Base API (fonts)
-import { AccessTime24Filled } from '@fluentui/react-icons/base/fonts/access-time';
+// Headless API (fonts)
+import { AccessTime24Filled } from '@fluentui/react-icons/headless/fonts/access-time';
 ```
 
 The examples below use `svg` as the target path. Replace it with the appropriate path for your setup from the list above.
@@ -45,7 +45,7 @@ Copy the following helper into your project (e.g. as `fluent-icons-transform.js`
  * Resolves a @fluentui/react-icons import name to its atomic module path.
  * @param {string} importName - The named export being imported.
  * @param {string} [target='svg'] - The target subpath (e.g. 'svg', 'svg-sprite', 'fonts',
- *   'base/svg', 'base/svg-sprite', 'base/fonts').
+ *   'headless/svg', 'headless/svg-sprite', 'headless/fonts').
  * @returns {string} The resolved module path.
  */
 function resolveFluentIconImport(importName, target = 'svg') {
@@ -84,7 +84,7 @@ module.exports = {
       {
         '@fluentui/react-icons': {
           // Change the second argument to match your target:
-          //   'svg' | 'svg-sprite' | 'fonts' | 'base/svg' | 'base/svg-sprite' | 'base/fonts'
+          //   'svg' | 'svg-sprite' | 'fonts' | 'headless/svg' | 'headless/svg-sprite' | 'headless/fonts'
           transform: (importName) => resolveFluentIconImport(importName, 'svg'),
           preventFullImport: false,
           skipDefaultConversion: true,
@@ -99,7 +99,7 @@ module.exports = {
 
 Add [@swc/plugin-transform-imports](https://www.npmjs.com/package/@swc/plugin-transform-imports) with the following setup.
 
-Replace every `svg` segment in the target paths below with your chosen target (`svg`, `svg-sprite`, `fonts`, `base/svg`, `base/svg-sprite`, or `base/fonts`):
+Replace every `svg` segment in the target paths below with your chosen target (`svg`, `svg-sprite`, `fonts`, `headless/svg`, `headless/svg-sprite`, or `headless/fonts`):
 
 ```jsonc
 // @filename .swcrc
@@ -140,3 +140,46 @@ Replace every `svg` segment in the target paths below with your chosen target (`
   },
 }
 ```
+
+## Webpack
+
+Install [`@fluentui/react-icons-atomic-webpack-loader`](../../react-icons-atomic-webpack-loader/README.md):
+
+```bash
+npm install @fluentui/react-icons-atomic-webpack-loader --save-dev
+```
+
+Add the loader as an `enforce: 'pre'` rule so it runs before other loaders:
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.[mc]?[jt]sx?$/,
+        enforce: 'pre',
+        use: ['@fluentui/react-icons-atomic-webpack-loader'],
+      },
+      // … your other rules (babel-loader, ts-loader, etc.)
+    ],
+  },
+};
+```
+
+> **Note:** Unlike most loaders, do **not** exclude `node_modules` — the loader needs to transform barrel imports inside dependencies too. Files without `@fluentui/react-icons` references are skipped via a fast regex pre-check.
+
+To use font icons instead of SVG, pass the `iconVariant` option:
+
+```js
+{
+  test: /\.[mc]?[jt]sx?$/,
+  enforce: 'pre',
+  use: [
+    {
+      loader: '@fluentui/react-icons-atomic-webpack-loader',
+      options: { iconVariant: 'fonts' },
+    },
+  ],
+}
+```

package/docs/preview-features/README.md

@@ -8,6 +8,6 @@
 
 SVG sprites offer smaller bundles, faster renders, and zero runtime overhead.
 
-## [Base API](./base.md)
+## [Headless API](./headless.md)
 
 A drop-in replacement for the standard API that removes the CSS-in-JS runtime — provides data-attribute selectors for styling behaviour with opt-in pre-defined vanilla CSS.

package/docs/preview-features/{base.md → headless.md}

@@ -1,10 +1,10 @@
-# Base API
+# Headless API
 
 > **⚠️ Alpha** — this feature is available as an alpha prerelease only.
 >
 > Install via `npm i @fluentui/react-icons@prerelease`
 
-The Base API is a drop-in replacement for the standard icon API that removes the CSS-in-JS runtime dependency. It provides `data-*` attribute selectors for styling behaviour with opt-in pre-defined vanilla CSS — making it suitable for any React setup, including those without a CSS-in-JS runtime.
+The Headless API is a drop-in replacement for the standard icon API that removes the CSS-in-JS runtime dependency. It provides `data-*` attribute selectors for styling behaviour with opt-in pre-defined vanilla CSS — making it suitable for any React setup, including those without a CSS-in-JS runtime.
 
 ## Benefits
 
@@ -16,9 +16,9 @@ The Base API is a drop-in replacement for the standard icon API that removes the
 
 ## How it works
 
-The standard API uses Griffel's `makeStyles` / `mergeClasses` to inject CSS rules at runtime. The base API replaces this with HTML `data-*` attributes and a shipped CSS file (`base.css`) that targets them:
+The standard API uses Griffel's `makeStyles` / `mergeClasses` to inject CSS rules at runtime. The headless API replaces this with HTML `data-*` attributes and a shipped CSS file (`headless.css`) that targets them:
 
-| Concern               | Standard (Griffel)                  | Base (CSS)                                                                 |
+| Concern               | Standard (Griffel)                  | Headless (CSS)                                                             |
 | --------------------- | ----------------------------------- | -------------------------------------------------------------------------- |
 | Base icon layout      | `useRootStyles()` → atomic classes  | `[data-fui-icon] { display: inline; line-height: 0 }`                      |
 | High-contrast mode    | `@media (forced-colors)` in JS      | `@media (forced-colors) { [data-fui-icon] { forced-color-adjust: auto } }` |
@@ -28,22 +28,22 @@ The standard API uses Griffel's `makeStyles` / `mergeClasses` to inject CSS rule
 
 ## CSS Setup
 
-You **must** import the base CSS file — this is the key difference from the standard API, which injects styles at runtime.
+You **must** import the headless CSS file — this is the key difference from the standard API, which injects styles at runtime.
 
 **For SVG icons and SVG sprites:**
 
 ```ts
-import '@fluentui/react-icons/base/base.css';
+import '@fluentui/react-icons/headless/headless.css';
 ```
 
 **For font icons** (additionally):
 
 ```ts
-import '@fluentui/react-icons/base/base-fonts.css';
-import '@fluentui/react-icons/base/base.css';
+import '@fluentui/react-icons/headless/headless-fonts.css';
+import '@fluentui/react-icons/headless/headless.css';
 ```
 
-> **Note:** `base-fonts.css` contains `@font-face` declarations with relative paths to the font files (`.woff2`, `.woff`, `.ttf`). Your bundler (webpack, Vite, esbuild) will resolve these into the dependency graph automatically, enabling font subsetting plugins to process them.
+> **Note:** `headless-fonts.css` contains `@font-face` declarations with relative paths to the font files (`.woff2`, `.woff`, `.ttf`). Your bundler (webpack, Vite, esbuild) will resolve these into the dependency graph automatically, enabling font subsetting plugins to process them.
 
 > **Tip 💡:** It's highly recommended to enable our [`react-icons-font-subsetting-webpack-plugin`](https://www.npmjs.com/package/@fluentui/react-icons-font-subsetting-webpack-plugin) to get same fonts "tree-shaking" perf boost
 
@@ -51,17 +51,17 @@ import '@fluentui/react-icons/base/base.css';
 
 ### SVG Icons
 
-Base SVG icons are grouped by icon kind and exposed via `@fluentui/react-icons/base/svg/{icon-group}`:
+Headless SVG icons are grouped by icon kind and exposed via `@fluentui/react-icons/headless/svg/{icon-group}`:
 
 ```tsx
-import '@fluentui/react-icons/base/base.css';
+import '@fluentui/react-icons/headless/headless.css';
 
 import {
   AccessTime20Filled,
   AccessTime24Filled,
   AccessTime20Regular,
-} from '@fluentui/react-icons/base/svg/access-time';
-import { Add16Filled, Add20Filled } from '@fluentui/react-icons/base/svg/add';
+} from '@fluentui/react-icons/headless/svg/access-time';
+import { Add16Filled, Add20Filled } from '@fluentui/react-icons/headless/svg/add';
 
 function MyComponent() {
   return (
@@ -75,13 +75,13 @@ function MyComponent() {
 
 ### SVG Sprites
 
-Base SVG sprites work the same way as standard SVG sprites but without Griffel:
+Headless SVG sprites work the same way as standard SVG sprites but without Griffel:
 
 ```tsx
-import '@fluentui/react-icons/base/base.css';
+import '@fluentui/react-icons/headless/headless.css';
 
-import { AccessTime20Filled, AccessTime24Filled } from '@fluentui/react-icons/base/svg-sprite/access-time';
-import { Add16Filled } from '@fluentui/react-icons/base/svg-sprite/add';
+import { AccessTime20Filled, AccessTime24Filled } from '@fluentui/react-icons/headless/svg-sprite/access-time';
+import { Add16Filled } from '@fluentui/react-icons/headless/svg-sprite/add';
 
 function MyComponent() {
   return (
@@ -97,13 +97,13 @@ function MyComponent() {
 
 ### Font Icons
 
-Base font icons require both CSS files — `base.css` for base styles and `base-fonts.css` for `@font-face` declarations:
+Headless font icons require both CSS files — `headless.css` for base styles and `headless-fonts.css` for `@font-face` declarations:
 
 ```tsx
-import '@fluentui/react-icons/base/base-fonts.css';
-import '@fluentui/react-icons/base/base.css';
+import '@fluentui/react-icons/headless/headless-fonts.css';
+import '@fluentui/react-icons/headless/headless.css';
 
-import { Airplane20Filled, Airplane24Regular } from '@fluentui/react-icons/base/fonts/airplane';
+import { Airplane20Filled, Airplane24Regular } from '@fluentui/react-icons/headless/fonts/airplane';
 
 function MyComponent() {
   return <Airplane20Filled />;
@@ -112,7 +112,7 @@ function MyComponent() {
 
 ### Utilities
 
-The base entry point (`@fluentui/react-icons/base`) re-exports all core utilities:
+The headless entry point (`@fluentui/react-icons/headless`) re-exports all core utilities:
 
 ```tsx
 import {
@@ -143,16 +143,16 @@ import {
 
   // Class name helper
   cx,
-} from '@fluentui/react-icons/base';
+} from '@fluentui/react-icons/headless';
 ```
 
 The `bundleIcon` function works identically to the standard API:
 
 ```tsx
-import '@fluentui/react-icons/base/base.css';
-import { bundleIcon } from '@fluentui/react-icons/base';
-import { AccessTimeFilled } from '@fluentui/react-icons/base/svg/access-time';
-import { AccessTimeRegular } from '@fluentui/react-icons/base/svg/access-time';
+import '@fluentui/react-icons/headless/headless.css';
+import { bundleIcon } from '@fluentui/react-icons/headless';
+import { AccessTimeFilled } from '@fluentui/react-icons/headless/svg/access-time';
+import { AccessTimeRegular } from '@fluentui/react-icons/headless/svg/access-time';
 
 const AccessTime = bundleIcon(AccessTimeFilled, AccessTimeRegular);
 
@@ -163,7 +163,7 @@ function MyComponent() {
 
 ## TypeScript Configuration
 
-**IMPORTANT**: TypeScript users must use `moduleResolution: "bundler"` (or `"node16"`/`"nodenext"`) in their `tsconfig.json` to properly resolve the base atomic exports:
+**IMPORTANT**: TypeScript users must use `moduleResolution: "bundler"` (or `"node16"`/`"nodenext"`) in their `tsconfig.json` to properly resolve the headless atomic exports:
 
 ```json
 {
@@ -175,10 +175,10 @@ function MyComponent() {
 
 ## Build-Time Transform
 
-You can keep root-level barrel imports and leverage build transforms to adopt the base API without modifying your source code. This works for both existing codebases migrating to base approach and greenfield projects.
+You can keep root-level barrel imports and leverage build transforms to adopt the headless API without modifying your source code. This works for both existing codebases migrating to headless approach and greenfield projects.
 
-Use `base/svg` as the target path (or `base/svg-sprite` for sprites, `base/fonts` for font icons).
+Use `headless/svg` as the target path (or `headless/svg-sprite` for sprites, `headless/fonts` for font icons).
 
-> **Note:** You still need to manually add the CSS import (`import '@fluentui/react-icons/base/base.css'`) to your application entry point — build transforms only rewrite component imports.
+> **Note:** You still need to manually add the CSS import (`import '@fluentui/react-icons/headless/headless.css'`) to your application entry point — build transforms only rewrite component imports.
 
 👉 **[Build-Time Transform setup (Babel & SWC) →](../build-transforms.md)**

package/docs/preview-features/svg-sprites.md

@@ -126,9 +126,8 @@ export default defineConfig({
 
 ### Webpack Plugin
 
-> **⚠️ Alpha** — this package is available as an alpha prerelease only.
->
-> Install via `npm i @fluentui/react-icons-svg-sprite-subsetting-webpack-plugin@prerelease`
+> **⚠️ 0.x** — this package is in early development and follows [zero-based major semver](https://0ver.org/).
+> Breaking changes may occur in minor releases until 1.0.
 
 To leverage performance benefits to the fullest, use the Webpack SvgSprite Subsetting Plugin. It analyzes your application's actual icon usage at build time and strips unused icon definitions from the sprite files — ensuring only icons your app references are shipped.
 

package/lib/atoms/fonts/arrow-sync-dismiss.d.ts

@@ -1,6 +1,8 @@
 import type { FluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
 export declare const ArrowSyncDismissFilled: FluentFontIcon;
 export declare const ArrowSyncDismissRegular: FluentFontIcon;
+export declare const ArrowSyncDismiss16Regular: FluentFontIcon;
+export declare const ArrowSyncDismiss16Filled: FluentFontIcon;
 export declare const ArrowSyncDismiss20Regular: FluentFontIcon;
 export declare const ArrowSyncDismiss20Filled: FluentFontIcon;
 export declare const ArrowSyncDismiss24Regular: FluentFontIcon;

package/lib/atoms/fonts/arrow-sync-dismiss.js

@@ -2,6 +2,8 @@
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
 export const ArrowSyncDismissFilled = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismissFilled", "", 2, undefined, { flipInRtl: true }));
 export const ArrowSyncDismissRegular = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismissRegular", "", 2, undefined, { flipInRtl: true }));
+export const ArrowSyncDismiss16Regular = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismiss16Regular", "󰯸", 1, 16, { flipInRtl: true }));
+export const ArrowSyncDismiss16Filled = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismiss16Filled", "󰱵", 0, 16, { flipInRtl: true }));
 export const ArrowSyncDismiss20Regular = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismiss20Regular", "", 1, 20, { flipInRtl: true }));
 export const ArrowSyncDismiss20Filled = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismiss20Filled", "", 0, 20, { flipInRtl: true }));
 export const ArrowSyncDismiss24Regular = ( /*#__PURE__*/createFluentFontIcon("ArrowSyncDismiss24Regular", "", 1, 24, { flipInRtl: true }));

package/lib/atoms/fonts/card-ui-info.d.ts

@@ -0,0 +1,9 @@
+import type { FluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
+export declare const CardUiInfoFilled: FluentFontIcon;
+export declare const CardUiInfoRegular: FluentFontIcon;
+export declare const CardUiInfo16Regular: FluentFontIcon;
+export declare const CardUiInfo16Filled: FluentFontIcon;
+export declare const CardUiInfo20Regular: FluentFontIcon;
+export declare const CardUiInfo20Filled: FluentFontIcon;
+export declare const CardUiInfo24Regular: FluentFontIcon;
+export declare const CardUiInfo24Filled: FluentFontIcon;

package/lib/atoms/fonts/card-ui-info.js

@@ -0,0 +1,10 @@
+"use client";
+import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
+export const CardUiInfoFilled = ( /*#__PURE__*/createFluentFontIcon("CardUiInfoFilled", "", 2, undefined));
+export const CardUiInfoRegular = ( /*#__PURE__*/createFluentFontIcon("CardUiInfoRegular", "", 2, undefined));
+export const CardUiInfo16Regular = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo16Regular", "󰯹", 1, 16));
+export const CardUiInfo16Filled = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo16Filled", "󰱶", 0, 16));
+export const CardUiInfo20Regular = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo20Regular", "󰯺", 1, 20));
+export const CardUiInfo20Filled = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo20Filled", "󰱷", 0, 20));
+export const CardUiInfo24Regular = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo24Regular", "󰯻", 1, 24));
+export const CardUiInfo24Filled = ( /*#__PURE__*/createFluentFontIcon("CardUiInfo24Filled", "󰱸", 0, 24));

package/lib/atoms/fonts/card-ui-portrait-flip.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CardUiPortraitFlipFilled = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlipFilled", "", 2, undefined));
-export const CardUiPortraitFlipRegular = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlipRegular", "", 2, undefined));
+export const CardUiPortraitFlipFilled = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlipFilled", "", 2, undefined));
+export const CardUiPortraitFlipRegular = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlipRegular", "", 2, undefined));
 export const CardUiPortraitFlip16Regular = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlip16Regular", "󰗹", 1, 16));
 export const CardUiPortraitFlip16Filled = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlip16Filled", "󰙵", 0, 16));
 export const CardUiPortraitFlip20Regular = ( /*#__PURE__*/createFluentFontIcon("CardUiPortraitFlip20Regular", "󰗺", 1, 20));

package/lib/atoms/fonts/caret-down-right.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CaretDownRightFilled = ( /*#__PURE__*/createFluentFontIcon("CaretDownRightFilled", "", 2, undefined));
-export const CaretDownRightRegular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRightRegular", "", 2, undefined));
+export const CaretDownRightFilled = ( /*#__PURE__*/createFluentFontIcon("CaretDownRightFilled", "", 2, undefined));
+export const CaretDownRightRegular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRightRegular", "", 2, undefined));
 export const CaretDownRight12Regular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRight12Regular", "", 1, 12));
 export const CaretDownRight12Filled = ( /*#__PURE__*/createFluentFontIcon("CaretDownRight12Filled", "", 0, 12));
 export const CaretDownRight16Regular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRight16Regular", "", 1, 16));

package/lib/atoms/fonts/caret-down.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CaretDownFilled = ( /*#__PURE__*/createFluentFontIcon("CaretDownFilled", "", 2, undefined));
-export const CaretDownRegular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRegular", "", 2, undefined));
+export const CaretDownFilled = ( /*#__PURE__*/createFluentFontIcon("CaretDownFilled", "", 2, undefined));
+export const CaretDownRegular = ( /*#__PURE__*/createFluentFontIcon("CaretDownRegular", "", 2, undefined));
 export const CaretDown12Regular = ( /*#__PURE__*/createFluentFontIcon("CaretDown12Regular", "", 1, 12));
 export const CaretDown12Filled = ( /*#__PURE__*/createFluentFontIcon("CaretDown12Filled", "", 0, 12));
 export const CaretDown16Regular = ( /*#__PURE__*/createFluentFontIcon("CaretDown16Regular", "", 1, 16));

package/lib/atoms/fonts/caret-left.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CaretLeftFilled = ( /*#__PURE__*/createFluentFontIcon("CaretLeftFilled", "", 2, undefined));
-export const CaretLeftRegular = ( /*#__PURE__*/createFluentFontIcon("CaretLeftRegular", "", 2, undefined));
+export const CaretLeftFilled = ( /*#__PURE__*/createFluentFontIcon("CaretLeftFilled", "", 2, undefined));
+export const CaretLeftRegular = ( /*#__PURE__*/createFluentFontIcon("CaretLeftRegular", "", 2, undefined));
 export const CaretLeft12Regular = ( /*#__PURE__*/createFluentFontIcon("CaretLeft12Regular", "", 1, 12));
 export const CaretLeft12Filled = ( /*#__PURE__*/createFluentFontIcon("CaretLeft12Filled", "", 0, 12));
 export const CaretLeft16Regular = ( /*#__PURE__*/createFluentFontIcon("CaretLeft16Regular", "", 1, 16));

package/lib/atoms/fonts/caret-right.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CaretRightFilled = ( /*#__PURE__*/createFluentFontIcon("CaretRightFilled", "", 2, undefined));
-export const CaretRightRegular = ( /*#__PURE__*/createFluentFontIcon("CaretRightRegular", "", 2, undefined));
+export const CaretRightFilled = ( /*#__PURE__*/createFluentFontIcon("CaretRightFilled", "", 2, undefined));
+export const CaretRightRegular = ( /*#__PURE__*/createFluentFontIcon("CaretRightRegular", "", 2, undefined));
 export const CaretRight12Regular = ( /*#__PURE__*/createFluentFontIcon("CaretRight12Regular", "", 1, 12));
 export const CaretRight12Filled = ( /*#__PURE__*/createFluentFontIcon("CaretRight12Filled", "", 0, 12));
 export const CaretRight16Regular = ( /*#__PURE__*/createFluentFontIcon("CaretRight16Regular", "", 1, 16));

package/lib/atoms/fonts/caret-up.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CaretUpFilled = ( /*#__PURE__*/createFluentFontIcon("CaretUpFilled", "", 2, undefined));
-export const CaretUpRegular = ( /*#__PURE__*/createFluentFontIcon("CaretUpRegular", "", 2, undefined));
+export const CaretUpFilled = ( /*#__PURE__*/createFluentFontIcon("CaretUpFilled", "", 2, undefined));
+export const CaretUpRegular = ( /*#__PURE__*/createFluentFontIcon("CaretUpRegular", "", 2, undefined));
 export const CaretUp12Regular = ( /*#__PURE__*/createFluentFontIcon("CaretUp12Regular", "", 1, 12));
 export const CaretUp12Filled = ( /*#__PURE__*/createFluentFontIcon("CaretUp12Filled", "", 0, 12));
 export const CaretUp16Regular = ( /*#__PURE__*/createFluentFontIcon("CaretUp16Regular", "", 1, 16));

package/lib/atoms/fonts/cart.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CartFilled = ( /*#__PURE__*/createFluentFontIcon("CartFilled", "", 2, undefined));
-export const CartRegular = ( /*#__PURE__*/createFluentFontIcon("CartRegular", "", 2, undefined));
+export const CartFilled = ( /*#__PURE__*/createFluentFontIcon("CartFilled", "", 2, undefined));
+export const CartRegular = ( /*#__PURE__*/createFluentFontIcon("CartRegular", "", 2, undefined));
 export const Cart16Regular = ( /*#__PURE__*/createFluentFontIcon("Cart16Regular", "", 1, 16));
 export const Cart16Filled = ( /*#__PURE__*/createFluentFontIcon("Cart16Filled", "", 0, 16));
 export const Cart20Regular = ( /*#__PURE__*/createFluentFontIcon("Cart20Regular", "", 1, 20));

package/lib/atoms/fonts/cast-multiple.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CastMultipleFilled = ( /*#__PURE__*/createFluentFontIcon("CastMultipleFilled", "", 2, undefined));
-export const CastMultipleRegular = ( /*#__PURE__*/createFluentFontIcon("CastMultipleRegular", "", 2, undefined));
+export const CastMultipleFilled = ( /*#__PURE__*/createFluentFontIcon("CastMultipleFilled", "", 2, undefined));
+export const CastMultipleRegular = ( /*#__PURE__*/createFluentFontIcon("CastMultipleRegular", "", 2, undefined));
 export const CastMultiple20Regular = ( /*#__PURE__*/createFluentFontIcon("CastMultiple20Regular", "󰋐", 1, 20));
 export const CastMultiple20Filled = ( /*#__PURE__*/createFluentFontIcon("CastMultiple20Filled", "󰋣", 0, 20));
 export const CastMultiple24Regular = ( /*#__PURE__*/createFluentFontIcon("CastMultiple24Regular", "󰋑", 1, 24));

package/lib/atoms/fonts/cast.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CastFilled = ( /*#__PURE__*/createFluentFontIcon("CastFilled", "", 2, undefined));
-export const CastRegular = ( /*#__PURE__*/createFluentFontIcon("CastRegular", "", 2, undefined));
+export const CastFilled = ( /*#__PURE__*/createFluentFontIcon("CastFilled", "", 2, undefined));
+export const CastRegular = ( /*#__PURE__*/createFluentFontIcon("CastRegular", "", 2, undefined));
 export const Cast20Regular = ( /*#__PURE__*/createFluentFontIcon("Cast20Regular", "", 1, 20));
 export const Cast20Filled = ( /*#__PURE__*/createFluentFontIcon("Cast20Filled", "", 0, 20));
 export const Cast24Regular = ( /*#__PURE__*/createFluentFontIcon("Cast24Regular", "", 1, 24));

package/lib/atoms/fonts/catch-up.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CatchUpFilled = ( /*#__PURE__*/createFluentFontIcon("CatchUpFilled", "", 2, undefined));
-export const CatchUpRegular = ( /*#__PURE__*/createFluentFontIcon("CatchUpRegular", "", 2, undefined));
+export const CatchUpFilled = ( /*#__PURE__*/createFluentFontIcon("CatchUpFilled", "", 2, undefined));
+export const CatchUpRegular = ( /*#__PURE__*/createFluentFontIcon("CatchUpRegular", "", 2, undefined));
 export const CatchUp16Regular = ( /*#__PURE__*/createFluentFontIcon("CatchUp16Regular", "", 1, 16));
 export const CatchUp16Filled = ( /*#__PURE__*/createFluentFontIcon("CatchUp16Filled", "", 0, 16));
 export const CatchUp20Regular = ( /*#__PURE__*/createFluentFontIcon("CatchUp20Regular", "", 1, 20));

package/lib/atoms/fonts/cellular-3-g.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const Cellular3GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular3GFilled", "", 2, undefined));
-export const Cellular3GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular3GRegular", "", 2, undefined));
+export const Cellular3GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular3GFilled", "", 2, undefined));
+export const Cellular3GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular3GRegular", "", 2, undefined));
 export const Cellular3G20Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular3G20Regular", "", 1, 20));
 export const Cellular3G20Filled = ( /*#__PURE__*/createFluentFontIcon("Cellular3G20Filled", "", 0, 20));
 export const Cellular3G24Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular3G24Regular", "", 1, 24));

package/lib/atoms/fonts/cellular-4-g.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const Cellular4GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular4GFilled", "", 2, undefined));
-export const Cellular4GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular4GRegular", "", 2, undefined));
+export const Cellular4GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular4GFilled", "", 2, undefined));
+export const Cellular4GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular4GRegular", "", 2, undefined));
 export const Cellular4G20Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular4G20Regular", "", 1, 20));
 export const Cellular4G20Filled = ( /*#__PURE__*/createFluentFontIcon("Cellular4G20Filled", "", 0, 20));
 export const Cellular4G24Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular4G24Regular", "", 1, 24));

package/lib/atoms/fonts/cellular-5-g.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const Cellular5GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular5GFilled", "", 2, undefined));
-export const Cellular5GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular5GRegular", "", 2, undefined));
+export const Cellular5GFilled = ( /*#__PURE__*/createFluentFontIcon("Cellular5GFilled", "", 2, undefined));
+export const Cellular5GRegular = ( /*#__PURE__*/createFluentFontIcon("Cellular5GRegular", "", 2, undefined));
 export const Cellular5G20Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular5G20Regular", "", 1, 20));
 export const Cellular5G20Filled = ( /*#__PURE__*/createFluentFontIcon("Cellular5G20Filled", "", 0, 20));
 export const Cellular5G24Regular = ( /*#__PURE__*/createFluentFontIcon("Cellular5G24Regular", "", 1, 24));

package/lib/atoms/fonts/cellular-data.js

@@ -1,15 +1,15 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CellularData1Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData1Regular", "", 2, undefined));
-export const CellularData1Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData1Filled", "", 2, undefined));
-export const CellularData2Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData2Regular", "", 2, undefined));
-export const CellularData2Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData2Filled", "", 2, undefined));
-export const CellularData3Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData3Regular", "", 2, undefined));
-export const CellularData3Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData3Filled", "", 2, undefined));
-export const CellularData4Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData4Regular", "", 2, undefined));
-export const CellularData4Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData4Filled", "", 2, undefined));
-export const CellularData5Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData5Regular", "", 2, undefined));
-export const CellularData5Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData5Filled", "", 2, undefined));
+export const CellularData1Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData1Regular", "", 2, undefined));
+export const CellularData1Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData1Filled", "", 2, undefined));
+export const CellularData2Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData2Regular", "", 2, undefined));
+export const CellularData2Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData2Filled", "", 2, undefined));
+export const CellularData3Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData3Regular", "", 2, undefined));
+export const CellularData3Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData3Filled", "", 2, undefined));
+export const CellularData4Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData4Regular", "", 2, undefined));
+export const CellularData4Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData4Filled", "", 2, undefined));
+export const CellularData5Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData5Regular", "", 2, undefined));
+export const CellularData5Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData5Filled", "", 2, undefined));
 export const CellularData120Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData120Regular", "", 1, 20));
 export const CellularData120Filled = ( /*#__PURE__*/createFluentFontIcon("CellularData120Filled", "", 0, 20));
 export const CellularData124Regular = ( /*#__PURE__*/createFluentFontIcon("CellularData124Regular", "", 1, 24));

package/lib/atoms/fonts/cellular-off.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CellularOffFilled = ( /*#__PURE__*/createFluentFontIcon("CellularOffFilled", "", 2, undefined));
-export const CellularOffRegular = ( /*#__PURE__*/createFluentFontIcon("CellularOffRegular", "", 2, undefined));
+export const CellularOffFilled = ( /*#__PURE__*/createFluentFontIcon("CellularOffFilled", "", 2, undefined));
+export const CellularOffRegular = ( /*#__PURE__*/createFluentFontIcon("CellularOffRegular", "", 2, undefined));
 export const CellularOff20Regular = ( /*#__PURE__*/createFluentFontIcon("CellularOff20Regular", "", 1, 20));
 export const CellularOff20Filled = ( /*#__PURE__*/createFluentFontIcon("CellularOff20Filled", "", 0, 20));
 export const CellularOff24Regular = ( /*#__PURE__*/createFluentFontIcon("CellularOff24Regular", "", 1, 24));

package/lib/atoms/fonts/cellular-warning.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CellularWarningFilled = ( /*#__PURE__*/createFluentFontIcon("CellularWarningFilled", "", 2, undefined));
-export const CellularWarningRegular = ( /*#__PURE__*/createFluentFontIcon("CellularWarningRegular", "", 2, undefined));
+export const CellularWarningFilled = ( /*#__PURE__*/createFluentFontIcon("CellularWarningFilled", "", 2, undefined));
+export const CellularWarningRegular = ( /*#__PURE__*/createFluentFontIcon("CellularWarningRegular", "", 2, undefined));
 export const CellularWarning20Regular = ( /*#__PURE__*/createFluentFontIcon("CellularWarning20Regular", "", 1, 20));
 export const CellularWarning20Filled = ( /*#__PURE__*/createFluentFontIcon("CellularWarning20Filled", "", 0, 20));
 export const CellularWarning24Regular = ( /*#__PURE__*/createFluentFontIcon("CellularWarning24Regular", "", 1, 24));

package/lib/atoms/fonts/center-horizontal.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CenterHorizontalFilled = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontalFilled", "", 2, undefined));
-export const CenterHorizontalRegular = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontalRegular", "", 2, undefined));
+export const CenterHorizontalFilled = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontalFilled", "", 2, undefined));
+export const CenterHorizontalRegular = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontalRegular", "", 2, undefined));
 export const CenterHorizontal20Regular = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontal20Regular", "", 1, 20));
 export const CenterHorizontal20Filled = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontal20Filled", "", 0, 20));
 export const CenterHorizontal24Regular = ( /*#__PURE__*/createFluentFontIcon("CenterHorizontal24Regular", "", 1, 24));

package/lib/atoms/fonts/center-vertical.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CenterVerticalFilled = ( /*#__PURE__*/createFluentFontIcon("CenterVerticalFilled", "", 2, undefined));
-export const CenterVerticalRegular = ( /*#__PURE__*/createFluentFontIcon("CenterVerticalRegular", "", 2, undefined));
+export const CenterVerticalFilled = ( /*#__PURE__*/createFluentFontIcon("CenterVerticalFilled", "", 2, undefined));
+export const CenterVerticalRegular = ( /*#__PURE__*/createFluentFontIcon("CenterVerticalRegular", "", 2, undefined));
 export const CenterVertical20Regular = ( /*#__PURE__*/createFluentFontIcon("CenterVertical20Regular", "", 1, 20));
 export const CenterVertical20Filled = ( /*#__PURE__*/createFluentFontIcon("CenterVertical20Filled", "", 0, 20));
 export const CenterVertical24Regular = ( /*#__PURE__*/createFluentFontIcon("CenterVertical24Regular", "", 1, 24));

package/lib/atoms/fonts/certificate-off.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CertificateOffFilled = ( /*#__PURE__*/createFluentFontIcon("CertificateOffFilled", "", 2, undefined));
-export const CertificateOffRegular = ( /*#__PURE__*/createFluentFontIcon("CertificateOffRegular", "", 2, undefined));
+export const CertificateOffFilled = ( /*#__PURE__*/createFluentFontIcon("CertificateOffFilled", "", 2, undefined));
+export const CertificateOffRegular = ( /*#__PURE__*/createFluentFontIcon("CertificateOffRegular", "", 2, undefined));
 export const CertificateOff16Regular = ( /*#__PURE__*/createFluentFontIcon("CertificateOff16Regular", "󰭤", 1, 16));
 export const CertificateOff16Filled = ( /*#__PURE__*/createFluentFontIcon("CertificateOff16Filled", "󰯢", 0, 16));
 export const CertificateOff20Regular = ( /*#__PURE__*/createFluentFontIcon("CertificateOff20Regular", "󰭥", 1, 20));

package/lib/atoms/fonts/certificate.js

@@ -1,7 +1,7 @@
 "use client";
 import { createFluentFontIcon } from '../../utils/fonts/createFluentFontIcon';
-export const CertificateFilled = ( /*#__PURE__*/createFluentFontIcon("CertificateFilled", "", 2, undefined));
-export const CertificateRegular = ( /*#__PURE__*/createFluentFontIcon("CertificateRegular", "", 2, undefined));
+export const CertificateFilled = ( /*#__PURE__*/createFluentFontIcon("CertificateFilled", "", 2, undefined));
+export const CertificateRegular = ( /*#__PURE__*/createFluentFontIcon("CertificateRegular", "", 2, undefined));
 export const Certificate16Regular = ( /*#__PURE__*/createFluentFontIcon("Certificate16Regular", "", 1, 16));
 export const Certificate16Filled = ( /*#__PURE__*/createFluentFontIcon("Certificate16Filled", "", 0, 16));
 export const Certificate20Regular = ( /*#__PURE__*/createFluentFontIcon("Certificate20Regular", "", 1, 20));