@crystallize/design-system 1.24.46 → 2.0.2

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,13 +71,16 @@ 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 { OperationLog } from './operation-log';
 import { Order } from './order';
 import { Organization } from './organization';
 import { ParagraphCollection } from './paragraph-collection';
@@ -101,6 +106,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 +114,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 +139,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 +152,14 @@ export const Icon = {
   BillingPayments,
   Bin,
   Bell,
+  Boolean,
   Caret,
   Cart,
   Catalogue,
   Check,
   CheckWithCircle,
   Chevron,
+  Checkbox,
   Cloud,
   Clock,
   CloudWithKeyHole,
@@ -187,6 +199,7 @@ export const Icon = {
   Limitations,
   LockClosed,
   LockOpen,
+  MetaPreset,
   Multilingual,
   MultipleChoice,
   Magnifier,
@@ -194,8 +207,10 @@ export const Icon = {
   MinValue,
   Mushroom,
   NailPolish,
+  Number,
   Order,
   Organization,
+  OperationLog,
   Paths,
   People,
   Percentage,
@@ -214,7 +229,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/operation-log.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, SVGProps } from 'react';
+
+import { fill, stroke } from './variables';
+
+export const OperationLog = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" fill="none" viewBox="0 0 22 22" {...delegated}>
+      <path
+        fill={fill}
+        d="M5 3.8a.8.8 0 0 1 .8-.8h10.4a.8.8 0 0 1 .8.8v14.4a.8.8 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8V3.8Z"
+      />
+      <path
+        fill={stroke}
+        d="M4.4 18.2V3.8a1.4 1.4 0 0 1 1.4-1.4V3a.8.8 0 0 0-.8.8v14.4l.004.082A.8.8 0 0 0 5.8 19h10.4l.082-.004a.8.8 0 0 0 .714-.714L17 18.2V3.8a.8.8 0 0 0-.718-.796L16.2 3v-.6a1.4 1.4 0 0 1 1.4 1.4v14.4a1.4 1.4 0 0 1-1.4 1.4H5.8a1.4 1.4 0 0 1-1.4-1.4ZM16.2 2.4V3H5.8v-.6h10.4Z"
+      />
+      <path fill="#fff" d="M9 2.8a.8.8 0 0 1 .8-.8h2.4a.8.8 0 0 1 .8.8v.4a.8.8 0 0 1-.8.8H9.8a.8.8 0 0 1-.8-.8v-.4Z" />
+      <path
+        fill={stroke}
+        d="M8.4 3.2v-.4a1.4 1.4 0 0 1 1.4-1.4V2a.8.8 0 0 0-.8.8v.4l.004.082A.8.8 0 0 0 9.8 4h2.4l.082-.004a.8.8 0 0 0 .714-.714L13 3.2v-.4a.8.8 0 0 0-.718-.796L12.2 2v-.6a1.4 1.4 0 0 1 1.4 1.4v.4a1.4 1.4 0 0 1-1.4 1.4H9.8a1.4 1.4 0 0 1-1.4-1.4Zm3.8-1.8V2H9.8v-.6h2.4Z"
+      />
+      <path
+        fill="#fff"
+        d="m14.925 10.301-.986-.185c-.06-.199-.139-.39-.236-.57l.57-.834a.212.212 0 0 0-.024-.259l-.703-.703a.212.212 0 0 0-.259-.024l-.834.57c-.185-.1-.382-.18-.588-.24l-.184-.98a.212.212 0 0 0-.2-.167h-.995a.212.212 0 0 0-.2.166l-.186.99a3.04 3.04 0 0 0-.564.236l-.823-.563a.212.212 0 0 0-.26.024l-.703.703a.212.212 0 0 0-.024.26l.567.828a3.055 3.055 0 0 0-.232.564l-.986.184a.212.212 0 0 0-.166.2v.995c0 .094.075.183.166.2l.985.185c.06.201.14.394.237.575l-.56.82a.211.211 0 0 0 .024.259l.703.703a.212.212 0 0 0 .26.024l.818-.56c.177.095.364.173.559.232l.185.99a.212.212 0 0 0 .2.167h.995a.212.212 0 0 0 .2-.166l.185-.981c.203-.06.398-.139.582-.237l.829.567a.212.212 0 0 0 .26-.024l.702-.703a.212.212 0 0 0 .025-.259l-.565-.825c.1-.183.18-.378.241-.582l.985-.184a.212.212 0 0 0 .166-.2v-.995a.212.212 0 0 0-.166-.2ZM11 12.706a1.706 1.706 0 1 1 0-3.412 1.706 1.706 0 0 1 0 3.412Z"
+      />
+      <path
+        fill={stroke}
+        d="M6.91 11.496c0 .093.073.183.165.2l.985.186c.06.2.14.393.237.574l-.56.82a.212.212 0 0 0 .024.26l.703.702c.05.05.128.068.196.052l.064-.027.818-.56c.176.094.363.172.559.232l.185.99a.213.213 0 0 0 .133.153l.068.013h.994a.212.212 0 0 0 .2-.166l.185-.98c.203-.06.398-.14.581-.238l.83.567a.21.21 0 0 0 .259-.024l.703-.702a.213.213 0 0 0 .025-.26l-.565-.824c.1-.184.18-.379.241-.582l.985-.186a.211.211 0 0 0 .166-.2v-.994a.213.213 0 0 0-.166-.201l-.987-.185c-.06-.2-.138-.39-.235-.57l.57-.834a.211.211 0 0 0 .015-.201l-.04-.058-.702-.703a.211.211 0 0 0-.259-.024l-.834.57c-.185-.1-.383-.18-.588-.24l-.184-.98a.213.213 0 0 0-.131-.154l-.069-.013v-.6c.335 0 .634.215.751.52l.04.135.118.64.006.002.553-.377a.813.813 0 0 1 .913.006l.109.09.702.703.09.109a.812.812 0 0 1 .005.914l-.37.54.637.12h.002a.812.812 0 0 1 .654.79v.995c0 .383-.28.719-.654.79h-.002l-.646.12v.002l.37.541v.001a.812.812 0 0 1-.095 1.022l-.703.703-.001-.001a.81.81 0 0 1-1.022.096l-.548-.375-.119.64v.002a.812.812 0 0 1-.79.654h-.994a.812.812 0 0 1-.79-.654v-.002l-.119-.63-.516.353a.812.812 0 0 1-1.022-.095v-.001l-.703-.703a.811.811 0 0 1-.096-1.022l.363-.532-.64-.119h-.001a.812.812 0 0 1-.654-.79v-.994c0-.383.28-.719.654-.79h.002l.629-.118-.364-.53v-.002a.811.811 0 0 1 .096-1.021l.702-.703a.813.813 0 0 1 .9-.164l.124.068.524.36.12-.637v-.001a.812.812 0 0 1 .79-.654v.6a.212.212 0 0 0-.2.165l-.185.99c-.198.06-.387.139-.565.236l-.823-.563a.212.212 0 0 0-.26.024l-.703.703a.213.213 0 0 0-.025.26l.568.828a3.058 3.058 0 0 0-.233.563l-.985.185a.213.213 0 0 0-.166.2v.995ZM12.105 11A1.107 1.107 0 1 0 11 12.106v.601l-.175-.009a1.707 1.707 0 0 1-1.522-1.523L9.293 11c0-.942.765-1.706 1.707-1.706l.175.009c.86.087 1.532.814 1.532 1.697l-.009.175A1.708 1.708 0 0 1 11 12.707v-.6c.611 0 1.106-.496 1.106-1.107Zm-.625-4.69v.6h-.995v-.6h.995Z"
+      />
+    </svg>
+  );
+});
+
+OperationLog.displayName = 'OperationLogIcon';

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