npm - @serenis/icons - Versions diffs - 2.42.0 → 2.43.0 - Mend

@serenis/icons 2.42.0 → 2.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -8,22 +8,17 @@ Icon component library for the Serenis design system. Wraps custom SVG icons and
 npm install @serenis/icons
 ```
-Peer dependencies (must be installed by the consuming app):
-- `react` >= 19.0.0
-- `@serenis/design-tokens`
 ## Quick start
 ```bash
 # Build
-yarn workspace icons build
+yarn workspace @serenis/icons build
 # Dev (watch mode)
-yarn workspace icons dev
+yarn workspace @serenis/icons dev
 # Typecheck
-yarn workspace icons typecheck
+yarn workspace @serenis/icons typecheck
 ```
 ```tsx
@@ -92,7 +87,7 @@ const Icon = ({ Svg, colorName, fillColorName, size }: IconProps): JSX.Element |
 }
 ```
-- **`colorName`** — maps to `color` (stroke) via `cssvarColor()` from `design-tokens`. Omitting it defaults to `currentColor`, inheriting from the parent text color.
+- **`colorName`** — maps to `color` (stroke) via `cssvarColor()` from `@serenis/design-tokens`. Omitting it defaults to `currentColor`, inheriting from the parent text color.
 - **`fillColorName`** — maps to `fill` via `cssvarColor()`. Omitting it defaults to `none`. Rarely used (stars, a few nav icons).
 - **`size`** — applied to both `width` and `height`.
@@ -168,7 +163,7 @@ import {
 ### Passing icons as props
-Many `ui` components accept `IconElement` as a prop:
+Many `@serenis/ui` components accept `IconElement` as a prop:
 ```tsx
 // Button with start icon
@@ -288,20 +283,20 @@ export { IconMyIcon, MyIcon } from './components/MyIcon'
 1. **Build and typecheck**:
 ```bash
-yarn workspace icons build
-yarn workspace icons typecheck
+yarn workspace @serenis/icons build
+yarn workspace @serenis/icons typecheck
 ```
 The new icon will automatically appear in the Storybook Playground story.
 ## Build
-The package is bundled with [tsup](https://tsup.egoist.dev/) into ESM + CJS + TypeScript declarations. Workspace dependencies (`design-tokens`, `iconoir-react`, `react`) are externalized.
+The package is bundled with [tsup](https://tsup.egoist.dev/) into ESM + CJS + TypeScript declarations. Workspace dependencies (`@serenis/design-tokens`, `iconoir-react`, `react`) are externalized.
 ## Consumers
 - **Apps**: `apps/web` (primary consumer), `apps/blog`, `apps/nutrition-blog`, `apps/website`
-- **Libraries**: `libraries/ui` (Button, Modal, Accordion, Breadcrumbs, FileUploadField, etc.), `libraries/shared-components` (Nav)
+- **Libraries**: `libraries/ui` (`@serenis/ui` — Button, Modal, Accordion, Breadcrumbs, FileUploadField, etc.), `libraries/shared-components` (`@serenis/shared-components` — Nav)
 ## Documentation

package/dist/index.cjs CHANGED Viewed

@@ -269,6 +269,7 @@ __export(index_exports, {
   IconSharePath: () => IconSharePath,
   IconShield: () => IconShield,
   IconShoppingList: () => IconShoppingList,
+  IconSparkle: () => IconSparkle,
   IconStar: () => IconStar,
   IconStudio: () => IconStudio,
   IconSubstack: () => IconSubstack,
@@ -405,6 +406,7 @@ __export(index_exports, {
   SharePath: () => SharePath,
   Shield: () => Shield,
   ShoppingList: () => ShoppingList,
+  Sparkle: () => Sparkle,
   Sphere: () => import_iconoir_react.Sphere,
   Star: () => Star,
   StatsUpSquare: () => import_iconoir_react.StatsUpSquare,
@@ -2956,9 +2958,23 @@ var ShoppingList = ({ color, width, height }) => /* @__PURE__ */ (0, import_jsx_
 ) });
 var IconShoppingList = (props) => /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(Icon_default, __spreadValues({ Svg: ShoppingList }, props));
-// src/components/Star.tsx
+// src/components/Sparkle.tsx
 var import_jsx_runtime156 = require("react/jsx-runtime");
-var Star = ({ color, fill, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+var Sparkle = ({ color, fill, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+  "path",
+  {
+    d: "M12 3.75c.45 4.95 3.3 7.8 8.25 8.25-4.95.45-7.8 3.3-8.25 8.25-.45-4.95-3.3-7.8-8.25-8.25C8.7 11.55 11.55 8.7 12 3.75Z",
+    fill,
+    stroke: color,
+    strokeLinejoin: "round",
+    strokeWidth: "1.4"
+  }
+) });
+var IconSparkle = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Icon_default, __spreadValues({ Svg: Sparkle }, props));
+// src/components/Star.tsx
+var import_jsx_runtime157 = require("react/jsx-runtime");
+var Star = ({ color, fill, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
   "path",
   {
     d: "M10.3701 2.35345c.5939-1.13793 2.1659-1.13793 2.7599 0l2.5621 4.9089 5.2773 1.0326c1.2184.2384 1.7023 1.78115.8531 2.71965l-3.694 4.0827.6905 5.5603c.1592 1.2814-1.1108 2.2371-2.2331 1.6804L11.75 19.9395 6.91415 22.338c-1.1223.5567-2.39229-.399-2.23316-1.6804l.69051-5.5603-3.69405-4.0827c-.849184-.9385-.36519-2.48125.85322-2.71965l5.27723-1.0326 2.5622-4.9089Z",
@@ -2969,11 +2985,11 @@ var Star = ({ color, fill, height, width }) => /* @__PURE__ */ (0, import_jsx_ru
     strokeWidth: "1.4"
   }
 ) });
-var IconStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Icon_default, __spreadValues({ Svg: Star }, props));
+var IconStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Icon_default, __spreadValues({ Svg: Star }, props));
 // src/components/Test.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
-var Test = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("svg", { fill: "none", height, viewBox: "0 0 22 23", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+var import_jsx_runtime158 = require("react/jsx-runtime");
+var Test = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("svg", { fill: "none", height, viewBox: "0 0 22 23", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
   "path",
   {
     d: "M4.9403.8196V21.315m3.77-15.9025h5.6547M8.7102 8.7111h2.8274m2.5914 12.6166c-1.2002.0623-2.6846.1068-4.4763.1068-3.0054 0-5.146-.1252-6.5309-.2494-1.1999-.1077-2.0994-1.0445-2.1857-2.2461-.1139-1.5865-.2369-4.1594-.2369-7.8717s.123-6.2851.2369-7.8716C1.0224 1.994 1.922 1.0573 3.1218.9496 4.5067.8253 6.6473.7002 9.6527.7002s5.146.1251 6.5309.2494c1.1998.1077 2.0995 1.0457 2.1857 2.2472.0222.3083.0446.6538.0664 1.0376M16.2499 18.136s.9425.4712 2.3562.4712 2.3562-.4712 2.3562-.4712m-4.7124 1.7958c0 .6427.3413 1.2365.9702 1.3692.3573.0754.8171.1336 1.386.1336s1.0288-.0582 1.386-.1336c.629-.1327.9702-.7265.9702-1.3692V9.5476c0-.2413-.0456-.48-.1628-.691-.2034-.3657-.6163-1.0044-1.3419-1.734a1.198 1.198 0 0 0-1.703 0c-.7256.7296-1.1385 1.3683-1.3419 1.734-.1172.211-.1628.4497-.1628.691z",
@@ -2983,12 +2999,12 @@ var Test = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime1
     strokeWidth: "1.4"
   }
 ) });
-var IconTest = (props) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Icon_default, __spreadValues({ Svg: Test }, props));
+var IconTest = (props) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Icon_default, __spreadValues({ Svg: Test }, props));
 // src/components/Studio.tsx
-var import_jsx_runtime158 = require("react/jsx-runtime");
-var Studio = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+var import_jsx_runtime159 = require("react/jsx-runtime");
+var Studio = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
     "path",
     {
       d: "M2.43112 13.8339c-.05084-1.2567.70577-2.4369 2.08851-2.4853.4136-.0145.88616.0022 1.41685.0696 1.14882.1459 1.94809 1.06 2.07306 2.108.616 5.1663.37114 8.8175.37114 8.8175H4.88141c-1.04832 0-1.92304-.7319-2.00389-1.6817-.26187-3.0763-.3868-5.3545-.4464-6.8281ZM22.4263 13.8339c.0508-1.2567-.7058-2.4369-2.0885-2.4853-.4136-.0145-.8862.0022-1.4169.0696-1.1487.1459-1.948 1.06-2.073 2.108-.616 5.1663-.3712 8.8175-.3712 8.8175h3.4993c1.0483 0 1.923-.7319 2.0039-1.6817.2619-3.0763.3868-5.3545.4464-6.8281ZM8.42871 22.3438h7.99999M16.4287 15.3438H8.42871",
@@ -2998,7 +3014,7 @@ var Studio = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtim
       strokeWidth: "1.2"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
     "path",
     {
       d: "M20.3129 11.3437c.0553-1.36681.0966-2.95225.1156-4.78712.0146-1.39787-.8849-2.62413-2.3489-2.84744-1.2732-.19419-3.1148-.36539-5.6509-.36539-2.53604 0-4.37763.1712-5.65078.36539-1.46404.22331-2.36353 1.44957-2.34904 2.84744.01903 1.83491.0604 3.42031.11563 4.78712",
@@ -3009,11 +3025,11 @@ var Studio = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtim
     }
   )
 ] });
-var IconStudio = (props) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Icon_default, __spreadValues({ Svg: Studio }, props));
+var IconStudio = (props) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Icon_default, __spreadValues({ Svg: Studio }, props));
 // src/components/Substack.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
-var Substack = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+var import_jsx_runtime160 = require("react/jsx-runtime");
+var Substack = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
   "path",
   {
     clipRule: "evenodd",
@@ -3022,14 +3038,14 @@ var Substack = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runt
     fillRule: "evenodd"
   }
 ) });
-var IconSubstack = (props) => /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Icon_default, __spreadValues({ Svg: Substack }, props));
+var IconSubstack = (props) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon_default, __spreadValues({ Svg: Substack }, props));
 // src/components/SuccessSolid.tsx
 var import_design_tokens37 = require("@serenis/design-tokens");
-var import_jsx_runtime160 = require("react/jsx-runtime");
-var SuccessSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("circle", { cx: "12", cy: "12", fill: color, r: "12" }),
-  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+var import_jsx_runtime161 = require("react/jsx-runtime");
+var SuccessSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("circle", { cx: "12", cy: "12", fill: color, r: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
     "path",
     {
       d: "M10.7 17.74c.43 0 .77-.2 1.03-.6l5.48-8.58c.08-.13.15-.26.2-.39.07-.14.1-.27.1-.4a.83.83 0 0 0-.33-.7 1.1 1.1 0 0 0-.73-.27c-.35 0-.65.2-.89.58l-4.9 7.87-2.32-2.97a1.27 1.27 0 0 0-.43-.4.99.99 0 0 0-.47-.1c-.3 0-.54.1-.73.3-.2.2-.29.45-.29.73 0 .28.1.54.31.8l2.9 3.54c.15.2.31.34.49.44.17.1.37.15.59.15Z",
@@ -3037,22 +3053,22 @@ var SuccessSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_
     }
   )
 ] });
-var IconSuccessSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Icon_default, __spreadValues({ Svg: SuccessSolid }, props));
+var IconSuccessSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon_default, __spreadValues({ Svg: SuccessSolid }, props));
 // src/components/Support.tsx
-var import_jsx_runtime161 = require("react/jsx-runtime");
-var Support = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+var import_jsx_runtime162 = require("react/jsx-runtime");
+var Support = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
   "path",
   {
     d: "M8.3 9.747a.7.7 0 1 0 1.4 0H8.3Zm3 5.253a.7.7 0 1 0 1.4 0h-1.4Zm1.4 2.5a.7.7 0 1 0-1.4 0h1.4Zm-1.4 1a.7.7 0 1 0 1.4 0h-1.4ZM12 1.7c5.689 0 10.3 4.611 10.3 10.3h1.4C23.7 5.538 18.462.3 12 .3v1.4ZM22.3 12c0 5.689-4.611 10.3-10.3 10.3v1.4c6.462 0 11.7-5.238 11.7-11.7h-1.4ZM12 22.3C6.311 22.3 1.7 17.689 1.7 12H.3c0 6.462 5.238 11.7 11.7 11.7v-1.4ZM1.7 12C1.7 6.311 6.311 1.7 12 1.7V.3C5.538.3.3 5.538.3 12h1.4ZM12 7.7c1.33 0 2.3.973 2.3 2.047h1.4c0-1.96-1.716-3.447-3.7-3.447v1.4ZM9.7 9.747c0-1.074.97-2.047 2.3-2.047V6.3c-1.984 0-3.7 1.487-3.7 3.447h1.4Zm4.6 0c0 1.063-.554 1.696-1.235 2.235a14.15 14.15 0 0 1-.525.39c-.171.124-.354.255-.515.387-.275.226-.725.633-.725 1.241h1.4c0 .108-.075.078.213-.158.12-.099.265-.203.445-.333.174-.125.374-.27.577-.43.82-.649 1.765-1.642 1.765-3.332h-1.4ZM11.3 14v1h1.4v-1h-1.4Zm0 3.5v1h1.4v-1h-1.4Z",
     fill: color
   }
 ) });
-var IconSupport = (props) => /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon_default, __spreadValues({ Svg: Support }, props));
+var IconSupport = (props) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Icon_default, __spreadValues({ Svg: Support }, props));
 // src/components/SupportHeadphone.tsx
-var import_jsx_runtime162 = require("react/jsx-runtime");
-var SupportHeadphone = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+var import_jsx_runtime163 = require("react/jsx-runtime");
+var SupportHeadphone = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
   "path",
   {
     d: "M12 21.98c6.89 0 9.5-1.43 9.5-6.66m-19-2.41c0-.83.53-1.56 1.33-1.76.77-.19 1.79-.4 2.79-.51.68-.07 1.28.33 1.4 1 .1.6.18 1.47.18 2.73 0 1.27-.09 2.15-.19 2.74-.11.67-.71 1.07-1.4 1-1-.1-2-.32-2.78-.51-.8-.2-1.33-.93-1.33-1.76zm0 0v-1.38a9.5 9.5 0 1 1 19 0v1.38m0 0c0-.83-.53-1.56-1.33-1.76a21 21 0 0 0-2.79-.51c-.68-.07-1.28.33-1.4 1-.1.6-.18 1.47-.18 2.73 0 1.27.09 2.15.19 2.74.11.67.71 1.07 1.4 1 1-.1 2-.32 2.78-.51.8-.2 1.33-.93 1.33-1.76z",
@@ -3061,11 +3077,11 @@ var SupportHeadphone = ({ width, height, color }) => /* @__PURE__ */ (0, import_
     strokeWidth: "1.4"
   }
 ) });
-var IconSupportHeadphone = (props) => /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Icon_default, __spreadValues({ Svg: SupportHeadphone }, props));
+var IconSupportHeadphone = (props) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon_default, __spreadValues({ Svg: SupportHeadphone }, props));
 // src/components/Telegram.tsx
-var import_jsx_runtime163 = require("react/jsx-runtime");
-var Telegram = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+var import_jsx_runtime164 = require("react/jsx-runtime");
+var Telegram = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
   "path",
   {
     d: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20m4 6a476.3 476.3 0 0 0-10.3 4.4q0 .5 1.2.7l1.5.4q.5 0 1.1-.4l4.4-2.8v.2c0 .2-2.5 2.5-2.7 2.7-.5.6-1.2 1-.2 1.6l2.2 1.5c.6.3 1 .8 1.6.7q.5 0 .7-1l1-7.9z",
@@ -3073,40 +3089,40 @@ var Telegram = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runt
     fillRule: "evenodd"
   }
 ) });
-var IconTelegram = (props) => /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon_default, __spreadValues({ Svg: Telegram }, props));
+var IconTelegram = (props) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Icon_default, __spreadValues({ Svg: Telegram }, props));
 // src/components/TikTok.tsx
-var import_jsx_runtime164 = require("react/jsx-runtime");
-var TikTok = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var TikTok = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "path",
     {
       d: "M10.074 9.95v-.688a5.314 5.314 0 0 0-.721-.053A5.359 5.359 0 0 0 4 14.562a5.35 5.35 0 0 0 2.285 4.383A5.331 5.331 0 0 1 4.847 15.3a5.358 5.358 0 0 1 5.227-5.35Z",
       fill: color !== "currentColor" ? color : "#25F4EE"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "path",
     {
       d: "M10.2 17.745a2.446 2.446 0 0 0 2.44-2.352l.004-11.655h2.13A4.051 4.051 0 0 1 14.705 3h-2.908l-.005 11.655a2.445 2.445 0 0 1-2.44 2.353c-.409 0-.794-.103-1.133-.281a2.442 2.442 0 0 0 1.982 1.02l-.001-.002ZM18.751 7.693v-.647a4.023 4.023 0 0 1-2.203-.655 4.048 4.048 0 0 0 2.203 1.302Z",
       fill: color !== "currentColor" ? color : "#25F4EE"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "path",
     {
       d: "M16.548 6.39a4.028 4.028 0 0 1-.995-2.653h-.78a4.054 4.054 0 0 0 1.775 2.653ZM9.353 12.118a2.448 2.448 0 0 0-2.445 2.445c0 .938.532 1.754 1.31 2.163a2.428 2.428 0 0 1-.463-1.425 2.448 2.448 0 0 1 2.445-2.445c.252 0 .493.042.722.112V10a5.313 5.313 0 0 0-.722-.053c-.042 0-.084.003-.127.003v2.28a2.403 2.403 0 0 0-.721-.112Z",
       fill: color !== "currentColor" ? color : "#FE2C55"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "path",
     {
       d: "M18.752 7.693v2.261a6.919 6.919 0 0 1-4.046-1.3v5.91a5.359 5.359 0 0 1-5.353 5.352c-1.141 0-2.199-.36-3.068-.97a5.34 5.34 0 0 0 3.916 1.708 5.359 5.359 0 0 0 5.353-5.353v-5.91a6.914 6.914 0 0 0 4.046 1.301V7.783c-.29 0-.575-.031-.848-.09Z",
       fill: color !== "currentColor" ? color : "#FE2C55"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "path",
     {
       d: "M14.705 14.563v-5.91a6.915 6.915 0 0 0 4.047 1.3v-2.26a4.048 4.048 0 0 1-2.204-1.303 4.054 4.054 0 0 1-1.774-2.653h-2.13l-.004 11.655a2.44 2.44 0 0 1-4.422 1.333 2.445 2.445 0 0 1-1.31-2.163 2.448 2.448 0 0 1 2.445-2.445c.251 0 .492.042.721.113V9.95a5.358 5.358 0 0 0-5.227 5.35 5.33 5.33 0 0 0 1.438 3.644c.87.61 1.927.97 3.068.97a5.359 5.359 0 0 0 5.352-5.353v.002Z",
@@ -3114,14 +3130,14 @@ var TikTok = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtim
     }
   )
 ] });
-var IconTikTok = (props) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Icon_default, __spreadValues({ Svg: TikTok }, props));
+var IconTikTok = (props) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Icon_default, __spreadValues({ Svg: TikTok }, props));
 // src/components/WarningSolid.tsx
 var import_design_tokens38 = require("@serenis/design-tokens");
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var WarningSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("circle", { cx: "12", cy: "12", fill: color, r: "12" }),
-  /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var WarningSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("circle", { cx: "12", cy: "12", fill: color, r: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
     "path",
     {
       d: "M11.7 7.08a.8.8 0 0 0-.41.43c-.02.06-.03.35-.03.65 0 .61.03.7.31.94.14.1.19.12.43.12s.29-.01.43-.12c.25-.21.3-.34.32-.82.03-.72-.09-1.04-.45-1.2a.7.7 0 0 0-.6 0m0 4a.8.8 0 0 0-.41.43c-.04.14-.04 6.32 0 6.46.04.15.26.4.42.46a.7.7 0 0 0 .78-.14c.26-.25.25-.04.26-3.4 0-2.12 0-3.13-.03-3.28a1 1 0 0 0-.15-.34A.8.8 0 0 0 12 11a1 1 0 0 0-.3.08",
@@ -3129,11 +3145,11 @@ var WarningSolid = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_
     }
   )
 ] });
-var IconWarningSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(Icon_default, __spreadValues({ Svg: WarningSolid }, props));
+var IconWarningSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Icon_default, __spreadValues({ Svg: WarningSolid }, props));
 // src/components/WebcamOff.tsx
-var import_jsx_runtime166 = require("react/jsx-runtime");
-var WebcamOff = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var WebcamOff = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
   "path",
   {
     d: "M4.67 4.74a36 36 0 0 1 4.5-.27c2.34 0 4.18.2 5.41.4A2.3 2.3 0 0 1 16.54 7q.07.9.12 2.23a20 20 0 0 1 3.85-1.99 1.2 1.2 0 0 1 1.61 1 29 29 0 0 1 0 7.5 1.2 1.2 0 0 1-1.6 1 20 20 0 0 1-3.86-1.99q-.04 1.08-.1 1.87m-1.05 2.15q-.4.27-.93.36c-1.23.2-3.07.4-5.4.4s-4.18-.2-5.41-.4a2.3 2.3 0 0 1-1.96-2.15A65 65 0 0 1 1.64 12c0-2.2.09-3.86.17-4.99a2.4 2.4 0 0 1 .56-1.37M1.64 1.7l20.72 20.71",
@@ -3143,11 +3159,11 @@ var WebcamOff = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_run
     strokeWidth: "1.4"
   }
 ) });
-var IconWebcamOff = (props) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Icon_default, __spreadValues({ Svg: WebcamOff }, props));
+var IconWebcamOff = (props) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Icon_default, __spreadValues({ Svg: WebcamOff }, props));
 // src/components/WebcamOn.tsx
-var import_jsx_runtime167 = require("react/jsx-runtime");
-var WebcamOn = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var WebcamOn = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
   "path",
   {
     d: "M4.24 19.62a2.45 2.45 0 0 1-2.08-2.28A66 66 0 0 1 2 12.5c0-2.1.08-3.72.16-4.84.09-1.17.92-2.1 2.08-2.28 1.22-.2 3-.38 5.26-.38s4.04.19 5.26.38a2.45 2.45 0 0 1 2.08 2.28q.07.9.12 2.22a20 20 0 0 1 4.1-2.17c.79-.3 1.6.22 1.71 1.05a30 30 0 0 1 0 7.48c-.1.83-.92 1.35-1.7 1.05a20 20 0 0 1-4.11-2.17q-.05 1.32-.12 2.22a2.45 2.45 0 0 1-2.08 2.28c-1.22.2-3 .38-5.26.38s-4.04-.19-5.26-.38",
@@ -3157,26 +3173,26 @@ var WebcamOn = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runt
     strokeWidth: "1.4"
   }
 ) });
-var IconWebcamOn = (props) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Icon_default, __spreadValues({ Svg: WebcamOn }, props));
+var IconWebcamOn = (props) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Icon_default, __spreadValues({ Svg: WebcamOn }, props));
 // src/components/Whatsapp.tsx
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var Whatsapp = ({ height, width }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("svg", { fill: "none", height, viewBox: "0 0 32 32", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var Whatsapp = ({ height, width }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("svg", { fill: "none", height, viewBox: "0 0 32 32", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
     "path",
     {
       d: "m0 32 2.26-8.217a15.774 15.774 0 0 1-2.126-7.927C.138 7.113 7.284 0 16.067 0a15.87 15.87 0 0 1 11.27 4.65A15.722 15.722 0 0 1 32 15.87c-.004 8.742-7.152 15.856-15.933 15.856h-.007a15.98 15.98 0 0 1-7.614-1.93L0 32Z",
       fill: "#fff"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
     "path",
     {
       d: "M16.072 2.679c-7.305 0-13.246 5.912-13.248 13.178a13.103 13.103 0 0 0 2.024 7.014l.315.499-1.338 4.863 5.013-1.309.483.286a13.27 13.27 0 0 0 6.74 1.837h.006c7.299 0 13.24-5.912 13.242-13.18a13.043 13.043 0 0 0-1-5.048 13.092 13.092 0 0 0-2.875-4.275 13.16 13.16 0 0 0-4.292-2.866 13.207 13.207 0 0 0-5.07-1Z",
       fill: "url(#icon-whatsapp-a)"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
     "path",
     {
       clipRule: "evenodd",
@@ -3185,17 +3201,17 @@ var Whatsapp = ({ height, width }) => /* @__PURE__ */ (0, import_jsx_runtime168.
       fillRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("linearGradient", { gradientUnits: "userSpaceOnUse", id: "icon-whatsapp-a", x1: "15.797", x2: "15.93", y1: "4.261", y2: "26.795", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("stop", { stopColor: "#57D163" }),
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("stop", { offset: "1", stopColor: "#23B33A" })
+  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("linearGradient", { gradientUnits: "userSpaceOnUse", id: "icon-whatsapp-a", x1: "15.797", x2: "15.93", y1: "4.261", y2: "26.795", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("stop", { stopColor: "#57D163" }),
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("stop", { offset: "1", stopColor: "#23B33A" })
   ] }) })
 ] });
-var IconWhatsapp = (props) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Icon_default, __spreadValues({ Svg: Whatsapp }, props));
+var IconWhatsapp = (props) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon_default, __spreadValues({ Svg: Whatsapp }, props));
 // src/components/WheelChair.tsx
-var import_jsx_runtime169 = require("react/jsx-runtime");
-var WheelChair = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var WheelChair = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
     "path",
     {
       d: "M14.354 4.70189c0 .6868.2728 1.34547.7585 1.83111.4856.48564 1.1443.75847 1.8311.75847.6868 0 1.3455-.27283 1.8311-.75847.4856-.48564.7585-1.14431.7585-1.83111 0-.6868-.2729-1.34547-.7585-1.83111-.4856-.48565-1.1443-.75848-1.8311-.75848-.6868 0-1.3455.27283-1.8311.75848-.4857.48564-.7585 1.14431-.7585 1.83111Zm1.9954 11.89851-.4011 4.412c-.0215.2367.1368.4545.372.4889.8238.1206 1.4921.0471 1.8456-.0151.1705-.03.2971-.1644.333-.3338.516-2.4323.9397-5.1415 1.1589-6.6328.0975-.6636-.2926-1.2985-.9318-1.5019-1.0193-.3245-2.5494-.7789-3.6913-.9753-.1434-.0247-.2339-.1694-.19-.3082l.931-2.94826c.2099-.66477-.0966-1.38467-.7258-1.68483-2.5-1.19276-4.5116-2.01206-5.53379-2.41089-.45544-.17771-.9703-.09799-1.33656.22585-1.80776 1.59848-3.2191 3.60169-3.75837 4.41515-.14902.22482-.14664.51363.02297.72328.26745.3306.71449.797 1.21597.9633.22558.0748.45982-.0281.63398-.1898l2.8186-2.61727c.07679-.07129.19144-.08329.28132-.02938l.99798.59885c-.1525.43392-.2967.86012-.4326 1.2743",
@@ -3205,7 +3221,7 @@ var WheelChair = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_ru
       strokeWidth: "1.4"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
     "path",
     {
       d: "M9.41055 12c2.73035 0 4.94375 2.2134 4.94375 4.9437 0 2.7304-2.2134 4.9438-4.94375 4.9438-2.73037 0-4.94375-2.2134-4.94375-4.9438C4.4668 14.2134 6.68018 12 9.41055 12Z",
@@ -3216,22 +3232,22 @@ var WheelChair = ({ width, height, color }) => /* @__PURE__ */ (0, import_jsx_ru
     }
   )
 ] });
-var IconWheelChair = (props) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon_default, __spreadValues({ Svg: WheelChair }, props));
+var IconWheelChair = (props) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(Icon_default, __spreadValues({ Svg: WheelChair }, props));
 // src/components/X.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var X = ({ height, width }) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var X = ({ height, width }) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
   "path",
   {
     d: "M17.7512 3H20.818L14.1179 10.6246L22 21H15.8284L10.9946 14.7074L5.4636 21H2.39492L9.56132 12.8446L2 3H8.32824L12.6976 8.7517L17.7512 3ZM16.6748 19.1723H18.3742L7.40492 4.73168H5.58132L16.6748 19.1723Z",
     fill: "black"
   }
 ) });
-var IconX = (props) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(Icon_default, __spreadValues({ Svg: X }, props));
+var IconX = (props) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon_default, __spreadValues({ Svg: X }, props));
 // src/components/Youtube.tsx
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var Youtube = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var Youtube = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("svg", { fill: "none", height, viewBox: "0 0 24 24", width, xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
   "path",
   {
     clipRule: "evenodd",
@@ -3240,7 +3256,7 @@ var Youtube = ({ color, height, width }) => /* @__PURE__ */ (0, import_jsx_runti
     fillRule: "evenodd"
   }
 ) });
-var IconYoutube = (props) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon_default, __spreadValues({ Svg: Youtube }, props));
+var IconYoutube = (props) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon_default, __spreadValues({ Svg: Youtube }, props));
 // src/index.ts
 var import_iconoir_react = require("iconoir-react");
@@ -3481,6 +3497,7 @@ var import_iconoir_react = require("iconoir-react");
   IconSharePath,
   IconShield,
   IconShoppingList,
+  IconSparkle,
   IconStar,
   IconStudio,
   IconSubstack,
@@ -3617,6 +3634,7 @@ var import_iconoir_react = require("iconoir-react");
   SharePath,
   Shield,
   ShoppingList,
+  Sparkle,
   Sphere,
   Star,
   StatsUpSquare,