@crystallize/design-system 1.16.3 → 1.16.5

package/src/iconography/stock-location.tsx

@@ -6,68 +6,66 @@ type StockLocationRef = SVGSVGElement;
 
 export const StockLocation = forwardRef<StockLocationRef, StockLocationProps>((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="m8.957 14.609-4.604-1.785a.174.174 0 0 1-.11-.162v-2.25l-1.441-.578a.174.174 0 0 1-.059-.284l1.5-1.506-1.311-1.436a.174.174 0 0 1 .066-.28L7.34 4.66l1.617 1.49 1.617-1.625c1.526.61 4.593 1.84 4.647 1.895.054.054-1.055 1.105-1.616 1.624l1.615 1.503a.174.174 0 0 1-.056.29l-1.492.576v2.183a.174.174 0 0 1-.109.162l-4.606 1.85Z"
+        d="M10.9679 19.3917L5.40032 17.234C5.31939 17.2027 5.26605 17.1248 5.26605 17.038V14.3176L3.52424 13.6176C3.38452 13.5615 3.3474 13.381 3.45363 13.2742L5.26605 11.4533L3.68162 9.71664C3.58183 9.60727 3.62333 9.43177 3.76154 9.37868L9.01297 7.36131L10.9679 9.16177L12.9228 7.19763C14.7691 7.93418 18.5432 9.48913 18.5432 9.48913C18.5432 9.48913 16.6541 11.5181 16.5883 11.4533C17.3511 12.1629 18.5415 13.2703 18.5415 13.2703C18.6552 13.3761 18.6189 13.5644 18.4741 13.6204L16.6697 14.3176V16.9581C16.6697 17.0439 16.6175 17.1211 16.5379 17.1531L10.9679 19.3917Z"
         fill="#BFF6F8"
+        className="c-icon-fill"
       />
-      <path d="M13.605 8.044 8.957 9.871 4.242 8.044 8.957 6.15l4.648 1.895Z" fill="#B1DDDF" />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="m10.523 4.28.128.051c.764.305 1.912.765 2.877 1.156.482.196.92.374 1.24.507a26.653 26.653 0 0 1 .498.214.942.942 0 0 1 .04.02.391.391 0 0 1 .02.011.217.217 0 0 1 .103.22.255.255 0 0 1-.024.074.494.494 0 0 1-.048.076 2.17 2.17 0 0 1-.133.156 13.28 13.28 0 0 1-.434.442c-.281.275-.613.59-.879.837l1.45 1.35a.382.382 0 0 1-.122.637l-1.358.525v2.04a.383.383 0 0 1-.24.355l-4.683 1.882-4.68-1.814a.383.383 0 0 1-.245-.357v-2.108l-1.31-.526a.382.382 0 0 1-.127-.625l1.358-1.365-1.176-1.29a.382.382 0 0 1 .145-.614l4.464-1.715L8.95 5.86l1.572-1.58ZM8.748 6.458v3.109L4.81 8.041l3.938-1.583Zm-4.45 1.339 4.275-1.718-1.279-1.177L3.12 6.505 4.3 7.797ZM3.074 6.524Zm1.22 1.764 4.303 1.667-1.377 1.494-2.897-1.229-1.394-.56 1.366-1.372Zm2.91 3.18Zm1.545-1.062L7.51 11.75a.383.383 0 0 1-.431.093L4.45 10.728v1.91l4.297 1.666v-3.898Zm.418 3.894 4.297-1.727V10.73l-2.56 1.11a.382.382 0 0 1-.429-.085L9.166 10.39V14.3Zm.157-4.348 1.435 1.498 2.835-1.23 1.444-.558-1.478-1.375-4.236 1.665ZM13.56 7.8c.274-.254.636-.596.937-.892.16-.157.301-.299.402-.407a35.03 35.03 0 0 0-.292-.123c-.318-.132-.754-.31-1.236-.505a618.53 618.53 0 0 0-2.747-1.104L9.326 6.074l4.234 1.727Zm-.517.24L9.166 6.46v3.105l3.877-1.524Z"
+        d="M16.8238 11.2674C16.6912 11.3923 16.6025 11.4657 16.5885 11.4534L18.5415 13.2703C18.6552 13.3761 18.6189 13.5644 18.4741 13.6204L16.6697 14.3176V16.958C16.6697 17.0439 16.6175 17.1211 16.5379 17.1531L10.9679 19.3916L5.40032 17.234C5.31939 17.2027 5.26605 17.1248 5.26605 17.038V14.3176L3.52424 13.6176C3.38452 13.5615 3.3474 13.3809 3.45363 13.2742L5.26605 11.4532L3.68162 9.71662C3.58183 9.60725 3.62333 9.43175 3.76154 9.37866L9.01297 7.36129L10.9679 9.16175L12.9228 7.19761C14.3178 7.75412 16.8133 8.77782 17.95 9.24504C18.3177 9.3962 18.5432 9.48911 18.5432 9.48911C18.5432 9.48911 18.359 9.68692 18.1037 9.95703C17.7873 10.2918 17.3616 10.7375 17.0416 11.0555C16.9612 11.1355 16.8874 11.2074 16.8238 11.2674ZM18.5432 9.48911L18.9823 9.898L18.9001 9.98607C18.8479 10.0418 18.7734 10.1213 18.6838 10.2164C18.5049 10.4065 18.265 10.6599 18.0227 10.9116C17.8369 11.1046 17.6472 11.2992 17.4813 11.4645L18.9493 12.8302L18.9501 12.831C19.3883 13.2386 19.2486 13.9643 18.6904 14.18L17.2697 14.729V16.958C17.2697 17.2889 17.0686 17.5865 16.7616 17.7099L11.1916 19.9484C11.0504 20.0051 10.893 20.0061 10.7511 19.9511L5.18351 17.7935C4.87161 17.6726 4.66605 17.3725 4.66605 17.038V14.7231L3.3005 14.1743C2.76206 13.9579 2.619 13.2622 3.02836 12.8509L4.43742 11.4352L3.23838 10.121C2.85382 9.69953 3.01376 9.02318 3.54637 8.81857L8.79781 6.8012C9.01075 6.7194 9.25165 6.76542 9.41944 6.91995L10.9498 8.32939L12.4975 6.77435C12.6671 6.60401 12.9219 6.55127 13.1451 6.64032C14.0711 7.00972 15.4785 7.58355 16.6527 8.06431C17.2402 8.30484 17.7699 8.52233 18.1527 8.67969L18.7711 8.93406L18.5432 9.48911ZM18.5432 9.48911L18.7711 8.93406C18.953 9.00903 19.0874 9.16876 19.1294 9.36102C19.1714 9.55329 19.1164 9.75397 18.9823 9.898L18.5432 9.48911Z"
         fill="#528693"
       />
+      <path d="M16.79 11.4532L10.968 13.6629L5.07001 11.4532L10.968 9.16174L16.79 11.4532Z" fill="#B1DDDF" />
       <path
-        d="M8.97.698a2.845 2.845 0 0 0-2.848 2.844c0 1.21 1.678 4.014 2.455 5.255a.463.463 0 0 0 .781 0c.777-1.241 2.455-4.045 2.455-5.255a2.843 2.843 0 0 0-.832-2.011A2.842 2.842 0 0 0 8.97.698Zm0 4.117a1.147 1.147 0 1 1-.01-2.293 1.147 1.147 0 0 1 .01 2.293Z"
-        fill="#fff"
-      />
-      <path
-        d="M8.45 2.842c.003-.004.003 0 .003 0a.004.004 0 0 1-.004.004v-.004ZM8.46 2.834c0 .003-.004.003-.007.006a.01.01 0 0 1 .003-.006h.003Zm.027-.013-.003.004V2.82h.003Zm.069-.034a.012.012 0 0 0-.007.004.013.013 0 0 1-.01.003.075.075 0 0 0-.018.01h-.003a.072.072 0 0 1 .02-.014c.007-.003.01-.006.017-.003Zm.037-.022h.003c-.003.004-.007.004-.01.007-.003.004-.01.004-.014.007-.003.004-.003.004-.007.004H8.56a.08.08 0 0 1 .034-.017Zm.01-.002c0-.003.003 0 .003 0a.003.003 0 0 1-.003.003H8.6l.003-.003Zm1.206.418a1.02 1.02 0 0 0-.538-.435c-.003-.004-.003-.004-.007-.004a.217.217 0 0 0-.024-.006.02.02 0 0 0-.013-.004.091.091 0 0 0-.041-.01c-.004-.003-.004-.003-.007-.003-.004 0-.014-.004-.02-.004a.007.007 0 0 0-.006-.002.007.007 0 0 0-.005.002h-.003a.012.012 0 0 0-.007-.003h-.004c-.003-.004-.003-.004-.007 0h-.003c0-.004-.003-.004-.007-.004H9.11a.068.068 0 0 0-.027-.003.153.153 0 0 0-.038-.004h-.024a.037.037 0 0 1-.02-.003h-.004c-.007.003-.01 0-.013 0H8.96a.075.075 0 0 0-.028.003h-.03a.02.02 0 0 0-.015.004h-.03a.03.03 0 0 1-.017.003h-.007a.02.02 0 0 1-.014.004h-.01a.02.02 0 0 0-.014.003h-.01a.043.043 0 0 0-.02.004.013.013 0 0 0-.011.003.123.123 0 0 0-.038.007.361.361 0 0 0-.065.02.147.147 0 0 0-.017.004.013.013 0 0 1-.01.003c.003-.003.007-.007.01-.007a.585.585 0 0 1 .103-.03c.003-.004.003-.007.007-.004a.622.622 0 0 1 .106-.017c.007 0 .013-.003.02 0a.277.277 0 0 1 .052-.003.006.006 0 0 1 .01 0 .415.415 0 0 1 .065-.004.791.791 0 0 1 .318.065h.004c.003.004.003.004.007.004a.049.049 0 0 1 .02.007l.004.003.037.017a.107.107 0 0 1 .035.017c.006.004.017.007.024.01a.072.072 0 0 0 .02.014.314.314 0 0 1 .027.017.666.666 0 0 1 .086.062c.047.039.09.08.13.127a.363.363 0 0 1 .034.04.13.13 0 0 1 .031.045.12.12 0 0 1 .017.028.12.12 0 0 1 .017.027v.007Zm.007.007v.003c-.004-.003-.004-.007-.007-.01.007 0 .007.003.007.007Z"
-        fill="#528693"
-      />
-      <path
-        d="m9.939 3.585-.004-.004a.1.1 0 0 1-.006-.03.94.94 0 0 0-.093-.326.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062c.004.007.007.01.007.017a.046.046 0 0 1 .01.027l.004.004a.066.066 0 0 1 .01.034l.004.003a.025.025 0 0 1 .006.02.025.025 0 0 1 .007.022.441.441 0 0 1 .02.085v.007a.453.453 0 0 1 .018.113Zm.329-.075a.171.171 0 0 1-.007.061 1.305 1.305 0 0 0-.195-.613c.113.164.183.353.202.552ZM7.073 6.574c-.034-.054-.062-.11-.093-.167A16.294 16.294 0 0 1 6.402 5.2a6.22 6.22 0 0 1-.425-1.315.577.577 0 0 1 0-.133 1.627 1.627 0 0 0 .051.318 7.89 7.89 0 0 0 .439 1.247c.185.427.39.846.606 1.256Zm3.89-1.023a20.5 20.5 0 0 1-.332.674c-.387.74-.809 1.459-1.25 2.178l-.165.267a.288.288 0 0 1-.147.134.278.278 0 0 1-.335-.11 38.421 38.421 0 0 1-.672-1.113c-.037-.065-.075-.13-.11-.195.275.466.542.907.802 1.318a.274.274 0 0 0 .308.093.325.325 0 0 0 .13-.106l.155-.254c.208-.332.41-.671.61-1.01.345-.6.684-1.212 1.006-1.876ZM8.449 2.842c.004-.004.004 0 .004 0a.004.004 0 0 1-.004.004v-.004ZM8.46 2.834c0 .003-.004.003-.007.006a.01.01 0 0 1 .003-.006h.003Zm.027-.013-.003.004V2.82h.003Zm.069-.034a.012.012 0 0 0-.007.004.013.013 0 0 1-.01.003.075.075 0 0 0-.018.01h-.003a.072.072 0 0 1 .02-.014c.007-.003.01-.006.017-.003Zm.037-.022h.003c-.003.004-.007.004-.01.007-.003.004-.01.004-.014.007-.003.004-.003.004-.007.004H8.56a.08.08 0 0 1 .034-.017Zm.01-.002c0-.003.003 0 .003 0a.003.003 0 0 1-.003.003H8.6l.003-.003Zm1.206.418a1.02 1.02 0 0 0-.538-.435c-.003-.004-.003-.004-.007-.004a.217.217 0 0 0-.024-.006.02.02 0 0 0-.013-.004.091.091 0 0 0-.041-.01c-.004-.003-.004-.003-.007-.003-.004 0-.014-.004-.02-.004a.007.007 0 0 0-.006-.002.007.007 0 0 0-.005.002h-.003a.012.012 0 0 0-.007-.003h-.004c-.003-.004-.003-.004-.007 0h-.003c0-.004-.003-.004-.007-.004H9.11a.068.068 0 0 0-.027-.003.153.153 0 0 0-.038-.004h-.024a.037.037 0 0 1-.02-.003h-.004c-.007.003-.01 0-.013 0H8.96a.075.075 0 0 0-.028.003h-.03a.02.02 0 0 0-.015.004h-.03a.03.03 0 0 1-.017.003h-.007a.02.02 0 0 1-.014.004h-.01a.02.02 0 0 0-.014.003h-.01a.043.043 0 0 0-.02.004.013.013 0 0 0-.011.003.123.123 0 0 0-.038.007.361.361 0 0 0-.065.02.147.147 0 0 0-.017.004.013.013 0 0 1-.01.003c.003-.003.007-.007.01-.007a.585.585 0 0 1 .103-.03c.003-.004.003-.007.007-.004a.622.622 0 0 1 .106-.017c.007 0 .013-.003.02 0a.277.277 0 0 1 .052-.003.006.006 0 0 1 .01 0 .415.415 0 0 1 .065-.004.791.791 0 0 1 .318.065h.004c.003.004.003.004.007.004a.049.049 0 0 1 .02.007l.004.003.037.017a.107.107 0 0 1 .035.017c.006.004.017.007.024.01a.072.072 0 0 0 .02.014.314.314 0 0 1 .027.017.666.666 0 0 1 .086.062c.047.039.09.08.13.127a.363.363 0 0 1 .034.04.13.13 0 0 1 .031.045.12.12 0 0 1 .017.028.12.12 0 0 1 .017.027v.007Zm.007.007v.003c-.004-.003-.004-.007-.007-.01.007 0 .007.003.007.007Z"
-        fill="#528693"
-      />
-      <path
-        d="m9.939 3.585-.004-.004a.1.1 0 0 1-.006-.03.94.94 0 0 0-.093-.326.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062c.004.007.007.01.007.017a.046.046 0 0 1 .01.027l.004.004a.066.066 0 0 1 .01.034l.004.003a.025.025 0 0 1 .006.02.025.025 0 0 1 .007.022.441.441 0 0 1 .02.085v.007a.453.453 0 0 1 .018.113Zm.329-.075a.171.171 0 0 1-.007.061 1.305 1.305 0 0 0-.195-.613c.113.164.183.353.202.552Zm-1.819-.668c.004-.004.004 0 .004 0a.004.004 0 0 1-.004.004v-.004ZM8.46 2.834c0 .003-.004.003-.007.006a.01.01 0 0 1 .003-.006h.003Zm.027-.013-.003.004V2.82h.003Zm.069-.034a.012.012 0 0 0-.007.004.013.013 0 0 1-.01.003.075.075 0 0 0-.018.01h-.003a.072.072 0 0 1 .02-.014c.007-.003.01-.006.017-.003Zm.037-.022h.003c-.003.004-.007.004-.01.007-.003.004-.01.004-.014.007-.003.004-.003.004-.007.004H8.56a.08.08 0 0 1 .034-.017Zm.01-.002c0-.003.003 0 .003 0a.003.003 0 0 1-.003.003H8.6l.003-.003Zm1.206.418a1.02 1.02 0 0 0-.538-.435c-.003-.004-.003-.004-.007-.004a.217.217 0 0 0-.024-.006.02.02 0 0 0-.013-.004.091.091 0 0 0-.041-.01c-.004-.003-.004-.003-.007-.003-.004 0-.014-.004-.02-.004a.007.007 0 0 0-.006-.002.007.007 0 0 0-.005.002h-.003a.012.012 0 0 0-.007-.003h-.004c-.003-.004-.003-.004-.007 0h-.003c0-.004-.003-.004-.007-.004H9.11a.068.068 0 0 0-.027-.003.153.153 0 0 0-.038-.004h-.024a.037.037 0 0 1-.02-.003h-.004c-.007.003-.01 0-.013 0H8.96a.075.075 0 0 0-.028.003h-.03a.02.02 0 0 0-.015.004h-.03a.03.03 0 0 1-.017.003h-.007a.02.02 0 0 1-.014.004h-.01a.02.02 0 0 0-.014.003h-.01a.043.043 0 0 0-.02.004.013.013 0 0 0-.011.003.123.123 0 0 0-.038.007.361.361 0 0 0-.065.02.147.147 0 0 0-.017.004.013.013 0 0 1-.01.003c.003-.003.007-.007.01-.007a.585.585 0 0 1 .103-.03c.003-.004.003-.007.007-.004a.622.622 0 0 1 .106-.017c.007 0 .013-.003.02 0a.277.277 0 0 1 .052-.003.006.006 0 0 1 .01 0 .415.415 0 0 1 .065-.004.791.791 0 0 1 .318.065h.004c.003.004.003.004.007.004a.049.049 0 0 1 .02.007l.004.003.037.017a.107.107 0 0 1 .035.017c.006.004.017.007.024.01a.072.072 0 0 0 .02.014.314.314 0 0 1 .027.017.666.666 0 0 1 .086.062c.047.039.09.08.13.127a.363.363 0 0 1 .034.04.13.13 0 0 1 .031.045.12.12 0 0 1 .017.028.12.12 0 0 1 .017.027v.007Zm.007.007v.003c-.004-.003-.004-.007-.007-.01.007 0 .007.003.007.007Z"
-        fill="#528693"
-      />
-      <path
-        d="m9.939 3.585-.004-.004a.1.1 0 0 1-.006-.03.94.94 0 0 0-.093-.326.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062c.004.007.007.01.007.017a.046.046 0 0 1 .01.027l.004.004a.066.066 0 0 1 .01.034l.004.003a.025.025 0 0 1 .006.02.025.025 0 0 1 .007.022.441.441 0 0 1 .02.085v.007a.453.453 0 0 1 .018.113Zm.329-.075a.171.171 0 0 1-.007.061 1.305 1.305 0 0 0-.195-.613c.113.164.183.353.202.552Zm-1.819-.668c.004-.004.004 0 .004 0a.004.004 0 0 1-.004.004v-.004ZM8.46 2.834c0 .003-.004.003-.007.006a.01.01 0 0 1 .003-.006h.003Zm.027-.013-.003.004V2.82h.003Zm.069-.034a.012.012 0 0 0-.007.004.013.013 0 0 1-.01.003.075.075 0 0 0-.018.01h-.003a.072.072 0 0 1 .02-.014c.007-.003.01-.006.017-.003Zm.037-.022h.003c-.003.004-.007.004-.01.007-.003.004-.01.004-.014.007-.003.004-.003.004-.007.004H8.56a.08.08 0 0 1 .034-.017Zm.01-.002c0-.003.003 0 .003 0a.003.003 0 0 1-.003.003H8.6l.003-.003Zm1.206.418a1.02 1.02 0 0 0-.538-.435c-.003-.004-.003-.004-.007-.004a.217.217 0 0 0-.024-.006.02.02 0 0 0-.013-.004.091.091 0 0 0-.041-.01c-.004-.003-.004-.003-.007-.003-.004 0-.014-.004-.02-.004a.007.007 0 0 0-.006-.002.007.007 0 0 0-.005.002h-.003a.012.012 0 0 0-.007-.003h-.004c-.003-.004-.003-.004-.007 0h-.003c0-.004-.003-.004-.007-.004H9.11a.068.068 0 0 0-.027-.003.153.153 0 0 0-.038-.004h-.024a.037.037 0 0 1-.02-.003h-.004c-.007.003-.01 0-.013 0H8.96a.075.075 0 0 0-.028.003h-.03a.02.02 0 0 0-.015.004h-.03a.03.03 0 0 1-.017.003h-.007a.02.02 0 0 1-.014.004h-.01a.02.02 0 0 0-.014.003h-.01a.043.043 0 0 0-.02.004.013.013 0 0 0-.011.003.123.123 0 0 0-.038.007.361.361 0 0 0-.065.02.147.147 0 0 0-.017.004.013.013 0 0 1-.01.003c.003-.003.007-.007.01-.007a.585.585 0 0 1 .103-.03c.003-.004.003-.007.007-.004a.622.622 0 0 1 .106-.017c.007 0 .013-.003.02 0a.277.277 0 0 1 .052-.003.006.006 0 0 1 .01 0 .415.415 0 0 1 .065-.004.791.791 0 0 1 .318.065h.004c.003.004.003.004.007.004a.049.049 0 0 1 .02.007l.004.003.037.017a.107.107 0 0 1 .035.017c.006.004.017.007.024.01a.072.072 0 0 0 .02.014.314.314 0 0 1 .027.017.666.666 0 0 1 .086.062c.047.039.09.08.13.127a.363.363 0 0 1 .034.04.13.13 0 0 1 .031.045.12.12 0 0 1 .017.028.12.12 0 0 1 .017.027v.007Zm.007.007v.003c-.004-.003-.004-.007-.007-.01.007 0 .007.003.007.007Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.968 13.6629L16.79 11.4532L10.968 9.16171L5.07001 11.4532L10.968 13.6629ZM11.1809 14.2238C11.0445 14.2756 10.894 14.2759 10.7575 14.2247L4.85951 12.0151C4.62648 11.9278 4.47153 11.7057 4.47002 11.4568C4.46851 11.208 4.62076 10.984 4.85272 10.8939L10.7507 8.60243C10.8913 8.5478 11.0473 8.54814 11.1877 8.60339L17.0098 10.8949C17.2404 10.9857 17.3915 11.209 17.39 11.4569C17.3885 11.7048 17.2347 11.9262 17.0029 12.0142L11.1809 14.2238Z"
         fill="#528693"
       />
       <path
-        d="m9.939 3.585-.004-.004a.1.1 0 0 1-.006-.03.94.94 0 0 0-.093-.326.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062c.004.007.007.01.007.017a.046.046 0 0 1 .01.027l.004.004a.066.066 0 0 1 .01.034l.004.003a.025.025 0 0 1 .006.02.025.025 0 0 1 .007.022.441.441 0 0 1 .02.085v.007a.453.453 0 0 1 .018.113Zm.329-.075a.171.171 0 0 1-.007.061 1.305 1.305 0 0 0-.195-.613c.113.164.183.353.202.552ZM9.11 2.363a1.073 1.073 0 0 0-.181-.007 1.31 1.31 0 0 0-1.26 1.12.142.142 0 0 0-.007.054v.017c-.004 0-.004-.003-.004-.007v-.03a.691.691 0 0 1 .02-.117v-.007a.01.01 0 0 0 .004-.007 1.1 1.1 0 0 1 .01-.048.003.003 0 0 1 .004-.003.103.103 0 0 1 .007-.034.049.049 0 0 1 .007-.02.1.1 0 0 1 .007-.032l.03-.082c.004 0 .004 0 .004-.003a.013.013 0 0 1 .003-.01l.052-.11c.003 0 .003 0 .003-.003V3.03a.142.142 0 0 0 .024-.038l.024-.04a.003.003 0 0 1 .003-.004.072.072 0 0 1 .014-.02 1.284 1.284 0 0 1 .25-.278c.26-.217.594-.323.932-.298a.377.377 0 0 1 .054.01Z"
-        fill="#528693"
+        d="M2.91127 13.821L4.72369 12L10.4255 14.2097L8.48953 16.3104C8.42933 16.3757 8.33459 16.3962 8.25282 16.3615L4.72369 14.8644L2.98188 14.1644C2.84217 14.1082 2.80505 13.9277 2.91127 13.821Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
-        d="M9.306 2.397a1.204 1.204 0 0 0-.197-.034c.066.006.132.018.197.034Zm-1.202.814c0 .003-.004.007-.004.01h-.003c0-.002.003-.006.007-.01Zm.034-.061v.006h-.004a.01.01 0 0 0 .003-.006Zm.4-.36v.004a.075.075 0 0 0-.017.01h-.003a.071.071 0 0 1 .02-.013Zm1.315.463a.075.075 0 0 0-.017-.028.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062Zm.086.332-.004-.004a.564.564 0 0 0-.013-.11.453.453 0 0 1 .017.114Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.29843 11.5767C4.46645 11.4079 4.71841 11.3545 4.9405 11.4405L10.6423 13.6502C10.8274 13.7219 10.9651 13.8805 11.01 14.0739C11.0549 14.2672 11.0013 14.4703 10.8667 14.6162L8.93074 16.717C8.69877 16.9687 8.33363 17.0475 8.0185 16.9138L4.49464 15.4189L2.75814 14.7211C2.2197 14.5047 2.07664 13.809 2.48601 13.3977L4.29843 11.5767ZM4.72369 14.8643L8.25282 16.3615C8.33459 16.3961 8.42933 16.3757 8.48953 16.3104L10.4255 14.2096L4.72369 12L2.91127 13.8209C2.80505 13.9277 2.84217 14.1082 2.98188 14.1643L4.72369 14.8643Z"
         fill="#528693"
       />
       <path
-        d="M9.11 2.362a1.073 1.073 0 0 0-.181-.006 1.31 1.31 0 0 0-1.26 1.12.142.142 0 0 0-.007.054v.017c-.004 0-.004-.003-.004-.007v-.03a.691.691 0 0 1 .02-.117v-.007a.01.01 0 0 0 .004-.007 1.1 1.1 0 0 1 .01-.048.003.003 0 0 1 .004-.003.103.103 0 0 1 .007-.034.049.049 0 0 1 .007-.02.1.1 0 0 1 .007-.032l.03-.082c.004 0 .004 0 .004-.003a.013.013 0 0 1 .003-.01l.052-.11c.003 0 .003 0 .003-.003V3.03a.142.142 0 0 0 .024-.038l.024-.04a.003.003 0 0 1 .003-.004.072.072 0 0 1 .014-.02 1.284 1.284 0 0 1 .25-.278c.26-.217.594-.323.932-.298a.377.377 0 0 1 .054.01Z"
-        fill="#528693"
+        d="M19.1287 13.821L17.3163 12L11.6144 14.2097L13.5505 16.3104C13.6106 16.3757 13.7054 16.3962 13.7872 16.3615L17.3163 14.8644L19.0581 14.1644C19.1978 14.1082 19.2349 13.9277 19.1287 13.821Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
       />
       <path
-        d="M9.306 2.397a1.204 1.204 0 0 0-.197-.034c.066.006.132.018.197.034Zm-1.202.814c0 .003-.004.007-.004.01h-.003c0-.002.003-.006.007-.01Zm.034-.061v.006h-.004a.01.01 0 0 0 .003-.006Zm.4-.36v.004a.075.075 0 0 0-.017.01h-.003a.071.071 0 0 1 .02-.013Zm1.315.463a.075.075 0 0 0-.017-.028.004.004 0 0 0 0-.002.003.003 0 0 0-.003-.001c0-.004-.004-.004-.004-.007a.019.019 0 0 0-.01-.017c0-.003-.003-.003-.003-.007a.23.23 0 0 1 .037.062Zm.086.332-.004-.004a.564.564 0 0 0-.013-.11.453.453 0 0 1 .017.114Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.7416 11.5767C17.5735 11.4079 17.3216 11.3545 17.0995 11.4405L11.3976 13.6502C11.2126 13.7219 11.0749 13.8805 11.03 14.0739C10.9851 14.2672 11.0387 14.4703 11.1732 14.6162L13.1092 16.717C13.3412 16.9687 13.7063 17.0475 14.0215 16.9138L17.5453 15.4189L19.2818 14.7211C19.8203 14.5047 19.9633 13.809 19.554 13.3977L17.7416 11.5767ZM17.3163 14.8643L13.7872 16.3615C13.7054 16.3961 13.6106 16.3757 13.5505 16.3104L11.6144 14.2096L17.3163 12L19.1287 13.8209C19.2349 13.9277 19.1978 14.1082 19.0581 14.1643L17.3163 14.8643Z"
         fill="#528693"
       />
+      <path fillRule="evenodd" clipRule="evenodd" d="M10.7 19.5V9H11.3V19.5H10.7Z" fill="#528693" />
       <path
-        d="M10.301 3.553a1.351 1.351 0 0 0-2.359-.747 1.324 1.324 0 0 0-.305.7v.02a1.301 1.301 0 0 0 .233.905.15.15 0 0 0 .02.024c.007.01.014.017.02.027a.019.019 0 0 1 .011.014l.058.061.02.024c.198.206.455.345.735.4a1.332 1.332 0 0 0 1.3-.514 1.356 1.356 0 0 0 .267-.914Zm-.393.21a.964.964 0 0 1-.263.57l-.017.016a.91.91 0 0 1-.476.25.885.885 0 0 1-.496-.032 1.055 1.055 0 0 1-.632-.757.94.94 0 0 1 .203-.699.972.972 0 0 1 .77-.4c.08.001.16.013.237.035a.112.112 0 0 0-.017-.007c.084.03.165.066.243.109a.968.968 0 0 1 .205.177c.12.136.2.303.234.481a.917.917 0 0 1 .009.257Z"
-        fill="#528693"
+        d="M14.125 6.125C14.125 7.26958 12.7506 9.91972 11.8247 11.5751C11.4584 12.2301 10.5416 12.2301 10.1753 11.5751C9.2494 9.91972 7.875 7.26958 7.875 6.125C7.875 4.39911 9.27411 3 11 3C12.7259 3 14.125 4.39911 14.125 6.125Z"
+        fill="white"
       />
       <path
-        d="m9.673 4.299-.01.011.002-.002c.003-.001.005-.007.008-.01Zm2.225-.132a7.495 7.495 0 0 1-.47 1.243c-.37.794-.784 1.551-1.215 2.294a52.54 52.54 0 0 1-.664 1.106.728.728 0 0 1-.274.291.637.637 0 0 1-.798-.15 1.495 1.495 0 0 1-.103-.15l-.086-.138a42.1 42.1 0 0 1-.993-1.67 41.699 41.699 0 0 0 1.038 1.78l.092.144a.656.656 0 0 0 1.007.099c.08-.095.151-.197.212-.305.46-.74.901-1.49 1.308-2.267.203-.387.398-.777.572-1.185a6.893 6.893 0 0 0 .432-1.267.673.673 0 0 0 .017-.157 3.369 3.369 0 0 1-.075.332Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.8685 8.9064C13.3991 9.94112 12.8148 11.0342 12.3484 11.868C11.753 12.9325 10.247 12.9325 9.65159 11.868C9.18523 11.0342 8.60093 9.94112 8.13153 8.9064C7.89698 8.38936 7.68686 7.87762 7.53431 7.41433C7.38586 6.96345 7.275 6.50937 7.275 6.12502C7.275 4.06776 8.94274 2.40002 11 2.40002C13.0573 2.40002 14.725 4.06776 14.725 6.12502C14.725 6.50937 14.6141 6.96345 14.4657 7.41433C14.3131 7.87762 14.103 8.38936 13.8685 8.9064ZM11.8247 11.5751C12.7506 9.91974 14.125 7.2696 14.125 6.12502C14.125 4.39913 12.7259 3.00002 11 3.00002C9.27411 3.00002 7.875 4.39913 7.875 6.12502C7.875 7.2696 9.2494 9.91974 10.1753 11.5751C10.5416 12.2301 11.4584 12.2301 11.8247 11.5751Z"
         fill="#528693"
       />
       <path
-        d="M11.905 2.79a3.032 3.032 0 0 0-5.942.309c-.117.753.212 1.54.504 2.218.185.428.39.846.606 1.257.072.137.144.274.222.418.319.572.654 1.123.993 1.67l.086.138a1.497 1.497 0 0 0 .103.15.637.637 0 0 0 .798.151.728.728 0 0 0 .274-.29c.226-.367.448-.737.664-1.107.431-.743.846-1.5 1.216-2.294a7.504 7.504 0 0 0 .469-1.243 3.234 3.234 0 0 0 .075-.336 3.104 3.104 0 0 0 .024-.353 2.926 2.926 0 0 0-.092-.688Zm-.326 1.127c-.007.024-.01.048-.017.072a5.374 5.374 0 0 1-.058.22 7.246 7.246 0 0 1-.267.732 8.758 8.758 0 0 1-.274.61 20.5 20.5 0 0 1-.332.674c-.387.74-.808 1.459-1.25 2.178l-.165.267a.288.288 0 0 1-.147.134.278.278 0 0 1-.335-.11 38.421 38.421 0 0 1-.672-1.113 5.601 5.601 0 0 1-.11-.195c-.088-.147-.17-.295-.256-.445l-.23-.418-.058-.11a16.814 16.814 0 0 1-.315-.61A17.88 17.88 0 0 1 6.8 5.17a7.382 7.382 0 0 1-.411-1.15c-.017-.093-.041-.188-.055-.281a2.322 2.322 0 0 1-.01-.27 2.459 2.459 0 0 1 .075-.552A2.642 2.642 0 0 1 9.172.904c.065.003.13.01.195.02a.548.548 0 0 1 .13.024c.045.007.086.017.13.028a.568.568 0 0 1 .13.037c.09.028.175.059.26.093.049.02.097.04.145.065a2.302 2.302 0 0 1 .414.26 2.173 2.173 0 0 1 .318.284c.035.036.069.074.1.113a.611.611 0 0 1 .096.12c.183.244.325.517.417.808a2.47 2.47 0 0 1 .072 1.161Z"
-        fill="#528693"
+        d="M12.25 6.125C12.25 6.81536 11.6904 7.375 11 7.375C10.3096 7.375 9.75 6.81536 9.75 6.125C9.75 5.43464 10.3096 4.875 11 4.875C11.6904 4.875 12.25 5.43464 12.25 6.125Z"
+        fill="white"
       />
       <path
-        d="M9.836 3.225a.075.075 0 0 1 .017.028c.004.007.007.01.004.014l.003.003a.045.045 0 0 1 .01.027.121.121 0 0 1-.013-.03l-.02-.042-.004-.003c0-.004-.004-.004-.004-.007.007.004.007.007.007.01Zm.1.356a.1.1 0 0 1-.007-.03 1.061 1.061 0 0 0-.045-.213l-.01-.03A.012.012 0 0 1 9.87 3.3h.004c0 .003.003.003 0 .007a.055.055 0 0 1 .01.027v.003h.004a.025.025 0 0 1 .006.02.025.025 0 0 1 .007.022.441.441 0 0 1 .02.085v.007a.453.453 0 0 1 .018.113l-.004-.003Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.85 6.12502C12.85 7.14675 12.0217 7.97502 11 7.97502C9.97827 7.97502 9.15 7.14675 9.15 6.12502C9.15 5.1033 9.97827 4.27502 11 4.27502C12.0217 4.27502 12.85 5.1033 12.85 6.12502ZM11 7.37502C11.6904 7.37502 12.25 6.81538 12.25 6.12502C12.25 5.43467 11.6904 4.87502 11 4.87502C10.3096 4.87502 9.75 5.43467 9.75 6.12502C9.75 6.81538 10.3096 7.37502 11 7.37502Z"
         fill="#528693"
       />
     </svg>

package/src/iconography/switch.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, SVGProps } from 'react';
+
+type SwitchProps = SVGProps<SVGSVGElement>;
+
+type SwitchRef = SVGSVGElement;
+
+export const Switch = forwardRef<SwitchRef, SwitchProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M19 15.2C19 13.6536 17.7464 12.4 16.2 12.4H5.8C4.2536 12.4 3 13.6536 3 15.2V15.2C3 16.7464 4.2536 18 5.8 18H16.2C17.7464 18 19 16.7464 19 15.2V15.2Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.2 11.8H5.80001C3.92224 11.8 2.40001 13.3223 2.40001 15.2C2.40001 17.0778 3.92224 18.6 5.80001 18.6H16.2C18.0778 18.6 19.6 17.0778 19.6 15.2C19.6 13.3223 18.0778 11.8 16.2 11.8ZM16.2 12.4C17.7464 12.4 19 13.6537 19 15.2C19 16.7464 17.7464 18 16.2 18H5.80001C4.25361 18 3.00001 16.7464 3.00001 15.2C3.00001 13.6537 4.25361 12.4 5.80001 12.4H16.2Z"
+        fill="#528693"
+      />
+      <path
+        d="M5 15.2501C5 15.9404 5.55964 16.5001 6.25 16.5001C6.94036 16.5001 7.5 15.9404 7.5 15.2501C7.5 14.5597 6.94036 14.0001 6.25 14.0001C5.55964 14.0001 5 14.5597 5 15.2501Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.40001 15.2501C4.40001 16.2718 5.22828 17.1001 6.25001 17.1001C7.27173 17.1001 8.10001 16.2718 8.10001 15.2501C8.10001 14.2284 7.27173 13.4001 6.25001 13.4001C5.22828 13.4001 4.40001 14.2284 4.40001 15.2501ZM6.25001 16.5001C5.55965 16.5001 5.00001 15.9404 5.00001 15.2501C5.00001 14.5597 5.55965 14.0001 6.25001 14.0001C6.94036 14.0001 7.50001 14.5597 7.50001 15.2501C7.50001 15.9404 6.94036 16.5001 6.25001 16.5001Z"
+        fill="#528693"
+      />
+      <path
+        d="M3 6.8C3 5.2536 4.2536 4 5.8 4H16.2C17.7464 4 19 5.2536 19 6.8V6.8C19 8.3464 17.7464 9.6 16.2 9.6H5.8C4.2536 9.6 3 8.3464 3 6.8V6.8Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.79999 3.40002H16.2C18.0778 3.40002 19.6 4.92226 19.6 6.80002C19.6 8.67779 18.0778 10.2 16.2 10.2H5.79999C3.92223 10.2 2.39999 8.67779 2.39999 6.80002C2.39999 4.92226 3.92223 3.40002 5.79999 3.40002ZM5.79999 4.00002C4.2536 4.00002 2.99999 5.25363 2.99999 6.80002C2.99999 8.34642 4.2536 9.60002 5.79999 9.60002H16.2C17.7464 9.60002 19 8.34642 19 6.80002C19 5.25363 17.7464 4.00002 16.2 4.00002H5.79999Z"
+        fill="#528693"
+      />
+      <path
+        d="M17 6.85004C17 7.54039 16.4404 8.10004 15.75 8.10004C15.0596 8.10004 14.5 7.54039 14.5 6.85004C14.5 6.15968 15.0596 5.60004 15.75 5.60004C16.4404 5.60004 17 6.15968 17 6.85004Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.6 6.85006C17.6 7.87179 16.7717 8.70006 15.75 8.70006C14.7283 8.70006 13.9 7.87179 13.9 6.85006C13.9 5.82833 14.7283 5.00006 15.75 5.00006C16.7717 5.00006 17.6 5.82833 17.6 6.85006ZM15.75 8.10006C16.4403 8.10006 17 7.54042 17 6.85006C17 6.15971 16.4403 5.60006 15.75 5.60006C15.0596 5.60006 14.5 6.15971 14.5 6.85006C14.5 7.54042 15.0596 8.10006 15.75 8.10006Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Switch.displayName = 'Switch';

package/src/iconography/video.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, SVGProps } from 'react';
+
+type VideoProps = SVGProps<SVGSVGElement>;
+
+type VideoRef = SVGSVGElement;
+
+export const Video = forwardRef<VideoRef, VideoProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path
+        d="M2 5C2 4.44772 2.44772 4 3 4H19C19.5523 4 20 4.44772 20 5V17C20 17.5523 19.5523 18 19 18H3C2.44772 18 2 17.5523 2 17V5Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V17C20.6 17.8837 19.8836 18.6 19 18.6H2.99999C2.11634 18.6 1.39999 17.8837 1.39999 17V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V17C1.99999 17.5523 2.44771 18 2.99999 18H19C19.5523 18 20 17.5523 20 17V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z"
+        fill="#528693"
+      />
+      <path
+        d="M2 5C2 4.44772 2.44772 4 3 4H19C19.5523 4 20 4.44772 20 5V7H2V5Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.6 7.60002H1.39999V5.00002C1.39999 4.11637 2.11634 3.40002 2.99999 3.40002H19C19.8836 3.40002 20.6 4.11637 20.6 5.00002V7.60002ZM2.99999 4.00002C2.44771 4.00002 1.99999 4.44774 1.99999 5.00002V7.00002H20V5.00002C20 4.44774 19.5523 4.00002 19 4.00002H2.99999Z"
+        fill="#528693"
+      />
+      <path
+        d="M13.0176 12.312C13.2176 12.4275 13.2176 12.7162 13.0176 12.8316L9.41763 14.9101C9.21763 15.0256 8.96763 14.8812 8.96763 14.6503L8.96763 10.4934C8.96763 10.2624 9.21763 10.1181 9.41763 10.2336L13.0176 12.312Z"
+        fill="#BFF6F8"
+        className="c-icon-fill"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.3176 13.3513L9.71764 15.4297C9.11764 15.7761 8.36764 15.3431 8.36764 14.6503L8.36764 10.4934C8.36764 9.80056 9.11764 9.36755 9.71764 9.71396L13.3176 11.7924C13.9176 12.1388 13.9176 13.0049 13.3176 13.3513ZM13.0176 12.8317C13.2176 12.7162 13.2176 12.4275 13.0176 12.312L9.41764 10.2336C9.21764 10.1181 8.96764 10.2624 8.96764 10.4934L8.96764 14.6503C8.96764 14.8812 9.21764 15.0256 9.41764 14.9101L13.0176 12.8317Z"
+        fill="#528693"
+      />
+    </svg>
+  );
+});
+
+Video.displayName = 'Video';

package/src/index.ts

@@ -23,6 +23,8 @@ export * from './slider';
 export * from './spinner';
 export * from './tag';
 export * from './rich-text-editor';
+export * from './tooltip';
+export * from './switch';
 
 // Icons ---
 export * from './iconography';

package/src/rich-text-editor/rich-text-editor.css

@@ -15,7 +15,6 @@
 
 .c-rich-text-editor {
   margin: 0px auto;
-  max-width: 1100px;
   position: relative;
   line-height: 1.7;
 

package/src/switch/Switch.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import type { Meta } from '@storybook/react';
+
+import { Switch } from '.';
+import { Label } from '../label';
+
+export default {
+  title: 'Components/Switch',
+  parameters: {
+    default: 'gray',
+  },
+} as Meta<typeof Switch>;
+
+export function Example() {
+  return (
+    <div className="flex w-1/4 justify-center py-12">
+      <Switch />
+    </div>
+  );
+}
+
+export const Uncontrolled = () => {
+  return (
+    <div className="flex w-1/4 justify-center py-12">
+      <Switch defaultChecked={true} />
+    </div>
+  );
+};
+
+export function Controlled() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div className="flex w-1/4 justify-center py-12">
+      <Switch checked={checked} onCheckedChange={c => setChecked(c)} />
+    </div>
+  );
+}
+
+export const WithLabel = () => {
+  return (
+    <div className="flex px-14 py-12 gap-2 items-center">
+      <Switch id="with-label-c1" defaultChecked={true} />
+      <Label htmlFor="with-label-c1">Apply price list to all products</Label>
+    </div>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <div className="flex flex-col px-14 py-12 gap-2 ">
+      <div className="flex mb-9 items-center space-x-2">
+        <Switch id="disabled-c1" defaultChecked={true} disabled />
+        <Label htmlFor="disabled-c1">Apply price list to all products</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Switch id="disabled-c2" defaultChecked={false} disabled />
+        <Label htmlFor="disabled-c2">Apply price list to all products</Label>
+      </div>
+    </div>
+  );
+};

package/src/switch/index.tsx

@@ -0,0 +1,3 @@
+import './switch.css';
+
+export { Switch } from './switch';

package/src/switch/switch.css

@@ -0,0 +1,13 @@
+.c-switch-root {
+  /* @apply radix-state-checked:border-[#528693] radix-state-checked:bg-neptune h-4 w-7 rounded-full border border-solid border-[#52869399] bg-[#9095a84d] p-0 focus:outline-none focus:ring-1 focus:ring-[#528693] focus:ring-offset-1 disabled:opacity-40; */
+  @apply relative h-6 w-11 cursor-pointer rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;
+}
+
+.c-switch-thumb {
+  /* @apply block h-4 w-4 translate-x-[1px] transform-gpu rounded-full bg-purple-200-700 transition-all data-[state=checked]:translate-x-12 data-[state=checked]:bg-green-400-500; */
+  @apply block h-4 w-4 origin-center translate-x-1 rounded-full bg-purple-400-500 transition-all;
+  &[data-state='checked']  {
+    transform: translateX(20px);
+    @apply bg-green-500-400;
+  }
+}

package/src/switch/switch.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+
+export type SwitchProps = ComponentProps<typeof RadixSwitch.Root>;
+
+export function Switch(props: SwitchProps) {
+  return (
+    <RadixSwitch.Root {...props} className="c-switch-root">
+      <RadixSwitch.Thumb className="c-switch-thumb" />
+    </RadixSwitch.Root>
+  );
+}

package/src/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta } from '@storybook/react';
+
+import { Tooltip } from '.';
+import { Button } from '../button';
+
+export default {
+  title: 'Components/Tooltip',
+  parameters: {
+    default: 'gray',
+  },
+} as Meta<typeof Tooltip>;
+
+export function Example() {
+  return (
+    <div className="flex w-1/4 justify-center py-12">
+      <Tooltip content="This has auto alignment">
+        <Button>Hover me for a basic tip</Button>
+      </Tooltip>
+    </div>
+  );
+}
+
+export function DefinedSides() {
+  return (
+    <div className="flex w-full justify-start px-6 py-12 gap-4">
+      <Tooltip content="I am a tip to the left" side="left">
+        <Button>Hot top to the left</Button>
+      </Tooltip>
+      <Tooltip content="I am a tip on top" side="top">
+        <Button>Hot tip top</Button>
+      </Tooltip>
+      <Tooltip content="I am a tip underneath" side="bottom">
+        <Button>Hot tip bottom</Button>
+      </Tooltip>
+      <Tooltip content="I am a tip to the right" side="right">
+        <Button>Hot top to the right</Button>
+      </Tooltip>
+    </div>
+  );
+}
+
+export function WithContent() {
+  return (
+    <div className="flex justify-start py-12">
+      <Tooltip
+        content={
+          <div className="max-w-xs p-2">
+            <h3>Tooltip with content</h3>
+            <p className="text-sm leading-6">In here you can add whatever kind of content you want. Even buttons</p>
+            <div className="flex gap-2 justify-end">
+              <Button intent="danger">Cancel</Button>
+              <Button intent="action">Done</Button>
+            </div>
+          </div>
+        }
+        side="left"
+      >
+        <Button>Hover me for extended tip with actions</Button>
+      </Tooltip>
+    </div>
+  );
+}

package/src/tooltip/index.tsx

@@ -0,0 +1,3 @@
+import './tooltip.css';
+
+export { Tooltip } from './tooltip';

package/src/tooltip/tooltip.css

@@ -0,0 +1,7 @@
+.c-tooltip-content {
+  @apply select-none rounded-md bg-white px-4 py-2 text-xs font-medium italic leading-none text-gray-500-400 shadow-tooltip transition;
+}
+
+.c-tooltip-arrow {
+  @apply fill-white;
+}

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+type TooltipProps = Pick<RadixTooltip.TooltipContentProps, 'side'> & {
+  children: ReactNode;
+  content: ReactNode;
+  delayDuration?: number;
+  align?: 'start' | 'center' | 'end';
+  defaultOpen?: boolean;
+};
+
+export function Tooltip({
+  children,
+  content,
+  side,
+  align = 'center',
+  defaultOpen = false,
+  delayDuration = 800,
+}: TooltipProps) {
+  return (
+    <RadixTooltip.Provider delayDuration={delayDuration}>
+      <RadixTooltip.Root defaultOpen={defaultOpen}>
+        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Portal>
+          <RadixTooltip.Content
+            align={align}
+            className="c-tooltip-content data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade"
+            sideOffset={5}
+            side={side}
+          >
+            <RadixTooltip.Arrow className="c-tooltip-arrow" />
+            {content}
+          </RadixTooltip.Content>
+        </RadixTooltip.Portal>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  );
+}

package/tailwind.config.cjs

@@ -44,6 +44,7 @@ module.exports = {
       },
       boxShadow: {
         DEFAULT: '0 2px 4px rgba(130,138,144,0.15)',
+        tooltip: 'hsl(206 22% 7%/15%) 0px 10px 18px -10px, hsl(206 22% 7%/10%) 0px 2px 20px -15px',
       },
     },
   },