@midas-ds/components 4.0.0 → 5.0.0

package/label/Label.d.ts

@@ -0,0 +1,10 @@
+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;
+}
+export declare const Label: React.FC<LabelProps>;

package/label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

package/logo/Logo.d.ts

@@ -8,8 +8,6 @@ export interface LogoProps extends React.DetailedHTMLProps<React.HTMLAttributes<
      * Specify logo size
      */
     size?: 'x-small' | 'small' | 'medium' | 'large';
-    /** Display background fill using selected primary or dark color */
-    background?: boolean;
     /** There must be whitespace around the logo. By disabling our built in padding you must add at least an equal amount yourself. */
     padding?: boolean;
 }

package/package.json

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

package/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,19 @@
+import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
+import { LabelProps } from '../label';
+import * as React from 'react';
+interface ProgressBarProps extends AriaProgressBarProps {
+    /**
+     * A visual label
+     * */
+    label?: string;
+    /**
+     * Props for the visual label and/or the value label
+     * */
+    labelProps?: LabelProps;
+    /**
+     * Show the value label
+     */
+    showValueLabel?: boolean;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+export {};

package/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/select/SelectPopover.d.ts

@@ -6,5 +6,5 @@ type PopoverProps = {
     onClose: () => void;
     triggerRef: React.RefObject<HTMLButtonElement>;
 };
-export declare const SelectPopover: React.VFC<PopoverProps>;
+export declare const SelectPopover: React.FC<PopoverProps>;
 export {};

package/text/Text.d.ts

@@ -0,0 +1,14 @@
+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;
+    /**
+     * Use the external/expressive look
+     */
+    isExpressive?: boolean;
+}
+export declare const Text: React.FC<TextProps>;

package/text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/textfield/TextField.d.ts

@@ -21,4 +21,5 @@ export declare const TextField: React.FC<TextFieldProps>;
 type InputWrapperProps = Pick<TextFieldProps, 'label' | 'description' | 'errorMessage' | 'children'>;
 export declare const InputWrapper: ({ label, description, errorMessage, children, }: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ssnRegEx: RegExp;
+export declare const dossNrRegEx: RegExp;
 export {};

package/theme/index.d.ts

@@ -1,8 +1,10 @@
 export * from './tokens';
 export declare const theme: {
     baseColors: {
-        white: string;
         black: string;
+        white: string;
+        blackHover: string;
+        whiteHover: string;
         gray10: string;
         gray20: string;
         gray30: string;
@@ -13,23 +15,18 @@ export declare const theme: {
         gray80: string;
         gray90: string;
         gray100: string;
+        gray110: string;
+        gray120: string;
         gray130: string;
+        gray140: string;
         gray150: string;
-        red10: string;
-        red20: string;
-        red30: string;
-        red40: string;
-        red50: string;
-        red60: string;
-        red70: string;
-        red80: string;
-        red90: string;
-        red100: string;
-        red130: string;
-        red150: string;
+        gray160: string;
+        gray170: string;
+        gray180: string;
+        gray190: string;
+        gray200: string;
         blue10: string;
         blue20: string;
-        blue30: string;
         blue40: string;
         blue50: string;
         blue60: string;
@@ -37,102 +34,166 @@ export declare const theme: {
         blue80: string;
         blue90: string;
         blue100: string;
-        blue130: string;
-        blue150: string;
-    };
-    buttonColors: {
-        outline: string;
-        primaryBackground: string;
-        primaryText: string;
-        primaryHover: string;
-        primaryFocus: string;
-        primaryActive: string;
-        secondaryBackground: string;
-        secondaryText: string;
-        secondaryHover: string;
-        secondaryActive: string;
-    };
-    inputColor: {
-        inputText: string;
-    };
-    signalColors: {
-        signalGreen10: string;
-        signalGreen100: string;
-        signalBlue10: string;
-        signalBlue100: string;
-        signalYellow10: string;
-        signalYellow100: string;
-        signalRed10: string;
-        signalRed100: string;
-        signalRed130: string;
-        signalRed150: string;
-    };
-    borderRadius: {
-        sRadius: string;
-        mRadius: string;
-    };
-    borderWidths: {
-        xsWidth: string;
-        sWidth: string;
-        mWidth: string;
+        blue140: string;
+        blue170: string;
+        purple80: string;
+        purple140: string;
+        red100: string;
+        signalBlue20: string;
+        signalBlue140: string;
+        signalGreen20: string;
+        signalGreen140: string;
+        signalRed20: string;
+        signalRed140: string;
+        signalRed160: string;
+        signalRed180: string;
+        signalYellow20: string;
+        signalYellow140: string;
     };
-    fontWeights: {
-        lightWeight: string;
-        regularWeight: string;
-        mediumWeight: string;
-        semiBoldWeight: string;
-        boldWeight: string;
-        blackWeight: string;
+    typography: {
+        fontFamily: string;
+        lineHeight01: number;
+        lineHeight02: number;
+        lineHeight03: number;
+        lineHeight04: number;
+        lineHeight05: number;
+        lineHeight06: number;
+        lineHeight07: number;
+        lineHeight08: number;
+        lineHeight09: number;
+        size01: string;
+        size02: string;
+        size03: string;
+        size04: string;
+        size05: string;
+        size06: string;
+        size07: string;
+        size08: string;
+        size09: string;
+        size10: string;
+        weightThin: number;
+        weightExtraLight: number;
+        weightLight: number;
+        weightRegular: number;
+        weightMedium: number;
+        weightSemiBold: number;
+        weightBold: number;
+        weightExtraBold: number;
+        weightBlack: number;
     };
-    fontSizes: {
-        desktopSize: string;
-        mobileSize: string;
-        largeSize: string;
-        inputNormalSize: string;
-        inputMessageSize: string;
-        inputLabelSize: string;
-        inputDescriptionSize: string;
+    spacing: {
+        '01': string;
+        '02': string;
+        '03': string;
+        '04': string;
+        '05': string;
+        '06': string;
+        '07': string;
+        '08': string;
+        '09': string;
+        '10': string;
+        '11': string;
+        '12': string;
     };
-    midasColors: {
-        logoPrimary: string;
-        logoSecondary: string;
-        textPrimary: string;
-        textSecondary: string;
-        textTertiary: string;
-        link: string;
-        linkVisited: string;
-        backgroundPrimary: string;
-        backgroundSecondary: string;
-        backgroundFooter1: string;
-        backgroundFooter2: string;
-        backgroundInfo: string;
-        backgroundImportant: string;
-        borderPrimary: string;
-        borderSecondary: string;
-        borderFocusOuter: string;
-        borderFocusInner: string;
-        iconPrimary: string;
-        iconInverted: string;
+    states: {
+        focus: string;
     };
-    midasTransitions: {
-        slowTransition: string;
-        normalTransition: string;
-        fastTransition: string;
+    transitions: {
+        slow: string;
+        normal: string;
+        fast: string;
     };
     breakpoints: {
-        smBreakpoint: string;
-        mdBreakpoint: string;
-        lgBreakpoint: string;
-        xlBreakpoint: string;
-    };
-    accessibility: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         forcedColorsMode: string;
+        darkMode: string;
         prefersReducedMotion: string;
     };
-    font: {
-        display: string;
-    };
-    boxShadow: {
-        focus: string;
+    semantic: {
+        background01: string;
+        backgroundHover01: string;
+        backgroundInverse01: string;
+        layer01: string;
+        layerHover01: string;
+        layerSelected01: string;
+        layerSelectedHover01: string;
+        layer02: string;
+        layerHover02: string;
+        layerSelected02: string;
+        layerSelectedHover02: string;
+        layerAccent01: string;
+        layerAccentHover01: string;
+        layerAccentSelected01: string;
+        layerAccent02: string;
+        layerAccentHover02: string;
+        layerAccentSelected02: string;
+        brandPrimary: string;
+        borderStrong: string;
+        borderMedium: string;
+        borderSubtle: string;
+        borderBrand: string;
+        borderInvalid: string;
+        borderDisabled: string;
+        borderSkeleton: string;
+        borderInverse: string;
+        field01: string;
+        fieldHover01: string;
+        fieldActive01: string;
+        field02: string;
+        fieldHover02: string;
+        fieldActive02: string;
+        fieldDisabled: string;
+        fieldSkeleton: string;
+        iconPrimary: string;
+        iconSecondary: string;
+        iconInverse: string;
+        iconOnColor: string;
+        iconDanger: string;
+        iconDisabled: string;
+        iconSuccess: string;
+        iconInfo: string;
+        iconWarning: string;
+        iconImportant: string;
+        linkEnabled: string;
+        linkHover: string;
+        linkPressed: string;
+        linkVisited: string;
+        notificationBorderSuccess: string;
+        notificationBorderInfo: string;
+        notificationBorderImportant: string;
+        notificationBorderWarning: string;
+        notificationBackgroundSuccess: string;
+        notificationBackgroundInfo: string;
+        notificationBackgroundImportant: string;
+        notificationBackgroundWarning: string;
+        textPrimary: string;
+        textSecondary: string;
+        textBrand: string;
+        textOnColor: string;
+        textInverse: string;
+        textSubtle: string;
+        textDisabled: string;
+        textInvalid: string;
+        textPlaceholder: string;
+        buttonBackgroundPrimary: string;
+        buttonBackgroundPrimaryHover: string;
+        buttonBackgroundPrimaryActive: string;
+        buttonBackgroundSecondary: string;
+        buttonBackgroundSecondaryHover: string;
+        buttonBackgroundSecondaryActive: string;
+        buttonBackgroundTertiaryHover: string;
+        buttonBackgroundTertiaryActive: string;
+        buttonBackgroundDanger: string;
+        buttonBackgroundDangerHover: string;
+        buttonBackgroundDangerActive: string;
+        buttonBackgroundDisabled: string;
+        buttonBackgroundSkeleton: string;
+        buttonBackgroundGhostHover: string;
+        buttonBackgroundGhostActive: string;
+        buttonBorderPrimary: string;
+        logoPrimary: string;
     };
 };

package/theme/tokens.d.ts

@@ -1,6 +1,8 @@
 export declare const baseColors: {
-    white: string;
     black: string;
+    white: string;
+    blackHover: string;
+    whiteHover: string;
     gray10: string;
     gray20: string;
     gray30: string;
@@ -11,23 +13,18 @@ export declare const baseColors: {
     gray80: string;
     gray90: string;
     gray100: string;
+    gray110: string;
+    gray120: string;
     gray130: string;
+    gray140: string;
     gray150: string;
-    red10: string;
-    red20: string;
-    red30: string;
-    red40: string;
-    red50: string;
-    red60: string;
-    red70: string;
-    red80: string;
-    red90: string;
-    red100: string;
-    red130: string;
-    red150: string;
+    gray160: string;
+    gray170: string;
+    gray180: string;
+    gray190: string;
+    gray200: string;
     blue10: string;
     blue20: string;
-    blue30: string;
     blue40: string;
     blue50: string;
     blue60: string;
@@ -35,101 +32,165 @@ export declare const baseColors: {
     blue80: string;
     blue90: string;
     blue100: string;
-    blue130: string;
-    blue150: string;
-};
-export declare const buttonColors: {
-    outline: string;
-    primaryBackground: string;
-    primaryText: string;
-    primaryHover: string;
-    primaryFocus: string;
-    primaryActive: string;
-    secondaryBackground: string;
-    secondaryText: string;
-    secondaryHover: string;
-    secondaryActive: string;
-};
-export declare const inputColor: {
-    inputText: string;
-};
-export declare const signalColors: {
-    signalGreen10: string;
-    signalGreen100: string;
-    signalBlue10: string;
-    signalBlue100: string;
-    signalYellow10: string;
-    signalYellow100: string;
-    signalRed10: string;
-    signalRed100: string;
-    signalRed130: string;
-    signalRed150: string;
-};
-export declare const borderRadius: {
-    sRadius: string;
-    mRadius: string;
-};
-export declare const borderWidths: {
-    xsWidth: string;
-    sWidth: string;
-    mWidth: string;
+    blue140: string;
+    blue170: string;
+    purple80: string;
+    purple140: string;
+    red100: string;
+    signalBlue20: string;
+    signalBlue140: string;
+    signalGreen20: string;
+    signalGreen140: string;
+    signalRed20: string;
+    signalRed140: string;
+    signalRed160: string;
+    signalRed180: string;
+    signalYellow20: string;
+    signalYellow140: string;
 };
-export declare const fontWeights: {
-    lightWeight: string;
-    regularWeight: string;
-    mediumWeight: string;
-    semiBoldWeight: string;
-    boldWeight: string;
-    blackWeight: string;
+export declare const typography: {
+    fontFamily: string;
+    lineHeight01: number;
+    lineHeight02: number;
+    lineHeight03: number;
+    lineHeight04: number;
+    lineHeight05: number;
+    lineHeight06: number;
+    lineHeight07: number;
+    lineHeight08: number;
+    lineHeight09: number;
+    size01: string;
+    size02: string;
+    size03: string;
+    size04: string;
+    size05: string;
+    size06: string;
+    size07: string;
+    size08: string;
+    size09: string;
+    size10: string;
+    weightThin: number;
+    weightExtraLight: number;
+    weightLight: number;
+    weightRegular: number;
+    weightMedium: number;
+    weightSemiBold: number;
+    weightBold: number;
+    weightExtraBold: number;
+    weightBlack: number;
 };
-export declare const fontSizes: {
-    desktopSize: string;
-    mobileSize: string;
-    largeSize: string;
-    inputNormalSize: string;
-    inputMessageSize: string;
-    inputLabelSize: string;
-    inputDescriptionSize: string;
+export declare const spacing: {
+    '01': string;
+    '02': string;
+    '03': string;
+    '04': string;
+    '05': string;
+    '06': string;
+    '07': string;
+    '08': string;
+    '09': string;
+    '10': string;
+    '11': string;
+    '12': string;
 };
-export declare const midasColors: {
-    logoPrimary: string;
-    logoSecondary: string;
-    textPrimary: string;
-    textSecondary: string;
-    textTertiary: string;
-    link: string;
-    linkVisited: string;
-    backgroundPrimary: string;
-    backgroundSecondary: string;
-    backgroundFooter1: string;
-    backgroundFooter2: string;
-    backgroundInfo: string;
-    backgroundImportant: string;
-    borderPrimary: string;
-    borderSecondary: string;
-    borderFocusOuter: string;
-    borderFocusInner: string;
-    iconPrimary: string;
-    iconInverted: string;
+export declare const states: {
+    focus: string;
 };
-export declare const midasTransitions: {
-    slowTransition: string;
-    normalTransition: string;
-    fastTransition: string;
+export declare const transitions: {
+    slow: string;
+    normal: string;
+    fast: string;
 };
 export declare const breakpoints: {
-    smBreakpoint: string;
-    mdBreakpoint: string;
-    lgBreakpoint: string;
-    xlBreakpoint: string;
-};
-export declare const accessibility: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
     forcedColorsMode: string;
+    darkMode: string;
     prefersReducedMotion: string;
 };
-export declare const font: {
-    display: string;
-};
-export declare const boxShadow: {
-    focus: string;
+export declare const semantic: {
+    background01: string;
+    backgroundHover01: string;
+    backgroundInverse01: string;
+    layer01: string;
+    layerHover01: string;
+    layerSelected01: string;
+    layerSelectedHover01: string;
+    layer02: string;
+    layerHover02: string;
+    layerSelected02: string;
+    layerSelectedHover02: string;
+    layerAccent01: string;
+    layerAccentHover01: string;
+    layerAccentSelected01: string;
+    layerAccent02: string;
+    layerAccentHover02: string;
+    layerAccentSelected02: string;
+    brandPrimary: string;
+    borderStrong: string;
+    borderMedium: string;
+    borderSubtle: string;
+    borderBrand: string;
+    borderInvalid: string;
+    borderDisabled: string;
+    borderSkeleton: string;
+    borderInverse: string;
+    field01: string;
+    fieldHover01: string;
+    fieldActive01: string;
+    field02: string;
+    fieldHover02: string;
+    fieldActive02: string;
+    fieldDisabled: string;
+    fieldSkeleton: string;
+    iconPrimary: string;
+    iconSecondary: string;
+    iconInverse: string;
+    iconOnColor: string;
+    iconDanger: string;
+    iconDisabled: string;
+    iconSuccess: string;
+    iconInfo: string;
+    iconWarning: string;
+    iconImportant: string;
+    linkEnabled: string;
+    linkHover: string;
+    linkPressed: string;
+    linkVisited: string;
+    notificationBorderSuccess: string;
+    notificationBorderInfo: string;
+    notificationBorderImportant: string;
+    notificationBorderWarning: string;
+    notificationBackgroundSuccess: string;
+    notificationBackgroundInfo: string;
+    notificationBackgroundImportant: string;
+    notificationBackgroundWarning: string;
+    textPrimary: string;
+    textSecondary: string;
+    textBrand: string;
+    textOnColor: string;
+    textInverse: string;
+    textSubtle: string;
+    textDisabled: string;
+    textInvalid: string;
+    textPlaceholder: string;
+    buttonBackgroundPrimary: string;
+    buttonBackgroundPrimaryHover: string;
+    buttonBackgroundPrimaryActive: string;
+    buttonBackgroundSecondary: string;
+    buttonBackgroundSecondaryHover: string;
+    buttonBackgroundSecondaryActive: string;
+    buttonBackgroundTertiaryHover: string;
+    buttonBackgroundTertiaryActive: string;
+    buttonBackgroundDanger: string;
+    buttonBackgroundDangerHover: string;
+    buttonBackgroundDangerActive: string;
+    buttonBackgroundDisabled: string;
+    buttonBackgroundSkeleton: string;
+    buttonBackgroundGhostHover: string;
+    buttonBackgroundGhostActive: string;
+    buttonBorderPrimary: string;
+    logoPrimary: string;
 };

package/theme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./tokens-BskyMDHv.cjs"),s={...o.tokens};exports.accessibility=o.accessibility;exports.baseColors=o.baseColors;exports.borderRadius=o.borderRadius;exports.borderWidths=o.borderWidths;exports.boxShadow=o.boxShadow;exports.breakpoints=o.breakpoints;exports.buttonColors=o.buttonColors;exports.font=o.font;exports.fontSizes=o.fontSizes;exports.fontWeights=o.fontWeights;exports.inputColor=o.inputColor;exports.midasColors=o.midasColors;exports.midasTransitions=o.midasTransitions;exports.signalColors=o.signalColors;exports.theme=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./tokens-DZsQgihc.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;