@crystallize/design-system 1.2.0 → 1.2.2

package/src/iconography/particle.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ParticleProps = SVGProps<SVGSVGElement>;
+
+type ParticleRef = SVGSVGElement;
+
+export const Particle = forwardRef<ParticleRef, ParticleProps>((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}
+    >
+      <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"
+        opacity=".05"
+      />
+      <path
+        fill="#528693"
+        d="m17.404 11.998-4.03.47-6.417.748-1.462.17.21.373 1.94-3.537 3.09-5.638.71-1.295c.154-.28-.267-.53-.42-.25l-1.94 3.537-3.09 5.638-.71 1.295c-.082.149.017.396.21.373l4.03-.47 6.417-.748 1.462-.17c.308-.037.311-.533 0-.496Z"
+      />
+      <path
+        fill="#FFBD54"
+        d="M11.235 5.898c1.486 0 2.69-1.224 2.69-2.734S12.722.429 11.236.429s-2.69 1.224-2.69 2.735c0 1.51 1.204 2.734 2.69 2.734Z"
+      />
+      <path
+        fill="#528693"
+        d="M8.918 3.793a2.474 2.474 0 0 1 .068-1.47c.17-.47.48-.876.887-1.162a2.37 2.37 0 0 1 2.76.025c.4.293.703.704.866 1.179.162.474.177.987.041 1.47a2.44 2.44 0 0 1-.798 1.227 2.375 2.375 0 0 1-1.348.536 2.393 2.393 0 0 1-1.552-.457 2.461 2.461 0 0 1-.924-1.348.297.297 0 0 0-.137-.18.288.288 0 0 0-.4.113.302.302 0 0 0-.027.226c.16.604.5 1.143.972 1.543a2.945 2.945 0 0 0 3.425.283c.53-.318.95-.794 1.204-1.364.253-.57.327-1.205.211-1.82a3.047 3.047 0 0 0-.858-1.61A2.94 2.94 0 0 0 9.912.448c-.613.317-1.1.837-1.384 1.473a3.12 3.12 0 0 0-.174 2.03c.093.37.657.213.564-.158Z"
+      />
+      <path
+        fill="#528693"
+        d="M9.92 3.52a1.419 1.419 0 0 1 .143-1.046 1.38 1.38 0 0 1 .822-.647.195.195 0 0 0 .117-.093.2.2 0 0 0-.073-.27.192.192 0 0 0-.148-.019 1.778 1.778 0 0 0-1.055.835c-.23.407-.296.89-.182 1.346a.2.2 0 0 0 .092.12.193.193 0 0 0 .266-.075.2.2 0 0 0 .018-.15Z"
+      />
+      <path
+        fill="#FFBD54"
+        d="M5.494 18.192c2.477 0 4.485-2.04 4.485-4.558 0-2.517-2.008-4.557-4.485-4.557-2.476 0-4.484 2.04-4.484 4.557 0 2.518 2.008 4.558 4.484 4.558Z"
+      />
+      <path
+        fill="#528693"
+        d="M10.271 13.634c0-.998-.302-1.973-.867-2.79a4.785 4.785 0 0 0-2.289-1.778 4.702 4.702 0 0 0-2.878-.115 4.768 4.768 0 0 0-2.42 1.587c-.488.6-.828 1.31-.989 2.071a4.93 4.93 0 0 0 .062 2.303 4.876 4.876 0 0 0 1.098 2.014 4.77 4.77 0 0 0 1.889 1.272 4.704 4.704 0 0 0 4.363-.594 4.83 4.83 0 0 0 1.493-1.732c.353-.691.538-1.459.538-2.238a.3.3 0 0 0-.086-.21.29.29 0 0 0-.413 0 .3.3 0 0 0-.086.21c0 .88-.268 1.736-.766 2.454a4.2 4.2 0 0 1-2.016 1.557 4.127 4.127 0 0 1-2.531.093 4.186 4.186 0 0 1-2.122-1.406 4.316 4.316 0 0 1-.349-4.895 4.214 4.214 0 0 1 1.9-1.702 4.13 4.13 0 0 1 2.519-.279 4.22 4.22 0 0 1 2.408 1.485c.613.76.95 1.711.957 2.693a.3.3 0 0 0 .086.21.29.29 0 0 0 .413 0 .3.3 0 0 0 .086-.21Z"
+      />
+      <path
+        fill="#FFBD54"
+        d="M17.404 15.892c1.981 0 3.587-1.633 3.587-3.646 0-2.014-1.606-3.647-3.587-3.647s-3.587 1.633-3.587 3.646c0 2.014 1.606 3.647 3.587 3.647Z"
+      />
+      <path
+        fill="#528693"
+        d="M14.22 13.11a3.4 3.4 0 0 1 .092-2.02 3.342 3.342 0 0 1 1.219-1.598 3.258 3.258 0 0 1 3.793.032c.551.402.968.967 1.192 1.619.223.651.244 1.357.058 2.021a3.353 3.353 0 0 1-1.098 1.687 3.265 3.265 0 0 1-1.852.737 3.288 3.288 0 0 1-2.133-.627 3.382 3.382 0 0 1-1.27-1.851.296.296 0 0 0-.138-.18.288.288 0 0 0-.398.113.302.302 0 0 0-.028.226 3.951 3.951 0 0 0 1.263 2.006 3.83 3.83 0 0 0 4.454.37 3.923 3.923 0 0 0 1.566-1.773c.33-.74.426-1.567.276-2.366a3.964 3.964 0 0 0-1.114-2.095 3.857 3.857 0 0 0-2.099-1.061c-.79-.126-1.6 0-2.317.36a3.965 3.965 0 0 0-1.804 1.916 4.054 4.054 0 0 0-.225 2.643c.094.37.658.211.564-.159Z"
+      />
+      <path
+        fill="#FFBD54"
+        d="M5.494 18.192c2.477 0 4.485-2.04 4.485-4.558 0-2.517-2.008-4.557-4.485-4.557-2.476 0-4.484 2.04-4.484 4.557 0 2.518 2.008 4.558 4.484 4.558Z"
+      />
+      <path
+        fill="#528693"
+        d="M1.303 13.634c0-.878.268-1.735.766-2.453a4.2 4.2 0 0 1 2.016-1.558 4.128 4.128 0 0 1 2.531-.092 4.187 4.187 0 0 1 2.122 1.406 4.316 4.316 0 0 1 .349 4.895 4.214 4.214 0 0 1-1.9 1.702 4.13 4.13 0 0 1-2.518.279 4.22 4.22 0 0 1-2.409-1.485 4.344 4.344 0 0 1-.957-2.694.3.3 0 0 0-.086-.21.29.29 0 0 0-.413 0 .3.3 0 0 0-.086.21c0 1 .303 1.974.867 2.792a4.785 4.785 0 0 0 2.29 1.776c.924.34 1.929.38 2.877.116a4.768 4.768 0 0 0 2.42-1.587c.488-.6.828-1.31.99-2.072.16-.76.14-1.55-.062-2.302A4.876 4.876 0 0 0 9 10.343 4.77 4.77 0 0 0 7.113 9.07a4.703 4.703 0 0 0-4.363.595 4.83 4.83 0 0 0-1.493 1.733 4.917 4.917 0 0 0-.538 2.236.3.3 0 0 0 .086.21.29.29 0 0 0 .413 0 .3.3 0 0 0 .086-.21Z"
+      />
+      <path
+        fill="#528693"
+        d="M3.096 13.634c.007-.644.262-1.26.71-1.715a2.406 2.406 0 0 1 1.689-.722c.051 0 .101-.02.138-.057a.2.2 0 0 0 0-.28.193.193 0 0 0-.138-.059c-.74.001-1.448.3-1.97.83a2.86 2.86 0 0 0-.819 2.003.2.2 0 0 0 .057.14.193.193 0 0 0 .276 0 .2.2 0 0 0 .057-.14Z"
+      />
+      <path
+        fill="#FFBD54"
+        d="M17.407 15.694c1.981 0 3.587-1.633 3.587-3.646 0-2.014-1.606-3.647-3.587-3.647-1.982 0-3.588 1.633-3.588 3.647s1.606 3.646 3.588 3.646Z"
+      />
+      <path
+        fill="#528693"
+        d="M14.22 13.11a3.4 3.4 0 0 1 .092-2.02 3.342 3.342 0 0 1 1.219-1.598 3.258 3.258 0 0 1 3.793.032c.551.402.968.967 1.192 1.619.223.651.244 1.357.058 2.021a3.353 3.353 0 0 1-1.098 1.687 3.265 3.265 0 0 1-1.852.737 3.288 3.288 0 0 1-2.133-.627 3.382 3.382 0 0 1-1.27-1.851.296.296 0 0 0-.138-.18.288.288 0 0 0-.398.113.302.302 0 0 0-.028.226 3.951 3.951 0 0 0 1.263 2.006 3.83 3.83 0 0 0 4.454.37 3.923 3.923 0 0 0 1.566-1.773c.33-.74.426-1.567.276-2.366a3.964 3.964 0 0 0-1.114-2.095 3.857 3.857 0 0 0-2.099-1.061c-.79-.126-1.6 0-2.317.36a3.965 3.965 0 0 0-1.804 1.916 4.054 4.054 0 0 0-.225 2.643c.094.37.658.211.564-.159Z"
+      />
+      <path
+        fill="#528693"
+        d="M15.588 12.738a1.96 1.96 0 0 1 .197-1.445 1.906 1.906 0 0 1 1.134-.894.196.196 0 0 0 .118-.093.201.201 0 0 0-.073-.27.192.192 0 0 0-.148-.019 2.304 2.304 0 0 0-1.368 1.082 2.37 2.37 0 0 0-.236 1.744c.014.05.047.092.092.118a.192.192 0 0 0 .264-.074.2.2 0 0 0 .02-.149ZM8.652 12.516a3.843 3.843 0 0 1-.376 2.692 3.644 3.644 0 0 1-1.792 1.594c-.14.057-.077.292.064.233a3.851 3.851 0 0 0 1.635-1.293 3.943 3.943 0 0 0 .736-1.968 3.897 3.897 0 0 0-.116-1.3.079.079 0 0 0-.038-.043.077.077 0 0 0-.101.029.08.08 0 0 0-.011.056h-.001ZM5.574 17.212c.025 0 .049-.01.066-.027a.095.095 0 0 0 0-.134.092.092 0 0 0-.131 0 .096.096 0 0 0 0 .134.092.092 0 0 0 .065.027ZM19.744 10.834a3.173 3.173 0 0 1-.138 2.498 3.014 3.014 0 0 1-1.68 1.464c-.14.049-.079.276.06.226a3.216 3.216 0 0 0 1.54-1.177 3.3 3.3 0 0 0 .6-1.862 3.198 3.198 0 0 0-.226-1.193c-.04-.095-.192-.057-.156.044ZM17.372 15.06a.09.09 0 0 0 .062-.153.087.087 0 0 0-.125 0 .09.09 0 0 0 .063.152ZM12.698 2.3c.137.257.217.541.235.833.008.291-.061.579-.201.832-.141.238-.34.435-.576.574a1.592 1.592 0 0 1-.777.219.111.111 0 0 0-.075.034.115.115 0 0 0 0 .158c.02.02.047.033.075.034.315-.001.624-.088.896-.25.27-.164.495-.397.648-.676.293-.544.306-1.36-.107-1.85-.059-.07-.152.02-.117.092h-.001ZM10.765 4.552c.025 0 .049-.01.067-.028a.097.097 0 0 0 0-.135.094.094 0 0 0-.134 0 .097.097 0 0 0 0 .135.094.094 0 0 0 .067.028Z"
+      />
+      <path
+        fill="#528693"
+        d="M18.347 4.75c1.175 0 1.177-1.857 0-1.857-1.178 0-1.178 1.858 0 1.858ZM16.12 5.824l-.003.056c.002.07.03.135.078.184a.265.265 0 0 0 .181.08l.07-.01a.258.258 0 0 0 .114-.068l.04-.053a.266.266 0 0 0 .035-.133l-.003-.056a.202.202 0 0 0-.022-.1.267.267 0 0 0-.234-.16l-.068.01a.256.256 0 0 0-.113.067l-.039.052a.26.26 0 0 0-.035.131ZM5.704 6.722c.573 0 .574-.905 0-.905-.575 0-.575.905 0 .905ZM3.623 2.902c1.3 0 1.301-2.052 0-2.052s-1.301 2.052 0 2.052Z"
+        opacity=".05"
+      />
+    </svg>
+  );
+});
+
+Particle.displayName = 'ParticleIcon';

package/src/iconography/percentage.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, SVGProps } from 'react';
+
+type PercentageProps = SVGProps<SVGSVGElement>;
+
+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}>
+      <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"
+        fill="#BFF6F8"
+      />
+      <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"
+        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"
+      />
+      <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"
+        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"
+      />
+      <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"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Percentage.displayName = 'PercentageIcon';

package/src/iconography/price-tag.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, SVGProps } from 'react';
+
+type PriceTagProps = SVGProps<SVGSVGElement>;
+
+type PriceTagRef = SVGSVGElement;
+
+export const PriceTag = forwardRef<PriceTagRef, PriceTagProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="17" height="16" viewBox="0 0 17 16" fill="none" {...delegated}>
+      <path d="m9.2016 14.5299-5.3736-3.853 5.793-8.0797 4.7251-.9167.6485 4.7692-5.793 8.0802Z" fill="#fff" />
+      <path
+        d="m8.8128 13.9276-4.5965-3.3019a.0133.0133 0 0 1-.0055-.0032.014.014 0 0 1-.002-.0178l.1163-.1641.3672-.5163.7297-1.027 1.4482-2.0394C7.8328 5.5134 8.79 4.1755 9.7544 2.8277c.0069-.0108.014-.013.0314-.0153l.1965-.0375.3929-.0744.7955-.1488 2.1305-.402.5326-.0999.2613-.0492c.0064-.001.0133-.0022.0184.001.0051.0033.0016.0094.0034.0208l.0352.2687.0714.5403.2851 2.1503.1452 1.0746.0362.2686.0081.0493-.3143.4373-5.059 7.0545a1.7584 1.7584 0 0 0-.1567.2598 1.2226 1.2226 0 0 0-.0467.1131l-.0088.0263-.004.0128-.0015.0063c.027.0194-.06-.0408.0603.0433-.004.0006.007-.0129-.0102.03a.9797.9797 0 0 1-.0686.0787.0912.0912 0 0 0 .0044.1157.216.216 0 0 0 .2575.0442.3054.3054 0 0 0 .0912-.0611l.0448-.0358a1.1938 1.1938 0 0 0 .092-.0805 1.7974 1.7974 0 0 0 .1962-.2324l4.9402-6.8749.3088-.4313.18-.2535c.1009-.1407.0376-.3684.0327-.4162l-.1446-1.0616a3719.7822 3719.7822 0 0 1-.4494-3.319.424.424 0 0 0-.2845-.3766.4551.4551 0 0 0-.2507-.0093l-.1964.038-.5549.1087-2.2858.4401-.7855.1508-.3928.0754-.1998.0385a.4623.4623 0 0 0-.3335.1831L6.5894 6.3278 5.1243 8.373 4.339 9.472l-.4118.5743-.2538.3564a.4262.4262 0 0 0 .104.5907l4.737 3.3491c.5716.4042.8656-.0029.2983-.4149Z"
+        fill="#528693"
+      />
+      <path
+        d="m4.2171 11.2794 3.6044 2.5937.888.6332.1194.0851a.8012.8012 0 0 0 .2158.1291.4078.4078 0 0 0 .4288-.1178l.3711-.514 1.2481-1.7573 2.483-3.4894 1.2492-1.7412.3257-.4518a.39.39 0 0 0 .0815-.2246.7585.7585 0 0 0-.0109-.1213l-.011-.0666-.0349-.2673-.139-1.07-.4028-3.1009a.4107.4107 0 0 0-.3439-.3566.8.8 0 0 0-.2811.028l-.1572.0296-.6002.1136-1.2003.2283-2.4284.4662c-.1993.0197-.3265.259-.356.2978l-.172.2385-.3432.4775-.6868.9555L6.693 6.1885l-2.7413 3.8248a1.7602 1.7602 0 0 0-.1567.2599 1.1378 1.1378 0 0 0-.0467.113l-.019.0538a.3149.3149 0 0 0-.0325.1102.2297.2297 0 0 0 .1267.243.0914.0914 0 0 0 .1147-.0295c.0202-.0282.0286-.066.0494-.0933a.0703.0703 0 0 1 .0376-.0274c-.0104-.0075.0924.0658.0492.0344l.006-.001.0108-.0079.022-.0168a1.131 1.131 0 0 0 .0916-.0804 1.7693 1.7693 0 0 0 .1967-.2325l5.3837-7.4935 2.2612-.4386 1.2325-.2387.6331-.1226.192-.0367c.006-.001.0099.0044.0092.0096.1114.829.2523 1.874.3971 2.9524l.1411 1.0556c.0201.1526.0576.423.0457.351l-.2695.3742-1.1748 1.6332c-.7724 1.0755-1.5297 2.1323-2.3164 3.2285L9.733 13.2977l-.5927.8321s-.0027.005-.0059.0045c-.003-.0005.0266.0199-.0813-.057l-.4595-.3294-4.0784-2.8844c-.5719-.4031-.8654.0039-.2981.4159Z"
+        fill="#528693"
+      />
+      <path
+        d="M12.7352 4.6305a.559.559 0 0 0-.3575-.4881.5496.5496 0 0 0-.7468.6068.5279.5279 0 0 0 .1813.3014c.0103.01.0178.0214.0289.0307a.5425.5425 0 0 0 .0557.0308.507.507 0 0 0 .3297.0915.4996.4996 0 0 0 .2349-.0802c.0083-.005.0138-.012.022-.0173a.583.583 0 0 0 .1228-.1033.5614.5614 0 0 0 .0826-.1408c.0042-.0113.0135-.02.0172-.0312a.523.523 0 0 0 .0292-.2003Zm-.5592.0122c-.0034.0005-.0098.0016 0 0l.0109-.0018c.0029-.0005.0044-.0008.0093.0015-.0106.0027-.0196.0037-.0198.0022l-.0004-.002ZM9.6696 9.7357c.1039-.1448.1402-.3035.109-.476-.0297-.1714-.1362-.3836-.3195-.6365-.2619-.3427-.4113-.6512-.4482-.9255-.0342-.2748.0396-.5389.2213-.7923.185-.2581.4116-.4162.6796-.4743.2697-.057.5472-.007.8326.15l.3708-.517.3518.2522-.3725.5194c.2385.2258.3644.484.3776.7748.0148.2918-.0935.599-.3248.9218l-.4345-.3115c.1592-.222.2328-.436.221-.6423-.0118-.2063-.1074-.3738-.2868-.5024-.1874-.1343-.3656-.1882-.5347-.1617-.168.025-.3141.124-.4382.2971-.1151.1606-.1552.326-.1201.4966.0377.17.148.3802.3309.6304.1855.2498.3113.47.3774.6603.0688.19.0901.3696.0639.5391-.0246.1707-.0967.3394-.2164.5062-.1907.2661-.4245.4226-.7012.4696-.2753.0482-.5676-.0161-.8771-.1927l-.3234.451-.3494-.2505.3233-.451c-.2736-.2367-.429-.5053-.466-.806-.0344-.301.0602-.6075.2836-.9191l.4368.3131c-.1568.2188-.2201.4285-.1899.6289.0303.2004.151.3763.3618.5275.2063.1478.404.2145.593.2.1892-.0146.3453-.1076.4683-.2792Z"
+        fill="#528693"
+      />
+      <path d="M7.0697 13.5895 2.3944 8.9137 9.4246 1.884l4.8112-.136-.1359 4.8113-7.0302 7.0302Z" fill="#BFF6F8" />
+      <path
+        d="M6.784 12.932 2.7859 8.9264a.014.014 0 0 1-.004-.022l.1414-.1429.4463-.4498.887-.8946 1.7608-1.7766c1.1684-1.17 2.3304-2.3344 3.5013-3.5074.0085-.0095.016-.0105.0335-.01l.1999-.005.3998-.0095.8091-.0175 2.1675-.05.5418-.012.2658-.006c.0065 0 .0135 0 .018.004.0045.004 0 .0096 0 .021l-.009.271-.0175.5447-.0684 2.168-.0315 1.084-.008.2708v.05l-.3813.3803-6.1391 6.1376a1.7614 1.7614 0 0 0-.197.2309 1.2262 1.2262 0 0 0-.0644.104l-.013.0245-.006.012-.0025.0059c.0235.0235-.0525-.0499.0525.0525-.004 0 .009-.0115-.015.028a.9673.9673 0 0 1-.0805.0665.0913.0913 0 0 0-.0145.1149.2155.2155 0 0 0 .2469.0855.305.305 0 0 0 .1-.0455l.05-.028a1.2113 1.2113 0 0 0 .1039-.0644c.0825-.0592.16-.1252.2314-.1975l5.9926-5.9796.3749-.3754.2189-.2209c.1224-.1224.0969-.3573.0999-.4053l.03-1.071a3270.5647 3270.5647 0 0 1 .0965-3.3479.4234.4234 0 0 0-.2194-.4178.4554.4554 0 0 0-.2459-.05l-.1999.0055-.5653.017-2.3269.0625-.7996.021-.3998.0105-.2034.0055a.4623.4623 0 0 0-.3588.1264L5.8264 5.0717 4.0483 6.8514l-.9536.9566-.4997.4997-.3084.3104a.4262.4262 0 0 0 .0065.5997l4.129 4.0751c.4983.4917.8547.1379.3619-.3609Z"
+        fill="#528693"
+      />
+      <path
+        d="m2.6802 9.5715 3.1346 3.1455.7731.7692.104.1034a.7985.7985 0 0 0 .1919.1625.4073.4073 0 0 0 .4423-.0465l.4497-.4468 1.5173-1.5308 3.0176-3.039 1.5158-1.5149.3948-.3928a.3894.3894 0 0 0 .117-.2084.7594.7594 0 0 0 .0089-.1214V6.384l.009-.2694.037-1.0784.107-3.125a.4105.4105 0 0 0-.2814-.4079.7995.7995 0 0 0-.2819-.018l-.1599.0035-.6107.0145-1.2214.03-2.4719.065c-.1999-.013-.3643.2024-.3998.2359l-.2084.2074-.4163.4153-.833.831-1.6643 1.6633-3.327 3.328a1.7572 1.7572 0 0 0-.1968.2308 1.139 1.139 0 0 0-.0645.104l-.0275.05a.315.315 0 0 0-.05.1034.2299.2299 0 0 0 .0855.2604.0914.0914 0 0 0 .118-.0105c.0244-.0245.039-.0605.0639-.084a.0704.0704 0 0 1 .0415-.021c-.009-.009.0804.08.043.042h.006l.012-.006.0244-.013a1.1354 1.1354 0 0 0 .1035-.0644c.0828-.059.1604-.1251.2319-.1975l6.531-6.5179 2.3023-.065 1.2549-.035.6447-.018.1954-.005c.006 0 .009.006.0075.011-.025.8362-.0559 1.8902-.0884 2.9777L13.83 6.0857c-.005.1539-.012.4268-.012.3538l-.3269.3253-1.4248 1.4204c-.937.9355-1.8561 1.8551-2.8107 2.8087l-1.4613 1.4663-.7201.7246s-.0035.0045-.0065.0035c-.003-.001.023.024-.071-.0694l-.3998-.3999L3.042 9.2097c-.4988-.4908-.8546-.137-.3619.3618Z"
+        fill="#528693"
+      />
+      <path
+        d="M12.1665 4.3968a.5599.5599 0 0 0-.2734-.5397.5498.5498 0 0 0-.8356.4772.5286.5286 0 0 0 .1299.3269c.0085.0115.014.024.0235.035a.5401.5401 0 0 0 .05.0395.5065.5065 0 0 0 .3103.1439.4995.4995 0 0 0 .2449-.041c.009-.0035.0155-.0095.0245-.0135a.5816.5816 0 0 0 .138-.082.5613.5613 0 0 0 .1044-.1254c.006-.0105.0165-.0175.022-.028a.5237.5237 0 0 0 .0615-.1929Zm-.5538-.079c-.0035 0-.01 0 0 0h.011c.003 0 .0045 0 .009.003-.011.001-.02.0006-.02-.001v-.002ZM8.3114 8.9353c.126-.126.1876-.2767.1849-.452-.0014-.174-.072-.4006-.2116-.68-.2027-.3807-.3-.7094-.2917-.986.011-.2767.1266-.5253.3471-.7458.2247-.2246.474-.3437.7478-.3574.2753-.0124.541.0821.7971.2835l.4499-.45.3061.3062-.452.452c.1986.2615.2808.5368.2466.8258-.0329.2903-.1897.5759-.4705.8566l-.378-.378c.1931-.193.3006-.3923.3225-.5978.022-.2054-.0451-.3862-.2013-.5423-.163-.163-.33-.2452-.5012-.2465-.1699-.0028-.33.0712-.4808.2218-.1396.1397-.206.2965-.1992.4705.0096.1739.0842.3992.224.6759.1423.2766.2307.5142.265.7128.0369.1986.0287.3794-.0247.5423-.052.1644-.1507.3192-.2959.4643-.2314.2315-.4875.3479-.7683.3493-.2794.0027-.5574-.1082-.834-.3328l-.3924.3923-.304-.304.3923-.3924c-.2314-.278-.341-.5684-.3287-.871.015-.3027.1582-.5896.4294-.8608l.38.38c-.1903.1904-.2869.387-.2896.5897-.0028.2027.0876.3958.2711.5793.1795.1794.3637.2773.5527.2938.189.0164.3581-.05.5074-.1993Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+PriceTag.displayName = 'PriceTagIcon';

package/src/iconography/shapes.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ShapesProps = SVGProps<SVGSVGElement>;
+
+type ShapesRef = SVGSVGElement;
+
+export const Shapes = forwardRef<ShapesRef, ShapesProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
+      <path
+        d="M3.679 3.1a.3.3 0 0 1 .3-.3h6.4a.3.3 0 0 1 .3.3v6.4a.3.3 0 0 1-.3.3h-6.4a.3.3 0 0 1-.3-.3V3.1Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.979 2.2h6.4a.9.9 0 0 1 .9.9v6.4a.9.9 0 0 1-.9.9h-6.4a.9.9 0 0 1-.9-.9V3.1a.9.9 0 0 1 .9-.9Zm0 .6a.3.3 0 0 0-.3.3v6.4a.3.3 0 0 0 .3.3h6.4a.3.3 0 0 0 .3-.3V3.1a.3.3 0 0 0-.3-.3h-6.4Z"
+        fill="#528693"
+      />
+      <path
+        d="M13.128 14.99a.3.3 0 0 1 .105-.311l3.46-2.732a.3.3 0 0 1 .372 0l3.46 2.732a.3.3 0 0 1 .105.31l-1.193 4.587a.3.3 0 0 1-.29.224h-4.536a.3.3 0 0 1-.29-.224l-1.193-4.586Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m21.21 15.14-1.192 4.587a.9.9 0 0 1-.871.673h-4.536a.9.9 0 0 1-.871-.673l-1.193-4.586a.9.9 0 0 1 .314-.933l3.46-2.732a.9.9 0 0 1 1.116 0l3.46 2.732a.9.9 0 0 1 .313.933Zm-7.977-.461a.3.3 0 0 0-.105.31l1.193 4.587a.3.3 0 0 0 .29.224h4.536a.3.3 0 0 0 .29-.224l1.193-4.586a.3.3 0 0 0-.105-.311l-3.46-2.732a.3.3 0 0 0-.372 0l-3.46 2.732Z"
+        fill="#528693"
+      />
+      <path d="m17.069 2.8 3.51 7h-7.097l3.587-7Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.072 2.2a.6.6 0 0 1 .533.331l3.51 7a.6.6 0 0 1-.536.869h-7.097a.6.6 0 0 1-.534-.874l3.587-7a.6.6 0 0 1 .537-.326Zm-.003.6-3.587 7h7.097l-3.51-7Z"
+        fill="#528693"
+      />
+      <path d="M10.679 16.3a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.279 16.3a4.1 4.1 0 1 1-8.2 0 4.1 4.1 0 0 1 8.2 0Zm-4.1 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Shapes.displayName = 'ShapesIcon';

package/src/iconography/subscription.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type SubscriptionProps = SVGProps<SVGSVGElement>;
+
+type SubscriptionRef = SVGSVGElement;
+
+export const Subscription = forwardRef<SubscriptionRef, SubscriptionProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="34" height="34" viewBox="0 0 34 34" fill="none" {...delegated}>
+      <path
+        d="M6.61561 5.18342H25.0671H27.0366L28.0213 8.13757L29.006 15.0306L6.35752 13.0612L5.3728 7.15285L6.61561 5.18342Z"
+        fill="#bff6f8"
+      />
+      <path
+        d="M6.35752 13.0611H19.1588H28.0213L29.006 17L28.0213 26.8472L27.0366 28.8166H14.2353H7.34224H6.35752L5.3728 26.8472L6.35752 22.9083V17V13.0611Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.69756 4.39563H25.3681C26.716 4.39563 27.8662 5.37006 28.0878 6.69955L28.326 8.12863C29.305 14.0024 29.305 19.9976 28.326 25.8714L28.0878 27.3005C27.8662 28.6299 26.716 29.6044 25.3681 29.6044H7.69756C5.99377 29.6044 4.69776 28.0745 4.97786 26.3939L5.10812 25.6124C6.05849 19.9101 6.05849 14.0899 5.10812 8.38765L4.97786 7.60612C4.69776 5.92551 5.99377 4.39563 7.69756 4.39563ZM7.69756 5.27456C6.48057 5.27456 5.73939 6.14667 5.93946 7.3471L6.06972 8.12863C7.03438 13.9166 7.03438 19.8244 6.06972 25.6124L5.93946 26.3939C5.73939 27.5943 6.48056 28.641 7.69756 28.641H25.3681C26.3309 28.641 27.0227 28.1206 27.181 27.1709L27.4192 25.7419C28.3838 19.9539 28.3838 14.0461 27.4192 8.25814L27.181 6.82906C27.0227 5.87943 26.3309 5.27456 25.3681 5.27456H7.69756Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.4567 13.455L6.24786 13.455L6.24786 12.4094L28.4567 12.4094L28.4567 13.455Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Subscription.displayName = 'SubscriptionIcon';

package/src/iconography/topics.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, SVGProps } from 'react';
+
+type TopicsProps = SVGProps<SVGSVGElement>;
+
+type TopicsRef = SVGSVGElement;
+
+export const Topics = forwardRef<TopicsRef, TopicsProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
+      <path
+        d="M10.922 11.146H9.274c-.075 0-.075.697 0 .697h.027v-.697H7.395c-.075 0-.075.697 0 .697h1.908c.075 0 .075-.697 0-.697h-.027v.697h1.647c.074 0 .074-.697-.001-.697Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.221 11.146H11.6c-.165 0-.166.697 0 .697h.058v-.697H7.461c-.165 0-.166.697 0 .697h4.196c.165 0 .165-.697 0-.697H11.6v.697h3.622c.165 0 .166-.697 0-.697Z"
+        fill="#528693"
+      />
+      <path
+        d="M6.713 13.669a2.108 2.108 0 0 1-2.243-2.144 2.114 2.114 0 0 1 2.165-2.204 2.209 2.209 0 0 1 2.116 2.094c0 1.38-.825 2.254-2.038 2.254Z"
+        fill="#fff"
+      />
+      <path
+        d="M6.713 13.318a1.813 1.813 0 0 1-1.648-2.751 1.837 1.837 0 0 1 1.191-.854c2.376-.484 2.983 3.478.457 3.607-.446.023-.45.716 0 .698a2.462 2.462 0 0 0 2.373-2.887 2.558 2.558 0 0 0-2.762-2.14 2.528 2.528 0 0 0 .39 5.029.351.351 0 0 0 0-.702ZM15.01 17.67h-3.684v-5.477a.351.351 0 0 0-.696 0v.152h.696V5.32h3.685a.35.35 0 0 0 0-.696h-3.746a.652.652 0 0 0-.329.056.554.554 0 0 0-.307.541v7.124a.351.351 0 0 0 .697 0v-.156h-.697v5.519a.596.596 0 0 0 .187.522.694.694 0 0 0 .53.136h3.664a.351.351 0 0 0 0-.697Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.439 13.208a1.705 1.705 0 0 1-1.55-2.584 1.727 1.727 0 0 1 1.117-.803c2.236-.462 2.808 3.27.43 3.389-.335.017-.338.537 0 .523a2.183 2.183 0 0 0 2.101-2.562 2.27 2.27 0 0 0-2.457-1.895 2.24 2.24 0 0 0 .351 4.461.264.264 0 1 0 .008-.529Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.448 13.669a2.106 2.106 0 0 1-2.243-2.144 2.115 2.115 0 0 1 2.166-2.204 2.209 2.209 0 0 1 2.115 2.094 2.023 2.023 0 0 1-2.038 2.254Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M15.448 13.318a1.813 1.813 0 0 1-1.649-2.751 1.834 1.834 0 0 1 1.192-.854c2.376-.484 2.984 3.479.457 3.607-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.527 2.527 0 0 0 .389 5.029c.452.01.451-.692 0-.702ZM15.439 19.73a1.703 1.703 0 0 1-1.78-1.92 1.724 1.724 0 0 1 1.346-1.466c2.237-.461 2.809 3.27.43 3.389-.334.016-.337.537 0 .523a2.185 2.185 0 0 0 2.105-2.561 2.27 2.27 0 0 0-2.457-1.896 2.24 2.24 0 0 0 .35 4.46c.344.008.344-.518.006-.528Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.448 20.192a2.107 2.107 0 0 1-2.243-2.144 2.116 2.116 0 0 1 2.166-2.205 2.21 2.21 0 0 1 2.115 2.095 2.025 2.025 0 0 1-2.038 2.254Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M15.448 19.841a1.814 1.814 0 0 1-1.649-2.751 1.836 1.836 0 0 1 1.192-.854c2.376-.484 2.984 3.479.457 3.607-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.528 2.528 0 0 0 .389 5.03c.452.012.451-.69 0-.703ZM15.439 6.685a1.704 1.704 0 0 1-1.55-2.584 1.725 1.725 0 0 1 1.117-.803c2.236-.461 2.808 3.27.43 3.388-.335.017-.338.538 0 .524a2.185 2.185 0 0 0 2.101-2.562 2.27 2.27 0 0 0-2.457-1.895 2.24 2.24 0 0 0 .351 4.46c.346.007.346-.517.008-.528Z"
+        fill="#528693"
+      />
+      <path
+        d="M15.448 7.146a2.177 2.177 0 1 1-.077-4.348 2.209 2.209 0 0 1 2.115 2.094 2.026 2.026 0 0 1-2.038 2.254Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M15.448 6.795a1.814 1.814 0 0 1-1.649-2.751 1.834 1.834 0 0 1 1.192-.853c2.376-.485 2.984 3.478.457 3.606-.447.023-.45.716 0 .698a2.463 2.463 0 0 0 2.372-2.887 2.558 2.558 0 0 0-2.761-2.14 2.527 2.527 0 0 0 .389 5.03.351.351 0 0 0 0-.703Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Topics.displayName = 'TopicsIcon';

package/src/iconography/triangle.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+import { forwardRef, SVGProps } from 'react';
+
+type TriangleProps = SVGProps<SVGSVGElement> & {
+  width?: number;
+  height?: number;
+};
+
+type TriangleRef = SVGSVGElement;
+
+export const Triangle = forwardRef<TriangleRef, TriangleProps>((delegated, ref) => {
+  const { width = 20, height = 20, ...rest } = delegated;
+
+  return (
+    <svg
+      viewBox="0 0 17 15"
+      width={width}
+      height={height}
+      ref={ref}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z" stroke="currentColor" strokeWidth={2.4} />
+    </svg>
+  );
+});

package/src/iconography/usage.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, SVGProps } from 'react';
+
+type UsageProps = SVGProps<SVGSVGElement>;
+
+type UsageRef = SVGSVGElement;
+
+export const Usage = forwardRef<UsageRef, UsageProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="23" height="23" viewBox="0 0 23 23" fill="none" {...delegated}>
+      <path
+        d="M20.44 11.968c.222 0 .402.18.392.4a8.952 8.952 0 1 1-9.343-9.343c.22-.01.4.17.4.39v5.02c0 .22-.18.397-.4.425a3.133 3.133 0 1 0 3.507 3.507c.029-.22.205-.399.426-.399h5.019Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.22 12.568a8.35 8.35 0 1 1-8.931-8.93v4.645a3.733 3.733 0 1 0 4.284 4.285h4.646Zm.612-.2c.01-.22-.17-.4-.391-.4h-5.019c-.221 0-.397.18-.426.399A3.134 3.134 0 1 1 11.49 8.86c.219-.028.399-.204.399-.425v-5.02c0-.22-.18-.4-.4-.39a8.952 8.952 0 1 0 9.343 9.343Z"
+        fill="#528693"
+      />
+      <path
+        d="M12.877 2.471c0-.22.18-.4.4-.39a8.952 8.952 0 0 1 8.543 8.543c.01.22-.17.4-.391.4H16.41c-.22 0-.397-.18-.425-.4a3.133 3.133 0 0 0-2.71-2.708c-.218-.028-.398-.205-.398-.426V2.471Z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.477 2.693a8.352 8.352 0 0 1 7.73 7.73h-4.645a3.733 3.733 0 0 0-3.085-3.084V2.693Zm-.2-.613c-.22-.01-.4.17-.4.391v5.02c0 .22.18.397.399.425a3.132 3.132 0 0 1 2.709 2.709c.028.219.204.399.425.399h5.019c.22 0 .4-.18.391-.4a8.948 8.948 0 0 0-5.517-7.871 8.952 8.952 0 0 0-3.026-.673Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Usage.displayName = 'UsageIcon';

package/src/iconography/users.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, SVGProps } from 'react';
+
+type UsersProps = SVGProps<SVGSVGElement>;
+
+type UsersRef = SVGSVGElement;
+
+export const Users = forwardRef<UsersRef, UsersProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="24" height="24" viewBox="0 0 24 24" fill="none" {...delegated}>
+      <path
+        d="M20.713 15.436a2.465 2.465 0 0 0-1.746-.594c-.23 0-.466.016-.703.032l-.15.008c.027-.159.043-.32.05-.48 1.222-1.07 1.257-3.224 1.211-4.1a2.867 2.867 0 0 0-.702-1.78c-.48-.516-1.117-.81-1.782-.821-.038-.004-.08-.004-.122-.004a2.408 2.408 0 0 0-1.396.503 2.877 2.877 0 0 0-.933 1.273 4.077 4.077 0 0 0-.178 1.569c.06 1.108.164 2.17.79 2.912.14.165.3.307.475.42.01.17.028.337.055.504l-.097-.004c-.238-.016-.469-.032-.696-.032a2.454 2.454 0 0 0-1.74.594 2.46 2.46 0 0 0-.712 1.494 6.447 6.447 0 0 0-.105 1.104c.003.424.5.534.863.617l.157.035c1.148.266 2.319.382 3.49.346.168 0 .332 0 .505-.004 1.399.012 2.793-.19 4.143-.597a.148.148 0 0 0 .09-.063.182.182 0 0 0 .03-.114.173.173 0 0 0 .013-.087c-.027-1.002-.11-2.122-.81-2.731Zm-5.67-2.13c-.388-.72-.419-1.67-.443-2.437a3.114 3.114 0 0 1 .363-1.679 2.386 2.386 0 0 1 1.195-.978c.23-.106.474-.165.723-.175.08 0 .159.007.238.02.263.05.518.143.758.275.458.242.822.666 1.02 1.19.097.275.151.566.16.862.068 2.191-.538 3.554-1.795 4.054a1.074 1.074 0 0 1-.423.078 2.11 2.11 0 0 1-1.028-.36 2.442 2.442 0 0 1-.768-.85Zm2.746 1.367a1.724 1.724 0 0 1-.175.709c-.108.217-.26.403-.443.541a.875.875 0 0 1-.409.118c-.594 0-.793-.924-.854-1.395.303.186.64.292.985.31a.963.963 0 0 0 .213-.023c.238-.047.469-.135.683-.26Zm-.543 3.966c-.182 0-.364.004-.549.004a11.426 11.426 0 0 1-4.132-.585c.045-.971.15-1.958.856-2.437a2.46 2.46 0 0 1 1.512-.386l.356.004c.12 0 .241-.004.367-.008.2.779.58 1.191 1.1 1.191a1.28 1.28 0 0 0 .315-.043c.24-.075.456-.222.626-.424.17-.203.289-.455.341-.727a8.5 8.5 0 0 0 .44.011l.367-.004a2.438 2.438 0 0 1 1.496.386c.761.514.817 1.639.854 2.468-1.29.376-2.618.56-3.95.55Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.93 15.187c.422.368.642.875.762 1.393.119.513.147 1.07.161 1.569a.502.502 0 0 1-.015.162.51.51 0 0 1-.084.24.479.479 0 0 1-.276.198c-1.378.416-2.8.62-4.229.61-.173.003-.338.003-.502.003a13.965 13.965 0 0 1-3.57-.354h-.001a6.66 6.66 0 0 0-.15-.034l-.004-.001a2.345 2.345 0 0 0-.021-.005c-.17-.038-.42-.095-.628-.206-.232-.124-.468-.349-.471-.725v-.006a6.77 6.77 0 0 1 .108-1.15c.075-.646.36-1.246.81-1.682l.016-.016a2.786 2.786 0 0 1 1.963-.67c.123 0 .247.004.369.01a2.537 2.537 0 0 1-.368-.355c-.707-.84-.809-2.014-.868-3.104a4.412 4.412 0 0 1 .194-1.691l.005-.017a3.208 3.208 0 0 1 1.041-1.418 2.738 2.738 0 0 1 1.588-.571h.015c.034 0 .084 0 .135.004.756.017 1.47.352 2.005.926l.005.006c.476.534.752 1.242.785 1.983.024.453.027 1.24-.136 2.058-.152.76-.454 1.586-1.057 2.183.147-.008.296-.014.444-.015a2.796 2.796 0 0 1 1.97.671l.005.004Zm-1.963-.345c.626-.039 1.245.171 1.747.594.555.485.722 1.293.78 2.107.014.178.021.356.027.532l.002.092a.173.173 0 0 1-.014.087.185.185 0 0 1-.03.114.148.148 0 0 1-.088.063 13.928 13.928 0 0 1-4.144.597c-.173.004-.337.004-.505.004a13.635 13.635 0 0 1-3.647-.381l-.007-.002c-.256-.058-.576-.13-.743-.317a.433.433 0 0 1-.113-.298 6.45 6.45 0 0 1 .105-1.104 2.46 2.46 0 0 1 .713-1.494 2.454 2.454 0 0 1 1.74-.594c.15 0 .301.007.455.016l.219.014.02.002.098.004a4.673 4.673 0 0 1-.055-.503 2.186 2.186 0 0 1-.476-.42c-.625-.744-.73-1.805-.79-2.913a4.079 4.079 0 0 1 .179-1.569c.196-.516.52-.958.933-1.273.413-.315.897-.49 1.396-.503.042 0 .084 0 .122.004.665.011 1.302.305 1.782.821.112.126.212.263.299.409a2.825 2.825 0 0 1 .229.484 2.989 2.989 0 0 1 .178.958 8.385 8.385 0 0 1-.107 1.762c-.145.826-.46 1.699-1.109 2.266a3.643 3.643 0 0 1-.049.48l.15-.007h.004l.184-.012c.173-.011.345-.02.515-.02Zm-3.924-1.536c.192.348.455.64.768.85.312.21.665.334 1.028.36.144.003.288-.024.423-.078.878-.349 1.438-1.118 1.673-2.296a7.797 7.797 0 0 0 .12-1.823v-.003a2.854 2.854 0 0 0-.158-.793 2.409 2.409 0 0 0-.208-.423 2.14 2.14 0 0 0-.812-.768 2.582 2.582 0 0 0-.758-.275 1.653 1.653 0 0 0-.238-.02c-.248.01-.493.069-.723.175-.482.173-.9.516-1.195.979-.274.503-.4 1.09-.363 1.678.024.766.055 1.717.443 2.437Zm.205-3.948c-.24.445-.352.966-.319 1.49v.01c.026.786.06 1.652.404 2.29.168.304.396.555.662.734.264.178.558.281.859.304a.746.746 0 0 0 .285-.054l.001-.001c1.056-.42 1.654-1.587 1.588-3.737a2.533 2.533 0 0 0-.141-.758 1.887 1.887 0 0 0-.864-1.012l-.005-.003a2.252 2.252 0 0 0-.656-.239 1.324 1.324 0 0 0-.176-.015 1.575 1.575 0 0 0-.59.145l-.013.006-.014.004a2.054 2.054 0 0 0-1.021.836Zm1.823 7.02a1.28 1.28 0 0 1-.314.044c-.52 0-.902-.412-1.1-1.19h-.011c-.122.004-.241.007-.357.007l-.356-.004a2.46 2.46 0 0 0-1.512.386c-.706.48-.81 1.466-.856 2.437 1.34.448 2.736.646 4.132.585.093 0 .186 0 .277-.002l.269-.002h.003c1.33.01 2.657-.174 3.945-.549l.004-.001a15.237 15.237 0 0 0-.03-.518c-.056-.731-.213-1.537-.824-1.95a2.436 2.436 0 0 0-1.495-.386l-.367.004c-.143 0-.29-.004-.44-.011-.053.272-.171.524-.342.727-.17.202-.387.35-.626.424Zm1.217-.81a1.9 1.9 0 0 1-.338.599 1.675 1.675 0 0 1-.78.527l-.013.004c-.13.035-.262.053-.396.055h-.004c-.36 0-.67-.147-.914-.41a2.133 2.133 0 0 1-.431-.775l-.123.002h-.003l-.378-.005a2.13 2.13 0 0 0-1.306.332c-.263.18-.431.465-.539.847-.09.32-.13.687-.155 1.077 1.229.382 2.502.548 3.775.492h.014c.09 0 .18 0 .272-.002h.002l.273-.002.002.133v-.133c1.215.01 2.426-.147 3.607-.467a5.42 5.42 0 0 0-.133-1.024c-.104-.408-.276-.728-.56-.922a2.107 2.107 0 0 0-1.29-.331l-.02.001-.371.004c-.063 0-.127-.001-.19-.003Zm-.55-.525a1.742 1.742 0 0 0 .051-.37 2.261 2.261 0 0 1-.683.26.952.952 0 0 1-.213.023 2.063 2.063 0 0 1-.985-.31c.015.117.039.263.075.415.11.459.333.98.78.98a.874.874 0 0 0 .408-.118c.184-.138.335-.324.443-.54a1.688 1.688 0 0 0 .124-.34Zm-.749.604a1.194 1.194 0 0 0 .336-.426c-.05.013-.1.025-.15.035-.093.02-.187.03-.282.03h-.017a2.382 2.382 0 0 1-.51-.084c.02.063.044.124.07.182.116.257.23.325.322.327a.543.543 0 0 0 .231-.064Z"
+        fill="#528693"
+      />
+      <path
+        d="M21.192 18.089c-1.29.375-2.617.56-3.948.55-.182 0-.363.004-.549.004a11.426 11.426 0 0 1-4.13-.586c.045-.97.15-1.957.856-2.436a2.46 2.46 0 0 1 1.511-.386l.357.004c.119 0 .241-.004.367-.008.199.779.58 1.191 1.1 1.191a1.28 1.28 0 0 0 .315-.043c.239-.075.455-.222.626-.425.17-.202.288-.454.341-.727.15.008.297.012.44.012l.367-.004a2.438 2.438 0 0 1 1.495.386c.76.514.817 1.638.852 2.468Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M17.79 14.673a1.725 1.725 0 0 1-.176.709 1.52 1.52 0 0 1-.443.541.874.874 0 0 1-.409.118c-.593 0-.793-.924-.854-1.395.304.186.64.292.986.31a.952.952 0 0 0 .213-.023c.238-.048.468-.135.683-.26ZM19.057 10.385c.068 2.19-.538 3.553-1.795 4.052a1.074 1.074 0 0 1-.423.079 2.11 2.11 0 0 1-1.028-.36 2.44 2.44 0 0 1-.768-.85c-.388-.72-.42-1.671-.444-2.438a3.113 3.113 0 0 1 .364-1.678 2.386 2.386 0 0 1 1.195-.979c.23-.105.474-.165.723-.174.08 0 .159.007.237.02.264.05.519.143.759.275.458.242.822.666 1.02 1.19.097.276.15.567.16.863Z"
+        fill="#fff"
+      />
+      <path
+        d="M16.988 14.936a4.666 4.666 0 0 0-3.056-.923c-.404 0-.816.024-1.23.049l-.262.012c.047-.246.075-.496.085-.747 2.14-1.663 2.201-5.014 2.122-6.377a4.201 4.201 0 0 0-1.23-2.768A4.615 4.615 0 0 0 10.3 2.904c-.068-.006-.14-.006-.214-.006A4.552 4.552 0 0 0 6.01 5.66a5.683 5.683 0 0 0-.312 2.44c.104 1.724.287 3.375 1.382 4.53.244.257.524.477.831.655.017.262.05.523.098.782l-.171-.006c-.416-.024-.82-.049-1.217-.049a4.644 4.644 0 0 0-3.045.923A3.673 3.673 0 0 0 2.33 17.26a8.948 8.948 0 0 0-.183 1.718c.006.66.874.831 1.51.96.098.018.19.036.275.055 2.009.413 4.058.593 6.108.538.293 0 .58 0 .883-.007a27.22 27.22 0 0 0 7.251-.929.26.26 0 0 0 .208-.275.242.242 0 0 0 .025-.136c-.048-1.558-.195-3.3-1.418-4.248Zm-9.923-3.313c-.679-1.12-.733-2.599-.776-3.791a4.401 4.401 0 0 1 .636-2.61 4.11 4.11 0 0 1 2.09-1.523 3.678 3.678 0 0 1 1.266-.272c.14.001.278.011.416.03.46.08.907.223 1.327.429a3.6 3.6 0 0 1 1.785 1.852c.17.427.265.88.281 1.339.12 3.409-.941 5.53-3.142 6.306a2.09 2.09 0 0 1-.74.123 4 4 0 0 1-3.143-1.883Zm4.806 2.127a2.447 2.447 0 0 1-1.082 1.944 1.677 1.677 0 0 1-.715.184c-1.04 0-1.388-1.437-1.495-2.17.53.288 1.12.454 1.724.482.125 0 .25-.012.373-.036.416-.074.82-.21 1.195-.404Zm-.951 6.17c-.318 0-.636.005-.96.005a22.32 22.32 0 0 1-7.231-.91c.08-1.51.263-3.046 1.498-3.791a4.729 4.729 0 0 1 2.646-.6l.623.006c.208 0 .422-.006.642-.012.349 1.21 1.015 1.853 1.926 1.853.185-.002.37-.025.55-.068a2.386 2.386 0 0 0 1.693-1.79c.263.011.52.018.77.018l.643-.007a4.682 4.682 0 0 1 2.616.6c1.333.8 1.431 2.55 1.495 3.84a26.835 26.835 0 0 1-6.914.855h.003Z"
+        fill="#528693"
+      />
+      <path
+        d="M17.825 19.063a26.834 26.834 0 0 1-6.909.856c-.318 0-.635.006-.96.006a22.32 22.32 0 0 1-7.228-.91c.08-1.511.263-3.046 1.498-3.792a4.729 4.729 0 0 1 2.646-.599l.623.006c.208 0 .422-.006.642-.012.349 1.21 1.015 1.853 1.926 1.853.186-.003.37-.025.55-.068a2.385 2.385 0 0 0 1.693-1.79c.264.011.52.017.77.017l.643-.006a4.682 4.682 0 0 1 2.617.6c1.33.8 1.428 2.549 1.49 3.84Z"
+        fill="#BFF6F8"
+      />
+      <path
+        d="M11.872 13.75a2.446 2.446 0 0 1-1.082 1.944 1.676 1.676 0 0 1-.716.184c-1.04 0-1.388-1.437-1.494-2.17.53.288 1.12.453 1.724.482.125 0 .25-.012.373-.037a4.2 4.2 0 0 0 1.195-.403ZM14.09 7.08c.119 3.405-.942 5.526-3.142 6.303a2.088 2.088 0 0 1-.74.122 3.998 3.998 0 0 1-3.143-1.883c-.679-1.119-.733-2.598-.776-3.79a4.401 4.401 0 0 1 .636-2.611 4.11 4.11 0 0 1 2.09-1.523 3.678 3.678 0 0 1 1.266-.271c.14 0 .278.011.416.03.46.079.907.223 1.327.428a3.6 3.6 0 0 1 1.785 1.853c.17.427.265.881.28 1.341Z"
+        fill="#fff"
+      />
+    </svg>
+  );
+});
+
+Users.displayName = 'UsersIcon';

package/src/iconography/warning.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, SVGProps } from 'react';
+
+type WarningProps = SVGProps<SVGSVGElement>;
+type WarningRef = SVGSVGElement;
+
+export const Warning = forwardRef<WarningRef, WarningProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      fill="none"
+      viewBox="0 0 22 22"
+      {...delegated}
+    >
+      <path
+        d="M9.67541 3.72993C10.2804 2.68198 11.793 2.68198 12.398 3.72993L19.8853 16.6982C20.4903 17.7462 19.734 19.0561 18.524 19.0561H3.54948C2.33942 19.0561 1.58313 17.7462 2.18816 16.6982L9.67541 3.72993Z"
+        fill="#FFDE99"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.3657 16.9982L11.8784 4.02993C11.5043 3.38198 10.5691 3.38198 10.195 4.02993L2.70778 16.9982C2.33369 17.6462 2.8013 18.4561 3.54948 18.4561H18.524C19.2722 18.4561 19.7398 17.6462 19.3657 16.9982ZM12.398 3.72993C11.793 2.68198 10.2804 2.68198 9.67541 3.72993L2.18816 16.6982C1.58313 17.7462 2.33942 19.0561 3.54948 19.0561H18.524C19.734 19.0561 20.4903 17.7462 19.8853 16.6982L12.398 3.72993Z"
+        fill="#528693"
+      />
+      <path
+        d="M10.4293 8.73822C10.4293 8.33098 10.7595 8.00085 11.1667 8.00085V8.00085C11.5739 8.00085 11.9041 8.33098 11.9041 8.73822V12.3883C11.9041 12.7956 11.5739 13.1257 11.1667 13.1257V13.1257C10.7595 13.1257 10.4293 12.7956 10.4293 12.3883V8.73822Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.504 8.73824V12.3883C12.504 13.127 11.9053 13.7257 11.1667 13.7257C10.4281 13.7257 9.82932 13.127 9.82932 12.3883V8.73825C9.82932 7.99964 10.4281 7.40088 11.1667 7.40088C11.9053 7.40088 12.504 7.99964 12.504 8.73824ZM11.1667 8.00088C10.7594 8.00088 10.4293 8.33101 10.4293 8.73825V12.3883C10.4293 12.7956 10.7594 13.1257 11.1667 13.1257C11.5739 13.1257 11.904 12.7956 11.904 12.3883V8.73824C11.904 8.33101 11.5739 8.00088 11.1667 8.00088Z"
+        fill="#528693"
+      />
+      <path
+        d="M11.9041 15.7807C11.9041 16.1879 11.5739 16.5181 11.1667 16.5181C10.7595 16.5181 10.4293 16.1879 10.4293 15.7807C10.4293 15.3735 10.7595 15.0433 11.1667 15.0433C11.5739 15.0433 11.9041 15.3735 11.9041 15.7807Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.504 15.7807C12.504 16.5193 11.9053 17.1181 11.1667 17.1181C10.4281 17.1181 9.82932 16.5193 9.82932 15.7807C9.82932 15.0421 10.4281 14.4434 11.1667 14.4434C11.9053 14.4434 12.504 15.0421 12.504 15.7807ZM11.1667 16.5181C11.5739 16.5181 11.904 16.188 11.904 15.7807C11.904 15.3735 11.5739 15.0434 11.1667 15.0434C10.7594 15.0434 10.4293 15.3735 10.4293 15.7807C10.4293 16.188 10.7594 16.5181 11.1667 16.5181Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Warning.displayName = 'WarningIcon';

package/src/index.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply font-sans text-gray;
+  }
+  input,
+  textarea,
+  button {
+    @apply font-sans text-gray;
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+import './index.css';
+
+// Components ---
+export * from './action-menu';
+export * from './avatar';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './icon-button';
+export * from './inline-radio';
+export * from './input-with-label';
+export * from './input';
+export * from './label';
+export * from './progress';
+export * from './radio';
+export * from './select';
+export * from './slider';
+export * from './tag';
+
+// Icons ---
+export * from './iconography';
+
+// Tokens ---
+import { buttonTokens } from './button';
+import { cardToken } from './card';
+
+export const tokens = {
+  button: buttonTokens,
+  card: cardToken,
+};

package/src/inline-radio/index.ts

@@ -0,0 +1 @@
+export * from './inline-radio';

package/src/inline-radio/inline-radio.css

@@ -0,0 +1,20 @@
+.c-inline-radio-root {
+  @apply inline-flex space-x-1 rounded-md bg-gray-50-900 p-[3px];
+}
+
+.c-inline-radio {
+  @apply m-0 flex aspect-square h-[25px] w-[25px] cursor-pointer items-center justify-center rounded-md border-none bg-transparent text-sm !leading-none text-gray;
+
+  &[aria-checked='true'] {
+    @apply bg-elevate shadow-sm;
+  }
+
+  &:focus-visible {
+    @apply outline outline-1 outline-inherit;
+    outline-color: currentColor;
+  }
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+}

package/src/inline-radio/inline-radio.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { InlineRadio } from './inline-radio';
+import { Icon } from '../iconography';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InlineRadio.Group> = {
+  title: 'Components/InlineRadio',
+  component: InlineRadio.Group,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InlineRadio.Group>;
+
+export const Example: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="plus">
+        <InlineRadio.Item value="plus" id="example-r1">
+          +
+        </InlineRadio.Item>
+        <InlineRadio.Item value="minus" id="example-r2">
+          -
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const ProductView: Story = {
+  render: () => {
+    return (
+      <InlineRadio.Group defaultValue="pretty">
+        <InlineRadio.Item value="pretty" id="productview-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="productview-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [view, setView] = useState('pretty');
+
+    return (
+      <InlineRadio.Group value={view} onValueChange={v => setView(v)}>
+        <InlineRadio.Item value="pretty" id="controlled-r1">
+          <Icon.NailPolish />
+        </InlineRadio.Item>
+        <InlineRadio.Item value="nerdy" id="controlled-r2">
+          <Icon.Glasses />
+        </InlineRadio.Item>
+      </InlineRadio.Group>
+    );
+  },
+};