@indico-data/design-system 2.35.0 → 2.36.1

package/lib/src/components/icons/indicons.d.ts

@@ -3,6 +3,7 @@ declare const indicons: {
     account: import("react/jsx-runtime").JSX.Element;
     address: import("react/jsx-runtime").JSX.Element;
     'api-doc': import("react/jsx-runtime").JSX.Element;
+    'application-squares': import("react/jsx-runtime").JSX.Element;
     'arrow-dots': import("react/jsx-runtime").JSX.Element;
     'arrow-down': import("react/jsx-runtime").JSX.Element;
     'arrow-up-circle': import("react/jsx-runtime").JSX.Element;
@@ -121,6 +122,7 @@ declare const indicons: {
     sad: import("react/jsx-runtime").JSX.Element;
     search: import("react/jsx-runtime").JSX.Element;
     'search-thin': import("react/jsx-runtime").JSX.Element;
+    shield: import("react/jsx-runtime").JSX.Element;
     shrug: import("react/jsx-runtime").JSX.Element;
     signature: import("react/jsx-runtime").JSX.Element;
     'sort-down': import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.35.0",
+  "version": "2.36.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/icons/indicons.tsx

@@ -21,6 +21,11 @@ const indicons = {
       <path d="M50 10c22.1 0 40 17.9 40 40S72.1 90 50 90 10 72.1 10 50s17.9-40 40-40m0-10C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm33.3 47.5L69.1 33.3c-1.3-1.3-3.6-1.3-4.9 0-.7.7-1 1.6-1 2.4 0 .8.4 1.8 1 2.4L76 49.9 64.2 61.7c-.7.7-1 1.5-1 2.4 0 .9.4 1.8 1 2.4s1.5 1 2.4 1c.9 0 1.8-.4 2.4-1l14.2-14.2c.7-.7 1-1.5 1-2.4.1-.9-.3-1.8-.9-2.4zM24 49.9l11.8-11.7c1.4-1.4 1.4-3.7 0-5.1-1.3-1.3-3.6-1.3-4.9 0L16.7 47.5c-.7.7-1 1.6-1 2.4s.4 1.8 1 2.4l14.2 14.3c.7.7 1.5 1 2.4 1 .9 0 1.8-.4 2.4-1 .7-.7 1-1.6 1-2.4 0-.9-.4-1.8-1-2.4L24 49.9zM58.7 31c-.4-.8-1.2-1.4-2.2-1.8-1.9-.6-3.8.4-4.3 2.2L41.1 66.5c-.2.9-.2 1.8.2 2.6s1.1 1.4 2 1.7c.4.2.7.2 1.2.2.2 0 .4 0 .7-.1 1.2-.3 2.3-1.2 2.7-2.4l11.4-35c-.1-.9-.1-1.8-.6-2.5z" />
     </svg>
   ),
+  'application-squares': (
+    <svg viewBox="0 0 143 142" fill="currentColor">
+      <path d="M57.62.418H4.107a3.367 3.367 0 0 0-3.373 3.36v53.307c0 1.855 1.51 3.36 3.373 3.36H57.62a3.367 3.367 0 0 0 3.373-3.36V3.778c0-1.855-1.51-3.36-3.373-3.36m81.106 0H85.213a3.367 3.367 0 0 0-3.373 3.36v53.307c0 1.855 1.51 3.36 3.373 3.36h53.513a3.366 3.366 0 0 0 3.373-3.36V3.778c0-1.855-1.51-3.36-3.373-3.36M57.62 81.756H4.107a3.367 3.367 0 0 0-3.373 3.36v53.306c0 1.856 1.51 3.36 3.373 3.36H57.62a3.366 3.366 0 0 0 3.373-3.36V85.116c0-1.856-1.51-3.36-3.373-3.36m81.106 0H85.213a3.367 3.367 0 0 0-3.373 3.36v53.306c0 1.856 1.51 3.36 3.373 3.36h53.513a3.366 3.366 0 0 0 3.373-3.36V85.116c0-1.856-1.51-3.36-3.373-3.36" />
+    </svg>
+  ),
   'arrow-dots': (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M19 10c0 5-4 9-9 9s-9-4-9-9 4-9 9-9 9 4 9 9zm11-9c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zM30 21c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zM50 41c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zM30 61c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zM10 81c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm20 0c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9z" />
@@ -701,6 +706,15 @@ const indicons = {
       <path d="M23.7 22.3 17 15.6c1.4-1.7 2.2-3.8 2.2-6.1 0-5.3-4.3-9.6-9.6-9.6C4.3 0 0 4.3 0 9.6s4.3 9.6 9.6 9.6c2.3 0 4.3-.8 6-2.1l6.7 6.7c.2.2.5.3.7.3.3 0 .5-.1.7-.3.4-.5.4-1.1 0-1.5M9.6 17.1C5.4 17.1 2 13.7 2 9.6S5.4 2 9.6 2s7.6 3.4 7.6 7.6-3.4 7.5-7.6 7.5" />
     </svg>
   ),
+  shield: (
+    <svg viewBox="0 0 34 40" fill="currentColor">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M33.3793 5.83676V4.85222L33.3711 4.84818C33.2696 4.84818 33.1735 4.84674 33.081 4.84534C32.9059 4.84271 32.7435 4.84026 32.5811 4.84818C29.4875 4.9773 26.4352 4.75134 23.4656 3.8475C20.9923 3.09699 18.6721 2.06402 16.9061 0.119146C16.7324 -0.0745351 16.6042 -0.0059399 16.4387 0.139321C16.2717 0.288091 16.107 0.44131 15.9421 0.594797C15.4987 1.00747 15.0532 1.42207 14.5528 1.75736C12.3897 3.214 9.94125 3.9968 7.37699 4.45679C5.09812 4.86836 2.79856 4.94502 0.4866 4.83608C0.389376 4.83081 0.290389 4.83242 0.182729 4.83417C0.125515 4.83511 0.0658509 4.83608 0.00270093 4.83608V5.19116V8.47566C0.00270093 9.87408 0.0020257 11.2725 0.00135047 12.6709C-0.000337628 16.167 -0.00202572 19.663 0.00683692 23.1591C0.0151087 26.1208 0.850559 28.8323 2.66208 31.2331C4.12205 33.17 5.96665 34.6912 8.01392 36.0025C10.5989 37.6569 13.3947 38.8835 16.2774 39.9367C16.5339 40.0335 16.8937 40.0133 17.1542 39.9165C18.3454 39.4686 19.5282 39.0006 20.6904 38.4881C23.205 37.3785 25.5832 36.0429 27.7132 34.3119C29.4627 32.8875 30.935 31.2412 31.9607 29.2439C33.0195 27.178 33.3793 24.9708 33.3793 22.6789C33.3766 18.937 33.3775 15.1932 33.3784 11.4501C33.3789 9.57872 33.3793 7.70751 33.3793 5.83676ZM27.4685 14.6055L25.6446 12.9366L25.6401 12.9407C25.5092 12.8218 25.297 12.8177 25.1661 12.9366L12.7692 24.1965C12.6383 24.3154 12.4261 24.3113 12.2952 24.1924L8.51206 20.748C8.38114 20.6291 8.16444 20.6291 8.03352 20.748L6.28641 22.3267C6.15548 22.4456 6.15548 22.6424 6.28641 22.7614L12.372 28.3134C12.5029 28.4323 12.7151 28.4364 12.846 28.3175L27.4685 15.036C27.6039 14.913 27.5994 14.7244 27.4685 14.6055Z"
+      />
+    </svg>
+  ),
   shrug: (
     <svg viewBox="0 0 250 66" fill="currentColor">
       <path d="M2.1 4.7C.7 4.7 0 3.6 0 2.3 0 .9.7 0 2.1 0h15.8c1.4 0 2 .9 2 2.3s-.6 2.4-2 2.4H2.1zm47.6 57.7c.2.4.3.8.3 1.2 0 1-.7 1.8-1.9 2.2-.4.1-.9.2-1.2.2-1.1 0-1.9-.5-2.4-1.6L21.7 3.7c-.1-.4-.2-.8-.2-1.1 0-1 .7-1.8 1.9-2.3.4-.1.8-.2 1.1-.2 1.1 0 2 .5 2.4 1.7l22.8 60.6zm4.1 3.6c-1.4 0-2.1-1-2.1-2.4s.7-2.3 2.1-2.3h23.8c1.4 0 2 .9 2 2.3s-.6 2.4-2 2.4H53.8zM232.1 4.7c-1.4 0-2-1-2-2.4s.6-2.3 2-2.3h15.8c1.4 0 2.1.9 2.1 2.3s-.7 2.4-2.1 2.4h-15.8zm-9-2.8c.4-1.2 1.2-1.7 2.4-1.7.3 0 .7.1 1.1.2 1.2.4 1.9 1.2 1.9 2.3 0 .3-.1.7-.2 1.1l-22.7 60.6c-.5 1.1-1.3 1.6-2.4 1.6-.3 0-.8-.1-1.2-.2-1.1-.4-1.9-1.2-1.9-2.2 0-.3.1-.8.3-1.2l22.7-60.5zM171.4 66c-1.4 0-2-1-2-2.4s.6-2.3 2-2.3h24.8c1.4 0 2.1.9 2.1 2.3s-.7 2.4-2.1 2.4h-24.8zM90.8 3.5c0 .5-.2 1-.6 1.6-6.1 8.2-9.7 16.3-9.7 28.1 0 11.9 3.6 20.1 9.6 28.2.4.6.6 1.2.6 1.6 0 1-.6 1.7-1.4 2.3-.6.5-1.3.7-2 .7-.8 0-1.6-.4-2.3-1.3-6.9-9.5-10.5-18.6-10.5-31.5 0-12.9 3.6-21.9 10.6-31.3.7-.9 1.6-1.3 2.4-1.3.7 0 1.3.2 1.8.6.8.5 1.5 1.3 1.5 2.3zm10.6 1.4c1 0 1.8.5 2.4 1.4 2.8 5.2 5.5 12.5 7.2 18.1.1.5.2.9.2 1.2 0 1.2-.7 2.1-2 2.5-.4.1-.8.2-1.2.2-1.2 0-2.2-.8-2.6-2-1.5-5.3-4.5-12.7-6.8-17.5-.2-.5-.3-.9-.3-1.3 0-1.1.6-2 1.8-2.4.4-.1.8-.2 1.3-.2zm49.9 1.3v.4c-1.1 11.5-5 22.9-10.7 30.8-6.7 9-17.2 15.9-28.2 18.4-.3.1-.7.1-1 .1-1.3 0-2.2-.6-2.6-2.1-.1-.3-.1-.7-.1-1 0-1.4.9-2.3 2.3-2.7 10-2.9 19.2-8.4 25-16.4 5.2-7.1 8.5-17.3 9.5-28 .1-1.8 1.4-2.5 2.8-2.5.3 0 .5 0 .7.1 1.3.2 2.3 1.3 2.3 2.9zm-32.1-4.7c1.1 0 2.2.5 2.8 1.7 2.3 5.1 4.9 11.7 6.5 17.5.1.3.1.5.1.8 0 1.4-.9 2.5-2.2 2.8-.3.1-.7.1-1.1.1-1.2 0-2.2-.6-2.6-1.9-1.4-5.5-4.1-12.5-6.3-17.1-.2-.5-.3-1-.3-1.4 0-1.1.7-1.9 1.9-2.3.4-.2.8-.2 1.2-.2zm42.8-1c.9 0 1.8.4 2.4 1.3 7 9.5 10.7 18.4 10.7 31.3 0 12.9-3.7 22-10.6 31.5-.6.9-1.4 1.3-2.3 1.3-.6 0-1.3-.3-1.9-.7-.8-.5-1.4-1.4-1.4-2.3 0-.5.2-1.1.6-1.6 5.9-8.1 9.6-16.3 9.6-28.2 0-11.8-3.6-19.9-9.7-28.1-.4-.5-.6-1.1-.6-1.6 0-.9.5-1.7 1.4-2.3.5-.4 1.2-.6 1.8-.6z" />
@@ -724,6 +738,7 @@ const indicons = {
       <path d="M62.1 50l37.1-37.1c1-1 1-2.7 0-3.8-7.3-7.3-19.2-7.3-26.5 0L46.9 34.9l-5.5-5.5c1-2.4 1.5-5.1 1.5-7.9C42.9 9.6 33.3 0 21.4 0S0 9.6 0 21.4s9.6 21.4 21.4 21.4c1 0 2-.1 3-.2l7.4 7.4-7.4 7.4c-1-.1-2-.2-3-.2C9.6 57.1 0 66.7 0 78.6S9.6 100 21.4 100s21.4-9.6 21.4-21.4c0-2.8-.5-5.4-1.5-7.9l5.5-5.5L72.6 91c7.3 7.3 19.2 7.3 26.5 0 1-1 1-2.7 0-3.8L62.1 50zM21.4 28.6c-3.9 0-7.1-3.2-7.1-7.1s3.2-7.1 7.1-7.1 7.1 3.2 7.1 7.1-3.1 7.1-7.1 7.1zm0 57.1c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1s7.1 3.2 7.1 7.1c.1 3.9-3.1 7.1-7.1 7.1z" />
     </svg>
   ),
+
   'step-forward': (
     <svg viewBox="0 0 11 16" fill="currentColor">
       <path d="M11 .429V15.57a.422.422 0 0 1-.412.429h-1.65a.422.422 0 0 1-.413-.429v-6.3l-6.72 6.464c-.708.611-1.805.1-1.805-.878V1.143C0 .165 1.097-.347 1.805.265l6.72 6.424V.43c0-.236.186-.429.412-.429h1.65c.227 0 .413.193.413.429Z" />

package/src/styles/variables/_typography.scss

@@ -1,4 +1,101 @@
-@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Mulish';
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/a.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Mulish';
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/a.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Mulish';
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/a.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Mulish';
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/a.woff2') format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Mulish';
+  font-style: italic;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/b.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/c.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/c.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/c.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
+    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/c.woff2') format('woff2');
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Mulish';
+  font-style: normal;
+  font-weight: 200 1000;
+  font-display: swap;
+  src: url('../assets/fonts/mulish/d.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+    U+FFFD;
+}
 
 :root {
   // Family