@crystallize/design-system 1.24.41 → 1.24.42

package/dist/index.mjs

@@ -17,10 +17,11 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-UVSAFDWF.mjs";
+} from "./chunk-3HUBTZND.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
+import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 var cardStyles = cva("c-card", {
@@ -34,19 +35,20 @@ var cardStyles = cva("c-card", {
     variant: "default"
   }
 });
-function Card({ children, className, variant, ...delegated }) {
+var Card = forwardRef(({ children, className, variant, ...delegated }, ref) => {
   return /* @__PURE__ */ jsx("section", {
+    ref,
     className: cardStyles({ variant, className }),
     ...delegated,
     children
   });
-}
+});
 
 // src/card/index.ts
 var cardToken = "c-card";
 
 // src/avatar/avatar.tsx
-import { forwardRef } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import { cva as cva2 } from "class-variance-authority";
 
 // src/avatar/get-initials.ts
@@ -71,7 +73,7 @@ var avatarClassName = cva2(["c-avatar"], {
     size: "md"
   }
 });
-var Avatar = forwardRef(({ name, size, className, ...delegated }, ref) => {
+var Avatar = forwardRef2(({ name, size, className, ...delegated }, ref) => {
   return /* @__PURE__ */ jsx2("div", {
     ref,
     ...delegated,
@@ -86,10 +88,10 @@ var Avatar = forwardRef(({ name, size, className, ...delegated }, ref) => {
 Avatar.displayName = "Avatar";
 
 // src/checkbox/checkbox.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var Checkbox = forwardRef2((props, ref) => {
+var Checkbox = forwardRef3((props, ref) => {
   return /* @__PURE__ */ jsx3(CheckboxPrimitive.Root, {
     ...props,
     ref,
@@ -294,11 +296,11 @@ var Radio = {
 };
 
 // src/select/select-item.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { cx as cx5 } from "class-variance-authority";
 import * as SelectPrimitives from "@radix-ui/react-select";
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-var SelectItem = forwardRef3((props, ref) => {
+var SelectItem = forwardRef4((props, ref) => {
   const { children, className, ...delegated } = props;
   return /* @__PURE__ */ jsxs4(SelectPrimitives.Item, {
     className: cx5("c-select-item", className),
@@ -315,7 +317,7 @@ var SelectItem = forwardRef3((props, ref) => {
 SelectItem.displayName = "SelectItem";
 
 // src/select/select-root.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { cva as cva4 } from "class-variance-authority";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -332,7 +334,7 @@ var selectTriggerStyles = cva4("c-select-trigger", {
     size: "sm"
   }
 });
-var SelectContainer = forwardRef4(
+var SelectContainer = forwardRef5(
   ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
     return /* @__PURE__ */ jsxs5(SelectPrimitives2.Root, {
       ...delegated,
@@ -378,11 +380,11 @@ var Select = {
 };
 
 // src/slider/slider.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { cx as cx6 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) => {
+var Slider = forwardRef6(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ jsxs6(SliderPrimitive.Root, {
     className: cx6("c-slider-root", className),
     ref,
@@ -486,7 +488,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-K5YUVMCD.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-W6DYNBJ6.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,

package/dist/{rich-text-editor-K5YUVMCD.mjs → rich-text-editor-W6DYNBJ6.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-UVSAFDWF.mjs";
+} from "./chunk-3HUBTZND.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.41",
+  "version": "1.24.42",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/card/card.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
 import { cva, VariantProps } from 'class-variance-authority';
 
 import './card.css';
@@ -18,10 +18,10 @@ const cardStyles = cva('c-card', {
 
 type CardProps = HTMLAttributes<HTMLDivElement> & CardStylesProps;
 
-export function Card({ children, className, variant, ...delegated }: CardProps) {
+export const Card = forwardRef<HTMLSelectElement, CardProps>(({ children, className, variant, ...delegated }, ref) => {
   return (
-    <section className={cardStyles({ variant, className })} {...delegated}>
+    <section ref={ref} className={cardStyles({ variant, className })} {...delegated}>
       {children}
     </section>
   );
-}
+});

package/src/iconography/actions.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+type ActionsProps = SVGProps<SVGSVGElement>;
+
+type ActionsRef = SVGSVGElement;
+
+export const Actions = forwardRef<ActionsRef, ActionsProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={fill}
+        d="m12.61 3.394-1.055 1.647a5.935 5.935 0 0 0-1.204.008l-1.09-1.642a.413.413 0 0 0-.485-.146l-1.787.756a.413.413 0 0 0-.233.45l.42 1.926c-.316.262-.605.56-.864.887l-1.907-.386a.413.413 0 0 0-.448.24L3.23 8.932c-.069.17 0 .386.154.484l1.653 1.061c-.035.4-.032.8.013 1.192l-1.621 1.076a.413.413 0 0 0-.147.487l.757 1.786a.413.413 0 0 0 .45.234l1.913-.418c.252.303.537.58.85.832l-.389 1.917a.413.413 0 0 0 .24.447l1.798.728c.17.069.386 0 .485-.153l1.055-1.645c.407.038.814.037 1.213-.008l1.07 1.614c.101.152.32.217.487.146l1.786-.756a.413.413 0 0 0 .234-.451l-.414-1.891a5.97 5.97 0 0 0 .83-.839l1.926.39a.413.413 0 0 0 .447-.241l.728-1.798a.413.413 0 0 0-.153-.484l-1.639-1.05c.041-.412.041-.822-.002-1.226l1.634-1.084a.413.413 0 0 0 .146-.486l-.756-1.786a.413.413 0 0 0-.45-.233l-1.905.416a5.95 5.95 0 0 0-.876-.862l.387-1.915a.413.413 0 0 0-.24-.447l-1.798-.729a.414.414 0 0 0-.484.154Z"
+      />
+      <path
+        fill={stroke}
+        d="M8.966 18.777a.417.417 0 0 0 .419-.172l1.055-1.645a5.95 5.95 0 0 0 1.213-.008l1.07 1.613c.102.152.32.218.487.146l1.786-.755a.416.416 0 0 0 .242-.383l-.008-.068-.414-1.891c.301-.249.579-.53.83-.839l1.926.39a.417.417 0 0 0 .415-.18l.032-.061.729-1.798a.417.417 0 0 0-.1-.442l-.054-.042-1.638-1.05c.04-.412.04-.822-.003-1.226l1.634-1.084a.415.415 0 0 0 .166-.421l-.02-.065-.756-1.786a.414.414 0 0 0-.451-.234l-1.904.416a5.948 5.948 0 0 0-.876-.861l.388-1.915a.417.417 0 0 0-.18-.416l-.061-.032-1.798-.728a.415.415 0 0 0-.484.154L11.555 5.04a5.938 5.938 0 0 0-1.204.009l-1.09-1.642a.415.415 0 0 0-.42-.166l-.065.02-1.787.756a.414.414 0 0 0-.233.451l.42 1.925-.231.203c-.227.21-.439.438-.634.683l-1.906-.385a.414.414 0 0 0-.448.24l-.433-.175a.883.883 0 0 1 .898-.535l.075.011 1.634.331c.166-.192.343-.373.53-.543l-.362-1.656a.88.88 0 0 1 .508-.98l1.786-.757a.88.88 0 0 1 1.058.319l.936 1.41a6.4 6.4 0 0 1 .723-.004l.907-1.414h.001a.88.88 0 0 1 1.053-.334l1.797.728a.88.88 0 0 1 .524.973l-.333 1.646c.188.164.366.338.533.523l1.634-.358a.88.88 0 0 1 .982.509l.755 1.785a.88.88 0 0 1-.318 1.06l-1.405.931c.015.247.016.496.002.744l1.404.9h.001c.341.22.487.676.334 1.054l-.729 1.798a.88.88 0 0 1-.972.523h-.001l-1.657-.335a6.43 6.43 0 0 1-.49.497l.355 1.62a.88.88 0 0 1-.509.981l-1.786.756a.88.88 0 0 1-1.058-.318l-.918-1.382a6.416 6.416 0 0 1-.732.004l-.905 1.411-.002.001a.88.88 0 0 1-1.052.334l-1.798-.729a.88.88 0 0 1-.523-.972v-.001l.333-1.645a6.431 6.431 0 0 1-.506-.495l-1.643.359a.88.88 0 0 1-.981-.508l-.756-1.786-.026-.072a.882.882 0 0 1 .344-.987l1.39-.923a6.399 6.399 0 0 1-.008-.71L3.13 9.81a.88.88 0 0 1-.334-1.053l.433.175c-.069.17 0 .386.153.485l1.654 1.06c-.035.4-.032.8.013 1.192l-1.622 1.077a.413.413 0 0 0-.146.486l.757 1.786a.413.413 0 0 0 .45.234l1.913-.418c.252.303.537.58.849.832l-.388 1.917a.414.414 0 0 0 .24.447l1.798.728.066.02ZM3.524 6.96l.433.176-.728 1.797-.433-.175.728-1.798Z"
+      />
+      <path
+        fill="#fff"
+        d="M13.632 10.655c.194.18.195.488 0 .669l-3.316 3.09a.457.457 0 0 1-.768-.333v-1.883l-4.694-.284s-1.779.092-1.779-.903c0-1.024 1.162-1.042 1.78-1.042l4.693-.097V7.92c0-.398.474-.605.767-.334l3.317 3.069Z"
+      />
+      <path
+        fill={stroke}
+        d="M13.95 10.312c.369.342.393.91.07 1.282l-.068.072-3.317 3.091c-.591.551-1.555.131-1.555-.677v-1.442l-4.223-.256H4.85a3.098 3.098 0 0 1-.293-.002 3.919 3.919 0 0 1-.696-.089c-.253-.057-.552-.16-.797-.352a1.153 1.153 0 0 1-.457-.929c0-.35.102-.651.296-.89.189-.23.436-.369.672-.454.45-.162.97-.164 1.27-.164l4.235-.089V7.921c0-.807.96-1.226 1.553-.679l3.316 3.07Zm-.317 1.012a.457.457 0 0 0-.002-.67l-3.316-3.068-.057-.046a.457.457 0 0 0-.71.38v1.952l-4.694.097c-.617 0-1.778.018-1.779 1.041 0 .995 1.78.904 1.78.904l4.693.284v1.882c0 .4.476.607.768.335l3.317-3.091Z"
+      />
+      <path
+        fill="#fff"
+        d="M15.047 10.96c0-.724.632-1.287 1.352-1.204l1.389.161a1.036 1.036 0 0 1 .022 2.055l-1.385.19a1.213 1.213 0 0 1-1.378-1.201Z"
+      />
+      <path
+        fill={stroke}
+        d="M18.704 10.946c0-.493-.346-.912-.82-1.013l-.096-.016-1.389-.16a1.212 1.212 0 1 0-.11 2.416l.136-.011 1.385-.19c.48-.066.846-.455.89-.93l.004-.096Zm.468 0c0 .751-.555 1.387-1.3 1.49l-1.384.19a1.68 1.68 0 1 1-.035-3.335l1.389.162c.758.088 1.33.73 1.33 1.493Z"
+      />
+    </svg>
+  );
+});
+
+Actions.displayName = 'ActionsIcon';

package/src/iconography/clock.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type ClockProps = SVGProps<SVGSVGElement>;
 
 type ClockRef = SVGSVGElement;
@@ -9,15 +11,15 @@ export const Clock = forwardRef<ClockRef, ClockProps>((delegated, ref) => {
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
       <path
         d="M27.1672 14.3782a10.4298 10.4298 0 0 0-6.5199-7.5964A10.753 10.753 0 0 0 9.3006 9.4745a11.0723 11.0723 0 0 0-2.6168 10.1483 10.3947 10.3947 0 0 0 3.6423 5.9131 10.3941 10.3941 0 0 0 6.5529 2.3 10.6706 10.6706 0 0 0 7.7624-3.3204 11.024 11.024 0 0 0 2.5258-10.1373Zm-3.3314 9.3236a9.4471 9.4471 0 0 1-6.8608 2.9247 9.0968 9.0968 0 0 1-2.8916-.4618 9.5526 9.5526 0 0 1-6.1461-6.8608 9.6173 9.6173 0 0 1 2.1549-9.0157 9.5057 9.5057 0 0 1 6.8718-2.9137 9.1582 9.1582 0 0 1 2.8916.4728 9.475 9.475 0 0 1 6.1461 6.8458 9.5724 9.5724 0 0 1-2.1659 9.0087Z"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         d="M18.6682 2.3389a13.9219 13.9219 0 0 0-1.8991-.121 13.7 13.7 0 0 0-4.0901.6158A14.6931 14.6931 0 0 0 2.4618 17.4348c.4838 7.2786 5.3435 13.2048 12.743 14.2163.6587.0883 1.3225.133 1.9871.1339a13.215 13.215 0 0 0 4.0681-.6157 15.1484 15.1484 0 0 0 10.2691-14.5131A14.6527 14.6527 0 0 0 18.6682 2.3389Zm8.1032 24.0237a13.5041 13.5041 0 0 1-9.8184 4.233 13.18 13.18 0 0 1-4.3869-.7477 13.3995 13.3995 0 0 1-8.396-9.6314A13.5489 13.5489 0 0 1 7.1685 7.6384a13.4416 13.4416 0 0 1 9.8184-4.233 13.1827 13.1827 0 0 1 4.3869.7476 13.4214 13.4214 0 0 1 8.4211 9.6405 13.58 13.58 0 0 1-3.0236 12.5691Z"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         d="M29.795 13.7935a13.4203 13.4203 0 0 0-8.4221-9.6425 13.1825 13.1825 0 0 0-4.3869-.7476 13.4417 13.4417 0 0 0-9.8184 4.235A13.5483 13.5483 0 0 0 4.169 20.2165a13.3995 13.3995 0 0 0 8.3961 9.6315 13.1829 13.1829 0 0 0 4.3869.7476 13.5026 13.5026 0 0 0 9.8184-4.233 13.5794 13.5794 0 0 0 3.0246-12.5691Zm-5.1566 10.722a10.6692 10.6692 0 0 1-7.7623 3.3204 10.3949 10.3949 0 0 1-10.1952-8.2131A11.0727 11.0727 0 0 1 9.3006 9.4745a10.7529 10.7529 0 0 1 11.3467-2.6937 10.4292 10.4292 0 0 1 6.5199 7.5964 11.0245 11.0245 0 0 1-2.5288 10.1383Z"
-        fill="#BFF6F8"
+        fill={fill}
       />
       <path
         d="M23.8358 23.7018a9.4471 9.4471 0 0 1-6.8608 2.9247 9.0968 9.0968 0 0 1-2.8916-.4618 9.5523 9.5523 0 0 1-6.1461-6.8608 9.6174 9.6174 0 0 1 2.155-9.0157 9.5035 9.5035 0 0 1 6.8717-2.9137 9.1593 9.1593 0 0 1 2.8917.4728 9.4746 9.4746 0 0 1 6.1461 6.8458 9.5731 9.5731 0 0 1-2.166 9.0087Z"
@@ -25,11 +27,11 @@ export const Clock = forwardRef<ClockRef, ClockProps>((delegated, ref) => {
       />
       <path
         d="m17.6467 17.8276.114-3.7832c.024-.7716-1.1755-.7716-1.1995 0l-.1139 3.7832c-.023.7717 1.1764.7717 1.1994 0Z"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         d="m16.6232 18.2514 3.9911 4.1521c.5358.5577 1.3834-.2919.8476-.8486l-3.9901-4.1511c-.5358-.5577-1.3834.2909-.8486.8476Z"
-        fill="#528693"
+        fill={stroke}
       />
     </svg>
   );

package/src/iconography/edit.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type EditProps = SVGProps<SVGSVGElement>;
 
 type EditRef = SVGSVGElement;
@@ -8,11 +10,11 @@ export const Edit = forwardRef<EditRef, EditProps>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
-        fill="#BFF6F8"
+        fill={fill}
         d="M18.293 7.112c.005-.014.02-.01.03-.02-1.313-1.319-2.12-2.09-3.428-3.416L4.764 13.916 3.6 18.5l4.665-1.588L12.335 13c2.803-2.733 3.16-3.136 5.957-5.888Z"
       />
       <path
-        fill="#528693"
+        fill={stroke}
         fillRule="evenodd"
         d="M18.748 6.67a.6.6 0 0 1-.075.91c-1.204 1.184-1.955 1.932-2.653 2.628a359.59 359.59 0 0 1-3.265 3.222l-.004.003-4.07 3.912a.6.6 0 0 1-.223.135l-4.665 1.588a.6.6 0 0 1-.775-.716l1.164-4.584a.6.6 0 0 1 .155-.274L14.47 3.254a.6.6 0 0 1 .854 0c.73.741 1.294 1.3 1.88 1.879.47.464.953.941 1.545 1.537Zm-.85-.002-.006-.006c-.398-.398-.755-.75-1.105-1.097a216.01 216.01 0 0 1-1.892-1.89L4.764 13.917 3.6 18.5l4.665-1.588L12.335 13c1.565-1.526 2.367-2.325 3.258-3.213.624-.623 1.292-1.288 2.297-2.278l.402-.397c.003-.008.01-.01.016-.012.005-.002.01-.003.014-.007l-.424-.425Z"
         clipRule="evenodd"

package/src/iconography/index.ts

@@ -1,3 +1,4 @@
+import { Actions } from './actions';
 import { Add } from './add';
 import { App } from './app';
 import { Archive } from './archive';
@@ -126,6 +127,7 @@ import { Warning } from './warning';
 import { XForY } from './x-for-y';
 
 export const Icon = {
+  Actions,
   Add,
   Archive,
   App,

package/src/iconography/paths.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type PathsProps = SVGProps<SVGSVGElement>;
 type PathsRef = SVGSVGElement;
 
@@ -14,17 +16,17 @@ export const Paths = forwardRef<PathsRef, PathsProps>((delegated, ref) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.789 5.36a.626.626 0 00-1.014-.49L1.111 7.773a.626.626 0 00.01.99l3.665 2.768a.626.626 0 001.003-.5v-.78a3.466 3.466 0 013.153 3.45v5.857c0 .345.28.625.625.625h2.945c.3 0 .542-.242.542-.542v-5.76A7.578 7.578 0 005.79 6.308V5.36zm-4.29 2.903L5.163 5.36v1.568h.313a6.952 6.952 0 016.953 6.952v5.678H9.567v-5.856a4.091 4.091 0 00-4.09-4.091h-.314v1.42L1.5 8.264z"
-        fill="#528693"
+        fill={stroke}
       />
       <path
         d="M9.259 10.963a7.265 7.265 0 017.265-7.265V2.443c0-.262.302-.408.507-.245L20.695 5.1a.313.313 0 01-.005.495l-3.665 2.768a.313.313 0 01-.501-.25V7.006a3.778 3.778 0 00-3.779 3.778v8.668c0 .173-.14.313-.312.313H9.537a.279.279 0 01-.278-.279v-8.523z"
-        fill="#BFF6F8"
+        fill={fill}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.211 2.443a.626.626 0 011.014-.49l3.665 2.903a.625.625 0 01-.012.99l-3.664 2.768a.626.626 0 01-1.003-.5v-.781a3.466 3.466 0 00-3.153 3.452v8.668c0 .345-.28.625-.625.625H9.537a.591.591 0 01-.591-.591v-8.524a7.578 7.578 0 017.265-7.571v-.949zm4.29 2.903l-3.664-2.903v1.568h-.313a6.952 6.952 0 00-6.953 6.952v8.49h2.862v-8.668a4.091 4.091 0 014.09-4.091h.314v1.42L20.5 5.347z"
-        fill="#528693"
+        fill={stroke}
       />
     </svg>
   );

package/src/iconography/unpublish.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
+import { fill, stroke } from './variables';
+
 type UnpublishProps = SVGProps<SVGSVGElement>;
 
 type UnpublishRef = SVGSVGElement;
@@ -12,26 +14,26 @@ export const Unpublish = forwardRef<UnpublishRef, UnpublishProps>((delegated, re
         d="M19.055 13.054c-.595 1.263-1.441 1.553-3.22 1.553-3.734 0-5.845-.123-9.562-.123-1.725 0-3.546-.242-4.082-1.92-.34-1.064-.153-2.123.496-2.817.473-.493 1.014-.699 1.76-.763.563-.048 1.429.226 1.429.226s-.324-2.173.61-2.764c.37-.234.64-.306 1.078-.308.343-.003.86.18.86.18l.911.642s1.164-2.957 3.686-2.957c.217 0 .434.022.647.067 1.136.242 2.228.971 2.757 2.259.405.986.05 2.729.05 2.729s1.887.405 2.454 1.338c.54.888.57 1.718.126 2.658Z"
       />
       <path
-        fill="#528693"
+        fill={stroke}
         fillRule="evenodd"
         d="M2.254 9.331c.6-.625 1.294-.872 2.143-.944.27-.023.568.008.825.052a6.314 6.314 0 0 1 .01-.424c.02-.339.072-.727.199-1.087.125-.357.344-.742.734-.989.219-.138.432-.244.671-.311a2.67 2.67 0 0 1 .724-.09c.255-.002.534.061.715.109a5.195 5.195 0 0 1 .317.094l.022.008.006.002h.002l.001.001-.2.566s-.516-.183-.86-.18c-.437.002-.707.074-1.077.308-.607.384-.683 1.436-.662 2.125.012.372.052.639.052.639s-.279-.088-.622-.156c-.263-.05-.563-.09-.806-.07-.747.064-1.288.27-1.76.763-.65.694-.837 1.753-.497 2.817.536 1.678 2.357 1.92 4.082 1.92 1.856 0 3.312.03 4.77.062 1.46.03 2.923.061 4.793.061 1.778 0 2.624-.29 3.22-1.553.442-.94.412-1.77-.127-2.658-.567-.933-2.455-1.338-2.455-1.338s.357-1.743-.049-2.73c-.529-1.287-1.621-2.016-2.757-2.258a3.144 3.144 0 0 0-.647-.067c-1.83 0-2.945 1.557-3.419 2.411-.18.324-.267.546-.267.546l-.911-.642.2-.566a.602.602 0 0 1 .146.075l.34.24c.158-.28.376-.622.658-.966.66-.805 1.735-1.698 3.252-1.698.26 0 .517.026.77.08h.003C15.09 3.759 16.364 4.6 16.98 6.1c.26.63.26 1.432.22 2.003-.013.19-.031.365-.05.517.166.051.36.118.562.2.552.22 1.336.615 1.73 1.263.311.513.493 1.04.518 1.594.025.554-.109 1.094-.362 1.632-.342.725-.792 1.237-1.461 1.54-.632.287-1.399.357-2.301.357-1.875 0-3.342-.03-4.801-.061h-.004c-1.458-.031-2.908-.062-4.758-.062-.876 0-1.851-.059-2.693-.367-.87-.319-1.624-.916-1.96-1.97-.393-1.228-.197-2.527.629-3.41l.005-.006Z"
         clipRule="evenodd"
       />
-      <path fill="#BFF6F8" d="M14.8 14.25a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+      <path fill={fill} d="M14.8 14.25a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
       <path
-        fill="#528693"
+        fill={stroke}
         fillRule="evenodd"
         d="M15.4 14.25a4.35 4.35 0 1 1-8.7 0 4.35 4.35 0 0 1 8.7 0ZM11.05 18a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
         clipRule="evenodd"
       />
       <path
-        fill="#528693"
+        fill={stroke}
         fillRule="evenodd"
         d="M9.088 12.288a.3.3 0 0 1 .424 0l3.5 3.5a.3.3 0 1 1-.424.424l-3.5-3.5a.3.3 0 0 1 0-.424Z"
         clipRule="evenodd"
       />
       <path
-        fill="#528693"
+        fill={stroke}
         fillRule="evenodd"
         d="M9.088 16.212a.3.3 0 0 1 0-.424l3.5-3.5a.3.3 0 1 1 .424.424l-3.5 3.5a.3.3 0 0 1-.424 0Z"
         clipRule="evenodd"