@helsenorge/designsystem-react 9.4.3 → 10.0.0-beta.0

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

@@ -1,21 +1,34 @@
 export type Styles = {
   'link-list': string;
   'link-list__anchor': string;
-  'link-list__anchor--banana': string;
-  'link-list__anchor--black': string;
   'link-list__anchor--blueberry': string;
   'link-list__anchor--button': string;
   'link-list__anchor--cherry': string;
   'link-list__anchor--fill': string;
-  'link-list__anchor--kiwi': string;
+  'link-list__anchor--fill--blueberry': string;
+  'link-list__anchor--fill--cherry': string;
+  'link-list__anchor--fill--neutral': string;
+  'link-list__anchor--fill--white': string;
+  'link-list__anchor--fill-negative': string;
   'link-list__anchor--large': string;
+  'link-list__anchor--line--blueberry': string;
+  'link-list__anchor--line--cherry': string;
+  'link-list__anchor--line--neutral': string;
+  'link-list__anchor--line--white': string;
   'link-list__anchor--medium': string;
   'link-list__anchor--neutral': string;
-  'link-list__anchor--plum': string;
+  'link-list__anchor--outline': string;
+  'link-list__anchor--outline--blueberry': string;
+  'link-list__anchor--outline--cherry': string;
+  'link-list__anchor--outline--neutral': string;
+  'link-list__anchor--outline--white': string;
   'link-list__anchor--small': string;
   'link-list__anchor--white': string;
   'link-list__list-item--line': string;
-  'link-list__list-item--outline': string;
+  'link-list__list-item--outline--blueberry': string;
+  'link-list__list-item--outline--cherry': string;
+  'link-list__list-item--outline--neutral': string;
+  'link-list__list-item--outline--white': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/ListHeader/styles.module.scss

@@ -1,48 +1,33 @@
 @use 'sass:map';
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
-@import '../../scss/font-settings';
 @import '../../scss/palette';
 
 .list-header {
-  display: flex;
+  display: grid;
+  grid-template:
+    'icon text badge chevron' 4rem
+    '. text . .' auto / min-content auto min-content min-content;
+  column-gap: getSpacer(2xs);
+  margin-left: getSpacer(2xs);
+  margin-right: getSpacer(2xs);
   width: 100%;
-  padding-right: getSpacer(2xs);
-  padding-left: getSpacer(2xs);
+  height: 100%;
   text-align: left;
-  align-items: center;
-
-  &--for-element-content {
-    align-content: flex-start;
-    padding-top: getSpacer(s);
-    padding-bottom: getSpacer(s);
-  }
-
-  &--top-align-content {
-    align-items: flex-start;
-  }
 
   &__title {
     font-size: inherit;
     font-weight: inherit;
     line-height: inherit;
-    padding: 0;
-    margin: 0;
   }
 
   &__content {
-    border-bottom: 1px solid transparent;
-    display: flex;
-    align-items: center;
     width: 100%;
-
-    &--string {
-      margin: getSpacer(xs) 0;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        margin: getSpacer(s) 0;
-      }
-    }
+    height: 100%;
+    grid-area: text;
+    align-self: center;
+    padding-top: 1.125rem;
+    padding-bottom: 1.125rem;
 
     &--element {
       display: flex;
@@ -50,10 +35,6 @@
       flex-direction: column;
     }
 
-    &--spacing {
-      margin-left: getSpacer(s);
-    }
-
     :focus > &,
     :focus-visible > & {
       border-color: $black;
@@ -61,104 +42,46 @@
   }
 
   &__icon,
-  &__avatar {
-    display: flex;
-    align-items: center;
-
-    &--for-element-content {
-      &--medium {
-        height: $lineheight-size-sm;
-      }
-
-      &--large {
-        height: $lineheight-size-md;
-      }
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        &--medium {
-          height: $lineheight-size-md;
-        }
+  &__icon svg,
+  &__avatar,
+  &__badge-container,
+  &__chevron,
+  &__chevron svg {
+    align-self: center;
+  }
 
-        &--large {
-          height: $lineheight-size-lg;
-        }
-      }
-    }
+  &__icon,
+  &__avatar {
+    grid-area: icon;
   }
 
   &__icon {
-    &--for-string-content {
-      margin: getSpacer(3xs) getSpacer(2xs) getSpacer(3xs) 0;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        margin: getSpacer(2xs) getSpacer(2xs) getSpacer(2xs) 0;
-      }
-    }
-
-    &--for-element-content {
-      margin: 0 getSpacer(2xs) 0 0;
-    }
+    height: 100%;
   }
 
-  &__avatar {
-    &--for-string-content {
-      margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) 0;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        margin: getSpacer(2xs) getSpacer(s) getSpacer(2xs) 0;
-      }
-    }
+  &__chevron {
+    grid-area: chevron;
+    height: 100%;
+  }
 
-    &--for-element-content {
-      margin: 0 getSpacer(s) 0 0;
-    }
+  &__chevron svg,
+  &__icon svg {
+    height: 100%;
   }
 
-  &__chevron,
-  &__badge {
+  &__badge-container {
+    grid-area: badge;
     display: flex;
+    flex-flow: row;
     align-items: center;
-    margin-left: getSpacer(2xs);
-
-    &--for-string-content {
-      margin: getSpacer(3xs) 0 getSpacer(3xs) auto;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        margin: getSpacer(2xs) 0 getSpacer(2xs) auto;
-      }
-    }
-
-    // Height needs to be same as line-height
-    &--small {
-      height: $lineheight-size-xs;
-    }
-
-    &--medium {
-      height: $lineheight-size-sm;
-    }
-
-    &--large {
-      height: $lineheight-size-md;
-    }
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      &--small {
-        height: $lineheight-size-sm;
-      }
-
-      &--medium {
-        height: $lineheight-size-md;
-      }
-
-      &--large {
-        height: $lineheight-size-lg;
-      }
-    }
+    gap: 0.5rem;
+    height: 100%;
   }
-}
 
-.statusDot {
-  padding: 1rem;
+  &__badge:has(svg),
+  &__badge svg {
+    height: 100%;
+  }
 }
 
 .text-wrapper {

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

@@ -1,33 +1,13 @@
 export type Styles = {
   'list-header': string;
   'list-header__avatar': string;
-  'list-header__avatar--for-element-content': string;
-  'list-header__avatar--for-element-content--large': string;
-  'list-header__avatar--for-element-content--medium': string;
-  'list-header__avatar--for-string-content': string;
   'list-header__badge': string;
-  'list-header__badge--for-string-content': string;
-  'list-header__badge--large': string;
-  'list-header__badge--medium': string;
-  'list-header__badge--small': string;
+  'list-header__badge-container': string;
   'list-header__chevron': string;
-  'list-header__chevron--for-string-content': string;
-  'list-header__chevron--large': string;
-  'list-header__chevron--medium': string;
-  'list-header__chevron--small': string;
   'list-header__content': string;
   'list-header__content--element': string;
-  'list-header__content--spacing': string;
-  'list-header__content--string': string;
   'list-header__icon': string;
-  'list-header__icon--for-element-content': string;
-  'list-header__icon--for-element-content--large': string;
-  'list-header__icon--for-element-content--medium': string;
-  'list-header__icon--for-string-content': string;
   'list-header__title': string;
-  'list-header--for-element-content': string;
-  'list-header--top-align-content': string;
-  statusDot: string;
   'text-wrapper': string;
   'text-wrapper__text--emphasised': string;
   'text-wrapper--sub-level': string;

package/components/PanelList/styles.module.scss

@@ -2,7 +2,6 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
-@import '../../scss/font-settings';
 
 .panel-list {
   &__panel:not(:last-child) {

package/components/StepButtons/styles.module.scss

@@ -2,7 +2,6 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
-@import '../../scss/font-settings';
 @import '../../scss/screen-reader';
 
 .stepbuttons {

package/components/Tabs/TabList/TabItem.d.ts

@@ -7,6 +7,7 @@ interface TabItemProps {
     color: TabsColors;
     selectedTab: number;
     tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;
+    tabListVisible: boolean;
     onTabListClick: (index: number) => void;
 }
 declare const TabItem: React.FC<TabItemProps>;

package/components/Tabs/TabPanel/styles.module.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @import '../../../scss/spacers';
 @import '../../../scss/palette';
-@import '../../../scss/font-settings';
 @import '../../../scss/breakpoints';
 @import '../../../scss/supernova/styles/colors';
 

package/components/Tabs/Tabs.d.ts

@@ -4,7 +4,6 @@ import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
 export type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';
-export type TabsTouchBehaviour = 'swipe' | 'none';
 export interface TabsProps {
     children?: React.ReactNode;
     /** Controlled state for Tabs component */
@@ -19,8 +18,6 @@ export interface TabsProps {
     onColor?: TabsOnColor;
     /** Whether the tab list should be sticky */
     sticky?: boolean;
-    /** Determines how Tabs respons to touch events. */
-    touchBehaviour?: TabsTouchBehaviour;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} onColor={onColorUsed}>\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAqCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA,oBAAC,SAAQ,EAAA,gBAAgB,CAAC,UAAkB,cAAc,KAAK,GAAG,aAAa,gBAAgB,OAAc,SAAS,aACnH,SACH,CAAA;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} onColor={onColorUsed}>\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAkCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA,oBAAC,SAAQ,EAAA,gBAAgB,CAAC,UAAkB,cAAc,KAAK,GAAG,aAAa,gBAAgB,OAAc,SAAS,aACnH,SACH,CAAA;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Tag/styles.module.scss

@@ -2,7 +2,6 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
-@import '../../scss/font-settings';
 
 .tag {
   $tag: &;

package/components/Textarea/styles.module.scss

@@ -1,8 +1,8 @@
 @import '../../scss/spacers';
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
-@import '../../scss/font-settings';
 @import '../../scss/input';
+@import '../../scss/font-mixins';
 
 .textarea {
   @include input-wrapper;
@@ -16,7 +16,8 @@
   @include input-container;
 
   &__input {
-    line-height: 28px;
+    @include input-text;
+
     height: auto;
     padding: 16px;
     resize: none;

package/components/Title/Title.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-export type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';
-export type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';
+export type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+export type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';
 export interface TitleProps {
     children: React.ReactNode;
     /** Gives a unique id to the title */

package/components/Title/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/title';
+@import '../../scss/font-mixins';
 
 .title {
   overflow-wrap: break-word;
@@ -29,4 +29,8 @@
   &--title5 {
     @include title5;
   }
+
+  &--title6 {
+    @include title6;
+  }
 }

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

@@ -6,6 +6,7 @@ export type Styles = {
   'title--title3': string;
   'title--title4': string;
   'title--title5': string;
+  'title--title6': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export type LabelText = {
     text: string;
-    type?: 'semibold' | 'normal';
+    type?: 'subdued' | 'normal';
 };
 export declare enum TogglePosition {
     left = "left",

package/components/Toggle/index.js

@@ -2450,7 +2450,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.13.1";
+    this.version = "11.14.3";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -2783,20 +2783,6 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
   }
   return animations;
 }
-function resolveElements(elementOrSelector, scope, selectorCache) {
-  var _a;
-  if (elementOrSelector instanceof Element) {
-    return [elementOrSelector];
-  } else if (typeof elementOrSelector === "string") {
-    let root = document;
-    if (scope) {
-      root = scope.current;
-    }
-    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
-    return elements ? Array.from(elements) : [];
-  }
-  return Array.from(elementOrSelector);
-}
 const createAxis = () => ({ min: 0, max: 0 });
 const createBox = () => ({
   x: createAxis(),
@@ -2832,6 +2818,20 @@ function animateSingleValue(value, keyframes2, options) {
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
   return motionValue$1.animation;
 }
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  var _a;
+  if (elementOrSelector instanceof Element) {
+    return [elementOrSelector];
+  } else if (typeof elementOrSelector === "string") {
+    let root = document;
+    if (scope) {
+      root = scope.current;
+    }
+    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector);
+}
 const isBrowser = typeof window !== "undefined";
 function isControllingVariants(props) {
   return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
@@ -3098,7 +3098,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.13.1", `Attempting to mix Motion versions ${nextValue.version} with 11.13.1 may not work as expected.`);
+        warnOnce(nextValue.version === "11.14.3", `Attempting to mix Motion versions ${nextValue.version} with 11.14.3 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -4036,7 +4036,7 @@ const Toggle = ({
         }),
         children: label.map((labelText) => {
           const labelClassNames = classNames({
-            [styles["toggle-container__label__text--semibold"]]: labelText.type === "semibold"
+            [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued"
           });
           return /* @__PURE__ */ jsx("span", { className: labelClassNames, children: labelText.text }, labelId + labelText.text);
         })