@arkitektbedriftene/fe-lib 4.3.3 → 5.1.0

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

@@ -1,247 +1,123 @@
-import type { ReactNode } from "react";
-import { Button } from "./Button";
-declare const Bar: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+import { ReactNode } from 'react';
+import { Button } from './Button';
+declare const Bar: 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, {}>>;
 export declare const NavBar: (props: React.ComponentProps<typeof Bar>) => import("react/jsx-runtime").JSX.Element;
 export declare const NavBarItem: ({ children, active, ...props }: {
     children: ReactNode;
-    active?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "color" | "css" | "size" | "icon" | "variant"> & import("@stitches/react/types/styled-component").TransformProps<{
-    color?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    variant?: "outline" | "transparent" | "primary" | undefined;
-    icon?: boolean | "true" | undefined;
-}, {
-    lg: "(min-width: 1200px)";
-    print: "print";
-}> & {
-    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;
-        };
-        fontSizes: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-        fontWeights: {
-            normal: string;
-            medium: string;
-            bold: string;
-        };
-        space: {
-            1: string;
-            2: string;
-            3: string;
-            4: string;
-            6: string;
-            8: string;
-        };
-        shadows: {
-            xs: string;
-            sm: string;
-            md: string;
-            lg: string;
-            overlayCard: string;
-        };
-        radii: {
-            xs: string;
-            sm: string;
-            md: string;
-            mdmd: string;
-            full: string;
-        };
-        zIndices: {
-            toast: number;
-            overlayCard: number;
-        };
-    }, import("@stitches/react/types/config").DefaultThemeMap, {}> | undefined;
-} & {
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-    isLoading?: boolean | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+    active?: boolean;
+} & React.ComponentProps<typeof Button>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,117 +1,116 @@
-/// <reference types="react" />
-export declare const OverlayCard: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const OverlayCard: 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, {}>>;
 export type OverlayCardProps = React.ComponentProps<typeof OverlayCard>;