@kth/style 0.1.0 → 0.2.0

package/scss/components/menu-panel.scss

@@ -0,0 +1,32 @@
+@use "../tokens/spacing";
+@use "../tokens/typography";
+@use "../tokens/icons";
+@use "../utils/mixins";
+
+@layer kth-style {
+  .kth-menu-panel {
+    top: 100%;
+    width: 100%;
+    border: none;
+    background: var(--color-background);
+    padding: 0;
+    padding-block-end: spacing.$space-48;
+
+    &__container {
+      @include mixins.container;
+    }
+  }
+
+  .kth-menu-panel--modal {
+    background-color: var(--color-background);
+    position: fixed;
+    right: 0;
+    left: auto;
+    top: 0;
+    max-width: 32rem;
+    max-height: 100dvh;
+    width: 100dvw;
+    height: 100dvh;
+    border: 0;
+  }
+}

package/scss/components/search.scss

@@ -1,6 +1,8 @@
+@use "sass:math";
 @use "../tokens/spacing.scss";
 @use "../tokens/icons.scss";
-$secondary-border-width: 1rem/16;
+
+$secondary-border-width: math.div(1rem, 16);
 
 @layer kth-style {
   .kth-search {

package/scss/components/visually-hidden.scss

@@ -0,0 +1,11 @@
+@layer kth-style {
+  .kth-visually-hidden {
+    position: absolute;
+    top: auto;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    width: 1px;
+    height: 1px;
+    white-space: nowrap;
+  }
+}

package/scss/tokens/colors.scss

@@ -13,8 +13,6 @@ $color-blue-sky: #6298d2;
 $color-blue-marine: #08004f;
 $color-blue-digital: #221dd9;
 
-$color-red: #d4351c;
-
 // This color is specially made for links
 // 4.51:1 with `$color-blue-light` (requires 4.50)
 // 5.21:1 with `$color-white`      (requires 4.50)
@@ -28,7 +26,6 @@ $color-blue-special: #036eb8;
   --color-on-primary: #{$color-white};
   --color-secondary: #{$color-black};
   --color-tertiary: #{$color-blue-special};
-  --color-error: #{$color-red};
   // ... --hover-overlay: ...
 }
 

package/scss/tokens/icons.scss

@@ -1,10 +1,11 @@
 $icon-url-caret-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99997 12.782L5.28845 8.07053L6.06247 7.29651L9.99997 11.234L13.9375 7.29651L14.7115 8.07053L9.99997 12.782Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
 $icon-url-globe: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5001 17.5833C9.45625 17.5833 8.47362 17.3857 7.55217 16.9904C6.63069 16.5951 5.8254 16.0529 5.13629 15.3638C4.44719 14.6747 3.905 13.8694 3.50971 12.9479C3.1144 12.0264 2.91675 11.0438 2.91675 10C2.91675 8.94765 3.1144 7.96288 3.50971 7.04569C3.905 6.12849 4.44719 5.32534 5.13629 4.63623C5.8254 3.94713 6.63069 3.40494 7.55217 3.00965C8.47362 2.61434 9.45625 2.41669 10.5001 2.41669C11.5524 2.41669 12.5372 2.61434 13.4544 3.00965C14.3716 3.40494 15.1747 3.94713 15.8638 4.63623C16.5529 5.32534 17.0951 6.12849 17.4904 7.04569C17.8857 7.96288 18.0834 8.94765 18.0834 10C18.0834 11.0438 17.8857 12.0264 17.4904 12.9479C17.0951 13.8694 16.5529 14.6747 15.8638 15.3638C15.1747 16.0529 14.3716 16.5951 13.4544 16.9904C12.5372 17.3857 11.5524 17.5833 10.5001 17.5833ZM10.5001 16.4615C10.8003 16.1613 11.0818 15.6723 11.3446 14.9944C11.6074 14.3165 11.8094 13.5609 11.9504 12.7275H9.04973C9.20144 13.5823 9.40603 14.3485 9.66352 15.0264C9.92099 15.7043 10.1998 16.1827 10.5001 16.4615ZM9.15714 16.3574C8.89326 15.9407 8.655 15.4161 8.44239 14.7836C8.22978 14.1512 8.06685 13.4658 7.9536 12.7275H4.60581C5.04599 13.6902 5.66753 14.4901 6.47041 15.1274C7.27332 15.7647 8.16889 16.1747 9.15714 16.3574ZM11.843 16.3574C12.8312 16.1747 13.7268 15.7647 14.5297 15.1274C15.3326 14.4901 15.9541 13.6902 16.3943 12.7275H13.0465C12.9066 13.4711 12.7303 14.1592 12.5177 14.7917C12.3051 15.4242 12.0802 15.9461 11.843 16.3574ZM4.22762 11.6443H7.84623C7.80777 11.3483 7.78373 11.0585 7.77412 10.7749C7.76451 10.4912 7.75971 10.219 7.75971 9.95833C7.75971 9.69765 7.76451 9.43242 7.77412 9.16265C7.78373 8.89288 7.80777 8.62392 7.84623 8.35575H4.22762C4.1475 8.62499 4.08954 8.89849 4.05375 9.17627C4.01796 9.45405 4.00006 9.72862 4.00006 10C4.00006 10.2714 4.01796 10.546 4.05375 10.8237C4.08954 11.1015 4.1475 11.375 4.22762 11.6443ZM8.95037 11.6443H12.0497C12.0882 11.3344 12.1122 11.0473 12.1219 10.7829C12.1315 10.5184 12.1363 10.2575 12.1363 10C12.1363 9.74251 12.1315 9.47809 12.1219 9.20673C12.1122 8.93535 12.0882 8.65169 12.0497 8.35575H8.95037C8.91191 8.65169 8.88787 8.93535 8.87825 9.20673C8.86864 9.47809 8.86383 9.74251 8.86383 10C8.86383 10.2575 8.86864 10.5219 8.87825 10.7933C8.88787 11.0646 8.91191 11.3483 8.95037 11.6443ZM13.1539 11.6443H16.7725C16.8526 11.375 16.9106 11.1015 16.9464 10.8237C16.9822 10.546 17.0001 10.2714 17.0001 10C17.0001 9.72862 16.9822 9.45058 16.9464 9.16585C16.9106 8.88113 16.8526 8.6111 16.7725 8.35575H13.1539C13.1924 8.65169 13.2164 8.94149 13.226 9.22515C13.2356 9.50881 13.2404 9.78099 13.2404 10.0417C13.2404 10.3023 13.2356 10.5676 13.226 10.8374C13.2164 11.1071 13.1924 11.3761 13.1539 11.6443ZM13.0465 7.27246H16.3943C15.9488 6.29915 15.3313 5.49919 14.5417 4.87258C13.7522 4.24599 12.8526 3.83333 11.843 3.6346C12.1069 4.07798 12.3424 4.6119 12.5497 5.23638C12.757 5.86085 12.9226 6.53954 13.0465 7.27246ZM9.04973 7.27246H11.9504C11.7987 6.4231 11.5901 5.65279 11.3246 4.96154C11.0591 4.27031 10.7843 3.79594 10.5001 3.53846C10.2159 3.79594 9.94103 4.27031 9.67554 4.96154C9.41004 5.65279 9.20144 6.4231 9.04973 7.27246ZM4.60581 7.27246H7.9536C8.07753 6.53954 8.24314 5.86085 8.45041 5.23638C8.65768 4.6119 8.89326 4.07798 9.15714 3.6346C8.14219 3.83333 7.24127 4.24733 6.45439 4.8766C5.66753 5.50588 5.05134 6.3045 4.60581 7.27246Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
 $icon-url-search: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M16.3895 16.6474L11.4264 11.6843C11.0097 12.0005 10.5528 12.2454 10.0557 12.419C9.5586 12.5927 9.04565 12.6795 8.51686 12.6795C7.21707 12.6795 6.11209 12.2245 5.20192 11.3146C4.29175 10.4047 3.83667 9.30024 3.83667 8.00131C3.83667 6.70237 4.29163 5.5975 5.20155 4.68671C6.11146 3.77593 7.21589 3.32054 8.51484 3.32054C9.81377 3.32054 10.9186 3.77563 11.8294 4.68579C12.7402 5.59596 13.1956 6.70094 13.1956 8.00073C13.1956 8.54555 13.1061 9.06651 12.9272 9.56362C12.7482 10.0607 12.506 10.5096 12.2004 10.9102L17.1635 15.8734L16.3895 16.6474ZM8.51613 11.5962C9.52041 11.5962 10.3708 11.2479 11.0674 10.5513C11.764 9.85471 12.1123 9.00428 12.1123 8C12.1123 6.99572 11.764 6.14529 11.0674 5.44871C10.3708 4.75213 9.52041 4.40383 8.51613 4.40383C7.51185 4.40383 6.66142 4.75213 5.96484 5.44871C5.26827 6.14529 4.91998 6.99572 4.91998 8C4.91998 9.00428 5.26827 9.85471 5.96484 10.5513C6.66142 11.2479 7.51185 11.5962 8.51613 11.5962Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E%0A");
-$icon-arrow-right-300: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2740_45' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2740_45)'%3E%3Cpath d='M13.5017 10.5417H4.41675V9.45842H13.5017L9.23406 5.19077L10.0001 4.41675L15.5834 10.0001L10.0001 15.5834L9.23406 14.8094L13.5017 10.5417Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
-$icon-arrow-right-500: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2676_13984' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2676_13984)'%3E%3Cpath d='M12.851 10.8645H3.83057V9.13538H12.851L8.77307 5.05748L9.99996 3.83057L16.1694 9.99996L9.99996 16.1694L8.77307 14.9424L12.851 10.8645Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
-$icon-check: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2742_210' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect x='0.764648' y='0.942017' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2742_210)'%3E%3Cpath d='M10.3146 19.1333L4.42334 13.242L6.04561 11.6197L10.3146 15.8887L19.4837 6.71973L21.1059 8.342L10.3146 19.1333Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
-$icon-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.06247 14.7115L5.28845 13.9375L9.22595 9.99997L5.28845 6.06247L6.06247 5.28845L9.99997 9.22595L13.9375 5.28845L14.7115 6.06247L10.774 9.99997L14.7115 13.9375L13.9375 14.7115L9.99997 10.774L6.06247 14.7115Z' fill='currentColor' /%3E%3C/svg%3E%0A");
+$icon-url-arrow-right-300: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2740_45' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2740_45)'%3E%3Cpath d='M13.5017 10.5417H4.41675V9.45842H13.5017L9.23406 5.19077L10.0001 4.41675L15.5834 10.0001L10.0001 15.5834L9.23406 14.8094L13.5017 10.5417Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
+$icon-url-arrow-right-500: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2676_13984' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2676_13984)'%3E%3Cpath d='M12.851 10.8645H3.83057V9.13538H12.851L8.77307 5.05748L9.99996 3.83057L16.1694 9.99996L9.99996 16.1694L8.77307 14.9424L12.851 10.8645Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A");
+$icon-url-check: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2742_210' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect x='0.764648' y='0.942017' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2742_210)'%3E%3Cpath d='M10.3146 19.1333L4.42334 13.242L6.04561 11.6197L10.3146 15.8887L19.4837 6.71973L21.1059 8.342L10.3146 19.1333Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
+$icon-url-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.06247 14.7115L5.28845 13.9375L9.22595 9.99997L5.28845 6.06247L6.06247 5.28845L9.99997 9.22595L13.9375 5.28845L14.7115 6.06247L10.774 9.99997L14.7115 13.9375L13.9375 14.7115L9.99997 10.774L6.06247 14.7115Z' fill='currentColor' /%3E%3C/svg%3E%0A");
+$icon-url-info: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_2831_14099' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='21' height='21'%3E%3Crect x='0.506958' y='0.468018' width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2831_14099)'%3E%3Cpath d='M9.75696 14.468H11.257V9.46802H9.75696V14.468ZM10.5026 7.96802C10.7138 7.96802 10.8924 7.89657 11.0382 7.75366C11.184 7.61075 11.257 7.43366 11.257 7.22241C11.257 7.01115 11.1855 6.8326 11.0426 6.68677C10.8997 6.54093 10.7226 6.46802 10.5114 6.46802C10.3001 6.46802 10.1215 6.53947 9.97571 6.68237C9.82987 6.82529 9.75696 7.00237 9.75696 7.21362C9.75696 7.42489 9.82841 7.60343 9.97131 7.74927C10.1142 7.8951 10.2913 7.96802 10.5026 7.96802ZM10.5127 18.468C9.41165 18.468 8.37501 18.2597 7.40279 17.843C6.43057 17.4264 5.57987 16.8534 4.85071 16.1243C4.12154 15.3951 3.54862 14.5447 3.13196 13.5731C2.71529 12.6014 2.50696 11.5632 2.50696 10.4585C2.50696 9.35373 2.71529 8.31871 3.13196 7.35343C3.54862 6.38816 4.12154 5.54093 4.85071 4.81177C5.57987 4.0826 6.43028 3.50968 7.40192 3.09302C8.37357 2.67635 9.41176 2.46802 10.5165 2.46802C11.6213 2.46802 12.6563 2.67635 13.6215 3.09302C14.5868 3.50968 15.434 4.0826 16.1632 4.81177C16.8924 5.54093 17.4653 6.38971 17.882 7.3581C18.2986 8.3265 18.507 9.36123 18.507 10.4623C18.507 11.5633 18.2986 12.6 17.882 13.5722C17.4653 14.5444 16.8924 15.3951 16.1632 16.1243C15.434 16.8534 14.5853 17.4264 13.6169 17.843C12.6485 18.2597 11.6138 18.468 10.5127 18.468Z' fill='%231C1B1F'/%3E%3C/g%3E%3C/svg%3E%0A");
 
 @mixin mask($icon-url) {
   -webkit-mask-image: $icon-url;
@@ -50,19 +51,19 @@ $icon-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0
 
 @mixin icon-arrow-left-300 {
   @include with-icon;
-  -webkit-mask-image: $icon-arrow-right-300;
-  mask-image: $icon-arrow-right-300;
+  -webkit-mask-image: $icon-url-arrow-right-300;
+  mask-image: $icon-url-arrow-right-300;
   rotate: 180deg;
 }
 
 @mixin icon-arrow-right-500 {
   @include with-icon;
-  -webkit-mask-image: $icon-arrow-right-500;
-  mask-image: $icon-arrow-right-500;
+  -webkit-mask-image: $icon-url-arrow-right-500;
+  mask-image: $icon-url-arrow-right-500;
 }
 
 @mixin icon-close {
   @include with-icon;
-  -webkit-mask-image: $icon-close;
-  mask-image: $icon-close;
+  -webkit-mask-image: $icon-url-close;
+  mask-image: $icon-url-close;
 }

package/scss/tokens/spacing.scss

@@ -17,80 +17,15 @@ $space-48: 3rem;
 $space-64: 4rem;
 $space-80: 5rem;
 
-// Convinience map that stores every value. Used internally
-$_all_spaces: (
-  0: $space-0,
-  2: $space-2,
-  4: $space-4,
-  6: $space-6,
-  8: $space-8,
-  12: $space-12,
-  16: $space-16,
-  20: $space-20,
-  24: $space-24,
-  32: $space-32,
-  40: $space-40,
-  48: $space-48,
-  64: $space-64,
-  80: $space-80,
-);
-
-/// Converts a single KTH Style space value to rem.
-/// Throws an Error if the argument is not part of the valid spaces
-///
-/// This function is used internally.
-@function _space_to_rem($space) {
-  @if map.get($_all_spaces, $space) == null {
-    @error "#{$space} is not a valid spacing. Use one of the following instead: #{$_all_spaces}";
-  }
-
-  @return map.get($_all_spaces, $space);
-}
-
-/// Converts a list of "KTH Style space" value to their rem values.
-/// Throws an Error if any element is not valid
-///
-/// This function is used internally.
-@function _spaces_to_rem($list-of-spaces) {
-  $list-of-rem: ();
-
-  @each $element in $list-of-spaces {
-    $list-of-rem: list.append($list-of-rem, _space_to_rem($element));
-  }
-
-  @return $list-of-rem;
-}
-
-/// Converts a list of "KTH Style padding" values to actual CSS measurements.
-@function padding($list) {
-  @return _spaces_to_rem($list);
-}
-
-/// Converts a list of "KTH Style margin" values to actual CSS measurements..
-@function margin($list) {
-  @return _spaces_to_rem($list);
-}
-
-/// Converts a list of "KTH Style gap" values to actual CSS measurements..
-@function gap($list) {
-  @return _spaces_to_rem($list);
-}
-
-@function border-radius($list) {
-  @return _spaces_to_rem($list);
-}
-
 // Semantic tokens for spacing
 @mixin theme-default {
   --space-inner-inline: #{$space-16};
   --space-inner-block: #{$space-8};
   --space-inner-icon: #{$space-8};
-  --unboxed-padding-block: #{$space-8};
 }
 
 @mixin theme-dense {
   --space-inner-inline: #{$space-12};
   --space-inner-block: #{$space-4};
   --space-inner-icon: #{$space-4};
-  --unboxed-padding-block: #{$space-4};
 }

package/scss/utils/mixins.scss

@@ -1,3 +1,8 @@
+/// These utilities are not categorized nor documented yet.
+///
+/// Do not use it outside of @kth/style!!
+/// This file is not subjected to semver rules. Breaking changes might occur
+/// without major version upgrading
 @use "../tokens/spacing";
 
 @mixin horizontal-list {

package/scss/utils/prose.scss

@@ -26,27 +26,32 @@
 
   h1 {
     font: var(--font-heading-xl);
-    margin: s.margin(0 0 16 0);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-16;
   }
 
   h2 {
     font: var(--font-heading-l);
-    margin: s.margin(32 0 16 0);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-16;
   }
 
   h3 {
     font: var(--font-heading-m);
-    margin: s.margin(32 0 8 0);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-8;
   }
 
   h4 {
     font: var(--font-heading-s);
-    margin: s.margin(32 0 4 0);
+    margin-block-start: s.$space-32;
+    margin-block-end: s.$space-4;
   }
 
   li {
     max-width: 60ch;
-    margin: s.margin(8 0);
+    margin-block: s.$space-8;
+    margin-inline: 0;
   }
 
   ol,

package/scss/utils/reset.scss

@@ -2,33 +2,19 @@
 @use "../tokens/spacing";
 @use "../tokens/colors";
 
+/// When true, the file generates CSS code for the entire document
+///
+/// Set to `false` when importing if you want to use the mixin but don't want
+/// to apply reset to the entire document.
+$generate-css: true !default;
+
 /// Based on https://andy-bell.co.uk/a-more-modern-css-reset/
-@layer kth-style {
+@mixin reset {
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
-  html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
-    scrollbar-gutter: stable;
-  }
-
-  :root {
-    @include colors.theme-default;
-    @include spacing.theme-default;
-    @include typography.theme-default;
-  }
-
-  body {
-    color: var(--color-text);
-    background: var(--color-background);
-    font: var(--font-default);
-    min-height: 100vh;
-    margin: 0;
-  }
 
   h1,
   h2,
@@ -50,6 +36,7 @@
   img,
   picture {
     max-width: 100%;
+    height: auto;
   }
 
   input,
@@ -59,3 +46,30 @@
     font: inherit;
   }
 }
+
+@if $generate-css {
+  @layer kth-style {
+    html {
+      -moz-text-size-adjust: none;
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      scrollbar-gutter: stable;
+    }
+
+    :root {
+      @include colors.theme-default;
+      @include spacing.theme-default;
+      @include typography.theme-default;
+    }
+
+    body {
+      color: var(--color-text);
+      background: var(--color-background);
+      font: var(--font-default);
+      min-height: 100vh;
+      margin: 0;
+    }
+
+    @include reset;
+  }
+}

package/dist/cjs/components/Button.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface ButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-    /** Appearance */
-    appearance: "primary" | "secondary" | "tertiary";
-}
-interface IconButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-}
-/** A button with just text */
-export declare function Button({ children, onClick, appearance }: ButtonProps): React.JSX.Element;
-export declare function BackButton({ children, onClick }: IconButtonProps): React.JSX.Element;
-export declare function ForwardButton({ children, onClick }: IconButtonProps): React.JSX.Element;
-export {};

package/dist/cjs/components/ModalNavigationPanel.d.ts

@@ -1,4 +0,0 @@
-/**
- * Add open/close functionality to a set of navigation panels
- */
-export declare function setModalNavigationPanels(items: NodeListOf<Element>): void;

package/dist/cjs/components/NavigationPanel.d.ts

@@ -1,7 +0,0 @@
-/**
- * Add open/close functionality to a set of navigation panels
- *
- * @param container The element containing all the menus
- * @param items A list of all menu elements
- */
-export declare function setNavigationPanels(container: HTMLElement | null, items: NodeListOf<Element>): void;

package/dist/cjs/components/Radio.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface RadioGroupProps {
-    /** Options */
-    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
-    /** The value of the selected radio button */
-    value: string;
-    /** The callback function when a different choice is made by the user */
-    onChange: (value: string) => void;
-}
-interface RadioProps {
-    /** The value of the radio button */
-    value: string;
-    /** The label of the radio button */
-    label: string;
-}
-/** Implemented as fancy radio buttons */
-export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): React.JSX.Element;
-/** A single radio button */
-export declare function Radio({ value, label }: RadioProps): React.JSX.Element;
-export {};

package/dist/cjs/components/Select.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-interface SelectProps {
-    /** Equivalent to HTML `name` */
-    name: string;
-    /** Label for the select */
-    label: string;
-    /** Select description */
-    description?: string;
-    /** Current value of the select field */
-    value: string;
-    /** Called when the select value changes */
-    onChange(value: string): void;
-    /** Options */
-    children: React.ReactNode;
-    /**
-     * Error message if the field has errors. `undefined` here means the field
-     * contains no error.
-     */
-    error?: string;
-}
-interface OptionProps {
-    /** The value for the option */
-    value: string;
-    /** Human-readable label for the option */
-    children: string;
-}
-interface OptionGroupProps {
-    label: string;
-    children: React.ReactNode;
-}
-export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): React.JSX.Element;
-export declare function OptionGroup({ label, children }: OptionGroupProps): React.JSX.Element;
-export declare function Option({ value, children }: OptionProps): React.JSX.Element;
-export {};

package/dist/cjs/components/Tabs.d.ts

@@ -1 +0,0 @@
-export declare function initTabs(container: Element): void;

package/dist/cjs/components/react/PersonalMenuPanel.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-/**
- * A panel with a button that opens it.
- *
- * - `children` is mounted the first time the dialog is opened. It is _not_
- *   unmounted after the dialog is closed.
- */
-export declare function PersonalMenuPanel({ label, children }: {
-    label: any;
-    children: any;
-}): React.JSX.Element;
-interface PersonalMenuPanelGroupProps {
-    children: React.ReactElement;
-}
-/**
- * Contains all <PersonalMenuPanel /> components in a menu
- */
-export declare function PersonalMenuPanelGroup({ children, }: PersonalMenuPanelGroupProps): React.JSX.Element;
-export {};

package/dist/cjs/components/react/Tabs.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-interface TabProps {
-    children?: React.ReactNode;
-    id: string;
-    title: string;
-}
-interface GenericTabsProps {
-    classPrefix: string;
-    children: React.ReactElement<TabProps>[];
-    id: string;
-    defaultValue?: string;
-    url: "query" | "hash" | "none";
-}
-interface NavigationTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "query" | "none";
-    defaultValue?: string;
-}
-interface ContentTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "hash" | "none";
-    defaultValue?: string;
-}
-/**
- * Highly customizable Tabs component made for testing purposes.
- * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
- */
-export declare function GenericTabs({ classPrefix, children, id, defaultValue, url, }: GenericTabsProps): React.JSX.Element;
-export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): React.JSX.Element;
-export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): React.JSX.Element;
-export declare function Tab({ children }: TabProps): React.JSX.Element;
-export {};

package/dist/cjs/icons/400/ArrowBack.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowBack;

package/dist/cjs/icons/400/Check.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgCheck;

package/dist/cjs/icons/500/ArrowForward.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import type { SVGProps } from "react";
-declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
-export default SvgArrowForward;

package/dist/cjs/stories/Button.stories.d.ts

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-import "../../scss/globals.scss";
-import "../../scss/components/button.scss";
-declare const meta: {
-    title: string;
-    component: typeof Button;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Back: StoryObj;
-export declare const Forward: StoryObj;

package/dist/cjs/stories/ContentTabs.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import "../../scss/globals.scss";
-import "../../scss/components/content-tabs.scss";
-declare const meta: {
-    title: string;
-    component: any;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;

package/dist/cjs/stories/FilterTabs.stories.d.ts

@@ -1,12 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { FilterTabs } from "../components/Radio";
-import "../../scss/globals.scss";
-import "../../scss/components/filter-tabs.scss";
-declare const meta: {
-    title: string;
-    component: typeof FilterTabs;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;

package/dist/cjs/stories/InlineIcons.stories.d.ts

@@ -1,9 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import "../../scss/globals.scss";
-import "../../scss/components/inline-icon.scss";
-declare const meta: {
-    title: string;
-    tags: string[];
-};
-export default meta;
-export declare const CheckIcon: StoryObj;

package/dist/cjs/stories/Select.stories.d.ts

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { Select } from "../components/Select";
-import "../../scss/globals.scss";
-import "../../scss/components/form.scss";
-declare const meta: {
-    title: string;
-    component: typeof Select;
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const WithDescriptions: Story;
-export declare const WithoutDescriptions: Story;
-export declare const WithError: Story;

package/dist/esm/components/Button.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface ButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-    /** Appearance */
-    appearance: "primary" | "secondary" | "tertiary";
-}
-interface IconButtonProps {
-    /** The label of the button */
-    children?: string;
-    /** The callback function when the button is clicked */
-    onClick?: () => void;
-}
-/** A button with just text */
-export declare function Button({ children, onClick, appearance }: ButtonProps): React.JSX.Element;
-export declare function BackButton({ children, onClick }: IconButtonProps): React.JSX.Element;
-export declare function ForwardButton({ children, onClick }: IconButtonProps): React.JSX.Element;
-export {};

package/dist/esm/components/ModalNavigationPanel.d.ts

@@ -1,4 +0,0 @@
-/**
- * Add open/close functionality to a set of navigation panels
- */
-export declare function setModalNavigationPanels(items: NodeListOf<Element>): void;

package/dist/esm/components/NavigationPanel.d.ts

@@ -1,7 +0,0 @@
-/**
- * Add open/close functionality to a set of navigation panels
- *
- * @param container The element containing all the menus
- * @param items A list of all menu elements
- */
-export declare function setNavigationPanels(container: HTMLElement | null, items: NodeListOf<Element>): void;

package/dist/esm/components/Radio.d.ts

@@ -1,20 +0,0 @@
-import React from "react";
-interface RadioGroupProps {
-    /** Options */
-    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
-    /** The value of the selected radio button */
-    value: string;
-    /** The callback function when a different choice is made by the user */
-    onChange: (value: string) => void;
-}
-interface RadioProps {
-    /** The value of the radio button */
-    value: string;
-    /** The label of the radio button */
-    label: string;
-}
-/** Implemented as fancy radio buttons */
-export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): React.JSX.Element;
-/** A single radio button */
-export declare function Radio({ value, label }: RadioProps): React.JSX.Element;
-export {};