@midas-ds/components 9.0.0 → 10.1.0

package/info-banner/InfoBanner.d.ts

@@ -12,8 +12,13 @@ export interface InfoBannerProps extends React.DetailedHTMLProps<React.HTMLAttri
     children?: React.ReactNode;
     /**
      *  Specify if the InfoBanner should have a dismiss button in the top right corner
+     *  @deprecated since 10.0.1. Please use `isDismissable` instead
      */
     dismissable?: boolean;
+    /**
+     *  Specify if the InfoBanner should have a dismiss button in the top right corner
+     */
+    isDismissable?: boolean;
 }
 /**
  * Displays a static message as an inline banner

package/label/Label.d.ts

@@ -1,9 +1,3 @@
-import { LabelProps as AriaLabelProps } from 'react-aria-components';
+import { LabelProps } from 'react-aria-components';
 import * as React from 'react';
-export interface LabelProps extends AriaLabelProps {
-    /**
-     *  @deprecated since v8.2.0 Please use Label without variant for label-02, and for label-01 use Text component with slot: 'description'
-     */
-    variant?: 'label-01' | 'label-02';
-}
 export declare const Label: React.FC<LabelProps>;

package/layout/Layout.d.ts

@@ -43,9 +43,14 @@ export interface MidasLayout {
     app: App;
     /** Provide the layout with your router for client side navigation
      *
-     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/}
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/|Client side routing}
      */
     clientSideRouter?: (path: string, routerOptions: undefined) => void;
+    /**
+     * Converts a router-specific href to a native HTML href, e.g. prepending a base path.
+     * Use this if you're using React Router's `basename` option.
+     * @see {@link https://reactrouter.com/en/main/hooks/use-href/|useHref}
+     */
     clientSideHref?: (href: Href) => string;
     variant: 'internal' | 'external';
 }

package/modal/Dialog.d.ts

@@ -1,7 +1,6 @@
 import { AriaDialogProps } from 'react-aria';
 import { DialogTrigger } from 'react-aria-components';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
-import { OverlayTriggerProps } from '@react-types/overlays';
 import * as React from 'react';
 interface DialogProps extends AriaDialogProps {
     /**
@@ -10,18 +9,5 @@ interface DialogProps extends AriaDialogProps {
     title?: React.ReactNode;
     children: React.ReactNode;
 }
-/** @deprecated since v6.0.0 use Modal instead.
- * See docs {@link https://designsystem.migrationsverket.se/|Midas}
- */
-export declare const Dialog: React.FC<DialogProps>;
-/** @deprecated since v6.0.0, use DialogTrigger instead.
- * See docs {@link https://designsystem.migrationsverket.se/|Midas}
- */
-export declare const ModalTrigger: React.FC<OverlayTriggerProps & {
-    isDismissable?: boolean;
-} & {
-    children: (close: () => void) => JSX.Element;
-    label?: string | undefined;
-}>;
 export { DialogTrigger };
 export declare const Modal: React.FC<AriaModalOverlayProps & DialogProps>;

package/modal/index.d.ts

@@ -1 +1 @@
-export { Dialog, ModalTrigger, Modal, DialogTrigger } from './Dialog';
+export { Modal, DialogTrigger } from './Dialog';

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "9.0.0",
+  "version": "10.1.0",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -27,7 +27,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/migrationsverket/midas"
+    "url": "git+https://github.com/migrationsverket/midas.git",
+    "directory": "packages/components"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",
@@ -49,7 +50,7 @@
   },
   "dependencies": {
     "react-aria": "^3.38.1",
-    "react-aria-components": "^1.7.1",
+    "react-aria-components": "^1.9.0",
     "react-stately": "^3.36.1"
   }
 }

package/progress-bar/ProgressBar.d.ts

@@ -1,5 +1,4 @@
-import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
-import { LabelProps } from '../label';
+import { LabelProps, ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
 import * as React from 'react';
 interface ProgressBarProps extends AriaProgressBarProps {
     /**

package/search-field/SearchField.d.ts

@@ -1,4 +1,5 @@
 import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'isRequired'> {
     /** Placeholder text */
@@ -14,5 +15,9 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'isRequired
      */
     errorMessage?: string;
     errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 }
 export declare const SearchField: React.FC<SearchFieldProps>;

package/select/SectionedListLayout.d.ts

@@ -0,0 +1,20 @@
+import { ListLayout, ListLayoutOptions, Size } from 'react-aria-components';
+export declare class SectionedListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends ListLayout<T, O> {
+    /**
+     * When using the ListLayout our scroll container height is not calculated properly when the content is partially sectioned.
+     * ```ts
+     * const partiallySectionedContent = [
+     *  {
+     *    name: 'fruit section',
+     *    children: [{ id: 'kiwi', name: 'Kiwi' }]
+     *  },
+     *  // berries have no section, because it's optional
+     *  { id: 'lingonberries', name: 'Lingonberries' }
+     * ];
+     * ```
+     * If we load the layout info for each key in the collection the calculation is correct.
+     *
+     * This might not be optional for performance, FYI
+     */
+    getContentSize(): Size;
+}

package/select/Select.d.ts

@@ -1,9 +1,10 @@
-import { CollectionChildren } from '@react-types/shared';
+import { CollectionChildren, Key } from '@react-types/shared';
 import { useMultiSelectState } from './useMultiSelectState';
+import { Size } from '../common/types';
 import * as React from 'react';
 export type OptionItem = {
     children?: never;
-    id: string;
+    id: Key;
     name: string | React.ReactNode;
     /** Textual representation of `name` in case it is not a string. Used for searching. */
     textValue?: string;
@@ -66,6 +67,10 @@ export type SelectProps = {
     /** Name of the field, for uncontrolled use */
     name?: string;
     errorPosition?: 'top' | 'bottom';
+    /** Component size (large: height 48px, medium: height 40px)
+     *  @default 'large'
+     * */
+    size?: Size;
 };
 export declare const SelectComponent: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {

package/select/SelectListBox.d.ts

@@ -1,9 +1,7 @@
 import { MultiSelectState } from './useMultiSelectState';
 import { AriaListBoxOptions } from '@react-aria/listbox';
-import * as React from 'react';
 interface ListBoxProps<T> extends AriaListBoxOptions<T> {
-    listBoxRef?: React.RefObject<HTMLUListElement>;
     state: MultiSelectState<T>;
 }
-export declare const SelectListBox: <T>(props: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectListBox: <T>({ state, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/skeleton/Skeleton.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
-type SkeletonProps = {
-    width?: string | number;
-    height?: string | number;
-    variant?: 'circle' | 'rectangular';
-    animation?: 'wave' | false;
-};
+export interface SkeletonProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    /**
+     * Use valid CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) units
+     */
+    width?: React.CSSProperties['width'];
+    /**
+     * Use valid CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/length) units
+     */
+    height?: React.CSSProperties['height'];
+    /**
+     * Circular or rectangular Skeleton component. When using circle, only `width` is allowed to control size.
+     */
+    variant?: 'circle' | 'rectangle';
+    /**
+     * Displays the skeleton component with a wave animation
+     * @default true
+     */
+    isAnimated?: boolean;
+}
 export declare const Skeleton: React.FC<SkeletonProps>;
-export {};

package/spinner/Spinner.d.ts

@@ -7,10 +7,5 @@ export interface SpinnerProps {
      * @default false
      */
     isOnColor?: boolean;
-    /** For use on dark background
-     * @default false
-     * @deprecated since v8.0.0 please use `isOnColor` instead
-     */
-    dark?: boolean;
 }
 export declare const Spinner: React.FC<SpinnerProps>;

package/table/Table.d.ts

@@ -1,7 +1,7 @@
 import { RowProps, TableHeaderProps, ColumnProps, TableProps as AriaTableProps, CellProps, TableBody } from 'react-aria-components';
 export interface TableProps extends AriaTableProps {
     /**
-     *  @deprecated since v8.0.0 This variant will be replaced with a new scaling api accross all components.
+     *  A more compact version of the table
      */
     narrow?: boolean;
     /**

package/tabs/Tabs.d.ts

@@ -13,10 +13,5 @@ export interface TabsProps extends Omit<AriaTabsProps, 'orientation'> {
      * Amount of children must match the amount of tabs
      */
     children: React.ReactNode;
-    /**
-     * @deprecated since v8.0.0
-     * Please use `defaultSelectedKey` instead
-     */
-    defaultSelected?: string;
 }
 export declare const Tabs: React.FC<TabsProps>;

package/tag/Tag.d.ts

@@ -1,11 +1,12 @@
-import { default as React } from 'react';
 import { TagGroupProps as AriaTagGroupProps, TagProps as AriaTagProps } from 'react-aria-components';
+import * as React from 'react';
 export interface TagGroupProp extends AriaTagGroupProps {
     children: React.ReactNode;
 }
 export interface TagProps extends AriaTagProps {
     children: React.ReactNode;
     dismissable?: boolean;
+    type?: 'default' | 'success' | 'info' | 'important' | 'warning';
 }
 export declare const TagGroup: React.FC<TagGroupProp>;
 export declare const Tag: React.FC<TagProps>;

package/textfield/TextFieldBase.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps, ValidationResult } from 'react-aria-components';
+import { Size } from '../common/types';
 import * as React from 'react';
-export type Size = 'medium' | 'large';
 export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
     children?: React.ReactNode;
     /** Specify label displayed above the TextField*/

package/theme/index.d.ts

@@ -28,14 +28,18 @@ export declare const theme: {
         blue10: string;
         blue20: string;
         blue40: string;
+        blue50: string;
         blue60: string;
+        blue70: string;
         blue80: string;
         blue90: string;
         blue100: string;
-        blue140: string;
-        blue170: string;
+        blue110: string;
+        blue120: string;
+        blue130: string;
+        blue150: string;
         purple80: string;
-        purple140: string;
+        purple110: string;
         red100: string;
         signalBlue10: string;
         signalBlue100: string;
@@ -44,12 +48,26 @@ export declare const theme: {
         signalGreen100: string;
         signalYellow10: string;
         signalYellow100: string;
+        signalRed10: string;
         signalRed20: string;
         signalRed30: string;
+        signalRed40: string;
+        signalRed50: string;
+        signalRed60: string;
+        signalRed70: string;
         signalRed80: string;
+        signalRed90: string;
         signalRed100: string;
+        signalRed110: string;
+        signalRed120: string;
+        signalRed130: string;
+        signalRed140: string;
+        signalRed150: string;
         signalRed160: string;
+        signalRed170: string;
         signalRed180: string;
+        signalRed190: string;
+        signalRed200: string;
     };
     typography: {
         fontFamily: string;
@@ -142,7 +160,6 @@ export declare const theme: {
         borderSecondary: string;
         borderSubtle: string;
         borderTertiary: string;
-        borderInvalid: string;
         borderDisabled: string;
         field01: string;
         fieldHover01: string;
@@ -182,7 +199,6 @@ export declare const theme: {
         textOnColor: string;
         textInverse: string;
         textDisabled: string;
-        textInvalid: string;
         textWarning: string;
         textPlaceholder: string;
         buttonBackgroundPrimary: string;

package/theme/tokens.d.ts

@@ -26,14 +26,18 @@ export declare const baseColors: {
     blue10: string;
     blue20: string;
     blue40: string;
+    blue50: string;
     blue60: string;
+    blue70: string;
     blue80: string;
     blue90: string;
     blue100: string;
-    blue140: string;
-    blue170: string;
+    blue110: string;
+    blue120: string;
+    blue130: string;
+    blue150: string;
     purple80: string;
-    purple140: string;
+    purple110: string;
     red100: string;
     signalBlue10: string;
     signalBlue100: string;
@@ -42,12 +46,26 @@ export declare const baseColors: {
     signalGreen100: string;
     signalYellow10: string;
     signalYellow100: string;
+    signalRed10: string;
     signalRed20: string;
     signalRed30: string;
+    signalRed40: string;
+    signalRed50: string;
+    signalRed60: string;
+    signalRed70: string;
     signalRed80: string;
+    signalRed90: string;
     signalRed100: string;
+    signalRed110: string;
+    signalRed120: string;
+    signalRed130: string;
+    signalRed140: string;
+    signalRed150: string;
     signalRed160: string;
+    signalRed170: string;
     signalRed180: string;
+    signalRed190: string;
+    signalRed200: string;
 };
 export declare const typography: {
     fontFamily: string;
@@ -140,10 +158,6 @@ export declare const semantic: {
     borderSecondary: string;
     borderSubtle: string;
     borderTertiary: string;
-    /**
-     * @deprecated Deprecated in 8.2.0. Use `supportBorderWarning` instead.
-     */
-    borderInvalid: string;
     borderDisabled: string;
     field01: string;
     fieldHover01: string;
@@ -183,10 +197,6 @@ export declare const semantic: {
     textOnColor: string;
     textInverse: string;
     textDisabled: string;
-    /**
-     * @deprecated Deprecated in 8.4.0 - Please use textWarning instead.
-     */
-    textInvalid: string;
     textWarning: string;
     textPlaceholder: string;
     buttonBackgroundPrimary: string;

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-CzvFRHfr.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tokens-COoF1t17.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,5 +1,5 @@
-import { t as s } from "./tokens-n8UPYzPD.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-n8UPYzPD.js";
+import { t as s } from "./tokens-C0U7hdoO.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-C0U7hdoO.js";
 const t = { ...s };
 export {
   n as baseColors,

package/{tokens-n8UPYzPD.js → tokens-C0U7hdoO.js}

@@ -26,14 +26,18 @@ const r = {
   blue10: "#eaf2f6",
   blue20: "#d5e5ed",
   blue40: "#abcbdb",
+  blue50: "#94BCD1",
   blue60: "#82b0c9",
+  blue70: "#6CA3C0",
   blue80: "#5897b8",
   blue90: "#4289ad",
   blue100: "#2e7ca5",
-  blue140: "#25607f",
-  blue170: "#143c50",
+  blue110: "#2C7399",
+  blue120: "#29698C",
+  blue130: "#25607f",
+  blue150: "#143c50",
   purple80: "#b46ab4",
-  purple140: "#954b95",
+  purple110: "#954b95",
   red100: "#b90835",
   signalBlue10: "#eaf2f6",
   signalBlue100: "#0066cc",
@@ -42,12 +46,26 @@ const r = {
   signalGreen100: "#008d3c",
   signalYellow10: "#fff8e1",
   signalYellow100: "#fdb813",
+  signalRed10: "#ffefef",
   signalRed20: "#ffdfdf",
   signalRed30: "#fcc8c8",
+  signalRed40: "#f9b0b0",
+  signalRed50: "#f69999",
+  signalRed60: "#f38181",
+  signalRed70: "#ef6a6a",
   signalRed80: "#eb4e4e",
+  signalRed90: "#e93b3b",
   signalRed100: "#e62323",
-  signalRed160: "#b31b1b",
-  signalRed180: "#801313"
+  signalRed110: "#d12020",
+  signalRed120: "#bc1d1d",
+  signalRed130: "#a71919",
+  signalRed140: "#921616",
+  signalRed150: "#7d1313",
+  signalRed160: "#691010",
+  signalRed170: "#540d0d",
+  signalRed180: "#3f0a0a",
+  signalRed190: "#2a0606",
+  signalRed200: "#150303"
 }, a = {
   fontFamily: '"Inter", sans-serif',
   lineHeight10: 1,
@@ -124,9 +142,9 @@ const r = {
   // 80px
   120: "6rem"
   // 96px
-}, i = {
-  focus: "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"
 }, l = {
+  focus: "0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"
+}, i = {
   slow: "500ms",
   normal: "300ms",
   fast: "250ms"
@@ -164,11 +182,7 @@ const r = {
   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})`,
-  /**
-   * @deprecated Deprecated in 8.2.0. Use `supportBorderWarning` instead.
-   */
-  borderInvalid: `light-dark(${r.signalRed100}, ${r.signalRed80})`,
+  borderTertiary: `light-dark(${r.blue150}, ${r.blue100})`,
   borderDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
   field01: `light-dark(${r.gray10}, ${r.gray180})`,
   fieldHover01: `light-dark(${r.gray20}, ${r.gray170})`,
@@ -180,7 +194,7 @@ const r = {
   fieldSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
   iconPrimary: `light-dark(${r.gray200}, ${r.gray10})`,
   iconSecondary: `light-dark(${r.gray140}, ${r.gray70})`,
-  iconTertiary: `light-dark(${r.blue170}, ${r.gray10})`,
+  iconTertiary: `light-dark(${r.blue150}, ${r.gray10})`,
   iconInverse: `light-dark(${r.white}, ${r.gray200})`,
   iconOnColor: `light-dark(${r.white}, ${r.white})`,
   iconDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
@@ -188,10 +202,10 @@ const r = {
   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})`,
+  linkEnabled: `light-dark(${r.blue120}, ${r.blue70})`,
+  linkHover: `light-dark(${r.blue150}, ${r.blue50})`,
+  linkPressed: `light-dark(${r.gray200}, ${r.blue40})`,
+  linkVisited: `light-dark(${r.purple110}, ${r.purple80})`,
   supportBorderSuccess: `light-dark(${r.signalGreen100}, ${r.signalGreen100})`,
   supportBorderInfo: `light-dark(${r.signalBlue100}, ${r.signalBlue100})`,
   supportBorderImportant: `light-dark(${r.signalYellow100}, ${r.signalYellow100})`,
@@ -204,30 +218,26 @@ const r = {
   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})`,
+  textTertiary: `light-dark(${r.blue150}, ${r.gray10})`,
   textOnColor: `light-dark(${r.white}, ${r.white})`,
   textInverse: `light-dark(${r.gray10}, ${r.gray200})`,
   textDisabled: `light-dark(${r.gray50}, ${r.gray140})`,
-  /**
-   * @deprecated Deprecated in 8.4.0 - Please use textWarning instead.
-   */
-  textInvalid: `light-dark(${r.signalRed100}, ${r.signalRed80})`,
   textWarning: `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})`,
+  buttonBackgroundPrimary: `light-dark(${r.blue150}, ${r.blue100})`,
+  buttonBackgroundPrimaryHover: `light-dark(${r.blue130}, ${r.blue130})`,
+  buttonBackgroundPrimaryActive: `light-dark(${r.blue100}, ${r.blue150})`,
   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})`,
+  buttonBackgroundDangerHover: `light-dark(${r.signalRed120}, ${r.signalRed120})`,
+  buttonBackgroundDangerActive: `light-dark(${r.signalRed150}, ${r.signalRed150})`,
   buttonBackgroundDisabled: `light-dark(${r.gray10}, ${r.gray180})`,
   buttonBackgroundSkeleton: `light-dark(${r.gray10}, ${r.gray180})`,
-  buttonBorderSecondary: `light-dark(${r.blue170}, ${r.gray10})`,
+  buttonBorderSecondary: `light-dark(${r.blue150}, ${r.gray10})`,
   logoPrimary: `light-dark(${r.red100}, ${r.white})`,
   menuItemBackgroundHover: `light-dark(${r.gray20}, ${r.gray190})`,
   menuItemBackgroundSelected: `light-dark(${r.gray10}, ${r.gray180})`
@@ -243,8 +253,8 @@ const r = {
   breakpoints: t,
   semantic: d,
   spacing: g,
-  states: i,
-  transitions: l,
+  states: l,
+  transitions: i,
   typography: a,
   windowSizes: e,
   zIndex: n
@@ -253,8 +263,8 @@ export {
   a,
   r as b,
   g as c,
-  i as d,
-  l as e,
+  l as d,
+  i as e,
   t as f,
   d as s,
   o as t,

package/tokens-COoF1t17.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",blue50:"#94BCD1",blue60:"#82b0c9",blue70:"#6CA3C0",blue80:"#5897b8",blue90:"#4289ad",blue100:"#2e7ca5",blue110:"#2C7399",blue120:"#29698C",blue130:"#25607f",blue150:"#143c50",purple80:"#b46ab4",purple110:"#954b95",red100:"#b90835",signalBlue10:"#eaf2f6",signalBlue100:"#0066cc",signalGreen20:"#d5f2d9",signalGreen30:"#bae5c5",signalGreen100:"#008d3c",signalYellow10:"#fff8e1",signalYellow100:"#fdb813",signalRed10:"#ffefef",signalRed20:"#ffdfdf",signalRed30:"#fcc8c8",signalRed40:"#f9b0b0",signalRed50:"#f69999",signalRed60:"#f38181",signalRed70:"#ef6a6a",signalRed80:"#eb4e4e",signalRed90:"#e93b3b",signalRed100:"#e62323",signalRed110:"#d12020",signalRed120:"#bc1d1d",signalRed130:"#a71919",signalRed140:"#921616",signalRed150:"#7d1313",signalRed160:"#691010",signalRed170:"#540d0d",signalRed180:"#3f0a0a",signalRed190:"#2a0606",signalRed200:"#150303"},a={fontFamily:'"Inter", sans-serif',lineHeight10:1,lineHeight20:1.125,lineHeight30:1.25,lineHeight40:1.375,lineHeight50:1.5,lineHeight60:1.75,lineHeight70:2,lineHeight80:2.25,lineHeight90:2.5,lineHeight100:2.75,fontSize10:"0.75rem",fontSize20:"0.875rem",fontSize30:"1rem",fontSize40:"1.125rem",fontSize50:"1.25rem",fontSize60:"1.5rem",fontSize70:"1.75rem",fontSize80:"2rem",fontSize90:"2.25rem",fontSize100:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={10:"0.125rem",20:"0.25rem",30:"0.5rem",40:"0.75rem",50:"1rem",60:"1.5rem",70:"2rem",80:"2.5rem",90:"3rem",100:"4rem",110:"5rem",120:"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.blue150}, ${r.blue100})`,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.gray140}, ${r.gray70})`,iconTertiary:`light-dark(${r.blue150}, ${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.blue120}, ${r.blue70})`,linkHover:`light-dark(${r.blue150}, ${r.blue50})`,linkPressed:`light-dark(${r.gray200}, ${r.blue40})`,linkVisited:`light-dark(${r.purple110}, ${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.blue150}, ${r.gray10})`,textOnColor:`light-dark(${r.white}, ${r.white})`,textInverse:`light-dark(${r.gray10}, ${r.gray200})`,textDisabled:`light-dark(${r.gray50}, ${r.gray140})`,textWarning:`light-dark(${r.signalRed100}, ${r.signalRed80})`,textPlaceholder:`light-dark(${r.gray70}, ${r.gray140})`,buttonBackgroundPrimary:`light-dark(${r.blue150}, ${r.blue100})`,buttonBackgroundPrimaryHover:`light-dark(${r.blue130}, ${r.blue130})`,buttonBackgroundPrimaryActive:`light-dark(${r.blue100}, ${r.blue150})`,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.signalRed120}, ${r.signalRed120})`,buttonBackgroundDangerActive:`light-dark(${r.signalRed150}, ${r.signalRed150})`,buttonBackgroundDisabled:`light-dark(${r.gray10}, ${r.gray180})`,buttonBackgroundSkeleton:`light-dark(${r.gray10}, ${r.gray180})`,buttonBorderSecondary:`light-dark(${r.blue150}, ${r.gray10})`,logoPrimary:`light-dark(${r.red100}, ${r.white})`,menuItemBackgroundHover:`light-dark(${r.gray20}, ${r.gray190})`,menuItemBackgroundSelected:`light-dark(${r.gray10}, ${r.gray180})`},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;

package/utils/intl/index.d.ts

@@ -1,2 +1 @@
 export * from './useLocalizedStringFormatter';
-export * from './useMessageFormatter';

package/tokens-CzvFRHfr.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",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',lineHeight10:1,lineHeight20:1.125,lineHeight30:1.25,lineHeight40:1.375,lineHeight50:1.5,lineHeight60:1.75,lineHeight70:2,lineHeight80:2.25,lineHeight90:2.5,lineHeight100:2.75,fontSize10:"0.75rem",fontSize20:"0.875rem",fontSize30:"1rem",fontSize40:"1.125rem",fontSize50:"1.25rem",fontSize60:"1.5rem",fontSize70:"1.75rem",fontSize80:"2rem",fontSize90:"2.25rem",fontSize100:"2.625rem",weightThin:100,weightExtraLight:200,weightLight:300,weightRegular:400,weightMedium:500,weightSemiBold:600,weightBold:700,weightExtraBold:800,weightBlack:900},g={10:"0.125rem",20:"0.25rem",30:"0.5rem",40:"0.75rem",50:"1rem",60:"1.5rem",70:"2rem",80:"2.5rem",90:"3rem",100:"4rem",110:"5rem",120:"6rem"},i={focus:"0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white)"},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})`,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.gray140}, ${r.gray70})`,iconTertiary:`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})`,textWarning:`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})`,menuItemBackgroundHover:`light-dark(${r.gray20}, ${r.gray190})`,menuItemBackgroundSelected:`light-dark(${r.gray10}, ${r.gray180})`},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/utils/intl/useMessageFormatter.d.ts

@@ -1,11 +0,0 @@
-import { LocalizedStrings } from '@internationalized/message';
-export type FormatMessage = (key: string, variables?: {
-    [key: string]: any;
-}) => string;
-/**
- * Handles formatting ICU Message strings to create localized strings for the current locale.
- * Automatically updates when the locale changes, and handles caching of messages for performance.
- * @param strings - A mapping of languages to strings by key.
- * @deprecated since v7.0.0 - use useLocalizedStringFormatter instead.
- */
-export declare function useMessageFormatter(strings: LocalizedStrings): FormatMessage;