@pexip/components 16.15.1 → 16.17.0

package/design-tokens/generated/icons/video-systems-16.svg

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M10.947 3.061a2.763 2.763 0 1 1-5.527 0 2.763 2.763 0 0 1 5.527 0Zm-1.274 0a1.488 1.488 0 1 1-2.976 0 1.488 1.488 0 0 1 2.976 0ZM3.026 2.51h-.11A1.916 1.916 0 0 0 1 4.426v6.485c0 1.058.858 1.915 1.916 1.915h10.168A1.916 1.916 0 0 0 15 10.91V4.425a1.916 1.916 0 0 0-1.916-1.915h-.075a.557.557 0 0 0-.035-.001h-.368a.553.553 0 0 0 0 1.105h.17v.001h.308a.81.81 0 0 1 .81.81v6.485a.81.81 0 0 1-.81.81H2.916a.81.81 0 0 1-.81-.81V4.425a.81.81 0 0 1 .81-.81h.31v-.001h.537a.553.553 0 0 0 0-1.105h-.737Zm2.948 11.053h4.052l.535 1.604a.46.46 0 0 1-.437.607H5.876a.46.46 0 0 1-.437-.607l.535-1.604Zm2.763-10.5a.553.553 0 1 1-1.105 0 .553.553 0 0 1 1.105 0Zm-4.62 1.657c.349 0 .66.207.855.497A3.865 3.865 0 0 0 8.185 6.93c1.39 0 2.609-.733 3.29-1.834a.76.76 0 0 1 .636-.377.68.68 0 0 1 .679.68v3.815a1.4 1.4 0 0 1-1.4 1.4H4.61a1.4 1.4 0 0 1-1.4-1.4v-3.59c0-.5.406-.905.906-.905Z"
+        d="M10.947 3.061a2.763 2.763 0 1 1-5.527 0 2.763 2.763 0 0 1 5.527 0m-1.274 0a1.488 1.488 0 1 1-2.976 0 1.488 1.488 0 0 1 2.976 0M3.026 2.51h-.11A1.916 1.916 0 0 0 1 4.426v6.485c0 1.058.858 1.915 1.916 1.915h10.168A1.916 1.916 0 0 0 15 10.91V4.425a1.916 1.916 0 0 0-1.916-1.915h-.075l-.035-.001h-.368a.553.553 0 0 0 0 1.105h.17v.001h.308a.81.81 0 0 1 .81.81v6.485a.81.81 0 0 1-.81.81H2.916a.81.81 0 0 1-.81-.81V4.425a.81.81 0 0 1 .81-.81h.31v-.001h.537a.553.553 0 0 0 0-1.105zm2.948 11.053h4.052l.535 1.604a.46.46 0 0 1-.437.607H5.876a.46.46 0 0 1-.437-.607zm2.763-10.5a.553.553 0 1 1-1.105 0 .553.553 0 0 1 1.105 0m-4.62 1.657c.349 0 .66.207.855.497A3.87 3.87 0 0 0 8.185 6.93c1.39 0 2.609-.733 3.29-1.834a.76.76 0 0 1 .636-.377.68.68 0 0 1 .679.68v3.815a1.4 1.4 0 0 1-1.4 1.4H4.61a1.4 1.4 0 0 1-1.4-1.4v-3.59c0-.5.406-.905.906-.905"
         clip-rule="evenodd"
     />
 </svg>

package/design-tokens/generated/icons/video-systems-24.json

@@ -2,6 +2,6 @@
   "iconName": "video-systems-24",
   "name": "24px-video-systems",
   "pascalName": "IconVideoSystems_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/10406cee-efe7-4cb6-ba17-c4b5bf9de4af",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/28280686-4378-45e6-ac56-1a8296567706",
   "graphic": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M13.0529 4.94746C13.0529 5.38348 12.6994 5.73695 12.2634 5.73695C11.8273 5.73695 11.4739 5.38348 11.4739 4.94746C11.4739 4.51143 11.8273 4.15796 12.2634 4.15796C12.6994 4.15796 13.0529 4.51143 13.0529 4.94746Z\" fill=\"white\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2097 4.94748C16.2097 7.12762 14.4423 8.89496 12.2622 8.89496C10.082 8.89496 8.3147 7.12762 8.3147 4.94748C8.3147 2.76735 10.082 1 12.2622 1C14.4423 1 16.2097 2.76735 16.2097 4.94748ZM14.3898 4.94747C14.3898 6.12139 13.4382 7.07303 12.2642 7.07303C11.0903 7.07303 10.1387 6.12139 10.1387 4.94747C10.1387 3.77355 11.0903 2.8219 12.2642 2.8219C13.4382 2.8219 14.3898 3.77355 14.3898 4.94747Z\" fill=\"white\"/>\n<path d=\"M4.89399 4.15796C4.88003 4.15796 4.86616 4.15832 4.85238 4.15904H4.73684C3.22526 4.15904 2 5.3843 2 6.89588V16.159C2 17.6706 3.22526 18.8959 4.73684 18.8959H19.2632C20.7747 18.8959 22 17.6706 22 16.159V6.89588C22 5.3843 20.7747 4.15904 19.2632 4.15904H19.1472C19.1334 4.15832 19.1196 4.15796 19.1056 4.15796H18.5793C18.1433 4.15796 17.7898 4.51143 17.7898 4.94746C17.7898 5.38348 18.1433 5.73695 18.5793 5.73695H18.8226L18.8225 5.73798H19.2632C19.9021 5.73798 20.4211 6.25588 20.4211 6.89588V16.159C20.4211 16.799 19.9032 17.3169 19.2632 17.3169H4.73684C4.09789 17.3169 3.57895 16.799 3.57895 16.159V6.89588C3.57895 6.25693 4.09684 5.73798 4.73684 5.73798H5.17798L5.17791 5.73695H5.94665C6.38268 5.73695 6.73615 5.38348 6.73615 4.94746C6.73615 4.51143 6.38268 4.15796 5.94665 4.15796H4.89399Z\" fill=\"white\"/>\n<path d=\"M9.10526 19.9485H14.8947L15.6589 22.2401C15.8011 22.6664 15.4842 23.1064 15.0347 23.1064H8.96526C8.51684 23.1064 8.19895 22.6664 8.34105 22.2401L9.10526 19.9485Z\" fill=\"white\"/>\n<path d=\"M6.4519 7.31592C6.95133 7.31592 7.39533 7.61135 7.67387 8.02589C8.66601 9.50241 10.3517 10.474 12.2643 10.474C14.25 10.474 15.9912 9.42665 16.9655 7.85424C17.1628 7.53577 17.4977 7.31592 17.8723 7.31592C18.4083 7.31592 18.8428 7.75041 18.8428 8.28639V13.7372C18.8428 14.8418 17.9474 15.7372 16.8428 15.7372H7.1582C6.05363 15.7372 5.1582 14.8418 5.1582 13.7372V8.60961C5.1582 7.89512 5.73741 7.31592 6.4519 7.31592Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/video-systems-24.svg

@@ -9,20 +9,20 @@
 >
     <path
         fill="currentColor"
-        d="M13.053 4.947a.79.79 0 1 1-1.58 0 .79.79 0 0 1 1.58 0Z"
+        d="M13.053 4.947a.79.79 0 1 1-1.58 0 .79.79 0 0 1 1.58 0"
     />
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M16.21 4.947a3.948 3.948 0 1 1-7.895 0 3.948 3.948 0 0 1 7.895 0Zm-1.82 0a2.126 2.126 0 1 1-4.251 0 2.126 2.126 0 0 1 4.25 0Z"
+        d="M16.21 4.947a3.948 3.948 0 1 1-7.895 0 3.948 3.948 0 0 1 7.895 0m-1.82 0a2.126 2.126 0 1 1-4.251 0 2.126 2.126 0 0 1 4.25 0"
         clip-rule="evenodd"
     />
     <path
         fill="currentColor"
-        d="m4.894 4.158-.042.001h-.115A2.737 2.737 0 0 0 2 6.896v9.263a2.737 2.737 0 0 0 2.737 2.737h14.526A2.737 2.737 0 0 0 22 16.159V6.896a2.737 2.737 0 0 0-2.737-2.737h-.116a.796.796 0 0 0-.041-.001h-.527a.79.79 0 0 0 0 1.579h.244v.001h.44c.64 0 1.158.518 1.158 1.158v9.263c0 .64-.518 1.158-1.158 1.158H4.737a1.158 1.158 0 0 1-1.158-1.158V6.896c0-.64.518-1.158 1.158-1.158h.441v-.001h.769a.79.79 0 1 0 0-1.579H4.894ZM9.105 19.948h5.79l.764 2.292a.658.658 0 0 1-.624.866h-6.07a.658.658 0 0 1-.624-.866l.764-2.291Z"
+        d="m4.894 4.158-.042.001h-.115A2.737 2.737 0 0 0 2 6.896v9.263a2.737 2.737 0 0 0 2.737 2.737h14.526A2.737 2.737 0 0 0 22 16.159V6.896a2.737 2.737 0 0 0-2.737-2.737h-.116l-.041-.001h-.527a.79.79 0 0 0 0 1.579h.244v.001h.44c.64 0 1.158.518 1.158 1.158v9.263c0 .64-.518 1.158-1.158 1.158H4.737a1.16 1.16 0 0 1-1.158-1.158V6.896c0-.64.518-1.158 1.158-1.158h.441v-.001h.769a.79.79 0 1 0 0-1.579zM9.105 19.949h5.79l.764 2.291a.658.658 0 0 1-.624.866h-6.07a.658.658 0 0 1-.624-.866z"
     />
     <path
         fill="currentColor"
-        d="M6.452 7.316c.5 0 .943.295 1.222.71a5.521 5.521 0 0 0 4.59 2.448 5.523 5.523 0 0 0 4.701-2.62c.198-.318.533-.538.907-.538a.97.97 0 0 1 .97.97v5.451a2 2 0 0 1-2 2H7.159a2 2 0 0 1-2-2V8.61c0-.715.58-1.294 1.294-1.294Z"
+        d="M6.452 7.316c.5 0 .943.295 1.222.71a5.52 5.52 0 0 0 4.59 2.448 5.52 5.52 0 0 0 4.701-2.62c.198-.318.533-.538.907-.538a.97.97 0 0 1 .97.97v5.451a2 2 0 0 1-2 2H7.159a2 2 0 0 1-2-2V8.61c0-.715.58-1.294 1.294-1.294"
     />
 </svg>

package/design-tokens/generated/icons/warning-16.json

@@ -2,6 +2,6 @@
   "iconName": "warning-16",
   "name": "16px-warning",
   "pascalName": "IconWarning_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2b3b25ec-9647-4efa-bdb0-4608ec639704",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/2a75a64b-1645-4628-b8a1-4ad709bd4535",
   "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.278 12.8667C9.278 13.4926 8.77059 14 8.14467 14L8.13333 14C7.50741 14 7 13.4926 7 12.8667C7 12.2407 7.50741 11.7333 8.13333 11.7333L8.14467 11.7333C8.77059 11.7333 9.278 12.2407 9.278 12.8667ZM8.14467 9.46667C7.51874 9.46667 7.01133 8.95926 7.01133 8.33333V3.13333C7.01133 2.50741 7.51874 2 8.14467 2C8.77059 2 9.278 2.50741 9.278 3.13333V8.33333C9.278 8.95926 8.77059 9.46667 8.14467 9.46667Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/warning-16.svg

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M9.278 12.867c0 .626-.507 1.133-1.133 1.133h-.012a1.133 1.133 0 1 1 0-2.267h.012c.626 0 1.133.508 1.133 1.134Zm-1.133-3.4A1.133 1.133 0 0 1 7.01 8.333v-5.2a1.133 1.133 0 0 1 2.267 0v5.2c0 .626-.507 1.134-1.133 1.134Z"
+        d="M9.278 12.867c0 .626-.507 1.133-1.133 1.133h-.012a1.133 1.133 0 1 1 0-2.267h.012c.626 0 1.133.508 1.133 1.134m-1.133-3.4A1.133 1.133 0 0 1 7.01 8.333v-5.2a1.133 1.133 0 0 1 2.267 0v5.2c0 .626-.507 1.134-1.133 1.134"
         clip-rule="evenodd"
     />
 </svg>

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

@@ -2,6 +2,6 @@
   "iconName": "warning-24",
   "name": "24px-warning",
   "pascalName": "IconWarning_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4cd6dd4b-5f99-4dcd-bc63-43c5a303931b",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9325b98b-79d1-4557-8e0b-d060fda2917a",
   "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=\"M13.417 19.3C13.417 20.2389 12.6559 21 11.717 21L11.7 21C10.7611 21 10 20.2389 10 19.3C10 18.3611 10.7611 17.6 11.7 17.6L11.717 17.6C12.6559 17.6 13.417 18.3611 13.417 19.3ZM11.717 14.2C10.7781 14.2 10.017 13.4389 10.017 12.5V4.7C10.017 3.76112 10.7781 3 11.717 3C12.6559 3 13.417 3.76112 13.417 4.7V12.5C13.417 13.4389 12.6559 14.2 11.717 14.2Z\" fill=\"white\"/>\n</svg>\n"
 }

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

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M13.417 19.3a1.7 1.7 0 0 1-1.7 1.7H11.7a1.7 1.7 0 1 1 0-3.4h.017a1.7 1.7 0 0 1 1.7 1.7Zm-1.7-5.1a1.7 1.7 0 0 1-1.7-1.7V4.7a1.7 1.7 0 1 1 3.4 0v7.8a1.7 1.7 0 0 1-1.7 1.7Z"
+        d="M13.417 19.3a1.7 1.7 0 0 1-1.7 1.7H11.7a1.7 1.7 0 1 1 0-3.4h.017a1.7 1.7 0 0 1 1.7 1.7m-1.7-5.1a1.7 1.7 0 0 1-1.7-1.7V4.7a1.7 1.7 0 1 1 3.4 0v7.8a1.7 1.7 0 0 1-1.7 1.7"
         clip-rule="evenodd"
     />
 </svg>

package/design-tokens/generated/icons/warning-round-16.json

@@ -2,6 +2,6 @@
   "iconName": "warning-round-16",
   "name": "16px-warning-round",
   "pascalName": "IconWarningRound_16",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4a3db5ab-c4af-422d-8cbd-fe2a43522112",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/ddff33cf-bb84-47db-85bf-29078b34d831",
   "graphic": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 0.999999 11.866 1 8ZM8.7 10.8C8.7 11.1866 8.3866 11.5 8 11.5L7.993 11.5C7.6064 11.5 7.293 11.1866 7.293 10.8C7.293 10.4134 7.6064 10.1 7.993 10.1L8 10.1C8.3866 10.1 8.7 10.4134 8.7 10.8ZM8 8.7C7.6134 8.7 7.3 8.3866 7.3 8L7.3 5.2C7.3 4.8134 7.6134 4.5 8 4.5C8.3866 4.5 8.7 4.8134 8.7 5.2L8.7 8C8.7 8.3866 8.3866 8.7 8 8.7Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/warning-round-16.svg

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.7 2.8a.7.7 0 0 1-.7.7h-.007a.7.7 0 1 1 0-1.4H8a.7.7 0 0 1 .7.7ZM8 8.7a.7.7 0 0 1-.7-.7V5.2a.7.7 0 1 1 1.4 0V8a.7.7 0 0 1-.7.7Z"
+        d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m7.7 2.8a.7.7 0 0 1-.7.7h-.007a.7.7 0 1 1 0-1.4H8a.7.7 0 0 1 .7.7M8 8.7a.7.7 0 0 1-.7-.7V5.2a.7.7 0 1 1 1.4 0V8a.7.7 0 0 1-.7.7"
         clip-rule="evenodd"
     />
 </svg>

package/design-tokens/generated/icons/warning-round-24.json

@@ -2,6 +2,6 @@
   "iconName": "warning-round-24",
   "name": "24px-warning-round",
   "pascalName": "IconWarningRound_24",
-  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f3ba52ba-8701-403b-a0f8-215cdf49c997",
+  "resource": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/e8f56973-639f-4662-91fe-1fa81e75e4f0",
   "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=\"M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM13 16C13 16.5523 12.5523 17 12 17L11.99 17C11.4377 17 10.99 16.5523 10.99 16C10.99 15.4477 11.4377 15 11.99 15L12 15C12.5523 15 13 15.4477 13 16ZM12 13C11.4477 13 11 12.5523 11 12V8C11 7.44771 11.4477 7 12 7C12.5523 7 13 7.44771 13 8V12C13 12.5523 12.5523 13 12 13Z\" fill=\"white\"/>\n</svg>\n"
 }

package/design-tokens/generated/icons/warning-round-24.svg

@@ -10,7 +10,7 @@
     <path
         fill="currentColor"
         fill-rule="evenodd"
-        d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11 4a1 1 0 0 1-1 1h-.01a1 1 0 1 1 0-2H12a1 1 0 0 1 1 1Zm-1-3a1 1 0 0 1-1-1V8a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1Z"
+        d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12m11 4a1 1 0 0 1-1 1h-.01a1 1 0 1 1 0-2H12a1 1 0 0 1 1 1m-1-3a1 1 0 0 1-1-1V8a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1"
         clip-rule="evenodd"
     />
 </svg>

package/design-tokens/mixins/_focus.scss

@@ -1,6 +1,27 @@
 @use 'sass:map';
 @import '../variables.scss';
 
+@mixin box-shadow-focus-style($is-inset: true, $color-scheme: 'dark') {
+    @include create-token(
+        dark-box-shadow-focus,
+        rgba(color-hex('green-40'), 0.3)
+    );
+    @include create-token(dark-box-shadow-focus-border, color('green-100'));
+
+    @include create-token(light-box-shadow-focus, color('green-40'));
+    @include create-token(light-box-shadow-focus-border, color('green-100'));
+
+    @if $is-inset {
+        box-shadow:
+            0 0 0 1px inset get-token(#{$color-scheme}-box-shadow-focus-border),
+            0 0 0 3px get-token(#{$color-scheme}-box-shadow-focus) !important;
+    } @else {
+        box-shadow:
+            0 0 0 1px get-token(#{$color-scheme}-box-shadow-focus-border),
+            0 0 0 4px get-token(#{$color-scheme}-box-shadow-focus) !important;
+    }
+}
+
 @mixin box-shadow-focus($paramMap: ()) {
     $defaults: (
         color-scheme: 'dark',
@@ -12,15 +33,6 @@
     $is-inset: map.get($opts, 'is-inset');
     $additional-selector: map.get($opts, 'additional-selector');
 
-    @include create-token(
-        dark-box-shadow-focus,
-        rgba(color-hex('green-40'), 0.3)
-    );
-    @include create-token(dark-box-shadow-focus-border, color('green-100'));
-
-    @include create-token(light-box-shadow-focus, color('green-40'));
-    @include create-token(light-box-shadow-focus-border, color('green-100'));
-
     &,
     &:focus {
         transition: box-shadow 0.3s;
@@ -29,27 +41,6 @@
 
     &[data-focus-visible-added],
     #{$additional-selector} {
-        @if $is-inset {
-            box-shadow:
-                0
-                    0
-                    0
-                    1px
-                    inset
-                    get-token(#{$color-scheme}-box-shadow-focus-border),
-                0
-                    0
-                    0
-                    3px
-                    get-token(#{$color-scheme}-box-shadow-focus) !important;
-        } @else {
-            box-shadow:
-                0 0 0 1px get-token(#{$color-scheme}-box-shadow-focus-border),
-                0
-                    0
-                    0
-                    4px
-                    get-token(#{$color-scheme}-box-shadow-focus) !important;
-        }
+        @include box-shadow-focus-style($is-inset, $color-scheme);
     }
 }

package/design-tokens/mixins/media-queries.scss

@@ -141,6 +141,12 @@
     }
 }
 
+@mixin three-sixty-down {
+    @media (max-width: 359px) {
+        @content;
+    }
+}
+
 /*
 * media-breakpoint-between
 *