@crystallize/design-system 1.1.0 → 1.2.1

package/src/iconography/graphQL.tsx

@@ -0,0 +1,90 @@
+import { forwardRef, SVGProps } from 'react';
+
+type GraphQLProps = SVGProps<SVGSVGElement>;
+type GraphQLRef = SVGSVGElement;
+
+export const GraphQL = forwardRef<GraphQLRef, GraphQLProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="23"
+      height="22"
+      viewBox="0 0 23 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <path d="M10.479 3.4a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.879 5.4a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M10.479 3.4a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.879 5.4a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M3.679 7.2a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.079 9.2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M17.279 7.2a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.679 9.2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M3.679 7.2a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.079 9.2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M17.279 7.2a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.679 9.2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M3.679 14.8a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.079 16.8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M17.279 14.8a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.679 16.8a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8Z"
+        fill="#528693"
+      />
+      <path d="M10.479 18.75a1.4 1.4 0 1 1 2.8 0 1.4 1.4 0 1 1-2.8 0Z" fill="#BFF6F8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.879 20.75a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm0-3.4a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8ZM10.44 3.851a.3.3 0 0 1-.112.41l-3.5 2a.3.3 0 0 1-.298-.521l3.5-2a.3.3 0 0 1 .41.111ZM13.419 3.851a.3.3 0 0 0 .111.41l3.5 2a.3.3 0 0 0 .298-.521l-3.5-2a.3.3 0 0 0-.41.111Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.44 18.149a.3.3 0 0 0-.112-.41l-3.5-2a.3.3 0 0 0-.298.521l3.5 2a.3.3 0 0 0 .41-.111ZM13.419 18.149a.3.3 0 0 1 .111-.41l3.5-2a.3.3 0 0 1 .298.521l-3.5 2a.3.3 0 0 1-.41-.111ZM5.079 8.7a.3.3 0 0 1 .3.3v4a.3.3 0 1 1-.6 0V9a.3.3 0 0 1 .3-.3ZM18.679 8.7a.3.3 0 0 1 .3.3v4a.3.3 0 1 1-.6 0V9a.3.3 0 0 1 .3-.3ZM11.033 4.743a.3.3 0 0 1 .103.411l-4.8 8a.3.3 0 1 1-.514-.308l4.8-8a.3.3 0 0 1 .411-.103ZM12.725 4.743a.3.3 0 0 0-.103.411l4.8 8a.3.3 0 1 0 .514-.308l-4.8-8a.3.3 0 0 0-.411-.103ZM6.579 14.9a.3.3 0 0 1 .3-.3h10a.3.3 0 0 1 0 .6h-10a.3.3 0 0 1-.3-.3Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+GraphQL.displayName = 'GraphQLIcon';

package/src/iconography/index.ts

@@ -0,0 +1,29 @@
+import { Arrow } from './arrow';
+import { Atom } from './atom';
+import { Cancel } from './cancel';
+import { Copy } from './copy';
+import { Crystal } from './crystal';
+import { Edit } from './edit';
+import { Error } from './error';
+import { Glasses } from './glasses';
+import { GraphQL } from './graphQL';
+import { Info } from './info';
+import { NailPolish } from './nail-polish';
+import { Particle } from './particle';
+import { Warning } from './warning';
+
+export const Icon = {
+  Arrow,
+  Atom,
+  Cancel,
+  Copy,
+  Crystal,
+  Edit,
+  Error,
+  Glasses,
+  GraphQL,
+  Info,
+  NailPolish,
+  Particle,
+  Warning,
+};

package/src/iconography/info.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, SVGProps } from 'react';
+
+type InfoProps = SVGProps<SVGSVGElement>;
+type InfoRef = SVGSVGElement;
+
+export const Info = forwardRef<InfoRef, InfoProps>((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="M17.593 3.85212C17.593 4.67937 16.9224 5.34999 16.0952 5.34999C15.2679 5.34999 14.5973 4.67937 14.5973 3.85212C14.5973 3.02487 15.2679 2.35425 16.0952 2.35425C16.9224 2.35425 17.593 3.02487 17.593 3.85212Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.253 3.85212C18.253 5.04383 17.2869 6.00991 16.0952 6.00991C14.9035 6.00991 13.9374 5.04383 13.9374 3.85212C13.9374 2.66041 14.9035 1.69434 16.0952 1.69434C17.2869 1.69434 18.253 2.66041 18.253 3.85212ZM16.0952 5.34999C16.9224 5.34999 17.5931 4.67937 17.5931 3.85212C17.5931 3.02487 16.9224 2.35425 16.0952 2.35425C15.2679 2.35425 14.5973 3.02487 14.5973 3.85212C14.5973 4.67937 15.2679 5.34999 16.0952 5.34999Z"
+        fill="#528693"
+      />
+      <path
+        d="M11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8385 13.118 13.6419 13.3464 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.2842 18.976L11.3049 18.9785C11.5112 19.0031 11.7201 18.9658 11.9049 18.8714C12.0891 18.7772 12.2409 18.6306 12.3411 18.4504C12.3471 18.4394 12.352 18.4277 12.3558 18.4158C12.3317 18.4124 12.3048 18.4091 12.2731 18.4053C12.0384 18.3881 11.8084 18.33 11.5936 18.2335C11.2334 18.0797 10.9456 17.7933 10.7906 17.433C10.6341 17.0694 10.6252 16.6594 10.7658 16.2894C10.9266 15.8663 11.1487 15.4689 11.4246 15.1101L11.6291 14.8181C11.6293 14.8178 11.629 14.8184 11.6291 14.8181C12.0038 14.2802 12.4092 13.763 12.8423 13.2707L12.9418 13.1535C12.9894 13.097 13.0361 13.0418 13.0821 12.9874C13.2314 12.8108 13.3734 12.6428 13.5141 12.4665L13.5237 12.4544L13.5339 12.4428C14.107 11.7899 14.5194 11.0128 14.7386 10.1733C14.8642 9.60674 14.7724 9.1134 14.5125 8.69961C14.2452 8.27422 13.7678 7.88337 13.0466 7.60647L13.0376 7.60304C12.2034 7.26882 11.3198 7.07373 10.4221 7.02572C10.2586 7.02444 10.0952 7.03841 9.93422 7.06745L9.91342 7.0712L9.89242 7.07362C9.77981 7.08656 9.67209 7.12639 9.57839 7.18964C9.48729 7.25113 9.41209 7.33296 9.35867 7.42842C9.35249 7.44171 9.33941 7.47402 9.32659 7.52286C9.31959 7.54951 9.31383 7.57671 9.30949 7.60325C9.36308 7.61115 9.41754 7.61364 9.47206 7.61055L9.51828 7.60793L9.63538 7.61773C9.79024 7.6263 9.94419 7.64682 10.0959 7.67913L10.1211 7.68451L10.1459 7.69185C10.6213 7.83272 11.1176 8.10198 11.3044 8.65041L11.3058 8.6547C11.4603 9.11879 11.309 9.5616 11.1547 9.87197C10.9947 10.194 10.7584 10.5161 10.546 10.7961C10.1932 11.2626 9.79323 11.726 9.4222 12.1559L9.4167 12.1622L9.30686 12.2896L9.29607 12.301C8.50411 13.1358 7.82119 14.0671 7.26353 15.0728C6.95101 15.7053 6.92585 16.2828 7.10297 16.7755C7.28379 17.2785 7.70442 17.772 8.42421 18.1631L8.42623 18.1642C9.29923 18.6426 10.2687 18.9197 11.2633 18.9749L11.2842 18.976ZM6.67909 14.7659C7.26511 13.7065 7.9836 12.7256 8.81732 11.8468L8.91693 11.7313C9.29243 11.2963 9.68044 10.8467 10.0199 10.3976C10.4486 9.83253 10.8215 9.28929 10.6797 8.86312C10.5968 8.6196 10.3605 8.44373 9.9584 8.32457C9.83715 8.29874 9.71404 8.28256 9.59022 8.27617L9.50938 8.26941C9.26232 8.2834 9.01575 8.23452 8.79281 8.12735C8.54248 7.93066 8.64731 7.36817 8.77404 7.12204C8.87835 6.92966 9.02762 6.76522 9.2092 6.64266C9.39077 6.5201 9.59929 6.44304 9.81707 6.41802C10.0235 6.38077 10.2331 6.36335 10.4429 6.36598C11.4176 6.41652 12.3773 6.6275 13.2831 6.9904C14.9259 7.62106 15.7097 8.86885 15.3801 10.3284C15.1357 11.2718 14.6733 12.1451 14.0299 12.8781C13.8828 13.0625 13.7326 13.2401 13.582 13.4182C13.5366 13.4719 13.4912 13.5256 13.4458 13.5795L13.3415 13.7024C12.9232 14.1775 12.5323 14.6759 12.1707 15.1952L11.9564 15.5012C11.7156 15.8119 11.5223 16.1565 11.3827 16.5237C11.303 16.7335 11.308 16.966 11.3968 17.1721C11.4855 17.3783 11.651 17.5421 11.8583 17.6289C12.0086 17.6973 12.1701 17.7377 12.335 17.748C12.5957 17.7793 12.8648 17.8126 12.9712 18.0603C13.0139 18.1752 13.0313 18.298 13.0223 18.4203C13.0133 18.5425 12.9781 18.6615 12.9191 18.769C12.7552 19.0647 12.5066 19.305 12.2052 19.459C11.9037 19.6131 11.563 19.6739 11.2267 19.6338C10.1339 19.5731 9.0685 19.2687 8.1091 18.743C6.45171 17.8422 5.90412 16.3181 6.67909 14.7659Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Info.displayName = 'InfoIcon';

package/src/iconography/nail-polish.tsx

@@ -0,0 +1,84 @@
+import { forwardRef, SVGProps } from 'react';
+
+type NailPolishProps = SVGProps<SVGSVGElement>;
+type NailPolishRef = SVGSVGElement;
+
+export const NailPolish = forwardRef<NailPolishRef, NailPolishProps>((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}
+    >
+      <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"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.3716 9.1765v5.2941h4.1143V9.1765h.4285v-.353c0-.195-.1535-.353-.3428-.353H1.2858c-.1893 0-.3428.158-.3428.353v.353h.4286ZM6 9.7059h.4286v-.8824c0-.4873-.3837-.8823-.8571-.8823H1.2858c-.4733 0-.857.395-.857.8823v.8824h.4285V15H6V9.7059Z"
+        fill="#528693"
+      />
+      <path
+        d="M1.2856 6.6176c0-.4873.3838-.8823.8572-.8823h2.5714c.4734 0 .8572.395.8572.8823v1.7648H1.2856V6.6176Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.7142 6.2647H2.1428c-.1894 0-.3429.158-.3429.353v1.2352h3.2572V6.6176c0-.1949-.1535-.3529-.3429-.3529Zm-2.5714-.5294c-.4734 0-.8572.395-.8572.8823v1.7648h4.2858V6.6176c0-.4873-.3838-.8823-.8572-.8823H2.1428Z"
+        fill="#528693"
+      />
+      <path
+        d="M1.7144.6228c0-.344.2708-.6228.605-.6228 1.5594 0 2.8235 1.3013 2.8235 2.9066v3.2699H1.7144V.6228Z"
+        fill="#FFCCEC"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.2286 5.647h2.4V2.9067c0-1.3129-1.0338-2.3772-2.3092-2.3772a.0921.0921 0 0 0-.0908.0934v5.0243ZM2.3194 0c-.3342 0-.605.2789-.605.6228v5.5537h3.4285v-3.27C5.143 1.3014 3.8788 0 2.3194 0Z"
+        fill="#528693"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.4626 1.9929c-.432-.5148-.5769-1.1307-.5769-1.5517H2.4c0 .3142.1124.8013.4518 1.2056.3313.3947.8997.7355 1.8625.7355v.5295c-1.0943 0-1.8116-.3945-2.2517-.9189Z"
+        fill="#528693"
+      />
+      <path
+        d="M4.8708 8.6772c.245-.9414 1.185-1.5 2.0995-1.2478l2.4838.6851c.9145.2523 1.4573 1.22 1.2122 2.1613l-1.2201 4.6876c-.1225.4707-.5925.75-1.0498.6239l-4.1397-1.1418c-.4573-.1262-.7286-.61-.606-1.0807l1.22-4.6876Z"
+        fill="#FFCCEC"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m9.321 8.6259-2.4838-.6851c-.6401-.1766-1.2981.2145-1.4697.8734l-1.2201 4.6876c-.049.1883.0595.3818.2424.4323l4.1397 1.1418c.1829.0505.3709-.0612.42-.2495l1.2201-4.6876c.1715-.659-.2084-1.3363-.8486-1.513ZM6.9703 7.4294c-.9145-.2523-1.8545.3064-2.0995 1.2478l-1.2202 4.6876c-.1225.4707.1489.9545.6061 1.0807l4.1397 1.1418c.4573.1261.9273-.1532 1.0498-.6239l1.2201-4.6876c.2451-.9414-.2977-1.909-1.2122-2.1613l-2.4838-.6851Z"
+        fill="#528693"
+      />
+      <path
+        d="M7.9236 3.5069c.1508-.4319.598-.6727 1.0285-.554l.9602.2649c.4306.1188.7009.5575.6217 1.009l-.6114 3.4854c-.0892.508-.581.829-1.0654.6954l-1.5121-.417c-.4844-.1337-.7544-.6649-.5848-1.1507l1.1633-3.333Z"
+        fill="#BFF6F8"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m9.7792 3.7292-.9602-.2649c-.1722-.0475-.351.0488-.4114.2216l-1.1634 3.333c-.0678.1943.0402.4068.234.4603l1.5121.417c.1938.0535.3905-.075.4262-.2781l.6114-3.4853c.0316-.1806-.0765-.3561-.2487-.4036Zm-.827-.7763c-.4307-.1187-.8778.1221-1.0286.554l-1.1633 3.333c-.1696.4858.1004 1.017.5848 1.1506l1.5121.4171c.4844.1336.9762-.1875 1.0654-.6954l.6114-3.4853c.0792-.4516-.1911-.8903-.6217-1.0091l-.9602-.2649Z"
+        fill="#528693"
+      />
+      <path d="m5.8906 9.8713 3.3118.9135-.4437 1.7046-3.3118-.9135.4437-1.7046Z" fill="#fff" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="m8.5725 11.1592-2.3182-.6395-.1775.6819 2.3182.6394.1775-.6818ZM5.8906 9.8713 5.447 11.576l3.3118.9135.4437-1.7046-3.3118-.9135Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+NailPolish.displayName = 'NailPolishIcon';

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/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/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>
+    );
+  },
+};

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

@@ -0,0 +1,26 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { cx } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+
+import './inline-radio.css';
+
+type InlineRadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+
+function InlineRadioGroup(delegated: InlineRadioGroupProps) {
+  return <RadioGroupPrimitive.Root {...delegated} className="c-inline-radio-root" />;
+}
+
+type InlineRadioItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;
+
+function InlineRadioItem({ children, className, ...delegated }: InlineRadioItemProps) {
+  return (
+    <RadioGroupPrimitive.Item {...delegated} className={cx('c-inline-radio', className)}>
+      <RadioGroupPrimitive.Indicator forceMount>{children}</RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export const InlineRadio = {
+  Group: InlineRadioGroup,
+  Item: InlineRadioItem,
+};

package/src/input/Input.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from '.';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "c'mon type something",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: "I'm disabled",
+    disabled: true,
+  },
+};

package/src/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input';

package/src/input/input.css

@@ -0,0 +1,7 @@
+.c-input {
+  @apply border-none bg-transparent p-0 placeholder:text-sm placeholder:font-light placeholder:italic placeholder:text-gray-400-500 focus:outline-none;
+
+  &:disabled {
+    @apply cursor-not-allowed text-gray-400-500;
+  }
+}

package/src/input/input.tsx

@@ -0,0 +1,20 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithRef, forwardRef } from 'react';
+
+import './input.css';
+
+type InputStylesProps = VariantProps<typeof inputStyles>;
+const inputStyles = cva(['c-input'], {
+  variants: {},
+  defaultVariants: {},
+});
+
+type InputProps = InputStylesProps & ComponentPropsWithRef<'input'>;
+
+export type InputRef = HTMLInputElement;
+
+export const Input = forwardRef<InputRef, InputProps>(({ className, ...delegated }, ref) => {
+  return <input ref={ref} className={inputStyles({ className })} type="text" {...delegated} />;
+});
+
+Input.displayName = 'Input';