@helsenorge/designsystem-react 5.0.0-beta.0 → 5.0.0-beta.1

package/components/ServiceMessage/styles.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/palette';
 @import '../../scss/breakpoints';
@@ -5,322 +6,222 @@
 @import '../../scss/grid';
 
 .service-message {
-  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  $servicemessage: &;
 
-  &__outer-wrapper {
-    &--success {
-      background-color: $kiwi50;
-    }
-
-    &--info {
-      background-color: $blueberry50;
-    }
+  border-width: 1px;
+  border-bottom-style: solid;
 
-    &--warn {
-      background-color: $banana50;
-    }
-
-    &--alert {
-      background-color: $cherry50;
-    }
+  &:first-of-type {
+    border-top-style: solid;
   }
 
-  &__wrapper {
-    padding: getSpacer(3xs) getSpacer(xs);
+  &--success {
+    background-color: $kiwi50;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      padding: getSpacer(2xs) getSpacer(l);
+    &:hover {
+      background-color: rgba-to-rgb(rgba($kiwi500, 0.1), $kiwi50);
     }
 
-    &--inner {
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        @include make-container;
-        @include make-container-max-widths;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $kiwi900;
     }
+  }
 
-    &--success {
-      background-color: $kiwi50;
+  &--info {
+    background-color: $blueberry50;
 
-      &:hover {
-        background-color: rgb(51 190 132 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $kiwi900;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($blueberry500, 0.1), $blueberry50);
     }
 
-    &--info {
-      background-color: $blueberry50;
-
-      &:hover {
-        background-color: rgb(24 128 151 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $blueberry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $blueberry700;
     }
+  }
 
-    &--warn {
-      background-color: $banana50;
-
-      &:hover {
-        background-color: rgb(221 171 6 / 10%);
-      }
+  &--warn {
+    background-color: $banana50;
 
-      &--expanded {
-        border-bottom: 0.0625rem solid $banana700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($banana500, 0.1), $banana50);
     }
 
-    &--alert {
-      background-color: $cherry50;
-
-      &:hover {
-        background-color: rgb(200 53 33 / 10%);
-      }
-
-      &--expanded {
-        border-bottom: 0.0625rem solid $cherry700;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $banana700;
     }
+  }
 
-    &__border {
-      &--success {
-        border: 0.0625rem solid $kiwi900;
-      }
-
-      &--info {
-        border: 0.0625rem solid $blueberry700;
-      }
-
-      &--warn {
-        border: 0.0625rem solid $banana700;
-      }
+  &--alert {
+    background-color: $cherry50;
 
-      &--alert {
-        border: 0.0625rem solid $cherry700;
-      }
+    &:hover {
+      background-color: rgba-to-rgb(rgba($cherry500, 0.1), $cherry50);
     }
 
-    &__btn {
-      background-color: transparent;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      &--width {
-        width: 100%;
-      }
-
-      &--not-first {
-        border-top-color: transparent;
-        border-right-color: transparent;
-        border-left-color: transparent;
-      }
+    &#{$servicemessage},
+    &#{$servicemessage}__label-container {
+      border-color: $cherry700;
+    }
+  }
 
-      &:focus {
-        border: none;
-        outline: 0.125rem solid #000;
-        outline-offset: -2px;
+  &__container {
+    @include make-container;
+    @include make-container-max-widths;
+  }
 
-        // offset colliding border.
-        margin-top: -1px;
-        padding-top: 0.375rem;
-        padding-bottom: 0.3125rem;
+  &__row {
+    @include make-row;
+  }
 
-        @media (min-width: map-get($grid-breakpoints, md)) {
-          padding-top: 0.625rem;
-          padding-bottom: 0.5625rem;
-        }
-      }
+  &__col {
+    @include make-col-ready;
+    @include make-col(12);
+  }
 
-      &--first {
-        border-right-color: transparent;
-        border-left-color: transparent;
+  &__label-container {
+    position: relative;
+    padding-top: getSpacer(3xs);
+    padding-bottom: getSpacer(3xs);
 
-        @media (max-width: map-get($grid-breakpoints, lg)) {
-          border-top-color: transparent;
-        }
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(2xs);
+    }
 
-        &:focus {
-          padding-top: 0.3125rem;
-          padding-bottom: 0.3125rem;
-          margin-top: 0;
+    &--has-expander:has(:focus-visible) {
+      box-shadow: inset 0 0 0 2px $black;
+    }
+  }
 
-          @media (min-width: map-get($grid-breakpoints, md)) {
-            padding-top: 0.5625rem;
-            padding-bottom: 0.5625rem;
-          }
-        }
-      }
+  &__label {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: getSpacer(2xs);
 
-      &--expanded {
-        border-bottom-color: transparent;
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      gap: getSpacer(m);
     }
   }
 
-  &__content {
-    display: block;
-    margin: 0 3.75rem;
+  &__title {
+    width: 100%;
+    font-weight: 700;
     font-size: $font-size-xs;
     line-height: 1.25rem;
-    padding: getSpacer(3xs) 0 getSpacer(xs) 0;
 
     @media (min-width: map-get($grid-breakpoints, md)) {
-      margin: 0 getSpacer(4xl);
-    }
-
-    @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(2xs) 0 getSpacer(s) 0;
-      margin: 0 4.5625rem;
-    }
-
-    &__info {
-      display: block;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
-
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        padding-top: getSpacer(xs);
-        line-height: 1.625rem;
-        font-size: $font-size-sm;
-      }
-
-      &--smaller {
-        display: block;
-        font-size: 0.875rem;
-        padding-top: getSpacer(2xs);
-        line-height: 1.25rem;
-
-        @media (min-width: map-get($grid-breakpoints, lg)) {
-          padding-top: getSpacer(xs);
-          font-size: $font-size-xs;
-          line-height: $lineheight-size-xs;
-        }
-      }
+      font-size: $font-size-sm;
     }
+  }
 
-    &--spacing {
-      margin-top: getSpacer(2xs);
+  &__toggle {
+    all: unset;
 
-      @media (min-width: map-get($grid-breakpoints, lg)) {
-        margin-top: 0;
-        padding: 0 getSpacer(l);
-      }
+    // Triks for at hele labelen skal trigge klikk på knappen
+    &::after {
+      inset: 0;
+      content: '';
+      position: absolute;
     }
   }
 
-  &__icon {
-    &--signal {
-      display: flex;
-      align-items: center;
-      margin-right: getSpacer(2xs);
+  &__content {
+    margin-left: calc(38px + getSpacer(2xs));
+    margin-right: calc(38px + getSpacer(2xs));
+    padding-top: getSpacer(xs);
+    padding-bottom: getSpacer(xs);
 
-      @media (min-width: map-get($grid-breakpoints, md)) {
-        margin-right: getSpacer(m);
-      }
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      margin-left: calc(38px + getSpacer(m));
+      margin-right: calc(38px + getSpacer(m));
     }
 
-    &--expander {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-left: calc(48px + getSpacer(m));
+      margin-right: calc(48px + getSpacer(m));
+      padding-top: getSpacer(2xs);
+      padding-bottom: getSpacer(s);
     }
   }
 
-  &__label {
-    text-align: left;
-    font-weight: 700;
+  &__info {
     font-size: $font-size-xs;
     line-height: 1.25rem;
+    margin: 0;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-top: getSpacer(xs);
+      line-height: 1.625rem;
       font-size: $font-size-sm;
     }
-  }
-
-  &__top-row {
-    line-height: $lineheight-size-xs;
-    align-items: center;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      font-size: $font-size-sm;
-      line-height: 1.25rem;
-    }
+    &--extra {
+      font-size: 0.875rem;
+      margin-top: getSpacer(2xs);
 
-    &--container {
-      display: flex;
-      width: 100%;
-      align-items: center;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        margin-top: getSpacer(xs);
+        font-size: $font-size-xs;
+        line-height: $lineheight-size-xs;
+      }
     }
   }
 
-  &__bottom-row {
+  &__actions {
     display: flex;
     justify-content: space-between;
     flex-flow: column wrap;
-    padding: getSpacer(2xs) 0 0 0;
     gap: getSpacer(2xs);
+    margin-top: getSpacer(2xs);
 
     @media (min-width: map-get($grid-breakpoints, sm)) {
       flex-direction: row;
     }
 
     @media (min-width: map-get($grid-breakpoints, lg)) {
-      padding: getSpacer(s) 0 0 0;
+      margin-top: getSpacer(s);
     }
+  }
 
-    &--only-close-button {
-      @media (min-width: map-get($grid-breakpoints, sm)) {
-        flex-direction: row-reverse;
-      }
+  &__action {
+    display: flex;
+    align-items: center;
+    border: none;
+    width: fit-content;
+    color: $blueberry700;
+    font-weight: 600;
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    background-color: transparent;
+    text-decoration: none;
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+    gap: getSpacer(xs);
+
+    &:hover,
+    &:active {
+      background-color: rgb(88 170 187 / 10%);
     }
 
-    &__button {
-      display: flex;
-      align-items: center;
-      border: none;
-      width: fit-content;
-      color: $blueberry700;
-      font-weight: 600;
-      font-size: $font-size-xs;
-      line-height: 1.25rem;
+    &:focus-visible {
+      box-shadow: 0 0 0 2px $black;
       background-color: transparent;
-      text-decoration: none;
-      padding: 0.5rem;
-      margin-left: -0.5rem;
-
-      &:hover,
-      &:active {
-        background-color: rgb(88 170 187 / 10%);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 2px $black;
-        background-color: transparent;
-        border-radius: 0;
-        border: 0;
-        outline: none;
-      }
-
-      svg {
-        margin-left: getSpacer(xs);
-      }
+      border: 0;
+      outline: none;
     }
 
-    &__close-button {
-      &--top {
+    &--close {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
         margin-left: auto;
-        padding: 0;
-
-        svg {
-          margin-left: 0;
-        }
       }
     }
   }
+
+  &__close {
+    z-index: 1;
+  }
 }

package/components/ServiceMessage/styles.module.scss.d.ts

@@ -1,41 +1,24 @@
 export type Styles = {
   'service-message': string;
-  'service-message__bottom-row': string;
-  'service-message__bottom-row__button': string;
-  'service-message__bottom-row__close-button--top': string;
-  'service-message__bottom-row--only-close-button': string;
+  'service-message__action': string;
+  'service-message__action--close': string;
+  'service-message__actions': string;
+  'service-message__close': string;
+  'service-message__col': string;
+  'service-message__container': string;
   'service-message__content': string;
-  'service-message__content__info': string;
-  'service-message__content__info--smaller': string;
-  'service-message__content--spacing': string;
-  'service-message__icon--expander': string;
-  'service-message__icon--signal': string;
+  'service-message__info': string;
+  'service-message__info--extra': string;
   'service-message__label': string;
-  'service-message__outer-wrapper--alert': string;
-  'service-message__outer-wrapper--info': string;
-  'service-message__outer-wrapper--success': string;
-  'service-message__outer-wrapper--warn': string;
-  'service-message__top-row': string;
-  'service-message__top-row--container': string;
-  'service-message__wrapper': string;
-  'service-message__wrapper__border--alert': string;
-  'service-message__wrapper__border--info': string;
-  'service-message__wrapper__border--success': string;
-  'service-message__wrapper__border--warn': string;
-  'service-message__wrapper__btn': string;
-  'service-message__wrapper__btn--expanded': string;
-  'service-message__wrapper__btn--first': string;
-  'service-message__wrapper__btn--not-first': string;
-  'service-message__wrapper__btn--width': string;
-  'service-message__wrapper--alert': string;
-  'service-message__wrapper--alert--expanded': string;
-  'service-message__wrapper--info': string;
-  'service-message__wrapper--info--expanded': string;
-  'service-message__wrapper--inner': string;
-  'service-message__wrapper--success': string;
-  'service-message__wrapper--success--expanded': string;
-  'service-message__wrapper--warn': string;
-  'service-message__wrapper--warn--expanded': string;
+  'service-message__label-container': string;
+  'service-message__label-container--has-expander': string;
+  'service-message__row': string;
+  'service-message__title': string;
+  'service-message__toggle': string;
+  'service-message--alert': string;
+  'service-message--info': string;
+  'service-message--success': string;
+  'service-message--warn': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Table/styles.module.scss

@@ -98,7 +98,7 @@ table .table-body .table-row {
     }
   }
 
-  .table__expanded-row .table__cell {
+  .table__expanded-row > .table__cell {
     text-align: left;
     padding: 0.75rem;
   }
@@ -115,7 +115,7 @@ table .table-body .table-row {
       display: block;
     }
 
-    .table__cell:first-child {
+    > .table__cell:first-child {
       border-top: 0;
     }
   }

package/components/Tag/styles.module.scss

@@ -4,21 +4,6 @@
 @import '../../scss/palette';
 @import '../../scss/font-settings';
 
-/**
-* Konverter en gjennomsiktig farge til en ugjennomsiktig farge ved å simulere fargen plassert
-* på en bakgrunnsfarge (f.eks. 50% gjennomsiktig $blueberry200 på hvit bakgrunn).
-* 
-* Fra https://makandracards.com/makandra/42500-sass-how-to-convert-an-rgba-color-to-its-rgb-look-alike
-* 
-* @param $rgba Farge med alpha-verdi, f.eks. rgba(black, 0.67)
-* @param $background Bakgrunnsfarge. Default: $white
-* 
-* @returns Farge uten gjennomsiktighet
-*/
-@function rgba-to-rgb($rgba, $background: $white) {
-  @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
-}
-
 .tag {
   $tag: &;
 

package/components/Tooltip/index.js

@@ -1,2 +1,2 @@
-import{T as p}from"../../Tooltip.js";import{a as J,b as K}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{J as Tooltip,K as TooltipOpenProvider,p as default};
+import{T as p}from"../../Tooltip.js";import{a as J,b as K}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{J as Tooltip,K as TooltipOpenProvider,p as default};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js

@@ -1,2 +1,2 @@
-import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),J=e;export{J as default};
+import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),J=e;export{J as default};
 //# sourceMappingURL=index.js.map

package/components/Trigger/HelpSign.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SvgPathProps } from '../Icons';
+declare const HelpSign: React.FC<SvgPathProps>;
+export default HelpSign;
+//# sourceMappingURL=HelpSign.d.ts.map

package/components/Trigger/HelpSign.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpSign.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/HelpSign.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAW,YAAY,EAAE,MAAM,UAAU,CAAC;AAEjD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkBpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Trigger/InfoSignStroke.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SvgPathProps } from '../Icons';
+declare const InfoSignStroke: React.FC<SvgPathProps>;
+export default InfoSignStroke;
+//# sourceMappingURL=InfoSignStroke.d.ts.map

package/components/Trigger/InfoSignStroke.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoSignStroke.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/InfoSignStroke.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAW,YAAY,EAAE,MAAM,UAAU,CAAC;AAEjD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkB1C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/Trigger/Trigger.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export type TriggerVariant = 'help';
+export type TriggerSize = 'medium' | 'large';
+export type TriggerMode = 'onlight' | 'ondark';
+export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {
+    /**
+     * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabel?: string;
+    /**
+     * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabelledById?: string;
+    /**
+     * Controls the icon and color. Default: help.
+     */
+    variant?: TriggerVariant;
+    /**
+     * Changes the design based on the background the trigger is placed on. Default: onlight.
+     */
+    mode?: TriggerMode;
+    /**
+     * Size of the trigger. Default: medium.
+     */
+    size?: TriggerSize;
+    /**
+     * Indicates that the trigger is in use.
+     */
+    selected?: boolean;
+    /**
+     * Classname will be applied to the button element.
+     */
+    className?: string;
+    /**
+     * Optional test id.
+     */
+    testId?: string;
+}
+declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export default Trigger;
+//# sourceMappingURL=Trigger.d.ts.map

package/components/Trigger/Trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,eAAe,CAAC;IACrI;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD,QAAA,MAAM,OAAO,wFAmCZ,CAAC;AAIF,eAAe,OAAO,CAAC"}