@crystallize/design-system 1.24.46 → 2.0.1

package/src/iconography/index.ts

@@ -9,12 +9,14 @@ import { Battery } from './battery';
 import { Bell } from './bell';
 import { BillingPayments } from './billing-payments';
 import { Bin } from './bin';
+import { Boolean } from './boolean';
 import { Cancel } from './cancel';
 import { Caret } from './caret';
 import { Cart } from './cart';
 import { Catalogue } from './catalogue';
 import { Check } from './check';
 import { CheckWithCircle } from './check-with-circle';
+import { Checkbox } from './checkbox';
 import { Chevron } from './chevron';
 import { Choice } from './choice';
 import { Chunk } from './chunk';
@@ -69,12 +71,14 @@ import { Location } from './location';
 import { LockClosed } from './lock-closed';
 import { LockOpen } from './lock-open';
 import { Magnifier } from './magnifier';
+import { MetaPreset } from './meta-preset';
 import { MinQuantity } from './min-quantity';
 import { MinValue } from './min-value';
 import { Multilingual } from './multilingual';
 import { MultipleChoice } from './multiple-choice';
 import { Mushroom } from './mushroom';
 import { NailPolish } from './nail-polish';
+import { Number } from './number';
 import { Numeric } from './numeric';
 import { Order } from './order';
 import { Organization } from './organization';
@@ -101,6 +105,7 @@ import { RestrictedCatalogue } from './restricted-catalogue';
 import { RichText } from './rich-text';
 import { Rocket } from './rocket';
 import { Search } from './search';
+import { Select } from './select';
 import { Selection } from './selection';
 import { Settings } from './settings';
 import { Shapes } from './shapes';
@@ -108,6 +113,7 @@ import { SingleLine } from './singleline';
 import { SpecialPrice } from './special-price';
 import { Split } from './split';
 import { StockLocation } from './stock-location';
+import { String } from './string';
 import { Subscription } from './subscription';
 import { SubscriptionContracts } from './subscription-contracts';
 import { SubscriptionPlans } from './subscription-plans';
@@ -132,7 +138,10 @@ import { Wand } from './wand';
 import { Warning } from './warning';
 import { XForY } from './x-for-y';
 
-export const Icon = {
+export const Icon: Record<
+  string,
+  React.ForwardRefExoticComponent<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>
+> = {
   Actions,
   Add,
   Advance,
@@ -142,12 +151,14 @@ export const Icon = {
   BillingPayments,
   Bin,
   Bell,
+  Boolean,
   Caret,
   Cart,
   Catalogue,
   Check,
   CheckWithCircle,
   Chevron,
+  Checkbox,
   Cloud,
   Clock,
   CloudWithKeyHole,
@@ -187,6 +198,7 @@ export const Icon = {
   Limitations,
   LockClosed,
   LockOpen,
+  MetaPreset,
   Multilingual,
   MultipleChoice,
   Magnifier,
@@ -194,6 +206,7 @@ export const Icon = {
   MinValue,
   Mushroom,
   NailPolish,
+  Number,
   Order,
   Organization,
   Paths,
@@ -214,7 +227,9 @@ export const Icon = {
   Renew,
   Rocket,
   Search,
+  Select,
   Settings,
+  String,
   Shapes,
   SpecialPrice,
   Split,

package/src/iconography/info.tsx

@@ -1,9 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type InfoProps = SVGProps<SVGSVGElement>;
-type InfoRef = SVGSVGElement;
-
-export const Info = forwardRef<InfoRef, InfoProps>((delegated, ref) => {
+export const Info = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path

package/src/iconography/items.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type ItemsProps = SVGProps<SVGSVGElement>;
-
-type ItemsRef = SVGSVGElement;
-
-export const Items = forwardRef<ItemsRef, ItemsProps>((delegated, ref) => {
+export const Items = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
       <path

package/src/iconography/key.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type KeyProps = SVGProps<SVGSVGElement>;
-
-type KeyRef = SVGSVGElement;
-
-export const Key = forwardRef<KeyRef, KeyProps>((delegated, ref) => {
+export const Key = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} viewBox="0 0 22 22" width="22" height="22" fill="none" {...delegated}>
       <path

package/src/iconography/language.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type LanguageProps = SVGProps<SVGSVGElement>;
-
-type LanguageRef = SVGSVGElement;
-
-export const Language = forwardRef<LanguageRef, LanguageProps>((delegated, ref) => {
+export const Language = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" {...delegated}>
       <path
@@ -35,4 +31,4 @@ export const Language = forwardRef<LanguageRef, LanguageProps>((delegated, ref)
   );
 });
 
-Language.displayName = 'LanguageProps';
+Language.displayName = 'LanguageIcon';

package/src/iconography/lifebouy.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type LifebouyProps = SVGProps<SVGSVGElement>;
-
-type LifebouyRef = SVGSVGElement;
-
-export const Lifebouy = forwardRef<LifebouyRef, LifebouyProps>((delegated, ref) => {
+export const Lifebouy = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="20" height="19" viewBox="0 0 20 19" fill="none" {...delegated}>
       <path
@@ -55,4 +51,4 @@ export const Lifebouy = forwardRef<LifebouyRef, LifebouyProps>((delegated, ref)
   );
 });
 
-Lifebouy.displayName = 'LifebouyProps';
+Lifebouy.displayName = 'LifebouyIcon';

package/src/iconography/limitations.tsx

@@ -2,11 +2,7 @@ import { forwardRef, SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type LimitationsProps = SVGProps<SVGSVGElement>;
-
-type LimitationsRef = SVGSVGElement;
-
-export const Limitations = forwardRef<LimitationsRef, LimitationsProps>((delegated, ref) => {
+export const Limitations = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
       <path

package/src/iconography/location.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type LocationProps = SVGProps<SVGSVGElement>;
-
-type LocationRef = SVGSVGElement;
-
-export const Location = forwardRef<LocationRef, LocationProps>((delegated, ref) => {
+export const Location = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
@@ -32,4 +28,4 @@ export const Location = forwardRef<LocationRef, LocationProps>((delegated, ref)
   );
 });
 
-Location.displayName = 'Location';
+Location.displayName = 'LocationIcon';

package/src/iconography/lock-closed.tsx

@@ -1,10 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-type LockClosedProps = SVGProps<SVGSVGElement>;
-
-type LockClosedRef = SVGSVGElement;
-
-export const LockClosed = forwardRef<LockClosedRef, LockClosedProps>((delegated, ref) => {
+export const LockClosed = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
       <path

package/src/iconography/lock-open.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type LockOpenProps = SVGProps<SVGSVGElement>;
-
-type LockOpenRef = SVGSVGElement;
-
-export const LockOpen = forwardRef<LockOpenRef, LockOpenProps>((delegated, ref) => {
+export const LockOpen = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="20" height="20" fill="none" viewBox="0 0 20 20" {...delegated}>
       <path

package/src/iconography/magnifier.tsx

@@ -1,40 +1,25 @@
-import { forwardRef } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type MagnifierProps = React.SVGProps<SVGSVGElement> & {
-  width?: number;
-  height?: number;
-};
-
-export const Magnifier = forwardRef(
-  ({ width = 22, height = 23, ...rest }: MagnifierProps, ref: React.LegacyRef<SVGSVGElement>) => {
-    return (
-      <svg
-        ref={ref}
-        width={width}
-        height={height}
-        viewBox="0 0 22 23"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        {...rest}
-      >
-        <path d="M19.02 9.531a6.238 6.238 0 1 1-12.476 0 6.238 6.238 0 0 1 12.476 0Z" fill="#fff" />
-        <path
-          d="M18.023 14.86c2.913-2.914 2.913-7.655 0-10.568-2.914-2.914-7.654-2.914-10.568 0a7.327 7.327 0 0 0-1.124 9.018s.124.208-.043.375l-3.813 3.812c-.759.759-.94 1.82-.266 2.493l.116.116c.673.673 1.734.492 2.492-.267l3.805-3.804c.175-.175.382-.051.382-.051a7.327 7.327 0 0 0 9.019-1.124Zm-9.188-1.38a5.528 5.528 0 0 1 0-7.808 5.528 5.528 0 0 1 7.808 0 5.528 5.528 0 0 1 0 7.808 5.528 5.528 0 0 1-7.808 0Z"
-          fill="#BFF6F8"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M6.288 13.685c.167-.167.043-.375.043-.375a7.327 7.327 0 0 1 1.124-9.018c2.914-2.914 7.654-2.914 10.568 0 2.913 2.913 2.913 7.654 0 10.568a7.327 7.327 0 0 1-9.019 1.124s-.207-.124-.382.051L4.817 19.84c-.758.758-1.82.939-2.492.266l-.116-.116c-.673-.673-.493-1.734.266-2.493l3.813-3.812ZM1.9 20.53l-.115-.115c-1.001-1.001-.621-2.455.266-3.342l3.651-3.651a7.925 7.925 0 0 1 1.329-9.554c3.148-3.148 8.268-3.148 11.416 0 3.148 3.148 3.148 8.268 0 11.416a7.925 7.925 0 0 1-9.554 1.329l-3.65 3.65c-.888.887-2.342 1.268-3.343.267ZM16.22 6.096a4.928 4.928 0 0 0-6.96 0 4.928 4.928 0 0 0 0 6.96 4.928 4.928 0 0 0 6.96 0 4.928 4.928 0 0 0 0-6.96Zm.424 7.384a5.528 5.528 0 0 0 0-7.808 5.528 5.528 0 0 0-7.808 0 5.528 5.528 0 0 0 0 7.808 5.528 5.528 0 0 0 7.808 0Z"
-          fill="#528693"
-        />
-        <path
-          d="M9.312 9.453a.77.77 0 0 1-.3-.061c-.393-.166-.576-.349-.41-.741a4.86 4.86 0 0 1 6.363-2.58c.392.167.576.35.41.742a.771.771 0 0 1-1.011.41 3.316 3.316 0 0 0-4.342 1.76.771.771 0 0 1-.71.47Z"
-          fill="#528693"
-        />
-      </svg>
-    );
-  },
-);
+export const Magnifier = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} viewBox="0 0 22 23" fill="none" {...delegated}>
+      <path d="M19.02 9.531a6.238 6.238 0 1 1-12.476 0 6.238 6.238 0 0 1 12.476 0Z" fill="#fff" />
+      <path
+        d="M18.023 14.86c2.913-2.914 2.913-7.655 0-10.568-2.914-2.914-7.654-2.914-10.568 0a7.327 7.327 0 0 0-1.124 9.018s.124.208-.043.375l-3.813 3.812c-.759.759-.94 1.82-.266 2.493l.116.116c.673.673 1.734.492 2.492-.267l3.805-3.804c.175-.175.382-.051.382-.051a7.327 7.327 0 0 0 9.019-1.124Zm-9.188-1.38a5.528 5.528 0 0 1 0-7.808 5.528 5.528 0 0 1 7.808 0 5.528 5.528 0 0 1 0 7.808 5.528 5.528 0 0 1-7.808 0Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.288 13.685c.167-.167.043-.375.043-.375a7.327 7.327 0 0 1 1.124-9.018c2.914-2.914 7.654-2.914 10.568 0 2.913 2.913 2.913 7.654 0 10.568a7.327 7.327 0 0 1-9.019 1.124s-.207-.124-.382.051L4.817 19.84c-.758.758-1.82.939-2.492.266l-.116-.116c-.673-.673-.493-1.734.266-2.493l3.813-3.812ZM1.9 20.53l-.115-.115c-1.001-1.001-.621-2.455.266-3.342l3.651-3.651a7.925 7.925 0 0 1 1.329-9.554c3.148-3.148 8.268-3.148 11.416 0 3.148 3.148 3.148 8.268 0 11.416a7.925 7.925 0 0 1-9.554 1.329l-3.65 3.65c-.888.887-2.342 1.268-3.343.267ZM16.22 6.096a4.928 4.928 0 0 0-6.96 0 4.928 4.928 0 0 0 0 6.96 4.928 4.928 0 0 0 6.96 0 4.928 4.928 0 0 0 0-6.96Zm.424 7.384a5.528 5.528 0 0 0 0-7.808 5.528 5.528 0 0 0-7.808 0 5.528 5.528 0 0 0 0 7.808 5.528 5.528 0 0 0 7.808 0Z"
+        fill="#528693"
+      />
+      <path
+        d="M9.312 9.453a.77.77 0 0 1-.3-.061c-.393-.166-.576-.349-.41-.741a4.86 4.86 0 0 1 6.363-2.58c.392.167.576.35.41.742a.771.771 0 0 1-1.011.41 3.316 3.316 0 0 0-4.342 1.76.771.771 0 0 1-.71.47Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
 
 Magnifier.displayName = 'Magnifier';

package/src/iconography/meta-preset.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const MetaPreset = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill="#fff"
+        d="M14.539 16.277a3.383 3.383 0 0 1-3.761 3.378l-4.451-.501a3.383 3.383 0 0 1-2.916-4.13l1.286-5.51.078-.333a4.91 4.91 0 0 1 1.302-2.354 4.819 4.819 0 0 0 .061 1.306l1.067 5.905a3.383 3.383 0 0 0 4.315 2.634l3.017-.92.002.525Z"
+      />
+      <path
+        fill={fill}
+        d="M6.077 6.827a4.82 4.82 0 0 0 .061 1.306l1.067 5.905a3.383 3.383 0 0 0 4.315 2.634l3.017-.92 1.268-.386a3.382 3.382 0 0 0 2.112-4.593L15.51 5.277a4.932 4.932 0 0 0-9.432 1.55ZM9.123 5.39a1.245 1.245 0 1 1 2.425-.57 1.245 1.245 0 0 1-2.425.57Z"
+      />
+      <path
+        fill="#fff"
+        d="M9.573 5.37c-.151 0-.301.006-.45.02a1.246 1.246 0 0 0 2.294.335 4.946 4.946 0 0 0-1.844-.355Z"
+      />
+      <path
+        fill={stroke}
+        d="M11.722 5.844a1.571 1.571 0 0 0-2.77-1.476 1.572 1.572 0 0 0 1.843 2.24 1.56 1.56 0 0 0 .927-.764Zm-2.098-.151a4.621 4.621 0 0 1 1.228.179.927.927 0 0 1-1.228-.18Zm1.611-.378a5.268 5.268 0 0 0-1.82-.266.92.92 0 0 1 .921-.866.925.925 0 0 1 .9 1.132Z"
+      />
+      <path
+        fill={stroke}
+        d="M3.678 17.93a3.71 3.71 0 0 0 2.613 1.545l4.451.502a3.709 3.709 0 0 0 4.12-3.7v-.286l1.037-.316a3.709 3.709 0 0 0 2.314-5.032l-2.408-5.496A5.256 5.256 0 0 0 5.768 6.683 5.244 5.244 0 0 0 4.46 9.107l-1.364 5.844a3.708 3.708 0 0 0 .581 2.979Zm12.033-2.873-4.285 1.306a3.063 3.063 0 0 1-3.902-2.383L6.457 8.076a4.61 4.61 0 0 1 8.757-2.67l2.408 5.496a3.062 3.062 0 0 1-1.91 4.155Zm-11.985.04L5.09 9.255c.128-.55.356-1.068.668-1.53.014.155.034.31.063.466l1.067 5.905a3.709 3.709 0 0 0 4.727 2.886l2.601-.793v.091a3.063 3.063 0 0 1-3.402 3.056l-4.45-.502a3.062 3.062 0 0 1-2.638-3.735Z"
+      />
+      <path
+        fill={stroke}
+        d="m14.082 9.077-4.284 1.306a.323.323 0 0 1-.188-.618l4.284-1.306a.323.323 0 0 1 .188.618ZM10.159 11.864a.323.323 0 0 1-.095-.632l4.285-1.306a.323.323 0 1 1 .189.618l-4.285 1.306a.325.325 0 0 1-.095.014Z"
+      />
+    </svg>
+  );
+});
+
+MetaPreset.displayName = 'MetaPresetIcon';

package/src/iconography/min-quantity.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type MinQuantityProps = SVGProps<SVGSVGElement>;
-
-type MinQuantityRef = SVGSVGElement;
-
-export const MinQuantity = forwardRef<MinQuantityRef, MinQuantityProps>((delegated, ref) => {
+export const MinQuantity = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
       <path

package/src/iconography/min-value.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type MinValueProps = SVGProps<SVGSVGElement>;
-
-type MinValueRef = SVGSVGElement;
-
-export const MinValue = forwardRef<MinValueRef, MinValueProps>((delegated, ref) => {
+export const MinValue = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/multilingual.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type MultilingualProps = SVGProps<SVGSVGElement>;
-
-type MultilingualRef = SVGSVGElement;
-
-export const Multilingual = forwardRef<MultilingualRef, MultilingualProps>((delegated, ref) => {
+export const Multilingual = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" {...delegated}>
       <path

package/src/iconography/multiple-choice.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type MultipleChoiceProps = SVGProps<SVGSVGElement>;
-
-type MultipleChoiceRef = SVGSVGElement;
-
-export const MultipleChoice = forwardRef<MultipleChoiceRef, MultipleChoiceProps>((delegated, ref) => {
+export const MultipleChoice = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="currentColor" {...delegated}>
       <g clipPath="url(#a)">

package/src/iconography/mushroom.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type MushroomProps = SVGProps<SVGSVGElement>;
-
-type MushroomRef = SVGSVGElement;
-
-export const Mushroom = forwardRef<MushroomRef, MushroomProps>((delegated, ref) => {
+export const Mushroom = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/nail-polish.tsx

@@ -1,19 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type NailPolishProps = SVGProps<SVGSVGElement>;
-type NailPolishRef = SVGSVGElement;
-
-export const NailPolish = forwardRef<NailPolishRef, NailPolishProps>((delegated, ref) => {
+export const NailPolish = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      width="12"
-      height="16"
-      viewBox="0 0 12 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
+    <svg ref={ref} width="12" height="16" viewBox="0 0 12 16" fill="none" {...delegated}>
       <path
         d="M.8573 9.7059H.4287v-.8824c0-.4873.3838-.8823.8571-.8823h4.2858c.4734 0 .8571.395.8571.8823v.8824h-.4286V15H.8573V9.7059Z"
         fill="#BFF6F8"

package/src/iconography/number.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type SVGProps } from 'react';
+
+import { stroke } from './variables';
+
+export const Number = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fill={stroke}
+        d="m5.929 20 3.14-18h2.237l-3.14 18H5.93Zm4.636 0 3.152-18h2.238l-3.153 18h-2.237Zm7.232-10.768H4.927v-2.09h12.87v2.09Zm-.94 5.7H4v-2.078h12.857v2.077Z"
+      />
+    </svg>
+  );
+});
+
+Number.displayName = 'NumberIcon';

package/src/iconography/numeric.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type NumericProps = SVGProps<SVGSVGElement>;
-
-type NumericRef = SVGSVGElement;
-
-export const Numeric = forwardRef<NumericRef, NumericProps>((delegated, ref) => {
+export const Numeric = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/order.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type OrderProps = SVGProps<SVGSVGElement>;
-
-type OrderRef = SVGSVGElement;
-
-export const Order = forwardRef<OrderRef, OrderProps>((delegated, ref) => {
+export const Order = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
       <path

package/src/iconography/organization.tsx

@@ -1,12 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type OrganizationProps = SVGProps<SVGSVGElement>;
-
-type OrganizationRef = SVGSVGElement;
-
-export const Organization = forwardRef<OrganizationRef, OrganizationProps>((delegated, ref) => {
+export const Organization = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
       <path d="M2.911 3.495h9.652V18.72H2.911V3.495Z" fill="#fff" />

package/src/iconography/paragraph-collection.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type ParagraphCollectionProps = SVGProps<SVGSVGElement>;
-
-type ParagraphCollectionRef = SVGSVGElement;
-
-export const ParagraphCollection = forwardRef<ParagraphCollectionRef, ParagraphCollectionProps>((delegated, ref) => {
+export const ParagraphCollection = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/particle.tsx

@@ -1,20 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type ParticleProps = SVGProps<SVGSVGElement>;
-
-type ParticleRef = SVGSVGElement;
-
-export const Particle = forwardRef<ParticleRef, ParticleProps>((delegated, ref) => {
+export const Particle = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
-    <svg
-      ref={ref}
-      width="22"
-      height="20"
-      viewBox="0 0 22 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...delegated}
-    >
+    <svg ref={ref} width="22" height="20" viewBox="0 0 22 20" fill="none" {...delegated}>
       <path
         fill="#528693"
         d="M10.9 18.597c0-.332-2.426-.606-5.418-.61-2.992-.006-5.418.26-5.419.592 0 .333 2.425.606 5.417.611 2.993.005 5.419-.26 5.42-.593ZM21.39 16.21c0-.267-1.94-.485-4.334-.49-2.394-.003-4.335.209-4.335.475s1.94.485 4.334.489c2.393.004 4.334-.209 4.335-.475Z"

package/src/iconography/paths.tsx

@@ -1,11 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
 import { fill, stroke } from './variables';
 
-type PathsProps = SVGProps<SVGSVGElement>;
-type PathsRef = SVGSVGElement;
-
-export const Paths = forwardRef<PathsRef, PathsProps>((delegated, ref) => {
+export const Paths = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/people.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type PeopleProps = SVGProps<SVGSVGElement>;
-
-type PeopleRef = SVGSVGElement;
-
-export const People = forwardRef<PeopleRef, PeopleProps>((delegated, ref) => {
+export const People = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
       <path

package/src/iconography/percentage.tsx

@@ -1,13 +1,8 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type PercentageProps = SVGProps<SVGSVGElement>;
-
-type PercentageRef = SVGSVGElement;
-
-export const Percentage = forwardRef<PercentageRef, PercentageProps>((delegated, ref) => {
-  const fill = 'var(--c-icon-fill, #BFF6F8)';
-  const stroke = 'var(--c-icon-stroke, #528693)';
+import { fill, stroke } from './variables';
 
+export const Percentage = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path

package/src/iconography/piece.tsx

@@ -1,13 +1,9 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type PieceProps = SVGProps<SVGSVGElement>;
-
-type PieceRef = SVGSVGElement;
-
-export const Piece = forwardRef<PieceRef, PieceProps>((delegated, ref) => {
+export const Piece = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
-      <g clipPath="url(#a)">
+      <g clipPath="url(#piece)">
         <path fill="#BFF6F8" d="M1.67 1.89h18.491v18.157H1.671V1.891Z" className="c-icon-fill" />
         <path
           fill="#fff"
@@ -25,7 +21,7 @@ export const Piece = forwardRef<PieceRef, PieceProps>((delegated, ref) => {
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="piece">
           <path fill="#fff" d="M0 0h22v22H0z" />
         </clipPath>
       </defs>

package/src/iconography/pin.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type PinProps = SVGProps<SVGSVGElement>;
-
-type PinRef = SVGSVGElement;
-
-export const Pin = forwardRef<PinRef, PinProps>((delegated, ref) => {
+export const Pin = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="26" height="26" viewBox="0 0 26 26" fill="none" {...delegated}>
       <path

package/src/iconography/pipeline-dashed.tsx

@@ -1,10 +1,6 @@
-import { forwardRef, SVGProps } from 'react';
+import { forwardRef, type SVGProps } from 'react';
 
-type PipelineDashedProps = SVGProps<SVGSVGElement>;
-
-type PipelineDashedRef = SVGSVGElement;
-
-export const PipelineDashed = forwardRef<PipelineDashedRef, PipelineDashedProps>((delegated, ref) => {
+export const PipelineDashed = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
   return (
     <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path