@pexip/components 16.17.0 → 17.1.0

package/design-tokens/generated/icons/notauthenticated-24.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "notauthenticated-24",
+  "name": "24px-notauthenticated",
+  "pascalName": "IconNotauthenticated_24",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c170e2a9-ef56-4ca7-aee5-c10f01d0aceb",
+  "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.4101 16.81C8.61676 18.47 10.1468 19.5333 12.0001 20C13.8534 19.5333 15.3834 18.47 16.5901 16.81C17.7968 15.15 18.4001 13.3067 18.4001 11.28V6.4L12.0001 4L5.6001 6.4V11.28C5.6001 13.3067 6.20343 15.15 7.4101 16.81ZM12.0001 16C12.4419 16 12.8001 15.6418 12.8001 15.2C12.8001 14.7582 12.4419 14.4 12.0001 14.4H11.9921C11.5503 14.4 11.1921 14.7582 11.1921 15.2C11.1921 15.6418 11.5503 16 11.9921 16L12.0001 16ZM11.2001 12C11.2001 12.4418 11.5583 12.8 12.0001 12.8C12.4419 12.8 12.8001 12.4418 12.8001 12V8.8C12.8001 8.35817 12.4419 8 12.0001 8C11.5583 8 11.2001 8.35817 11.2001 8.8V12Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/notauthenticated-24.svg

@@ -0,0 +1,16 @@
+<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    data-token-name="IconNotauthenticated_24"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M7.41 16.81Q9.22 19.3 12 20q2.78-.7 4.59-3.19t1.81-5.53V6.4L12 4 5.6 6.4v4.88q0 3.04 1.81 5.53M12 16a.8.8 0 0 0 0-1.6h-.008a.8.8 0 0 0 0 1.6zm-.8-4a.8.8 0 0 0 1.6 0V8.8a.8.8 0 0 0-1.6 0z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/notauthenticated-24.svg.d.ts

@@ -0,0 +1,5 @@
+// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
+
+import type React from 'react';
+const icon: React.FC<React.ComponentProps<'svg'>>;
+export default icon;

package/design-tokens/generated/icons/notauthenticated-32.json

@@ -0,0 +1,7 @@
+{
+  "iconName": "notauthenticated-32",
+  "name": "32px-notauthenticated",
+  "pascalName": "IconNotauthenticated_32",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a186b14d-fa2b-4cb9-9a1e-8eaf1d1ab84c",
+  "graphic": "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.87989 22.4134C11.4888 24.6267 13.5288 26.0445 15.9999 26.6667C18.471 26.0445 20.511 24.6267 22.1199 22.4134C23.7288 20.2 24.5332 17.7423 24.5332 15.04V8.53337L15.9999 5.33337L7.46655 8.53337V15.04C7.46655 17.7423 8.271 20.2 9.87989 22.4134ZM15.9999 21.3334C16.589 21.3334 17.0666 20.8558 17.0666 20.2667C17.0666 19.6776 16.589 19.2 15.9999 19.2L15.9892 19.2C15.4001 19.2 14.9226 19.6776 14.9226 20.2667C14.9226 20.8558 15.4001 21.3334 15.9892 21.3334L15.9999 21.3334ZM14.9332 16C14.9332 16.5891 15.4108 17.0667 15.9999 17.0667C16.589 17.0667 17.0666 16.5891 17.0666 16V11.7334C17.0666 11.1443 16.589 10.6667 15.9999 10.6667C15.4108 10.6667 14.9332 11.1443 14.9332 11.7334V16Z\" fill=\"white\"/>\n</svg>\n"
+}

package/design-tokens/generated/icons/notauthenticated-32.svg

@@ -0,0 +1,16 @@
+<!-- FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE -->
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    data-token-name="IconNotauthenticated_32"
+    viewBox="0 0 32 32"
+    aria-hidden="true"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M9.88 22.413q2.413 3.32 6.12 4.254 3.707-.934 6.12-4.254t2.413-7.373V8.533L16 5.333l-8.533 3.2v6.507q0 4.053 2.413 7.373m6.12-1.08a1.067 1.067 0 0 0 0-2.133h-.01a1.067 1.067 0 0 0 0 2.133zM14.933 16a1.067 1.067 0 0 0 2.134 0v-4.267a1.067 1.067 0 0 0-2.134 0z"
+        clip-rule="evenodd"
+    />
+</svg>

package/design-tokens/generated/icons/notauthenticated-32.svg.d.ts

@@ -0,0 +1,5 @@
+// FILE GENERATED BY packages/components/design-tokens/build-scripts/generate-icons.js DO NOT CHANGE
+
+import type React from 'react';
+const icon: React.FC<React.ComponentProps<'svg'>>;
+export default icon;

package/design-tokens/generated/variables.css

@@ -0,0 +1,321 @@
+/* FILE GENERATED BY packages/components/design-tokens/build-scripts/variables.css DO NOT CHANGE */
+
+.light {
+    --border-accent: #0068f4;
+    --border-button-danger: #bb2526;
+    --border-button-disabled: #d2d2d2;
+    --border-button-focus: #71b4ff;
+    --border-button-form: #777777;
+    --border-button-secondary: #323232;
+    --border-button-success: #2c7806;
+    --border-button-tertiary: #c3c4c5;
+    --border-checkbo-disabled: #c3c4c5;
+    --border-checkbox-main: #777777;
+    --border-divider-primary: #dcdcdc;
+    --border-divider-secondary: #e6e6e6;
+    --border-divider-ultra: #989898;
+    --border-none: 0;
+    --border-primary: 1px;
+    --border-secondary: 2px;
+    --font-button-accent: #0068f4;
+    --font-button-call-active: #212121;
+    --font-button-call-disabled: #989898;
+    --font-button-call-error: #ffffff;
+    --font-button-call-hover: #ffffff;
+    --font-button-call-main: #ffffff;
+    --font-button-danger-primary: #ffffff;
+    --font-button-danger-tertiary: #ae191a;
+    --font-button-danger-tertiary-hover: #ffffff;
+    --font-button-primary: #ffffff;
+    --font-button-secondary: #323232;
+    --font-button-success-primary: #ffffff;
+    --font-button-success-tertiary: #256505;
+    --font-button-success-tertiary-hover: #ffffff;
+    --font-button-tertiary: #323232;
+    --font-button-tertiary-hover: #ffffff;
+    --font-button-text: #0156c9;
+    --font-button-trans: #323232;
+    --font-button-trans-ultra: #ffffff;
+    --font-charts-line-1: #0156c9;
+    --font-charts-line-10: #4e9f0d;
+    --font-charts-line-11: #c9e2b5;
+    --font-charts-line-12: #cc6228;
+    --font-charts-line-13: #ffc198;
+    --font-charts-line-14: #f89654;
+    --font-charts-line-15: #ffedd5;
+    --font-charts-line-2: #71b4ff;
+    --font-charts-line-3: #d2d2d2;
+    --font-charts-line-4: #989898;
+    --font-charts-line-5: #494949;
+    --font-charts-line-6: #0068f4;
+    --font-charts-line-7: #cee3ff;
+    --font-charts-line-8: #256505;
+    --font-charts-line-9: #9ad36b;
+    --font-icons-clickable-active: #323232;
+    --font-icons-clickable-hover: #323232;
+    --font-icons-clickable-main: #777777;
+    --font-icons-nonclickable-main: #323232;
+    --font-icons-nonclickable-secondary: #777777;
+    --font-text-accent: #0068f4;
+    --font-text-body: #323232;
+    --font-text-danger: #ae191a;
+    --font-text-danger-tertiary: #d73332;
+    --font-text-disabled: #c3c4c5;
+    --font-text-label: #323232;
+    --font-text-link: #0068f4;
+    --font-text-link-active: #0156c9;
+    --font-text-news: #4338ca;
+    --font-text-quaternary: #989898;
+    --font-text-secondary: #494949;
+    --font-text-success: #2c7806;
+    --font-text-success-ultra: #4e9f0d;
+    --font-text-tertiary: #777777;
+    --font-text-title: #212121;
+    --font-text-warning: #cc6228;
+    --font-toggle-off-disabled: #ffffff;
+    --font-toggle-off-hover: #ffffff;
+    --font-toggle-off-main: #ffffff;
+    --font-toggle-on-disabled: #ffffff;
+    --font-toggle-on-hover: #ffffff;
+    --font-toggle-on-main: #ffffff;
+    --radius-md: 16px;
+    --radius-none: 0;
+    --radius-sm: 8px;
+    --radius-xs: 4px;
+    --size-button-md: 40px;
+    --size-button-sm: 36px;
+    --size-button-sx: 30px;
+    --size-button-xl: 56px;
+    --surface-bcg-accent: #0068f4;
+    --surface-bcg-custom: #ffffff;
+    --surface-bcg-danger-10: #ffe5e5;
+    --surface-bcg-danger-20: #fecaca;
+    --surface-bcg-form: #f2f2f2;
+    --surface-bcg-form-hover: #e6e6e6;
+    --surface-bcg-highlight: #cee3ff;
+    --surface-bcg-highlight-subtle: #eff6ff;
+    --surface-bcg-info: #e0e7ff;
+    --surface-bcg-light: #d2d2d2;
+    --surface-bcg-menu-active: #dcdcdc;
+    --surface-bcg-menu-hover: #e6e6e6;
+    --surface-bcg-menu-main: #ffffff;
+    --surface-bcg-mildwarning: #fef9c3;
+    --surface-bcg-primary: #ffffff;
+    --surface-bcg-secondary: #f2f2f2;
+    --surface-bcg-success: #e8f7e0;
+    --surface-bcg-tertiar-hover: #f2f2f2;
+    --surface-bcg-tertiary: #f7f7f7;
+    --surface-bcg-transparent: #32323226;
+    --surface-bcg-ultralight: #e6e6e6;
+    --surface-bcg-warning: #ffedd5;
+    --surface-button-call-active: #ffffff;
+    --surface-button-call-disabled: #212121;
+    --surface-button-call-enabled-hover: #d2d2d2;
+    --surface-button-call-error: #d73332;
+    --surface-button-call-error-hover: #bb2526;
+    --surface-button-call-hover: #494949;
+    --surface-button-call-main: #212121;
+    --surface-button-danger-primary-active: #ae191a;
+    --surface-button-danger-primary-disabled: #e6e6e6;
+    --surface-button-danger-primary-hover: #bb2526;
+    --surface-button-danger-primary-main: #d73332;
+    --surface-button-danger-tertiary-active: #bb2526;
+    --surface-button-danger-tertiary-disabled: #ffffff;
+    --surface-button-danger-tertiary-hover: #d73332;
+    --surface-button-danger-tertiary-main: #ffffff;
+    --surface-button-primary-active: #1e40af;
+    --surface-button-primary-disabled: #e6e6e6;
+    --surface-button-primary-hover: #0156c9;
+    --surface-button-primary-main: #0068f4;
+    --surface-button-secondary-active: #dcdcdc;
+    --surface-button-secondary-disabled: #ffffff;
+    --surface-button-secondary-hover: #e6e6e6;
+    --surface-button-secondary-main: #ffffff;
+    --surface-button-success-primary-active: #256505;
+    --surface-button-success-primary-disabled: #e6e6e6;
+    --surface-button-success-primary-hover: #2c7806;
+    --surface-button-success-primary-main: #2c8500;
+    --surface-button-success-tertiary-active: #2c7806;
+    --surface-button-success-tertiary-disabled: #ffffff;
+    --surface-button-success-tertiary-hover: #2c8500;
+    --surface-button-success-tertiary-main: #ffffff;
+    --surface-button-tertiary-active: #0156c9;
+    --surface-button-tertiary-disabled: #ffffff;
+    --surface-button-tertiary-hover: #0068f4;
+    --surface-button-tertiary-main: #ffffff;
+    --surface-button-text-active: #dcdcdc;
+    --surface-button-text-disabled: #ffffff;
+    --surface-button-text-hover: #e6e6e6;
+    --surface-button-text-main: #ffffff;
+    --surface-button-trans-active: #dcdcdc;
+    --surface-button-trans-active-ultra: #323232;
+    --surface-button-trans-disabled: #e6e6e6;
+    --surface-button-trans-hover: #e6e6e6;
+    --surface-button-trans-main: #ffffff99;
+    --surface-toggle-off-disabled: #d2d2d2;
+    --surface-toggle-off-hover: #494949;
+    --surface-toggle-off-main: #777777;
+    --surface-toggle-on-disabled: #4490f6;
+    --surface-toggle-on-hover: #0156c9;
+    --surface-toggle-on-main: #0068f4;
+}
+
+.dark {
+    --border-accent: #4490f6;
+    --border-button-danger: #d73332;
+    --border-button-disabled: #494949;
+    --border-button-focus: #71b4ff;
+    --border-button-form: #777777;
+    --border-button-secondary: #ffffff;
+    --border-button-success: #2c8500;
+    --border-button-tertiary: #777777;
+    --border-checkbo-disabled: #777777;
+    --border-checkbox-main: #c3c4c5;
+    --border-divider-primary: #494949;
+    --border-divider-secondary: #323232;
+    --border-divider-ultra: #777777;
+    --border-none: 0;
+    --border-primary: 1px;
+    --border-secondary: 2px;
+    --font-button-accent: #4490f6;
+    --font-button-call-active: #212121;
+    --font-button-call-disabled: #989898;
+    --font-button-call-error: #ffffff;
+    --font-button-call-hover: #ffffff;
+    --font-button-call-main: #ffffff;
+    --font-button-danger-primary: #ffffff;
+    --font-button-danger-tertiary: #d73332;
+    --font-button-danger-tertiary-hover: #ffffff;
+    --font-button-primary: #ffffff;
+    --font-button-secondary: #ffffff;
+    --font-button-success-primary: #ffffff;
+    --font-button-success-tertiary: #2c8500;
+    --font-button-success-tertiary-hover: #ffffff;
+    --font-button-tertiary: #ffffff;
+    --font-button-tertiary-hover: #ffffff;
+    --font-button-text: #4490f6;
+    --font-button-trans: #ffffff;
+    --font-button-trans-ultra: #323232;
+    --font-charts-line-1: #ffffff;
+    --font-charts-line-10: #ffffff;
+    --font-charts-line-11: #ffffff;
+    --font-charts-line-12: #ffffff;
+    --font-charts-line-13: #ffffff;
+    --font-charts-line-14: #ffffff;
+    --font-charts-line-15: #ffffff;
+    --font-charts-line-2: #ffffff;
+    --font-charts-line-3: #ffffff;
+    --font-charts-line-4: #ffffff;
+    --font-charts-line-5: #ffffff;
+    --font-charts-line-6: #ffffff;
+    --font-charts-line-7: #ffffff;
+    --font-charts-line-8: #ffffff;
+    --font-charts-line-9: #ffffff;
+    --font-icons-clickable-active: #ffffff;
+    --font-icons-clickable-hover: #ffffff;
+    --font-icons-clickable-main: #c3c4c5;
+    --font-icons-nonclickable-main: #ffffff;
+    --font-icons-nonclickable-secondary: #989898;
+    --font-text-accent: #4490f6;
+    --font-text-body: #f7f7f7;
+    --font-text-danger: #d73332;
+    --font-text-danger-tertiary: #ae191a;
+    --font-text-disabled: #777777;
+    --font-text-label: #f7f7f7;
+    --font-text-link: #4490f6;
+    --font-text-link-active: #0068f4;
+    --font-text-news: #4f46e5;
+    --font-text-quaternary: #989898;
+    --font-text-secondary: #dcdcdc;
+    --font-text-success: #2c8500;
+    --font-text-success-ultra: #4e9f0d;
+    --font-text-tertiary: #d2d2d2;
+    --font-text-title: #ffffff;
+    --font-text-warning: #cc6228;
+    --font-toggle-off-disabled: #ffffff;
+    --font-toggle-off-hover: #ffffff;
+    --font-toggle-off-main: #ffffff;
+    --font-toggle-on-disabled: #ffffff;
+    --font-toggle-on-hover: #ffffff;
+    --font-toggle-on-main: #ffffff;
+    --radius-md: 0;
+    --radius-none: 0;
+    --radius-sm: 0;
+    --radius-xs: 0;
+    --size-button-md: 40px;
+    --size-button-sm: 36px;
+    --size-button-sx: 30px;
+    --size-button-xl: 56px;
+    --surface-bcg-accent: #4490f6;
+    --surface-bcg-custom: #212121;
+    --surface-bcg-danger-10: #ffe5e5;
+    --surface-bcg-danger-20: #fecaca;
+    --surface-bcg-form: #494949;
+    --surface-bcg-form-hover: #494949;
+    --surface-bcg-highlight: #cee3ff;
+    --surface-bcg-highlight-subtle: #eff6ff;
+    --surface-bcg-info: #e0e7ff;
+    --surface-bcg-light: #989898;
+    --surface-bcg-menu-active: #494949;
+    --surface-bcg-menu-hover: #494949;
+    --surface-bcg-menu-main: #323232;
+    --surface-bcg-mildwarning: #fef9c3;
+    --surface-bcg-primary: #212121;
+    --surface-bcg-secondary: #323232;
+    --surface-bcg-success: #e8f7e0;
+    --surface-bcg-tertiar-hover: #494949;
+    --surface-bcg-tertiary: #323232;
+    --surface-bcg-transparent: #ffffff99;
+    --surface-bcg-ultralight: #494949;
+    --surface-bcg-warning: #ffedd5;
+    --surface-button-call-active: #ffffff;
+    --surface-button-call-disabled: #212121;
+    --surface-button-call-enabled-hover: #d2d2d2;
+    --surface-button-call-error: #d73332;
+    --surface-button-call-error-hover: #bb2526;
+    --surface-button-call-hover: #494949;
+    --surface-button-call-main: #212121;
+    --surface-button-danger-primary-active: #bb2526;
+    --surface-button-danger-primary-disabled: #323232;
+    --surface-button-danger-primary-hover: #d73332;
+    --surface-button-danger-primary-main: #212121;
+    --surface-button-danger-tertiary-active: #bb2526;
+    --surface-button-danger-tertiary-disabled: #323232;
+    --surface-button-danger-tertiary-hover: #d73332;
+    --surface-button-danger-tertiary-main: #212121;
+    --surface-button-primary-active: #0068f4;
+    --surface-button-primary-disabled: #323232;
+    --surface-button-primary-hover: #1c76f0;
+    --surface-button-primary-main: #0068f4;
+    --surface-button-secondary-active: #777777;
+    --surface-button-secondary-disabled: #212121;
+    --surface-button-secondary-hover: #494949;
+    --surface-button-secondary-main: #212121;
+    --surface-button-success-primary-active: #256505;
+    --surface-button-success-primary-disabled: #323232;
+    --surface-button-success-primary-hover: #2c7806;
+    --surface-button-success-primary-main: #2c8500;
+    --surface-button-success-tertiary-active: #2c7806;
+    --surface-button-success-tertiary-disabled: #323232;
+    --surface-button-success-tertiary-hover: #2c8500;
+    --surface-button-success-tertiary-main: #212121;
+    --surface-button-tertiary-active: #0068f4;
+    --surface-button-tertiary-disabled: #212121;
+    --surface-button-tertiary-hover: #1c76f0;
+    --surface-button-tertiary-main: #212121;
+    --surface-button-text-active: #494949;
+    --surface-button-text-disabled: #323232;
+    --surface-button-text-hover: #323232;
+    --surface-button-text-main: #212121;
+    --surface-button-trans-active: #494949;
+    --surface-button-trans-active-ultra: #ffffff;
+    --surface-button-trans-disabled: #323232;
+    --surface-button-trans-hover: #494949;
+    --surface-button-trans-main: #32323226;
+    --surface-toggle-off-disabled: #d2d2d2;
+    --surface-toggle-off-hover: #494949;
+    --surface-toggle-off-main: #0068f4;
+    --surface-toggle-on-disabled: #4490f6;
+    --surface-toggle-on-hover: #0156c9;
+    --surface-toggle-on-main: #0068f4;
+}