@midas-ds/components 7.1.0 → 8.1.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.1.0",
+  "version": "8.1.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/select/utils.d.ts

@@ -2,3 +2,10 @@ export declare const options: {
     name: string;
     id: string;
 }[];
+export declare const optionsWithSections: {
+    name: string;
+    children: {
+        name: string;
+        id: string;
+    }[];
+}[];

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

@@ -37,16 +37,19 @@ export declare const theme: {
         purple80: string;
         purple140: string;
         red100: string;
-        signalBlue20: string;
-        signalBlue140: string;
+        signalBlue10: string;
+        signalBlue100: string;
         signalGreen20: string;
-        signalGreen140: string;
+        signalGreen30: string;
+        signalGreen100: string;
+        signalYellow10: string;
+        signalYellow100: string;
         signalRed20: string;
-        signalRed140: string;
+        signalRed30: string;
+        signalRed80: string;
+        signalRed100: string;
         signalRed160: string;
         signalRed180: string;
-        signalYellow20: string;
-        signalYellow140: string;
     };
     typography: {
         fontFamily: string;
@@ -101,6 +104,11 @@ export declare const theme: {
         normal: string;
         fast: string;
     };
+    windowSizes: {
+        md: number;
+        lg: number;
+        xl: number;
+    };
     breakpoints: {
         sm: string;
         md: string;
@@ -111,9 +119,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;
@@ -129,14 +137,12 @@ export declare const theme: {
         layerAccentHover02: string;
         layerAccentSelected02: string;
         brandPrimary: string;
-        borderStrong: string;
-        borderMedium: string;
+        borderPrimary: string;
+        borderSecondary: string;
         borderSubtle: string;
-        borderBrand: string;
+        borderTertiary: string;
         borderInvalid: string;
         borderDisabled: string;
-        borderSkeleton: string;
-        borderInverse: string;
         field01: string;
         fieldHover01: string;
         fieldActive01: string;
@@ -149,7 +155,6 @@ export declare const theme: {
         iconSecondary: string;
         iconInverse: string;
         iconOnColor: string;
-        iconDanger: string;
         iconDisabled: string;
         iconSuccess: string;
         iconInfo: string;
@@ -159,20 +164,21 @@ export declare const theme: {
         linkHover: string;
         linkPressed: string;
         linkVisited: string;
-        notificationBorderSuccess: string;
-        notificationBorderInfo: string;
-        notificationBorderImportant: string;
-        notificationBorderWarning: string;
-        notificationBackgroundSuccess: string;
-        notificationBackgroundInfo: string;
-        notificationBackgroundImportant: string;
-        notificationBackgroundWarning: string;
+        supportBorderSuccess: string;
+        supportBorderInfo: string;
+        supportBorderImportant: string;
+        supportBorderWarning: string;
+        supportBackgroundSuccess: string;
+        supportBackgroundSuccessHover: string;
+        supportBackgroundInfo: string;
+        supportBackgroundImportant: string;
+        supportBackgroundWarning: string;
+        supportBackgroundWarningHover: string;
         textPrimary: string;
         textSecondary: string;
-        textBrand: string;
+        textTertiary: string;
         textOnColor: string;
         textInverse: string;
-        textSubtle: string;
         textDisabled: string;
         textInvalid: string;
         textPlaceholder: string;
@@ -189,9 +195,7 @@ export declare const theme: {
         buttonBackgroundDangerActive: string;
         buttonBackgroundDisabled: string;
         buttonBackgroundSkeleton: string;
-        buttonBackgroundGhostHover: string;
-        buttonBackgroundGhostActive: string;
-        buttonBorderPrimary: string;
+        buttonBorderSecondary: string;
         logoPrimary: string;
     };
     zIndex: {

package/theme/tokens.d.ts

@@ -35,16 +35,19 @@ export declare const baseColors: {
     purple80: string;
     purple140: string;
     red100: string;
-    signalBlue20: string;
-    signalBlue140: string;
+    signalBlue10: string;
+    signalBlue100: string;
     signalGreen20: string;
-    signalGreen140: string;
+    signalGreen30: string;
+    signalGreen100: string;
+    signalYellow10: string;
+    signalYellow100: string;
     signalRed20: string;
-    signalRed140: string;
+    signalRed30: string;
+    signalRed80: string;
+    signalRed100: string;
     signalRed160: string;
     signalRed180: string;
-    signalYellow20: string;
-    signalYellow140: string;
 };
 export declare const typography: {
     fontFamily: string;
@@ -99,6 +102,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 +117,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;
@@ -127,14 +135,12 @@ export declare const semantic: {
     layerAccentHover02: string;
     layerAccentSelected02: string;
     brandPrimary: string;
-    borderStrong: string;
-    borderMedium: string;
+    borderPrimary: string;
+    borderSecondary: string;
     borderSubtle: string;
-    borderBrand: string;
+    borderTertiary: string;
     borderInvalid: string;
     borderDisabled: string;
-    borderSkeleton: string;
-    borderInverse: string;
     field01: string;
     fieldHover01: string;
     fieldActive01: string;
@@ -147,7 +153,6 @@ export declare const semantic: {
     iconSecondary: string;
     iconInverse: string;
     iconOnColor: string;
-    iconDanger: string;
     iconDisabled: string;
     iconSuccess: string;
     iconInfo: string;
@@ -157,20 +162,21 @@ export declare const semantic: {
     linkHover: string;
     linkPressed: string;
     linkVisited: string;
-    notificationBorderSuccess: string;
-    notificationBorderInfo: string;
-    notificationBorderImportant: string;
-    notificationBorderWarning: string;
-    notificationBackgroundSuccess: string;
-    notificationBackgroundInfo: string;
-    notificationBackgroundImportant: string;
-    notificationBackgroundWarning: string;
+    supportBorderSuccess: string;
+    supportBorderInfo: string;
+    supportBorderImportant: string;
+    supportBorderWarning: string;
+    supportBackgroundSuccess: string;
+    supportBackgroundSuccessHover: string;
+    supportBackgroundInfo: string;
+    supportBackgroundImportant: string;
+    supportBackgroundWarning: string;
+    supportBackgroundWarningHover: string;
     textPrimary: string;
     textSecondary: string;
-    textBrand: string;
+    textTertiary: string;
     textOnColor: string;
     textInverse: string;
-    textSubtle: string;
     textDisabled: string;
     textInvalid: string;
     textPlaceholder: string;
@@ -187,9 +193,7 @@ export declare const semantic: {
     buttonBackgroundDangerActive: string;
     buttonBackgroundDisabled: string;
     buttonBackgroundSkeleton: string;
-    buttonBackgroundGhostHover: string;
-    buttonBackgroundGhostActive: string;
-    buttonBorderPrimary: string;
+    buttonBorderSecondary: string;
     logoPrimary: string;
 };
 export declare const zIndex: {

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-CG8BaZyJ.cjs"),e={...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.zIndex=t.zIndex;exports.theme=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-B0IQe84F.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,14 +1,15 @@
-import { t as s } from "./tokens-XrriCAqI.js";
-import { b as r, f as n, s as p, c as i, d as m, e as c, a as b, z as f } from "./tokens-XrriCAqI.js";
+import { t as s } from "./tokens-BWq37Xsh.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-BWq37Xsh.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,
+  d as windowSizes,
   f as zIndex
 };

package/toggle-button/ToggleButton.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButtonProps } from 'react-aria-components';
+export declare const ToggleButton: React.FC<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle-button/ToggleButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButtonGroupProps } from 'react-aria-components';
+import * as React from 'react';
+export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';

package/tokens-B0IQe84F.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",signalBlue10:"#eaf2f6",signalBlue100:"#0066cc",signalGreen20:"#d5f2d9",signalGreen30:"#bae5c5",signalGreen100:"#008d3c",signalYellow10:"#fff8e1",signalYellow100:"#fdb813",signalRed20:"#ffdfdf",signalRed30:"#fcc8c8",signalRed80:"#eb4e4e",signalRed100:"#e62323",signalRed160:"#b31b1b",signalRed180:"#801313"},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 light-dark(white, black), 0 0 0 4px light-dark(black, white)"},l={slow:"500ms",normal:"300ms",fast:"250ms"},e={md:768,lg:1200,xl:1440},t={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})`,borderPrimary:`light-dark(${r.gray200}, ${r.gray10})`,borderSecondary:`light-dark(${r.gray110}, ${r.gray90})`,borderSubtle:`light-dark(${r.gray50}, ${r.gray160})`,borderTertiary:`light-dark(${r.blue170}, ${r.blue100})`,borderInvalid:`light-dark(${r.signalRed100}, ${r.signalRed80})`,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.signalGreen100}, ${r.signalGreen100})`,iconInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,iconWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,iconImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,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})`,supportBorderSuccess:`light-dark(${r.signalGreen100}, ${r.signalGreen100})`,supportBorderInfo:`light-dark(${r.signalBlue100}, ${r.signalBlue100})`,supportBorderImportant:`light-dark(${r.signalYellow100}, ${r.signalYellow100})`,supportBorderWarning:`light-dark(${r.signalRed100}, ${r.signalRed100})`,supportBackgroundSuccess:`light-dark(${r.signalGreen20}, ${r.gray180})`,supportBackgroundSuccessHover:`light-dark(${r.signalGreen30}, ${r.gray170})`,supportBackgroundInfo:`light-dark(${r.signalBlue10}, ${r.gray180})`,supportBackgroundImportant:`light-dark(${r.signalYellow10}, ${r.gray180})`,supportBackgroundWarning:`light-dark(${r.signalRed20}, ${r.gray180})`,supportBackgroundWarningHover:`light-dark(${r.signalRed30}, ${r.gray170})`,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.signalRed100}, ${r.signalRed80})`,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.signalRed100}, ${r.signalRed100})`,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:t,semantic:d,spacing:g,states:i,transitions:l,typography:a,windowSizes:e,zIndex:n},Symbol.toStringTag,{value:"Module"}));exports.baseColors=r;exports.breakpoints=t;exports.semantic=d;exports.spacing=g;exports.states=i;exports.tokens=o;exports.transitions=l;exports.typography=a;exports.windowSizes=e;exports.zIndex=n;