@midas-ds/components 7.0.0 → 8.0.0

package/label/Label.d.ts

@@ -1,10 +1,9 @@
 import { LabelProps as AriaLabelProps } from 'react-aria-components';
 import * as React from 'react';
-export type LabelVariant = 'label-01' | 'label-02';
 export interface LabelProps extends AriaLabelProps {
     /**
      * The visual variant of the component
      */
-    variant?: LabelVariant;
+    variant?: 'label-01' | 'label-02';
 }
 export declare const Label: React.FC<LabelProps>;

package/layout/Layout.d.ts

@@ -4,6 +4,8 @@ import { Header } from './components/Header';
 import { SidebarLink } from './components/SidebarLink';
 import { Href } from '@react-types/shared';
 import { LayoutProvider } from './context/LayoutContext';
+import { Backdrop } from './components/Backdrop';
+import { Navbar } from './components/Navbar';
 import * as React from 'react';
 export interface SidebarLinkGroup {
     title?: string;
@@ -14,6 +16,7 @@ export interface SidebarLinkProps {
     href: string;
     icon: LucideIcon;
     active?: boolean;
+    hasBadge?: boolean;
     isCollapsed?: boolean;
     setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -44,11 +47,14 @@ export interface MidasLayout {
      */
     clientSideRouter?: (path: string, routerOptions: undefined) => void;
     clientSideHref?: (href: Href) => string;
+    variant: 'internal' | 'external';
 }
 export declare const Layout: React.FC<MidasLayout> & {
     Provider: typeof LayoutProvider;
     Header: typeof Header;
     Sidebar: typeof Sidebar;
     SidebarLink: typeof SidebarLink;
+    Navbar: typeof Navbar;
+    Backdrop: typeof Backdrop;
 };
 export {};

package/layout/components/Navbar.d.ts

@@ -0,0 +1 @@
+export declare const Navbar: React.FC;

package/layout/context/LayoutContext.d.ts

@@ -9,10 +9,11 @@ interface LayoutContextProps {
     headerChildren: React.ReactNode;
     isCollapsed: boolean;
     setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-    isOpened: boolean;
-    setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
+    isOpened?: boolean;
+    setIsOpened?: React.Dispatch<React.SetStateAction<boolean>>;
     clientSideRouter?: (path: string, routerOptions: undefined) => void;
     clientSideHref?: (href: Href) => string;
+    variant: 'internal' | 'external';
 }
 export declare const LayoutProvider: React.FC<LayoutContextProps & {
     children: React.ReactNode;

package/layout/index.d.ts

@@ -2,3 +2,4 @@ export * from './Layout';
 export * from './components/Header';
 export * from './components/Sidebar';
 export * from './components/SidebarLink';
+export * from './components/Navbar';

package/link/Link.d.ts

@@ -2,8 +2,11 @@ import { Link as AriaLink, RouterProvider } from 'react-aria-components';
 import { LucideIcon } from 'lucide-react';
 interface MidasLinkProps<C extends React.ElementType> {
     children: React.ReactNode;
+    /** Use standalone to use the component as a standalone link, for example under a block of text.*/
     standalone?: boolean;
+    /** Use stretched to make the entire parent element clickable to the link. The parent must have position: relative; so that the clickable area of the link does not extend too far.*/
     stretched?: boolean;
+    /** Optional icon, placed to the left of the link */
     icon?: LucideIcon;
     className?: string;
     as?: C;

package/link/index.d.ts

@@ -1 +1 @@
-export { Link, RouterProvider } from './Link';
+export { Link, RouterProvider, type LinkProps } from './Link';

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",

package/radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { RadioGroupProps, ValidationResult, RadioProps } from 'react-aria-components';
+import { RadioGroupProps, RadioProps, ValidationResult } from 'react-aria-components';
 import * as React from 'react';
 interface MVDSRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
     children?: React.ReactNode;
@@ -8,6 +8,7 @@ interface MVDSRadioGroupProps extends Omit<RadioGroupProps, 'children'> {
     description?: string;
     /** String to display as error message or function to handle the result and produce the error message */
     errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 }
 /**
  * RadioGroup is used to group several radio items together

package/search-field/SearchField.d.ts

@@ -13,5 +13,6 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'isRequired
      * A custom error message if using the isInvalid prop.
      */
     errorMessage?: string;
+    errorPosition?: 'top' | 'bottom';
 }
 export declare const SearchField: React.FC<SearchFieldProps>;

package/select/Select.d.ts

@@ -16,7 +16,7 @@ type OptionSection = {
 };
 export type Option = OptionItem | OptionSection;
 export type SelectionMode = 'single' | 'multiple';
-type SelectProps = {
+export type SelectProps = {
     /** Whether the element should receive focus on render. */
     autoFocus?: boolean;
     children: CollectionChildren<Option>;
@@ -65,6 +65,7 @@ type SelectProps = {
     isRequired?: boolean;
     /** Name of the field, for uncontrolled use */
     name?: string;
+    errorPosition?: 'top' | 'bottom';
 };
 export declare const SelectComponent: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {

package/select/useMultiSelectState.d.ts

@@ -1,26 +1,19 @@
 import { MenuTriggerState } from '@react-stately/menu';
-import { Key } from 'react-aria';
 import { MultiSelectListState } from './useMultiSelectListState';
 import { OverlayTriggerProps } from '@react-types/overlays';
-import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation, Selection } from '@react-types/shared';
+import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation } from '@react-types/shared';
 import { FormValidationState } from '@react-stately/form';
-import { SingleSelectListState } from 'react-stately';
-/** Added this for a better output, will see how this plays out */
-interface ArraySelection extends Omit<MultipleSelection, 'onSelectionChange'> {
-    onSelectionChange?: (value: Selection | Key | Key[]) => void;
-}
-export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation, LabelableProps, TextInputBase, ArraySelection, FocusableProps, OverlayTriggerProps {
+export interface MultiSelectProps<T> extends CollectionBase<T>, AsyncLoadable, Omit<InputBase, 'isReadOnly'>, Validation, LabelableProps, TextInputBase, MultipleSelection, FocusableProps, OverlayTriggerProps {
     /**
      * Whether the menu should automatically flip direction when space is limited.
      * @default true
      */
     shouldFlip?: boolean;
 }
-export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTriggerState, SingleSelectListState<T>, FormValidationState {
+export interface MultiSelectState<T> extends MultiSelectListState<T>, MenuTriggerState, FormValidationState {
     /** Whether the select is currently focused. */
     isFocused: boolean;
     /** Sets whether the select is focused. */
     setFocused(isFocused: boolean): void;
 }
 export declare function useMultiSelectState<T extends object>(props: MultiSelectProps<T>): MultiSelectState<T>;
-export {};

package/spinner/Spinner.d.ts

@@ -1,11 +1,16 @@
 export interface SpinnerProps {
-    /** Displays a smaller when set to true
+    /** Displays a smaller spinner when set to true
      * @default false
-     * */
+     */
     small?: boolean;
+    /** For use on coloured background
+     * @default false
+     */
+    isOnColor?: boolean;
     /** For use on dark background
      * @default false
-     * */
+     * @deprecated please use `isOnColor` instead
+     */
     dark?: boolean;
 }
 export declare const Spinner: React.FC<SpinnerProps>;

package/table/Table.d.ts

@@ -1,7 +1,12 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
 export interface TableProps extends AriaTableProps {
-    /** @deprecated This variant will be replaced with a new scaling api accross all components. */
+    /**
+     *  @deprecated This variant will be replaced with a new scaling api accross all components.
+     */
     narrow?: boolean;
+    /**
+     * Alternating colors for rows
+     */
     striped?: boolean;
 }
 export declare const Table: ({ narrow, striped, className, ...rest }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/table/index.d.ts

@@ -1 +1 @@
-export { Table, TableHeader, TableBody, Row, Cell, Column } from './Table';
+export * from './Table';

package/tabs/Tabs.d.ts

@@ -1,12 +1,22 @@
+import { TabsProps as AriaTabsProps } from 'react-aria-components';
 import * as React from 'react';
-export interface TabsProps<T extends string> {
-    /** An array of tab titles */
-    tabs: T[];
-    /** Lable for accecibility */
+export interface TabsProps extends Omit<AriaTabsProps, 'orientation'> {
+    /**
+     * An array of tab titles
+     */
+    tabs: string[];
+    /**
+     * Label for accessibility
+     */
     label: string;
-    /** Choose another than the first tab to be selected by default. Name must match one of the tabs */
-    defaultSelected?: T;
-    /** Amount of children must match the amount of tabs */
+    /**
+     * Amount of children must match the amount of tabs
+     */
     children: React.ReactNode;
+    /**
+     * @deprecated
+     * Please use `defaultSelectedKey` instead
+     */
+    defaultSelected?: string;
 }
-export declare const Tabs: <T extends string>({ tabs, label, defaultSelected, children }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: React.FC<TabsProps>;

package/tabs/index.d.ts

@@ -1 +1 @@
-export { Tabs } from './Tabs';
+export * from './Tabs';

package/text/Text.d.ts

@@ -1,11 +1,10 @@
 import { TextProps as AriaTextProps } from 'react-aria-components';
 import * as React from 'react';
-export type TextVariant = 'body-01' | 'body-02';
 export interface TextProps extends AriaTextProps {
     /**
      * The visual variant of the component
      */
-    variant?: TextVariant;
+    variant?: 'body-01' | 'body-02';
     /**
      * Use the external/expressive look
      */

package/textfield/TextFieldBase.d.ts

@@ -7,7 +7,8 @@ export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
     /** Specify description displayed below the label */
     description?: string;
     /** Custom error messages */
-    errorMessage?: string | ((validation: ValidationResult) => string) | undefined;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
     /**
      * Whether to show the character counter or not
      * @default

package/theme/index.d.ts

@@ -101,6 +101,11 @@ export declare const theme: {
         normal: string;
         fast: string;
     };
+    windowSizes: {
+        md: number;
+        lg: number;
+        xl: number;
+    };
     breakpoints: {
         sm: string;
         md: string;
@@ -111,9 +116,9 @@ export declare const theme: {
         prefersReducedMotion: string;
     };
     semantic: {
-        background01: string;
-        backgroundHover01: string;
-        backgroundInverse01: string;
+        background: string;
+        backgroundHover: string;
+        backgroundInverse: string;
         layer01: string;
         layerHover01: string;
         layerSelected01: string;
@@ -135,8 +140,6 @@ export declare const theme: {
         borderBrand: string;
         borderInvalid: string;
         borderDisabled: string;
-        borderSkeleton: string;
-        borderInverse: string;
         field01: string;
         fieldHover01: string;
         fieldActive01: string;
@@ -149,7 +152,6 @@ export declare const theme: {
         iconSecondary: string;
         iconInverse: string;
         iconOnColor: string;
-        iconDanger: string;
         iconDisabled: string;
         iconSuccess: string;
         iconInfo: string;
@@ -169,10 +171,9 @@ export declare const theme: {
         notificationBackgroundWarning: string;
         textPrimary: string;
         textSecondary: string;
-        textBrand: string;
+        textTertiary: string;
         textOnColor: string;
         textInverse: string;
-        textSubtle: string;
         textDisabled: string;
         textInvalid: string;
         textPlaceholder: string;
@@ -189,9 +190,14 @@ export declare const theme: {
         buttonBackgroundDangerActive: string;
         buttonBackgroundDisabled: string;
         buttonBackgroundSkeleton: string;
-        buttonBackgroundGhostHover: string;
-        buttonBackgroundGhostActive: string;
-        buttonBorderPrimary: string;
+        buttonBorderSecondary: string;
         logoPrimary: string;
     };
+    zIndex: {
+        base: number;
+        above: number;
+        modal: number;
+        toast: number;
+        skipToContent: number;
+    };
 };

package/theme/tokens.d.ts

@@ -99,6 +99,11 @@ export declare const transitions: {
     normal: string;
     fast: string;
 };
+export declare const windowSizes: {
+    md: number;
+    lg: number;
+    xl: number;
+};
 export declare const breakpoints: {
     sm: string;
     md: string;
@@ -109,9 +114,9 @@ export declare const breakpoints: {
     prefersReducedMotion: string;
 };
 export declare const semantic: {
-    background01: string;
-    backgroundHover01: string;
-    backgroundInverse01: string;
+    background: string;
+    backgroundHover: string;
+    backgroundInverse: string;
     layer01: string;
     layerHover01: string;
     layerSelected01: string;
@@ -133,8 +138,6 @@ export declare const semantic: {
     borderBrand: string;
     borderInvalid: string;
     borderDisabled: string;
-    borderSkeleton: string;
-    borderInverse: string;
     field01: string;
     fieldHover01: string;
     fieldActive01: string;
@@ -147,7 +150,6 @@ export declare const semantic: {
     iconSecondary: string;
     iconInverse: string;
     iconOnColor: string;
-    iconDanger: string;
     iconDisabled: string;
     iconSuccess: string;
     iconInfo: string;
@@ -167,10 +169,9 @@ export declare const semantic: {
     notificationBackgroundWarning: string;
     textPrimary: string;
     textSecondary: string;
-    textBrand: string;
+    textTertiary: string;
     textOnColor: string;
     textInverse: string;
-    textSubtle: string;
     textDisabled: string;
     textInvalid: string;
     textPlaceholder: string;
@@ -187,8 +188,13 @@ export declare const semantic: {
     buttonBackgroundDangerActive: string;
     buttonBackgroundDisabled: string;
     buttonBackgroundSkeleton: string;
-    buttonBackgroundGhostHover: string;
-    buttonBackgroundGhostActive: string;
-    buttonBorderPrimary: string;
+    buttonBorderSecondary: string;
     logoPrimary: string;
 };
+export declare const zIndex: {
+    base: number;
+    above: number;
+    modal: number;
+    toast: number;
+    skipToContent: number;
+};

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-DzCqA9U7.cjs"),s={...t.tokens};exports.baseColors=t.baseColors;exports.breakpoints=t.breakpoints;exports.semantic=t.semantic;exports.spacing=t.spacing;exports.states=t.states;exports.transitions=t.transitions;exports.typography=t.typography;exports.theme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-BzHPOv0Z.cjs"),s={...e.tokens};exports.baseColors=e.baseColors;exports.breakpoints=e.breakpoints;exports.semantic=e.semantic;exports.spacing=e.spacing;exports.states=e.states;exports.transitions=e.transitions;exports.typography=e.typography;exports.windowSizes=e.windowSizes;exports.zIndex=e.zIndex;exports.theme=s;

package/theme.js

@@ -1,13 +1,15 @@
-import { t as s } from "./tokens-DeYazHS9.js";
-import { b as r, f as n, s as p, c as i, d as m, e as c, a as b } from "./tokens-DeYazHS9.js";
+import { t as s } from "./tokens-f_GueHFO.js";
+import { b as n, f as r, s as i, c as p, d as m, e as c, a as b, w as d, z as f } from "./tokens-f_GueHFO.js";
 const t = { ...s };
 export {
-  r as baseColors,
-  n as breakpoints,
-  p as semantic,
-  i as spacing,
+  n as baseColors,
+  r as breakpoints,
+  i as semantic,
+  p as spacing,
   m as states,
   t as theme,
   c as transitions,
-  b as typography
+  b as typography,
+  d as windowSizes,
+  f as zIndex
 };

package/tokens-BzHPOv0Z.cjs

@@ -0,0 +1 @@
+"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue20:"#eaf2f6",signalBlue140:"#0066cc",signalGreen20:"#d5f2d9",signalGreen140:"#008d3c",signalRed20:"#ffdfdf",signalRed140:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313",signalYellow20:"#fff8e1",signalYellow140:"#fdb813"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},i={focus:"0 0 0 2px white, 0 0 0 4px black"},t={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},l={sm:`(max-width: ${e.md-1}px)`,md:`(min-width: ${e.md}px)`,lg:`(min-width: ${e.lg}px)`,xl:`(min-width: ${e.xl}px)`,forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},d={background:`light-dark(${r.white}, ${r.gray200})`,backgroundHover:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderStrong:`light-dark(${r.gray200}, ${r.gray10})`,borderMedium:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderBrand:`light-dark(${r.blue170}, ${r.blue170})`,borderInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,iconInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,iconWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,notificationBorderSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,notificationBorderInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,notificationBorderImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,notificationBorderWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,notificationBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,notificationBackgroundInfo:`light-dark(${r.signalBlue20}, ${r.gray180})`,notificationBackgroundImportant:`light-dark(${r.signalYellow20}, ${r.gray180})`,notificationBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textTertiary:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},n={base:1,above:10,modal:1e3,toast:1100,skipToContent:1200},o=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:l,semantic:d,spacing:g,states:i,transitions:t,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=l;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=t;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;

package/{tokens-DeYazHS9.js → tokens-f_GueHFO.js}

@@ -45,7 +45,7 @@ const r = {
   signalRed180: "#801313",
   signalYellow20: "#fff8e1",
   signalYellow140: "#fdb813"
-}, a = {
+}, e = {
   fontFamily: '"Inter", sans-serif',
   lineHeight01: 1,
   // 16px
@@ -94,7 +94,7 @@ const r = {
   weightBold: 700,
   weightExtraBold: 800,
   weightBlack: 900
-}, e = {
+}, g = {
   "01": "0.125rem",
   // 2px
   "02": "0.25rem",
@@ -119,24 +119,28 @@ const r = {
   // 80px
   12: "6rem"
   // 96px
-}, g = {
-  focus: "0 0 0 2px white, 0 0 0 4px black"
 }, i = {
+  focus: "0 0 0 2px white, 0 0 0 4px black"
+}, l = {
   slow: "500ms",
   normal: "300ms",
   fast: "250ms"
+}, a = {
+  md: 768,
+  lg: 1200,
+  xl: 1440
 }, t = {
-  sm: "(max-width: 767px)",
-  md: "(min-width: 768px)",
-  lg: "(min-width: 1200px)",
-  xl: "(min-width: 1440px)",
+  sm: `(max-width: ${a.md - 1}px)`,
+  md: `(min-width: ${a.md}px)`,
+  lg: `(min-width: ${a.lg}px)`,
+  xl: `(min-width: ${a.xl}px)`,
   forcedColorsMode: "(forced-colors: active)",
   darkMode: "(prefers-color-scheme: dark)",
   prefersReducedMotion: "(prefers-reduced-motion: reduced)"
-}, l = {
-  background01: `light-dark(${r.white}, ${r.gray200})`,
-  backgroundHover01: `light-dark(${r.whiteHover}, ${r.gray190})`,
-  backgroundInverse01: `light-dark(${r.gray200}, ${r.gray10})`,
+}, d = {
+  background: `light-dark(${r.white}, ${r.gray200})`,
+  backgroundHover: `light-dark(${r.whiteHover}, ${r.gray190})`,
+  backgroundInverse: `light-dark(${r.gray200}, ${r.gray10})`,
   layer01: `light-dark(${r.gray10}, ${r.gray180})`,
   layerHover01: `light-dark(${r.gray20}, ${r.gray170})`,
   layerSelected01: `light-dark(${r.gray30}, ${r.gray160})`,
@@ -158,8 +162,6 @@ const r = {
   borderBrand: `light-dark(${r.blue170}, ${r.blue170})`,
   borderInvalid: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
   borderDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
-  borderSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
-  borderInverse: `light-dark(${r.white}, ${r.gray180})`,
   field01: `light-dark(${r.gray10}, ${r.gray180})`,
   fieldHover01: `light-dark(${r.gray20}, ${r.gray170})`,
   fieldActive01: `light-dark(${r.gray30}, ${r.gray160})`,
@@ -172,7 +174,6 @@ const r = {
   iconSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
   iconInverse: `light-dark(${r.white}, ${r.gray200})`,
   iconOnColor: `light-dark(${r.white}, ${r.white})`,
-  iconDanger: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
   iconDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
   iconSuccess: `light-dark(${r.signalGreen140}, ${r.signalGreen140})`,
   iconInfo: `light-dark(${r.signalBlue140}, ${r.signalBlue140})`,
@@ -192,10 +193,9 @@ const r = {
   notificationBackgroundWarning: `light-dark(${r.signalRed20}, ${r.gray180})`,
   textPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
   textSecondary: `light-dark(${r.gray140}, ${r.gray70})`,
-  textBrand: `light-dark(${r.blue170}, ${r.gray10})`,
+  textTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
   textOnColor: `light-dark(${r.white}, ${r.white})`,
   textInverse: `light-dark(${r.gray10}, ${r.gray200})`,
-  textSubtle: `light-dark(${r.gray90}, ${r.gray90})`,
   textDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
   textInvalid: `light-dark(${r.signalRed140}, ${r.signalRed140})`,
   textPlaceholder: `light-dark(${r.gray70}, ${r.gray140})`,
@@ -212,27 +212,35 @@ const r = {
   buttonBackgroundDangerActive: `light-dark(${r.signalRed180}, ${r.signalRed180})`,
   buttonBackgroundDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
   buttonBackgroundSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
-  buttonBackgroundGhostHover: `light-dark(${r.whiteHover}, ${r.gray190})`,
-  buttonBackgroundGhostActive: `light-dark(${r.gray30}, ${r.gray190})`,
-  buttonBorderPrimary: `light-dark(${r.blue170}, ${r.gray10})`,
+  buttonBorderSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
   logoPrimary: `light-dark(${r.red100}, ${r.white})`
-}, d = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, n = {
+  base: 1,
+  above: 10,
+  modal: 1e3,
+  toast: 1100,
+  skipToContent: 1200
+}, o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   baseColors: r,
   breakpoints: t,
-  semantic: l,
-  spacing: e,
-  states: g,
-  transitions: i,
-  typography: a
+  semantic: d,
+  spacing: g,
+  states: i,
+  transitions: l,
+  typography: e,
+  windowSizes: a,
+  zIndex: n
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  a,
+  e as a,
   r as b,
-  e as c,
-  g as d,
-  i as e,
+  g as c,
+  i as d,
+  l as e,
   t as f,
-  l as s,
-  d as t
+  d as s,
+  o as t,
+  a as w,
+  n as z
 };

package/utils/test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A utility for making visual assertions in Storybook play tests based on the browsers "prefers-colors-scheme" setting
+ */
+export declare const lightDark: (light: string, dark: string) => string;

package/utils/useObserveElement.d.ts

@@ -1,4 +1,20 @@
-export default function useObserveElement(element: HTMLElement | null): {
+interface Options {
+    /**
+     * Get the observed elements size with or without padding
+     * @default false
+     */
+    includePadding?: boolean;
+    /**
+     * Time in ms between each size measure
+     * @default 500
+     */
+    delay?: number;
+}
+/**
+ * Observe an elements size change on resize
+ */
+export default function useObserveElement(element: HTMLElement | null, options?: Options): {
     width: number;
     height: number;
 };
+export {};

package/tokens-DzCqA9U7.cjs

@@ -1 +0,0 @@
-"use strict";const r={black:"#000000",white:"#ffffff",blackHover:"#0d0d0d",whiteHover:"#e6e6e6",gray10:"#f2f2f2",gray20:"#e6e6e6",gray30:"#d9d9d9",gray40:"#cccccc",gray50:"#bfbfbf",gray60:"#b3b3b3",gray70:"#a6a6a6",gray80:"#999999",gray90:"#8c8c8c",gray100:"#808080",gray110:"#737373",gray120:"#666666",gray130:"#5d5d5d",gray140:"#525252",gray150:"#474747",gray160:"#383838",gray170:"#333333",gray180:"#262626",gray190:"#212121",gray200:"#171717",blue10:"#eaf2f6",blue20:"#d5e5ed",blue40:"#abcbdb",blue60:"#82b0c9",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue140:"#25607f",blue170:"#143c50",purple80:"#b46ab4",purple140:"#954b95",red100:"#b90835",signalBlue20:"#eaf2f6",signalBlue140:"#0066cc",signalGreen20:"#d5f2d9",signalGreen140:"#008d3c",signalRed20:"#ffdfdf",signalRed140:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313",signalYellow20:"#fff8e1",signalYellow140:"#fdb813"},a={fontFamily:'"Inter", sans-serif',lineHeight01:1,lineHeight02:1.125,lineHeight03:1.25,lineHeight04:1.375,lineHeight05:1.5,lineHeight06:1.75,lineHeight07:2,lineHeight08:2.25,lineHeight09:2.5,size01:"0.75rem",size02:"0.875rem",size03:"1rem",size04:"1.125rem",size05:"1.25rem",size06:"1.5rem",size07:"1.75rem",size08:"2rem",size09:"2.25rem",size10:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},e={"01":"0.125rem","02":"0.25rem","03":"0.5rem","04":"0.75rem","05":"1rem","06":"1.5rem","07":"2rem","08":"2.5rem","09":"3rem",10:"4rem",11:"5rem",12:"6rem"},g={focus:"0 0 0 2px white, 0 0 0 4px black"},i={slow:"500ms",normal:"300ms",fast:"250ms"},t={sm:"(max-width: 767px)",md:"(min-width: 768px)",lg:"(min-width: 1200px)",xl:"(min-width: 1440px)",forcedColorsMode:"(forced-colors: active)",darkMode:"(prefers-color-scheme: dark)",prefersReducedMotion:"(prefers-reduced-motion: reduced)"},l={background01:`light-dark(${r.white}, ${r.gray200})`,backgroundHover01:`light-dark(${r.whiteHover}, ${r.gray190})`,backgroundInverse01:`light-dark(${r.gray200}, ${r.gray10})`,layer01:`light-dark(${r.gray10}, ${r.gray180})`,layerHover01:`light-dark(${r.gray20}, ${r.gray170})`,layerSelected01:`light-dark(${r.gray30}, ${r.gray160})`,layerSelectedHover01:`light-dark(${r.gray40}, ${r.gray150})`,layer02:`light-dark(${r.white}, ${r.gray160})`,layerHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,layerSelected02:`light-dark(${r.gray30}, ${r.gray140})`,layerSelectedHover02:`light-dark(${r.gray40}, ${r.gray130})`,layerAccent01:`light-dark(${r.gray30}, ${r.gray160})`,layerAccentHover01:`light-dark(${r.gray40}, ${r.gray150})`,layerAccentSelected01:`light-dark(${r.gray50}, ${r.gray140})`,layerAccent02:`light-dark(${r.gray10}, ${r.gray180})`,layerAccentHover02:`light-dark(${r.gray20}, ${r.gray170})`,layerAccentSelected02:`light-dark(${r.gray30}, ${r.gray160})`,brandPrimary:`light-dark(${r.red100}, ${r.red100})`,borderStrong:`light-dark(${r.gray200}, ${r.gray10})`,borderMedium:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderBrand:`light-dark(${r.blue170}, ${r.blue170})`,borderInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,borderDisabled:`light-dark(${r.gray50}, ${r.gray140})`,borderSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,borderInverse:`light-dark(${r.white}, ${r.gray180})`,field01:`light-dark(${r.gray10}, ${r.gray180})`,fieldHover01:`light-dark(${r.gray20}, ${r.gray170})`,fieldActive01:`light-dark(${r.gray30}, ${r.gray160})`,field02:`light-dark(${r.white}, ${r.gray160})`,fieldHover02:`light-dark(${r.whiteHover}, ${r.gray150})`,fieldActive02:`light-dark(${r.gray30}, ${r.gray140})`,fieldDisabled:`light-dark(${r.gray10}, ${r.gray180})`,fieldSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,iconPrimary:`light-dark(${r.gray200}, ${r.gray10})`,iconSecondary:`light-dark(${r.blue170}, ${r.gray10})`,iconInverse:`light-dark(${r.white}, ${r.gray200})`,iconOnColor:`light-dark(${r.white}, ${r.white})`,iconDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconDisabled:`light-dark(${r.gray50}, ${r.gray140})`,iconSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,iconInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,iconWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,iconImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,linkEnabled:`light-dark(${r.blue100}, ${r.blue90})`,linkHover:`light-dark(${r.blue170}, ${r.blue80})`,linkPressed:`light-dark(${r.gray200}, ${r.blue60})`,linkVisited:`light-dark(${r.purple140}, ${r.purple80})`,notificationBorderSuccess:`light-dark(${r.signalGreen140}, ${r.signalGreen140})`,notificationBorderInfo:`light-dark(${r.signalBlue140}, ${r.signalBlue140})`,notificationBorderImportant:`light-dark(${r.signalYellow140}, ${r.signalYellow140})`,notificationBorderWarning:`light-dark(${r.signalRed140}, ${r.signalRed140})`,notificationBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,notificationBackgroundInfo:`light-dark(${r.signalBlue20}, ${r.gray180})`,notificationBackgroundImportant:`light-dark(${r.signalYellow20}, ${r.gray180})`,notificationBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,textPrimary:`light-dark(${r.gray200}, ${r.gray10})`,textSecondary:`light-dark(${r.gray140}, ${r.gray70})`,textBrand:`light-dark(${r.blue170}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textSubtle:`light-dark(${r.gray90}, ${r.gray90})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textInvalid:`light-dark(${r.signalRed140}, ${r.signalRed140})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue170}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue140}, ${r.blue140})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue170})`,buttonBackgroundSecondary:`light-dark(${r.white}, ${r.gray200})`,buttonBackgroundSecondaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundSecondaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundTertiaryHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundTertiaryActive:`light-dark(${r.gray30}, ${r.gray180})`,buttonBackgroundDanger:`light-dark(${r.signalRed140}, ${r.signalRed140})`,buttonBackgroundDangerHover:`light-dark(${r.signalRed160}, ${r.signalRed160})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed180}, ${r.signalRed180})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundGhostHover:`light-dark(${r.whiteHover}, ${r.gray190})`,buttonBackgroundGhostActive:`light-dark(${r.gray30}, ${r.gray190})`,buttonBorderPrimary:`light-dark(${r.blue170}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`},d=Object.freeze(Object.defineProperty({__proto__:null,baseColors:r,breakpoints:t,semantic:l,spacing:e,states:g,transitions:i,typography:a},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=l;exports.spacing=e;exports.states=g;exports.tokens=d;exports.transitions=i;exports.typography=a;