@crystallize/design-system 1.16.3 → 1.16.5

package/src/iconography/index.ts

@@ -2,11 +2,15 @@ import { Add } from './add';
 import { App } from './app';
 import { Arrow } from './arrow';
 import { Atom } from './atom';
+import { Bell } from './bell';
 import { BillingPayments } from './billing-payments';
 import { Bin } from './bin';
 import { Cancel } from './cancel';
+import { Caret } from './caret';
 import { Catalogue } from './catalogue';
 import { CheckWithCircle } from './check-with-circle';
+import { Choice } from './choice';
+import { Chunk } from './chunk';
 import { Cloud } from './cloud';
 import { CloudWithKeyHole } from './cloud-with-key-hole';
 import { Copy } from './copy';
@@ -14,42 +18,61 @@ import { CopyWithCloud } from './copy-with-cloud';
 import { Crystal } from './crystal';
 import { Customers } from './customers';
 import { Dashboard } from './dashboard';
+import { Date } from './date';
 import { Document } from './document';
 import { Edit } from './edit';
 import { Error } from './error';
+import { FileUpload } from './file-upload';
+import { FixedPropertyTable } from './fixed-property-table';
 import { Folder } from './folder';
 import { Frontends } from './frontends';
 import { Fulfilment } from './fulfilment';
 import { Glasses } from './glasses';
 import { GraphQL } from './graphQL';
 import { Grid } from './grid';
+import { GridRelation } from './grid-relation';
+import { HandMirror } from './hand-mirror';
 import { Hooks } from './hooks';
 import { Image } from './image';
 import { Info } from './info';
 import { Key } from './key';
 import { Language } from './language';
+import { Location } from './location';
 import { LockClosed } from './lock-closed';
+import { Magnifier } from './magnifier';
 import { Multilingual } from './multilingual';
 import { Mushroom } from './mushroom';
 import { NailPolish } from './nail-polish';
+import { Numeric } from './numeric';
 import { Order } from './order';
+import { ParagraphCollection } from './paragraph-collection';
 import { Particle } from './particle';
 import { People } from './people';
 import { Percentage } from './percentage';
 import { Pin } from './pin';
+import { PipelineDashed } from './pipeline-dashed';
 import { PlansAndPricing } from './plans-and-pricing';
+import { Plug } from './plug';
 import { PriceList } from './price-list';
 import { PriceTag } from './price-tag';
 import { Product } from './product';
+import { PropertyTable } from './property-table';
+import { Relation } from './relation';
+import { Renew } from './renew';
 import { RestrictedCatalogue } from './restricted-catalogue';
+import { RichText } from './rich-text';
 import { Rocket } from './rocket';
 import { Search } from './search';
+import { Selection } from './selection';
 import { Settings } from './settings';
 import { Shapes } from './shapes';
+import { SingleLine } from './singleline';
+import { Split } from './split';
 import { StockLocation } from './stock-location';
 import { Subscription } from './subscription';
 import { SubscriptionContracts } from './subscription-contracts';
 import { SubscriptionPlans } from './subscription-plans';
+import { Switch } from './switch';
 import { Target } from './target';
 import { Topics } from './topics';
 import { Unpublish } from './unpublish';
@@ -57,60 +80,91 @@ import { Usage } from './usage';
 import { UsageMeter } from './usage-meter';
 import { UserCard } from './user-card';
 import { Users } from './users';
+import { Video } from './video';
 import { Warning } from './warning';
 
 export const Icon = {
   Add,
   App,
-  Arrow,
-  Atom,
   BillingPayments,
   Bin,
-  Cancel,
+  Bell,
+  Caret,
   Catalogue,
   CheckWithCircle,
   Cloud,
   CloudWithKeyHole,
   Copy,
   CopyWithCloud,
-  Crystal,
   Customers,
   Dashboard,
   Document,
   Edit,
-  Error,
   Folder,
   Frontends,
   Fulfilment,
   Glasses,
   GraphQL,
   Grid,
+  HandMirror,
   Hooks,
-  Image,
   Info,
   Key,
   Language,
   LockClosed,
   Multilingual,
+  Magnifier,
   Mushroom,
   NailPolish,
   Order,
-  Particle,
   People,
   Percentage,
   Pin,
   PlansAndPricing,
+  Plug,
   PriceList,
   PriceTag,
   Product,
+  PipelineDashed,
   RestrictedCatalogue,
+  Renew,
   Rocket,
   Search,
   Settings,
   Shapes,
+  Split,
   StockLocation,
   SubscriptionContracts,
   SubscriptionPlans,
+  /**
+   * Component icons
+   */
+  Image,
+  SingleLine,
+  RichText,
+  ParagraphCollection,
+  PropertyTable,
+  FixedPropertyTable,
+  Switch,
+  Location,
+  Video,
+  GridRelation,
+  Date,
+  Relation,
+  Numeric,
+  FileUpload,
+  /**
+   * Misc
+   */
+  Arrow,
+  Atom,
+  Cancel,
+  Error,
+  Particle,
+  Crystal,
+  Choice,
+  Chunk,
+  Selection,
   /**
    * @deprecated Use SubscriptionPlans icon instead
    */

package/src/iconography/location.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, SVGProps } from 'react';
+
+type LocationProps = SVGProps<SVGSVGElement>;
+
+type LocationRef = SVGSVGElement;
+
+export const Location = forwardRef<LocationRef, LocationProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M16 8C16 10.0465 13.2539 15.1012 11.8319 17.5813C11.4586 18.2324 10.5414 18.2324 10.1681 17.5813C8.74614 15.1012 6 10.0465 6 8C6 5.23858 8.23858 3 11 3C13.7614 3 16 5.23858 16 8Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9917 12.8844C14.1175 14.7348 13.0666 16.6342 12.3524 17.8798C11.7486 18.9329 10.2514 18.9329 9.64757 17.8798C8.93343 16.6342 7.88246 14.7348 7.0083 12.8844C6.57144 11.9596 6.17414 11.0375 5.88488 10.2096C5.60106 9.39733 5.39999 8.6179 5.39999 8.00002C5.39999 4.90723 7.9072 2.40002 11 2.40002C14.0928 2.40002 16.6 4.90723 16.6 8.00002C16.6 8.6179 16.3989 9.39733 16.1151 10.2096C15.8258 11.0375 15.4286 11.9596 14.9917 12.8844ZM11.8319 17.5814C13.2539 15.1012 16 10.0465 16 8.00002C16 5.2386 13.7614 3.00002 11 3.00002C8.23857 3.00002 5.99999 5.2386 5.99999 8.00002C5.99999 10.0465 8.74613 15.1012 10.1681 17.5814C10.5414 18.2324 11.4586 18.2324 11.8319 17.5814Z"
+        fill="#528693"
+      />
+      <path
+        d="M13 8C13 9.10457 12.1046 10 11 10C9.89543 10 9 9.10457 9 8C9 6.89543 9.89543 6 11 6C12.1046 6 13 6.89543 13 8Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.6 8.00002C13.6 9.43596 12.4359 10.6 11 10.6C9.56405 10.6 8.39999 9.43596 8.39999 8.00002C8.39999 6.56408 9.56405 5.40002 11 5.40002C12.4359 5.40002 13.6 6.56408 13.6 8.00002ZM11 10C12.1046 10 13 9.10459 13 8.00002C13 6.89545 12.1046 6.00002 11 6.00002C9.89542 6.00002 8.99999 6.89545 8.99999 8.00002C8.99999 9.10459 9.89542 10 11 10Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Location.displayName = 'Location';

package/src/iconography/magnifier.tsx

@@ -0,0 +1,40 @@
+import { forwardRef } 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>
+    );
+  },
+);
+
+Magnifier.displayName = 'Magnifier';

package/src/iconography/numeric.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, SVGProps } from 'react';
+
+type NumericProps = SVGProps<SVGSVGElement>;
+
+type NumericRef = SVGSVGElement;
+
+export const Numeric = forwardRef<NumericRef, NumericProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M18.7392 15.2607C19.0398 15.2607 19.2835 15.5044 19.2835 15.805V16.8059C19.2835 17.1065 19.0398 17.3502 18.7392 17.3502H12.2785C11.9779 17.3502 11.7342 17.1065 11.7342 16.8059V15.5788L15.2612 11.2967C15.5914 10.861 15.854 10.4769 16.0492 10.1444C16.2493 9.81194 16.3944 9.51099 16.4844 9.24156C16.5745 8.9664 16.6195 8.71417 16.6195 8.48487C16.6195 8.11226 16.567 7.79697 16.4619 7.53901C16.3618 7.28105 16.2143 7.08328 16.0191 6.9457C15.824 6.80812 15.5864 6.73933 15.3062 6.73933C15.0061 6.73933 14.7484 6.82819 14.5333 7.00589C14.3182 7.1836 14.1531 7.4301 14.038 7.74538C13.9784 7.90564 13.9343 8.07743 13.9056 8.26073C13.859 8.55771 13.6217 8.80303 13.3211 8.80303H12.0534C11.7527 8.80303 11.5055 8.5586 11.5374 8.25969C11.5963 7.70774 11.7469 7.19522 11.9893 6.72213C12.3095 6.09156 12.7573 5.58997 13.3326 5.21736C13.9079 4.83901 14.5808 4.64984 15.3513 4.64984C16.1417 4.64984 16.8046 4.79315 17.3399 5.07978C17.8752 5.3664 18.2804 5.77627 18.5556 6.3094C18.8308 6.84252 18.9683 7.48455 18.9683 8.23551C18.9683 8.65971 18.9083 9.06959 18.7882 9.46513C18.6732 9.86067 18.5056 10.2533 18.2854 10.6432C18.0653 11.033 17.8002 11.4314 17.49 11.8384C17.1798 12.2396 16.8296 12.6639 16.4394 13.111L15.1248 14.8228C14.9873 15.0018 15.1149 15.2607 15.3406 15.2607H18.7392Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.1899 15.5788C11.1899 15.4525 11.2338 15.3302 11.314 15.2328L14.834 10.9592C15.153 10.5378 15.4001 10.175 15.5797 9.86893L15.5828 9.86371L15.5828 9.86373C15.7688 9.55464 15.8938 9.29107 15.9676 9.07061C16.0439 8.83716 16.0752 8.64347 16.0752 8.48486C16.0752 8.16021 16.029 7.9191 15.9578 7.7443L15.9544 7.73586L15.9544 7.73583C15.8868 7.56153 15.7997 7.45697 15.7055 7.39052C15.6173 7.32832 15.4941 7.28362 15.3062 7.28362C15.1223 7.28362 14.9898 7.33472 14.8799 7.42552C14.7533 7.53015 14.6379 7.68915 14.5493 7.93198L14.5482 7.93502L14.5482 7.93502C14.5023 8.05841 14.4668 8.19463 14.4433 8.345C14.3639 8.85175 13.942 9.34731 13.3211 9.34731H12.0533C11.4705 9.34731 10.9257 8.86207 10.9961 8.20194C11.0618 7.58687 11.2305 7.00971 11.5045 6.4748C11.8664 5.76243 12.3776 5.18776 13.0351 4.76152C13.7092 4.31869 14.4883 4.10553 15.3513 4.10553C16.2051 4.10553 16.9622 4.26013 17.5968 4.59992C18.228 4.93789 18.7129 5.42745 19.0393 6.05975C19.363 6.68705 19.5126 7.41908 19.5126 8.2355C19.5126 8.71076 19.4454 9.17297 19.31 9.62015C19.1823 10.0583 18.9978 10.4885 18.7594 10.9108C18.5254 11.3251 18.2461 11.7442 17.9229 12.1683L17.9206 12.1713L17.9206 12.1712C17.6059 12.5784 17.2524 13.0067 16.8607 13.456L15.8927 14.7164H18.7392C19.3404 14.7164 19.8278 15.2037 19.8278 15.805V16.8058C19.8278 17.4071 19.3404 17.8944 18.7392 17.8944H12.2785C11.6773 17.8944 11.1899 17.4071 11.1899 16.8058V15.5788ZM16.4394 13.111C16.8296 12.6638 17.1798 12.2396 17.49 11.8384C17.8002 11.4314 18.0653 11.0329 18.2854 10.6431C18.5056 10.2533 18.6732 9.86066 18.7882 9.46512C18.9083 9.06957 18.9683 8.6597 18.9683 8.2355C18.9683 7.48454 18.8307 6.8425 18.5556 6.30938C18.2804 5.77626 17.8752 5.36639 17.3399 5.07977C16.8046 4.79314 16.1417 4.64983 15.3513 4.64983C14.5808 4.64983 13.9079 4.839 13.3326 5.21734C12.7573 5.58996 12.3095 6.09155 11.9893 6.72212C11.7469 7.19521 11.5963 7.70773 11.5374 8.25968C11.5055 8.55859 11.7527 8.80301 12.0533 8.80301H13.3211C13.6217 8.80301 13.859 8.5577 13.9055 8.26072C13.9343 8.07741 13.9784 7.90563 14.038 7.74537C14.1531 7.43008 14.3182 7.18359 14.5333 7.00588C14.7484 6.82817 15.0061 6.73932 15.3062 6.73932C15.5864 6.73932 15.824 6.80811 16.0191 6.94569C16.2142 7.08327 16.3618 7.28104 16.4619 7.539C16.5669 7.79696 16.6195 8.11225 16.6195 8.48486C16.6195 8.71416 16.5745 8.96639 16.4844 9.24155C16.3943 9.51098 16.2493 9.81193 16.0492 10.1444C15.854 10.4769 15.5914 10.861 15.2612 11.2966L11.7342 15.5788V16.8058C11.7342 17.1065 11.9779 17.3501 12.2785 17.3501H18.7392C19.0398 17.3501 19.2835 17.1065 19.2835 16.8058V15.805C19.2835 15.5043 19.0398 15.2607 18.7392 15.2607H15.3406C15.1149 15.2607 14.9873 15.0017 15.1247 14.8227L16.4394 13.111Z"
+        fill="#528693"
+      />
+      <path
+        d="M10.1239 12.5692C10.2742 12.5692 10.396 12.6911 10.396 12.8414V14.378C10.396 14.5283 10.2742 14.6501 10.1239 14.6501H2.67849C2.39432 14.6501 2.15797 14.4315 2.13584 14.1482L2.06006 13.1777C2.05184 13.0724 2.07442 12.967 2.12506 12.8744L6.36523 5.11371C6.46067 4.93903 6.64384 4.83038 6.84289 4.83038H8.37359L6.36244 8.64822L4.53491 12.1718C4.44095 12.3529 4.57243 12.5692 4.7765 12.5692H10.1239ZM8.32458 4.83038C8.62519 4.83038 8.86888 5.07407 8.86888 5.37468V16.8058C8.86888 17.1064 8.62519 17.3501 8.32458 17.3501H7.07183C6.77123 17.3501 6.52753 17.1064 6.52753 16.8058V5.37468C6.52753 5.07407 6.77123 4.83038 7.07183 4.83038H8.32458Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.82045 5.14993C8.79965 5.10412 8.7727 5.0617 8.74063 5.02373C8.6517 4.9184 8.5235 4.8473 8.37861 4.83302C8.37694 4.83286 8.37526 4.8327 8.37358 4.83255C8.37322 4.83252 8.37285 4.83248 8.37249 4.83245L8.37358 4.83037H6.84287C6.64383 4.83037 6.46066 4.93902 6.36522 5.11369L2.12504 12.8743C2.07441 12.967 2.05183 13.0724 2.06005 13.1777L2.13583 14.1482C2.15796 14.4315 2.39431 14.6501 2.67848 14.6501H6.52752V16.8058C6.52752 17.1064 6.77121 17.3501 7.07182 17.3501H8.32457C8.62517 17.3501 8.86887 17.1064 8.86887 16.8058V14.6501H10.1238C10.2741 14.6501 10.396 14.5283 10.396 14.378V12.8414C10.396 12.6911 10.2741 12.5692 10.1238 12.5692H8.86887V5.37467C8.86887 5.29453 8.85155 5.21844 8.82045 5.14993ZM6.36243 8.64821L6.52752 8.3348V12.5692H4.77649C4.57241 12.5692 4.44094 12.3529 4.5349 12.1718L6.36243 8.64821ZM5.98322 10.5615L5.22422 12.0249H5.98322V10.5615ZM9.41316 12.0249H10.1238C10.5748 12.0249 10.9403 12.3905 10.9403 12.8414V14.378C10.9403 14.8289 10.5748 15.1944 10.1238 15.1944H9.41316V16.8058C9.41316 17.407 8.92578 17.8944 8.32457 17.8944H7.07182C6.47061 17.8944 5.98322 17.407 5.98322 16.8058V15.1944H2.67848C2.11013 15.1944 1.63743 14.7572 1.59319 14.1906L1.5174 13.2201C1.50096 13.0095 1.54613 12.7987 1.64739 12.6134L5.88756 4.85272C6.07844 4.50337 6.44478 4.28607 6.84287 4.28607H8.37358C8.41268 4.28607 8.45119 4.29027 8.48857 4.29834C9.01197 4.37743 9.41316 4.8292 9.41316 5.37467V12.0249Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Numeric.displayName = 'Numeric';

package/src/iconography/paragraph-collection.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ParagraphCollectionProps = SVGProps<SVGSVGElement>;
+
+type ParagraphCollectionRef = SVGSVGElement;
+
+export const ParagraphCollection = forwardRef<ParagraphCollectionRef, ParagraphCollectionProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M18 18.4001C18 18.7314 17.7314 19.0001 17.4 19.0001L4.6 19.0001C4.26863 19.0001 4 18.7314 4 18.4001L4 14.6001C4 14.2687 4.26863 14.0001 4.6 14.0001L17.4 14.0001C17.7314 14.0001 18 14.2687 18 14.6001L18 18.4001Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4 19.6L4.60001 19.6C3.93726 19.6 3.40001 19.0628 3.40001 18.4L3.40001 14.6C3.40001 13.9373 3.93726 13.4 4.60001 13.4L17.4 13.4C18.0627 13.4 18.6 13.9373 18.6 14.6L18.6 18.4C18.6 19.0628 18.0627 19.6 17.4 19.6ZM17.4 19C17.7314 19 18 18.7314 18 18.4L18 14.6C18 14.2687 17.7314 14 17.4 14L4.60001 14C4.26864 14 4.00001 14.2687 4.00001 14.6L4.00001 18.4C4.00001 18.7314 4.26863 19 4.60001 19L17.4 19Z"
+        fill="#528693"
+      />
+      <path
+        d="M18 10.4001C18 10.7314 17.7314 11.0001 17.4 11.0001L4.6 11.0001C4.26863 11.0001 4 10.7314 4 10.4001L4 9.60006C4 9.26869 4.26863 9.00006 4.6 9.00006L17.4 9.00006C17.7314 9.00006 18 9.26869 18 9.60006L18 10.4001Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4 11.6L4.60001 11.6C3.93726 11.6 3.40001 11.0628 3.40001 10.4L3.40001 9.60004C3.40001 8.93729 3.93726 8.40004 4.60001 8.40004L17.4 8.40004C18.0627 8.40004 18.6 8.93729 18.6 9.60004L18.6 10.4C18.6 11.0628 18.0627 11.6 17.4 11.6ZM17.4 11C17.7314 11 18 10.7314 18 10.4L18 9.60004C18 9.26867 17.7314 9.00004 17.4 9.00004L4.60001 9.00004C4.26864 9.00004 4.00001 9.26866 4.00001 9.60004L4.00001 10.4C4.00001 10.7314 4.26863 11 4.60001 11L17.4 11Z"
+        fill="#528693"
+      />
+      <path
+        d="M18 5.40006C18 5.73143 17.7314 6.00006 17.4 6.00006L4.6 6.00006C4.26863 6.00006 4 5.73143 4 5.40006L4 3.60006C4 3.26869 4.26863 3.00006 4.6 3.00006L17.4 3.00006C17.7314 3.00006 18 3.26869 18 3.60006L18 5.40006Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4 6.60004L4.60001 6.60004C3.93726 6.60004 3.40001 6.06278 3.40001 5.40004L3.40001 3.60004C3.40001 2.93729 3.93726 2.40004 4.60001 2.40004L17.4 2.40004C18.0627 2.40004 18.6 2.93729 18.6 3.60004L18.6 5.40004C18.6 6.06278 18.0627 6.60004 17.4 6.60004ZM17.4 6.00004C17.7314 6.00004 18 5.73141 18 5.40004L18 3.60004C18 3.26867 17.7314 3.00004 17.4 3.00004L4.60001 3.00004C4.26864 3.00004 4.00001 3.26866 4.00001 3.60004L4.00001 5.40004C4.00001 5.73141 4.26863 6.00004 4.60001 6.00004L17.4 6.00004Z"
+        fill="#528693"
+      />
+      <path
+        d="M11 15C8.6 14.6 5 16.8333 3.5 18L4 19L4.5 19.5H17L18 19L18.5 16.5C18.1 17.3 15 17.8333 13.5 18C11.5 17.6 11 15.8333 11 15Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.12258 15.2807C9.53327 14.8558 10.7686 14.7497 11.4727 14.8201C11.5725 14.8301 11.6494 14.9124 11.6527 15.0126C11.656 15.1128 11.5846 15.1999 11.4857 15.2164C10.5346 15.3749 9.97375 15.6289 9.66223 15.9136C9.36259 16.1875 9.27811 16.504 9.31556 16.8504C9.35133 17.1812 9.47565 17.4361 9.6655 17.6338C9.85768 17.834 10.1264 17.9852 10.4634 18.0893C11.1414 18.2986 12.0567 18.3051 13.0478 18.174C15.0299 17.9117 17.214 17.1139 18.1891 16.4638L18.411 16.7966C17.3722 17.4891 15.1257 18.3025 13.1002 18.5705C12.0875 18.7045 11.1047 18.706 10.3453 18.4714C9.96356 18.3536 9.62877 18.1731 9.37695 17.9108C9.1228 17.6461 8.96266 17.3077 8.91787 16.8934C8.86874 16.4389 8.98565 15.9901 9.39237 15.6184C9.52033 15.5014 9.67515 15.3938 9.8594 15.2962C9.37178 15.3693 8.82237 15.4877 8.23794 15.6637C6.86614 16.0769 5.31482 16.8036 3.93021 17.9904L3.66989 17.6867C5.10473 16.4569 6.7085 15.7067 8.12258 15.2807Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5316 14.8353C11.6331 14.8788 11.6802 14.9963 11.6367 15.0979C11.4602 15.5097 11.3727 16.1267 11.6369 16.6837C11.8959 17.2297 12.5181 17.7698 13.8683 17.9874C13.905 17.9933 13.9423 17.999 13.9801 18.0045C14.0894 18.0202 14.1653 18.1215 14.1496 18.2309C14.1339 18.3402 14.0325 18.4161 13.9232 18.4004C13.8832 18.3946 13.8436 18.3886 13.8046 18.3823C12.3693 18.151 11.6079 17.5559 11.2755 16.8551C10.9483 16.1653 11.0618 15.4238 11.269 14.9403C11.3125 14.8388 11.4301 14.7917 11.5316 14.8353Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4 19.6L4.60001 19.6C3.93726 19.6 3.40001 19.0628 3.40001 18.4L3.40001 14.6C3.40001 13.9373 3.93726 13.4 4.60001 13.4L17.4 13.4C18.0627 13.4 18.6 13.9373 18.6 14.6L18.6 18.4C18.6 19.0628 18.0627 19.6 17.4 19.6ZM17.4 19C17.7314 19 18 18.7314 18 18.4L18 14.6C18 14.2687 17.7314 14 17.4 14L4.60001 14C4.26864 14 4.00001 14.2687 4.00001 14.6L4.00001 18.4C4.00001 18.7314 4.26863 19 4.60001 19L17.4 19Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+ParagraphCollection.displayName = 'ParagraphCollection';

package/src/iconography/percentage.tsx

@@ -6,35 +6,44 @@ type PercentageRef = SVGSVGElement;
 
 export const Percentage = forwardRef<PercentageRef, PercentageProps>((delegated, ref) => {
   return (
-    <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
       <path
-        d="M2.5603 14.0231c-.5858-.5858-.5858-1.5356 0-2.1213L12.886 1.5761c.5858-.5858 1.5355-.5858 2.1213 0 .5858.5857.5858 1.5355 0 2.1213L4.6816 14.023c-.5858.5858-1.5356.5858-2.1213 0Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.03188 15.4616L16.3576 5.13588C16.7481 4.74536 17.3813 4.74536 17.7718 5.13588C18.1623 5.52641 18.1623 6.15957 17.7718 6.5501L7.44609 16.8758C7.05556 17.2663 6.4224 17.2663 6.03188 16.8758C5.64135 16.4853 5.64135 15.8521 6.03188 15.4616Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M13.2395 1.9296 2.9138 12.2553c-.3905.3905-.3905 1.0237 0 1.4142.3905.3905 1.0237.3905 1.4142 0L14.6537 3.3438c.3906-.3905.3906-1.0237 0-1.4142-.3905-.3905-1.0236-.3905-1.4142 0ZM2.5603 11.9018c-.5858.5857-.5858 1.5355 0 2.1213.5857.5858 1.5355.5858 2.1213 0L15.0073 3.6974c.5858-.5858.5858-1.5356 0-2.1214-.5858-.5857-1.5355-.5857-2.1213 0L2.5603 11.9018Z"
+        d="M5.60761 15.0373L15.9333 4.71159C16.5582 4.08676 17.5712 4.08676 18.1961 4.7116C18.8209 5.33644 18.8209 6.3495 18.1961 6.97434L7.87035 17.3C7.24551 17.9249 6.23245 17.9249 5.60761 17.3C4.98277 16.6752 4.98277 15.6621 5.60761 15.0373ZM16.3576 5.13586L6.03187 15.4616C5.64135 15.8521 5.64135 16.4853 6.03187 16.8758C6.4224 17.2663 7.05556 17.2663 7.44609 16.8758L17.7718 6.55007C18.1623 6.15955 18.1623 5.52638 17.7718 5.13586C17.3813 4.74533 16.7481 4.74533 16.3576 5.13586Z"
         fill="#528693"
       />
       <path
-        d="M6.984 3.4998c0 1.3807-1.1193 2.5-2.5 2.5s-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5Z"
-        fill="#fff"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.60204 6.70605C9.60204 7.81062 8.70661 8.70605 7.60204 8.70605C6.49747 8.70605 5.60204 7.81062 5.60204 6.70605C5.60204 5.60148 6.49747 4.70605 7.60204 4.70605C8.70661 4.70605 9.60204 5.60148 9.60204 6.70605Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M4.484 5.4998c1.1045 0 2-.8955 2-2 0-1.1046-.8955-2-2-2-1.1046 0-2 .8954-2 2 0 1.1045.8954 2 2 2Zm0 .5c1.3807 0 2.5-1.1193 2.5-2.5s-1.1193-2.5-2.5-2.5-2.5 1.1193-2.5 2.5 1.1193 2.5 2.5 2.5Z"
+        d="M10.202 6.70603C10.202 8.14197 9.03798 9.30603 7.60204 9.30603C6.1661 9.30603 5.00204 8.14197 5.00204 6.70603C5.00204 5.27009 6.1661 4.10603 7.60204 4.10603C9.03798 4.10603 10.202 5.27009 10.202 6.70603ZM7.60204 8.70603C8.70661 8.70603 9.60204 7.8106 9.60204 6.70603C9.60204 5.60146 8.70661 4.70603 7.60204 4.70603C6.49747 4.70603 5.60204 5.60146 5.60204 6.70603C5.60204 7.8106 6.49747 8.70603 7.60204 8.70603Z"
         fill="#528693"
       />
       <path
-        d="M15.984 12.4998c0 1.3807-1.1193 2.5-2.5 2.5s-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5Z"
-        fill="#fff"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.602 15.7061C18.602 16.8106 17.7066 17.7061 16.602 17.7061C15.4975 17.7061 14.602 16.8106 14.602 15.7061C14.602 14.6015 15.4975 13.7061 16.602 13.7061C17.7066 13.7061 18.602 14.6015 18.602 15.7061Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M13.484 14.4998c1.1045 0 2-.8955 2-2 0-1.1046-.8955-2-2-2-1.1046 0-2 .8954-2 2 0 1.1045.8954 2 2 2Zm0 .5c1.3807 0 2.5-1.1193 2.5-2.5s-1.1193-2.5-2.5-2.5-2.5 1.1193-2.5 2.5 1.1193 2.5 2.5 2.5Z"
+        d="M19.202 15.7061C19.202 17.142 18.038 18.3061 16.602 18.3061C15.1661 18.3061 14.002 17.142 14.002 15.7061C14.002 14.2701 15.1661 13.1061 16.602 13.1061C18.038 13.1061 19.202 14.2701 19.202 15.7061ZM16.602 17.7061C17.7066 17.7061 18.602 16.8106 18.602 15.7061C18.602 14.6015 17.7066 13.7061 16.602 13.7061C15.4975 13.7061 14.602 14.6015 14.602 15.7061C14.602 16.8106 15.4975 17.7061 16.602 17.7061Z"
         fill="#528693"
       />
     </svg>

package/src/iconography/pipeline-dashed.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, SVGProps } from 'react';
+
+type PipelineDashedProps = SVGProps<SVGSVGElement>;
+
+type PipelineDashedRef = SVGSVGElement;
+
+export const PipelineDashed = forwardRef<PipelineDashedRef, PipelineDashedProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.53671 14.1535C3.7024 14.1535 3.83671 14.2878 3.83671 14.4535V16.2373L5.13158 16.6689C5.28876 16.7213 5.37371 16.8912 5.32131 17.0484C5.26892 17.2056 5.09902 17.2905 4.94184 17.2381L3.44184 16.7381C3.31934 16.6973 3.23671 16.5826 3.23671 16.4535V14.4535C3.23671 14.2878 3.37102 14.1535 3.53671 14.1535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.53671 10.1535C3.7024 10.1535 3.83671 10.2878 3.83671 10.4535V12.4535C3.83671 12.6192 3.7024 12.7535 3.53671 12.7535C3.37102 12.7535 3.23671 12.6192 3.23671 12.4535V10.4535C3.23671 10.2878 3.37102 10.1535 3.53671 10.1535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.53671 14.1535C3.7024 14.1535 3.83671 14.2878 3.83671 14.4535V16.2373L5.13158 16.6689C5.28876 16.7213 5.37371 16.8912 5.32131 17.0484C5.26892 17.2056 5.09902 17.2905 4.94184 17.2381L3.44184 16.7381C3.31934 16.6973 3.23671 16.5826 3.23671 16.4535V14.4535C3.23671 14.2878 3.37102 14.1535 3.53671 14.1535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.53671 8.25354C3.7024 8.25354 3.83671 8.11923 3.83671 7.95354V6.16977L6.63158 5.23815C6.78876 5.18575 6.87371 5.01585 6.82131 4.85867C6.76892 4.70149 6.59902 4.61654 6.44184 4.66894L3.44184 5.66894C3.31934 5.70977 3.23671 5.82441 3.23671 5.95354V7.95354C3.23671 8.11923 3.37102 8.25354 3.53671 8.25354Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.24253 5.89467C3.27503 5.7322 3.43307 5.62683 3.59554 5.65933L6.09554 6.15933C6.25801 6.19182 6.36337 6.34987 6.33088 6.51234C6.29839 6.6748 6.14034 6.78017 5.97787 6.74767L3.47787 6.24767C3.3154 6.21518 3.21004 6.05713 3.24253 5.89467Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.5367 10.1535C18.371 10.1535 18.2367 10.2878 18.2367 10.4535V12.4535C18.2367 12.6192 18.371 12.7535 18.5367 12.7535C18.7024 12.7535 18.8367 12.6192 18.8367 12.4535V10.4535C18.8367 10.2878 18.7024 10.1535 18.5367 10.1535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.5367 14.1535C18.371 14.1535 18.2367 14.2878 18.2367 14.4535V16.2373L16.9418 16.6689C16.7846 16.7213 16.6997 16.8912 16.7521 17.0484C16.8045 17.2056 16.9744 17.2905 17.1316 17.2381L18.6316 16.7381C18.7541 16.6973 18.8367 16.5826 18.8367 16.4535V14.4535C18.8367 14.2878 18.7024 14.1535 18.5367 14.1535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.5367 8.25354C18.371 8.25354 18.2367 8.11923 18.2367 7.95354V6.16977L15.4418 5.23815C15.2846 5.18575 15.1997 5.01585 15.2521 4.85867C15.3045 4.70149 15.4744 4.61654 15.6316 4.66894L18.6316 5.66894C18.7541 5.70977 18.8367 5.82441 18.8367 5.95354V7.95354C18.8367 8.11923 18.7024 8.25354 18.5367 8.25354Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.8309 5.89467C18.7984 5.7322 18.6403 5.62683 18.4779 5.65933L15.9779 6.15933C15.8154 6.19182 15.71 6.34987 15.7425 6.51234C15.775 6.6748 15.9331 6.78017 16.0955 6.74767L18.5955 6.24767C18.758 6.21518 18.8634 6.05713 18.8309 5.89467Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0367 3.33722L12.6316 3.86884C12.7888 3.92124 12.8737 4.09113 12.8213 4.24832C12.7689 4.4055 12.599 4.49045 12.4418 4.43805L11.0367 3.96967L9.63157 4.43805C9.47438 4.49045 9.30449 4.4055 9.25209 4.24832C9.1997 4.09113 9.28465 3.92124 9.44183 3.86884L11.0367 3.33722Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.74566 7.0807C8.78585 6.91997 8.94873 6.82224 9.10946 6.86242L11.0367 7.34423L12.9639 6.86242C13.1247 6.82224 13.2876 6.91997 13.3277 7.0807C13.3679 7.24144 13.2702 7.40432 13.1095 7.44451L11.0367 7.9627L8.96394 7.44451C8.80321 7.40432 8.70548 7.24144 8.74566 7.0807Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.74566 17.7808C8.78585 17.62 8.94873 17.5223 9.10946 17.5625L11.0367 18.0443L12.9639 17.5625C13.1247 17.5223 13.2876 17.62 13.3277 17.7808C13.3679 17.9415 13.2702 18.1044 13.1095 18.1446L11.0367 18.6628L8.96394 18.1446C8.80321 18.1044 8.70548 17.9415 8.74566 17.7808Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0367 7.6535C11.2024 7.6535 11.3367 7.78782 11.3367 7.9535V9.4535C11.3367 9.61919 11.2024 9.7535 11.0367 9.7535C10.871 9.7535 10.7367 9.61919 10.7367 9.4535V7.9535C10.7367 7.78782 10.871 7.6535 11.0367 7.6535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0367 11.6535C11.2024 11.6535 11.3367 11.7878 11.3367 11.9535V13.4535C11.3367 13.6192 11.2024 13.7535 11.0367 13.7535C10.871 13.7535 10.7367 13.6192 10.7367 13.4535V11.9535C10.7367 11.7878 10.871 11.6535 11.0367 11.6535Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.0367 15.6535C11.2024 15.6535 11.3367 15.7878 11.3367 15.9535V18.1535C11.3367 18.3192 11.2024 18.4535 11.0367 18.4535C10.871 18.4535 10.7367 18.3192 10.7367 18.1535V15.9535C10.7367 15.7878 10.871 15.6535 11.0367 15.6535Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+PipelineDashed.displayName = 'PipelineDashed';

package/src/iconography/plug.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, SVGProps } from 'react';
+
+type PlugProps = SVGProps<SVGSVGElement>;
+
+type PlugRef = SVGSVGElement;
+
+export const Plug = forwardRef<PlugRef, PlugProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
+      <path
+        fill="#fff"
+        d="m8.858 2.818.924-.314.924.314v4.453H8.858V2.818ZM13.228 2.818l.924-.314.924.314v4.453h-1.848V2.818ZM8.563 14.186l3.288.416 3.327-.416v2.29c0 .673-.535 1.219-1.196 1.219H9.76c-.66 0-1.196-.546-1.196-1.22v-2.29Z"
+      />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="m11.863 14.627-3.557-.441v2.43c0 .715.58 1.295 1.294 1.295h4.57c.714 0 1.294-.58 1.294-1.295v-2.43l-3.6.441Zm3 .237-3 .368-2.957-.367v1.751c0 .384.31.695.694.695h4.57c.383 0 .694-.311.694-.695v-1.752Z"
+        clipRule="evenodd"
+      />
+      <path fill="#fff" d="M8.513 3.338a1.261 1.261 0 0 1 2.522 0v4.36H8.513v-4.36Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M10.435 7.098v-3.76a.661.661 0 0 0-1.322 0v3.76h1.322Zm-1.922.6v-4.36a1.261 1.261 0 0 1 2.522 0v4.36H8.513ZM14.864 7.098v-3.76a.661.661 0 1 0-1.323 0v3.76h1.323Zm-1.923.6v-4.36a1.261 1.261 0 1 1 2.523 0v4.36H12.94ZM17.058 13a.3.3 0 0 1 .3.3v3.964a2.959 2.959 0 0 1-2.96 2.96h-.466a2.492 2.492 0 0 1-2.492-2.493h.6c0 1.045.847 1.892 1.892 1.892h.467a2.359 2.359 0 0 0 2.359-2.359V13.3a.3.3 0 0 1 .3-.3Z"
+        clipRule="evenodd"
+      />
+      <path fill="#BFF6F8" d="M7.168 7.454h9.384v4.667l-1.644 2.772-3.012.996-2.982-1.23-1.674-2.538-.072-4.667Z" />
+      <path
+        fill="#528693"
+        fillRule="evenodd"
+        d="M7.427 7.735V10.9a4.458 4.458 0 1 0 8.916 0V7.735H7.427Zm-.022-.6a.578.578 0 0 0-.578.579V10.9a5.058 5.058 0 0 0 10.116 0V7.714a.578.578 0 0 0-.579-.579H7.405Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+Plug.displayName = 'PlugIcon';