@midas-ds/components 4.0.0 → 5.0.1

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.1",
   "main": "./index.cjs",
   "module": "./index.js",
   "types": "./index.d.ts",
@@ -48,9 +48,8 @@
     }
   },
   "dependencies": {
-    "@react-stately/toast": "3.0.0-beta.7",
-    "react-aria": "3.37.0",
-    "react-aria-components": "^1.6.0",
-    "react-stately": "3.35.0"
+    "react-aria": "^3.38.1",
+    "react-aria-components": "^1.7.1",
+    "react-stately": "^3.36.1"
   }
 }

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;
     };
 };