@arkitektbedriftene/fe-lib 4.3.3 → 5.1.1

package/dist/ui/components/Badge.d.ts

@@ -1,117 +1,117 @@
-export declare const Badge: import("@stitches/react/types/styled-component").StyledComponent<"span", {
+export declare const Badge: import('@stitches/react/types/styled-component').StyledComponent<"span", {
     color?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
 }, {
     lg: "(min-width: 1200px)";
     print: "print";
-}, import("@stitches/react/types/css-util").CSS<{
+}, import('@stitches/react/types/css-util').CSS<{
     lg: "(min-width: 1200px)";
     print: "print";
 }, {
     colors: {
-        gray50: string;
-        gray100: string;
-        gray200: string;
-        gray300: string;
-        gray400: string;
-        gray500: string;
-        gray600: string;
-        gray700: string;
-        gray800: string;
-        gray900: string;
-        blue50: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        yellow50: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        orange500: string;
-        red50: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        green50: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        primaryTextOnLightBg: string;
-        primaryBg: string;
-        primaryBgHover: string;
-        primaryTextOnWhite: string;
-        bodyGray: string;
-        hoverDarker: string;
-        borderDarker: string;
-        selectedDarker: string;
-        selectedOnBodyGray: string;
-        darkGrayBg: string;
-        border: string;
-        text: string;
-        secondaryText: string;
-        focusRing: string;
+        gray50: "#F9FAFA";
+        gray100: "#EBEEEE";
+        gray200: "#CFD6D7";
+        gray300: "#B3BEC0";
+        gray400: "#97A6A8";
+        gray500: "#7C8E91";
+        gray600: "#627578";
+        gray700: "#4F5F61";
+        gray800: "#414D4F";
+        gray900: "#2C3435";
+        blue50: "#F7FBFB";
+        blue100: "#E3F0F2";
+        blue200: "#BADADF";
+        blue300: "#92C5CC";
+        blue400: "#67AEB8";
+        blue500: "#3C97A3";
+        blue600: "#1F7D8A";
+        blue700: "#19656F";
+        blue800: "#14525B";
+        blue900: "#0E383E";
+        yellow50: "#FDFAEF";
+        yellow100: "#F9EDCA";
+        yellow200: "#EFD27A";
+        yellow300: "#E5B626";
+        yellow400: "#C89E1C";
+        yellow500: "#AA8618";
+        yellow600: "#8C6E14";
+        yellow700: "#715910";
+        yellow800: "#5C490D";
+        yellow900: "#3E3109";
+        orange500: "#D1721C";
+        red50: "#FDF9F9";
+        red100: "#F7EBEB";
+        red200: "#EBCECD";
+        red300: "#DFB1B0";
+        red400: "#D39392";
+        red500: "#C67473";
+        red600: "#B85250";
+        red700: "#A92F2D";
+        red800: "#901F1E";
+        red900: "#631614";
+        green50: "#F8FAF9";
+        green100: "#E7F0EA";
+        green200: "#C5D9CB";
+        green300: "#A4C4AD";
+        green400: "#82AD8D";
+        green500: "#60976F";
+        green600: "#3C7F4E";
+        green700: "#296839";
+        green800: "#21552F";
+        green900: "#163920";
+        primaryTextOnLightBg: "#194b58";
+        primaryBg: "$blue600";
+        primaryBgHover: "$blue700";
+        primaryTextOnWhite: "$blue600";
+        bodyGray: "$gray100";
+        hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
+        selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
+        darkGrayBg: "#1f2937";
+        border: "hsl(214deg, 25%, 80%)";
+        text: "#1f2937";
+        secondaryText: "$gray500";
+        focusRing: "hsla(214deg, 15%, 10%, 0.6)";
     };
     fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
+        xs: "0.75rem";
+        sm: "0.875rem";
+        md: "1rem";
+        lg: "1.125rem";
+        xl: "1.25rem";
+        "2xl": "1.5rem";
+        "3xl": "1.875rem";
     };
     fontWeights: {
-        normal: string;
-        medium: string;
-        bold: string;
+        normal: "var(--ui-font-weight-normal)";
+        medium: "var(--ui-font-weight-semibold)";
+        bold: "var(--ui-font-weight-bold)";
     };
     space: {
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        6: string;
-        8: string;
+        1: "0.25rem";
+        2: "0.5rem";
+        3: "0.75rem";
+        4: "1rem";
+        6: "1.5rem";
+        8: "2rem";
     };
     shadows: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        overlayCard: string;
+        xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        overlayCard: "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
     };
     radii: {
-        xs: string;
-        sm: string;
-        md: string;
-        mdmd: string;
-        full: string;
+        xs: "0.125rem";
+        sm: "0.25rem";
+        md: "0.5rem";
+        mdmd: "calc(0.5rem - 0.125rem)";
+        full: "9999px";
     };
     zIndices: {
         toast: number;
         overlayCard: number;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+}, import('@stitches/react/types/config').DefaultThemeMap, {}>>;

package/dist/ui/components/Box.d.ts

@@ -1,115 +1,115 @@
-export declare const Box: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const Box: import('@stitches/react/types/styled-component').StyledComponent<"div", {}, {
     lg: "(min-width: 1200px)";
     print: "print";
-}, import("@stitches/react/types/css-util").CSS<{
+}, import('@stitches/react/types/css-util').CSS<{
     lg: "(min-width: 1200px)";
     print: "print";
 }, {
     colors: {
-        gray50: string;
-        gray100: string;
-        gray200: string;
-        gray300: string;
-        gray400: string;
-        gray500: string;
-        gray600: string;
-        gray700: string;
-        gray800: string;
-        gray900: string;
-        blue50: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        yellow50: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        orange500: string;
-        red50: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        green50: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        primaryTextOnLightBg: string;
-        primaryBg: string;
-        primaryBgHover: string;
-        primaryTextOnWhite: string;
-        bodyGray: string;
-        hoverDarker: string;
-        borderDarker: string;
-        selectedDarker: string;
-        selectedOnBodyGray: string;
-        darkGrayBg: string;
-        border: string;
-        text: string;
-        secondaryText: string;
-        focusRing: string;
+        gray50: "#F9FAFA";
+        gray100: "#EBEEEE";
+        gray200: "#CFD6D7";
+        gray300: "#B3BEC0";
+        gray400: "#97A6A8";
+        gray500: "#7C8E91";
+        gray600: "#627578";
+        gray700: "#4F5F61";
+        gray800: "#414D4F";
+        gray900: "#2C3435";
+        blue50: "#F7FBFB";
+        blue100: "#E3F0F2";
+        blue200: "#BADADF";
+        blue300: "#92C5CC";
+        blue400: "#67AEB8";
+        blue500: "#3C97A3";
+        blue600: "#1F7D8A";
+        blue700: "#19656F";
+        blue800: "#14525B";
+        blue900: "#0E383E";
+        yellow50: "#FDFAEF";
+        yellow100: "#F9EDCA";
+        yellow200: "#EFD27A";
+        yellow300: "#E5B626";
+        yellow400: "#C89E1C";
+        yellow500: "#AA8618";
+        yellow600: "#8C6E14";
+        yellow700: "#715910";
+        yellow800: "#5C490D";
+        yellow900: "#3E3109";
+        orange500: "#D1721C";
+        red50: "#FDF9F9";
+        red100: "#F7EBEB";
+        red200: "#EBCECD";
+        red300: "#DFB1B0";
+        red400: "#D39392";
+        red500: "#C67473";
+        red600: "#B85250";
+        red700: "#A92F2D";
+        red800: "#901F1E";
+        red900: "#631614";
+        green50: "#F8FAF9";
+        green100: "#E7F0EA";
+        green200: "#C5D9CB";
+        green300: "#A4C4AD";
+        green400: "#82AD8D";
+        green500: "#60976F";
+        green600: "#3C7F4E";
+        green700: "#296839";
+        green800: "#21552F";
+        green900: "#163920";
+        primaryTextOnLightBg: "#194b58";
+        primaryBg: "$blue600";
+        primaryBgHover: "$blue700";
+        primaryTextOnWhite: "$blue600";
+        bodyGray: "$gray100";
+        hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
+        selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
+        darkGrayBg: "#1f2937";
+        border: "hsl(214deg, 25%, 80%)";
+        text: "#1f2937";
+        secondaryText: "$gray500";
+        focusRing: "hsla(214deg, 15%, 10%, 0.6)";
     };
     fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
+        xs: "0.75rem";
+        sm: "0.875rem";
+        md: "1rem";
+        lg: "1.125rem";
+        xl: "1.25rem";
+        "2xl": "1.5rem";
+        "3xl": "1.875rem";
     };
     fontWeights: {
-        normal: string;
-        medium: string;
-        bold: string;
+        normal: "var(--ui-font-weight-normal)";
+        medium: "var(--ui-font-weight-semibold)";
+        bold: "var(--ui-font-weight-bold)";
     };
     space: {
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        6: string;
-        8: string;
+        1: "0.25rem";
+        2: "0.5rem";
+        3: "0.75rem";
+        4: "1rem";
+        6: "1.5rem";
+        8: "2rem";
     };
     shadows: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        overlayCard: string;
+        xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        overlayCard: "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
     };
     radii: {
-        xs: string;
-        sm: string;
-        md: string;
-        mdmd: string;
-        full: string;
+        xs: "0.125rem";
+        sm: "0.25rem";
+        md: "0.5rem";
+        mdmd: "calc(0.5rem - 0.125rem)";
+        full: "9999px";
     };
     zIndices: {
         toast: number;
         overlayCard: number;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+}, import('@stitches/react/types/config').DefaultThemeMap, {}>>;

package/dist/ui/components/Button.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-declare const ButtonStyled: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+declare const ButtonStyled: import('@stitches/react/types/styled-component').StyledComponent<"button", {
     color?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "transparent" | "primary" | undefined;
@@ -7,121 +6,121 @@ declare const ButtonStyled: import("@stitches/react/types/styled-component").Sty
 }, {
     lg: "(min-width: 1200px)";
     print: "print";
-}, import("@stitches/react/types/css-util").CSS<{
+}, import('@stitches/react/types/css-util').CSS<{
     lg: "(min-width: 1200px)";
     print: "print";
 }, {
     colors: {
-        gray50: string;
-        gray100: string;
-        gray200: string;
-        gray300: string;
-        gray400: string;
-        gray500: string;
-        gray600: string;
-        gray700: string;
-        gray800: string;
-        gray900: string;
-        blue50: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        yellow50: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        orange500: string;
-        red50: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        green50: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        primaryTextOnLightBg: string;
-        primaryBg: string;
-        primaryBgHover: string;
-        primaryTextOnWhite: string;
-        bodyGray: string;
-        hoverDarker: string;
-        borderDarker: string;
-        selectedDarker: string;
-        selectedOnBodyGray: string;
-        darkGrayBg: string;
-        border: string;
-        text: string;
-        secondaryText: string;
-        focusRing: string;
+        gray50: "#F9FAFA";
+        gray100: "#EBEEEE";
+        gray200: "#CFD6D7";
+        gray300: "#B3BEC0";
+        gray400: "#97A6A8";
+        gray500: "#7C8E91";
+        gray600: "#627578";
+        gray700: "#4F5F61";
+        gray800: "#414D4F";
+        gray900: "#2C3435";
+        blue50: "#F7FBFB";
+        blue100: "#E3F0F2";
+        blue200: "#BADADF";
+        blue300: "#92C5CC";
+        blue400: "#67AEB8";
+        blue500: "#3C97A3";
+        blue600: "#1F7D8A";
+        blue700: "#19656F";
+        blue800: "#14525B";
+        blue900: "#0E383E";
+        yellow50: "#FDFAEF";
+        yellow100: "#F9EDCA";
+        yellow200: "#EFD27A";
+        yellow300: "#E5B626";
+        yellow400: "#C89E1C";
+        yellow500: "#AA8618";
+        yellow600: "#8C6E14";
+        yellow700: "#715910";
+        yellow800: "#5C490D";
+        yellow900: "#3E3109";
+        orange500: "#D1721C";
+        red50: "#FDF9F9";
+        red100: "#F7EBEB";
+        red200: "#EBCECD";
+        red300: "#DFB1B0";
+        red400: "#D39392";
+        red500: "#C67473";
+        red600: "#B85250";
+        red700: "#A92F2D";
+        red800: "#901F1E";
+        red900: "#631614";
+        green50: "#F8FAF9";
+        green100: "#E7F0EA";
+        green200: "#C5D9CB";
+        green300: "#A4C4AD";
+        green400: "#82AD8D";
+        green500: "#60976F";
+        green600: "#3C7F4E";
+        green700: "#296839";
+        green800: "#21552F";
+        green900: "#163920";
+        primaryTextOnLightBg: "#194b58";
+        primaryBg: "$blue600";
+        primaryBgHover: "$blue700";
+        primaryTextOnWhite: "$blue600";
+        bodyGray: "$gray100";
+        hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
+        selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
+        selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
+        darkGrayBg: "#1f2937";
+        border: "hsl(214deg, 25%, 80%)";
+        text: "#1f2937";
+        secondaryText: "$gray500";
+        focusRing: "hsla(214deg, 15%, 10%, 0.6)";
     };
     fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
+        xs: "0.75rem";
+        sm: "0.875rem";
+        md: "1rem";
+        lg: "1.125rem";
+        xl: "1.25rem";
+        "2xl": "1.5rem";
+        "3xl": "1.875rem";
     };
     fontWeights: {
-        normal: string;
-        medium: string;
-        bold: string;
+        normal: "var(--ui-font-weight-normal)";
+        medium: "var(--ui-font-weight-semibold)";
+        bold: "var(--ui-font-weight-bold)";
     };
     space: {
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        6: string;
-        8: string;
+        1: "0.25rem";
+        2: "0.5rem";
+        3: "0.75rem";
+        4: "1rem";
+        6: "1.5rem";
+        8: "2rem";
     };
     shadows: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        overlayCard: string;
+        xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        overlayCard: "0 5px 50px 0px rgb(0 0 0 / 0.15), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
     };
     radii: {
-        xs: string;
-        sm: string;
-        md: string;
-        mdmd: string;
-        full: string;
+        xs: "0.125rem";
+        sm: "0.25rem";
+        md: "0.5rem";
+        mdmd: "calc(0.5rem - 0.125rem)";
+        full: "9999px";
     };
     zIndices: {
         toast: number;
         overlayCard: number;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+}, import('@stitches/react/types/config').DefaultThemeMap, {}>>;
 type ButtonProps = React.ComponentProps<typeof ButtonStyled> & {
     as?: React.ElementType;
     isLoading?: boolean;
 };
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export {};