@arkitektbedriftene/fe-lib 5.2.0 → 5.2.1

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

@@ -1,5 +1,5 @@
 declare const ButtonStyled: import('@stitches/react/types/styled-component').StyledComponent<"button", {
-    color?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
+    color?: "primary" | "secondary" | "success" | "danger" | "warning" | "NEW_primary" | "NEW_tertiary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "transparent" | "primary" | undefined;
     icon?: boolean | "true" | undefined;

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

@@ -369,7 +369,7 @@ export declare const ToolbarSeparator: import('@stitches/react/types/styled-comp
     };
 }, import('@stitches/react/types/config').DefaultThemeMap, {}>>;
 export declare const ButtonInToolbar: import('react').ForwardRefExoticComponent<Omit<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;
+    color?: "primary" | "secondary" | "success" | "danger" | "warning" | "NEW_primary" | "NEW_tertiary" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     variant?: "outline" | "transparent" | "primary" | undefined;
     icon?: boolean | "true" | undefined;

package/dist/ui.es.js

@@ -1,15 +1,15 @@
 import { k as h, s as n, c as f } from "./stitches.config-DWJUNIbU.js";
-import { a as Pe, g as Ae } from "./stitches.config-DWJUNIbU.js";
+import { a as Me, g as Pe } from "./stitches.config-DWJUNIbU.js";
 import { jsx as t, jsxs as c, Fragment as K } from "react/jsx-runtime";
-import { forwardRef as g, createContext as U, useMemo as k, useContext as B, isValidElement as q, cloneElement as J, useState as Q, useId as w } from "react";
-import { useFloating as Z, autoUpdate as _, offset as oo, flip as eo, shift as ro, useTransitionStyles as to, useClick as no, useHover as ao, safePolygon as io, useDismiss as so, useRole as lo, useInteractions as co, FloatingPortal as $o } from "@floating-ui/react";
+import { forwardRef as u, createContext as U, useMemo as k, useContext as D, isValidElement as _, cloneElement as q, useState as J, useId as w } from "react";
+import { useFloating as Q, autoUpdate as Z, offset as oo, flip as eo, shift as ro, useTransitionStyles as to, useClick as no, useHover as ao, safePolygon as io, useDismiss as so, useRole as lo, useInteractions as co, FloatingPortal as $o } from "@floating-ui/react";
 import * as y from "@radix-ui/react-toolbar";
-import { m as mo, n as go, o as H, p as uo, q as po } from "./index.esm-Dzt91gSZ.js";
+import { m as mo, n as uo, o as B, p as go, q as po } from "./index.esm-Dzt91gSZ.js";
 import * as p from "@radix-ui/react-dialog";
 import * as m from "@radix-ui/react-dropdown-menu";
 import ho from "react-select";
 import * as F from "@radix-ui/react-checkbox";
-import * as M from "@radix-ui/react-switch";
+import * as W from "@radix-ui/react-switch";
 const bo = h({
   "0%": {
     transform: "rotate(0)"
@@ -73,7 +73,7 @@ const bo = h({
     size: "sm",
     color: "dark"
   }
-}), ko = g(
+}), ko = u(
   (o, e) => /* @__PURE__ */ t(
     vo,
     {
@@ -168,6 +168,22 @@ const bo = h({
         $$outlineHover: "$colors$yellow50",
         $$outlineText: "$colors$yellow600",
         $$disabled: "$colors$yellow100"
+      },
+      NEW_primary: {
+        $$solid: "$colors$flask",
+        $$solidHover: "$colors$flaskHover",
+        $$outline: "$colors$flask",
+        $$outlineHover: "$colors$flaskHover",
+        $$outlineText: "$colors$flask",
+        $$disabled: "$colors$clay"
+      },
+      NEW_tertiary: {
+        $$solid: "$colors$sand",
+        $$solidHover: "$colors$sandHover",
+        $$outline: "$colors$sand",
+        $$outlineHover: "$colors$sandHover",
+        $$outlineText: "$colors$black",
+        $$disabled: "$colors$clay"
       }
     },
     size: {
@@ -255,7 +271,7 @@ const bo = h({
     color: "secondary",
     size: "md"
   }
-}), P = g(
+}), M = u(
   ({ children: o, disabled: e, isLoading: r, variant: a, color: i, ...s }, l) => (!i && a === "primary" && (i = "primary"), /* @__PURE__ */ c(
     wo,
     {
@@ -311,7 +327,7 @@ const bo = h({
     color: "info",
     size: "md"
   }
-}), se = g(
+}), se = u(
   ({ children: o, ...e }, r) => /* @__PURE__ */ t(
     Co,
     {
@@ -343,7 +359,7 @@ const bo = h({
   // so for other popups that uses `OverlayCard` to work
   // we need to explicitly set this.
   pointerEvents: "auto"
-}), Do = f({
+}), Ho = f({
   animationDuration: "400ms",
   animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
   willChange: "transform, opacity",
@@ -353,13 +369,13 @@ const bo = h({
     '&[data-side="bottom"]': { animationName: So },
     '&[data-side="left"]': { animationName: zo }
   }
-}), A = n(
+}), P = n(
   "div",
   To,
-  Do
+  Ho
 ), d = n("div"), C = U(
   {}
-), Bo = ({
+), Do = ({
   children: o,
   offset: e,
   open: r,
@@ -369,11 +385,11 @@ const bo = h({
   placement: l = "bottom",
   role: $ = "dialog"
 }) => {
-  const { refs: u, floatingStyles: x, context: b } = Z({
+  const { refs: g, floatingStyles: x, context: b } = Q({
     open: r,
     onOpenChange: a,
     placement: l,
-    whileElementsMounted: _,
+    whileElementsMounted: Z,
     middleware: [oo(e), eo(), ro()]
   }), { isMounted: z, styles: I } = to(b, {
     initial: ({ side: G }) => ({
@@ -385,21 +401,21 @@ const bo = h({
         left: "translateX(-0.5rem)"
       }[G]
     })
-  }), j = no(b, { enabled: i === "click" }), L = ao(b, {
+  }), X = no(b, { enabled: i === "click" }), j = ao(b, {
     enabled: i === "hover",
     delay: s,
     handleClose: io()
-  }), N = so(b), Y = lo(b, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = co([
+  }), E = so(b), L = lo(b, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = co([
+    X,
     j,
-    L,
-    N,
-    Y
-  ]), E = k(
+    E,
+    L
+  ]), Y = k(
     () => ({
       getFloatingProps: R,
       getReferenceProps: T,
       floatingStyles: x,
-      refs: u,
+      refs: g,
       isMounted: z,
       transitionStyles: I
     }),
@@ -407,15 +423,15 @@ const bo = h({
       R,
       T,
       z,
-      u,
+      g,
       x,
       I
     ]
   );
-  return /* @__PURE__ */ t(C.Provider, { value: E, children: o });
-}, Ho = ({ children: o }) => {
-  const { getReferenceProps: e, refs: r } = B(C);
-  return /* @__PURE__ */ t(K, { children: q(o) && J(o, {
+  return /* @__PURE__ */ t(C.Provider, { value: Y, children: o });
+}, Bo = ({ children: o }) => {
+  const { getReferenceProps: e, refs: r } = D(C);
+  return /* @__PURE__ */ t(K, { children: _(o) && q(o, {
     ref: r.setReference,
     ...e()
   }) });
@@ -426,7 +442,7 @@ const bo = h({
     refs: i,
     floatingStyles: s,
     transitionStyles: l
-  } = B(C);
+  } = D(C);
   return a ? /* @__PURE__ */ t($o, { children: /* @__PURE__ */ t(
     d,
     {
@@ -436,13 +452,13 @@ const bo = h({
       css: {
         zIndex: "$overlayCard"
       },
-      children: /* @__PURE__ */ t(A, { ...e, style: l, children: o })
+      children: /* @__PURE__ */ t(P, { ...e, style: l, children: o })
     }
   ) }) : null;
 }, le = ({ children: o, content: e }) => {
-  const [r, a] = Q(!1);
+  const [r, a] = J(!1);
   return /* @__PURE__ */ c(
-    Bo,
+    Do,
     {
       open: r,
       onOpenChange: a,
@@ -451,7 +467,7 @@ const bo = h({
       offset: { mainAxis: 8 },
       role: "tooltip",
       children: [
-        /* @__PURE__ */ t(Ho, { children: o }),
+        /* @__PURE__ */ t(Bo, { children: o }),
         /* @__PURE__ */ t(Fo, { overlayCardProps: {
           css: {
             background: "rgba(0,0,0, 0.9)",
@@ -516,8 +532,8 @@ const bo = h({
   my: "$1",
   mx: "$1",
   backgroundColor: "$border"
-}), V = g(({ css: o, ...e }, r) => /* @__PURE__ */ t(
-  P,
+}), A = u(({ css: o, ...e }, r) => /* @__PURE__ */ t(
+  M,
   {
     ref: r,
     icon: !0,
@@ -531,14 +547,14 @@ const bo = h({
     },
     ...e
   }
-)), ge = g(
+)), ue = u(
   ({ children: o, dropdown: e, ...r }, a) => /* @__PURE__ */ t(
     y.Button,
     {
       asChild: !0,
       ref: a,
       children: /* @__PURE__ */ c(
-        V,
+        A,
         {
           variant: "transparent",
           color: "primary",
@@ -551,7 +567,7 @@ const bo = h({
       )
     }
   )
-), ue = g(({
+), ge = u(({
   children: o,
   value: e,
   ...r
@@ -562,7 +578,7 @@ const bo = h({
     asChild: !0,
     ref: a,
     children: /* @__PURE__ */ t(
-      V,
+      A,
       {
         variant: "transparent",
         color: "primary",
@@ -617,7 +633,7 @@ const bo = h({
     elevation: "raised",
     rounded: "md"
   }
-}), Mo = n("div", {
+}), Wo = n("div", {
   borderRadius: "$md",
   padding: "$1",
   border: "2px solid $blue100",
@@ -625,12 +641,12 @@ const bo = h({
   display: "flex",
   alignItems: "center",
   gap: "$1"
-}), he = (o) => /* @__PURE__ */ t(Mo, { ...o }), be = ({
+}), he = (o) => /* @__PURE__ */ t(Wo, { ...o }), be = ({
   children: o,
   active: e = !1,
   ...r
 }) => /* @__PURE__ */ t(
-  P,
+  M,
   {
     variant: "transparent",
     color: "primary",
@@ -643,12 +659,12 @@ const bo = h({
     ...r,
     children: o
   }
-), Po = n(p.Overlay, {
+), Mo = n(p.Overlay, {
   backgroundColor: "rgba(0, 0, 0, 0.7)",
   position: "fixed",
   zIndex: "$overlayCard",
   inset: 0
-}), Ao = n(p.Content, {
+}), Po = n(p.Content, {
   backgroundColor: "white",
   borderRadius: "$md",
   position: "fixed",
@@ -672,8 +688,8 @@ const bo = h({
 }) => /* @__PURE__ */ c(p.Root, { open: e, onOpenChange: r, children: [
   a && /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: a }),
   /* @__PURE__ */ c(p.Portal, { children: [
-    /* @__PURE__ */ t(Po, {}),
-    /* @__PURE__ */ t(Ao, { css: i, "aria-describedby": void 0, ...s, children: o })
+    /* @__PURE__ */ t(Mo, {}),
+    /* @__PURE__ */ t(Po, { css: i, "aria-describedby": void 0, ...s, children: o })
   ] })
 ] }), ye = n(p.Title, {
   fontSize: "$xl",
@@ -688,7 +704,7 @@ const bo = h({
   padding: "$4",
   borderBottomRightRadius: "$md",
   borderBottomLeftRadius: "$md"
-}), Vo = n("div", {
+}), Ao = n("div", {
   display: "flex",
   variants: {
     direction: {
@@ -723,16 +739,16 @@ const bo = h({
     direction: "column",
     gap: 4
   }
-}), D = /* @__PURE__ */ new Map(), Wo = (o) => {
-  const e = D.get(o);
+}), H = /* @__PURE__ */ new Map(), Vo = (o) => {
+  const e = H.get(o);
   if (e)
     return e;
   let r = 0;
   for (let $ = 0; $ < o.length; $++)
     r = o.charCodeAt($) + ((r << 5) - r);
   const l = `hsl(${r % 360}, 80%, 40%)`;
-  return D.set(o, l), l;
-}, Oo = n("div", {
+  return H.set(o, l), l;
+}, No = n("div", {
   flex: "0 0 auto",
   display: "inline-flex",
   alignItems: "center",
@@ -769,11 +785,11 @@ const bo = h({
   ...r
 }) => {
   const a = k(
-    () => e ? Wo(e) : "$gray200",
+    () => e ? Vo(e) : "$gray200",
     [e]
   );
-  return /* @__PURE__ */ t(Oo, { css: { backgroundColor: a, ...o }, ...r });
-}, Xo = n(A, {
+  return /* @__PURE__ */ t(No, { css: { backgroundColor: a, ...o }, ...r });
+}, Oo = n(P, {
   minWidth: "max(var(--radix-popper-anchor-width), 12rem)",
   padding: "$1"
 }), S = f({
@@ -817,10 +833,10 @@ const bo = h({
       align: e,
       collisionPadding: 10,
       sideOffset: i,
-      children: /* @__PURE__ */ t(Xo, { children: a })
+      children: /* @__PURE__ */ t(Oo, { children: a })
     }
   ) })
-] }), jo = n(m.ItemIndicator, {
+] }), Xo = n(m.ItemIndicator, {
   position: "absolute",
   left: 0,
   top: 0,
@@ -838,17 +854,17 @@ const bo = h({
   display: "flex",
   alignItems: "center",
   gap: "$2"
-}), Lo = n(m.CheckboxItem, S), ze = ({
+}), jo = n(m.CheckboxItem, S), ze = ({
   value: o,
   onChange: e,
   children: r
 }) => /* @__PURE__ */ c(
-  Lo,
+  jo,
   {
     checked: o,
     onCheckedChange: e,
     children: [
-      /* @__PURE__ */ t(jo, { children: /* @__PURE__ */ t(go, { size: "0.75rem" }) }),
+      /* @__PURE__ */ t(Xo, { children: /* @__PURE__ */ t(uo, { size: "0.75rem" }) }),
       r
     ]
   }
@@ -903,7 +919,7 @@ const bo = h({
     ...o,
     zIndex: "var(--zIndices-overlayCard)"
   })
-}, No = {
+}, Eo = {
   control: (o, e) => {
     var r;
     return {
@@ -912,9 +928,9 @@ const bo = h({
       boxShadow: e.isFocused ? "0 0 0 4px var(--colors-red100)" : "none"
     };
   }
-}, Yo = {
+}, Lo = {
   IndicatorSeparator: () => null
-}, W = ({
+}, V = ({
   styles: o,
   components: e,
   error: r,
@@ -924,18 +940,18 @@ const bo = h({
     () => ({
       ...v,
       ...o,
-      ...r ? No : void 0
+      ...r ? Eo : void 0
     }),
     [o, r]
   ), s = k(
     () => ({
-      ...Yo,
+      ...Lo,
       ...e
     }),
     [e]
   );
   return /* @__PURE__ */ t(ho, { components: s, styles: i, ...a });
-}, Ie = (o) => /* @__PURE__ */ t(W, { ...o, isSearchable: !0 }), Re = ({
+}, Ie = (o) => /* @__PURE__ */ t(V, { ...o, isSearchable: !0 }), Re = ({
   label: o,
   css: e,
   error: r,
@@ -954,7 +970,7 @@ const bo = h({
     }
   ),
   /* @__PURE__ */ t(
-    W,
+    V,
     {
       ...a,
       error: r,
@@ -963,7 +979,7 @@ const bo = h({
     }
   ),
   typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
-] }), O = f({
+] }), N = f({
   display: "block",
   width: "100%",
   padding: "0.5rem 0.75rem",
@@ -975,7 +991,7 @@ const bo = h({
   "-webkit-appearance": "none",
   "-moz-appearance": "none",
   appearance: "none"
-}), X = f({
+}), O = f({
   display: "block",
   width: "100%",
   background: "#fff",
@@ -999,13 +1015,13 @@ const bo = h({
       }
     }
   }
-}), Eo = n("input", O), Go = n("div", X, {
+}), Yo = n("input", N), Go = n("div", O, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), Te = g(
-  ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, u) => {
+}), Te = u(
+  ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, g) => {
     const x = w();
     return l = l || x, /* @__PURE__ */ c(d, { css: i, children: [
       e && /* @__PURE__ */ t(
@@ -1023,10 +1039,10 @@ const bo = h({
       ),
       /* @__PURE__ */ c(Go, { error: !!r, children: [
         /* @__PURE__ */ t(
-          Eo,
+          Yo,
           {
             id: l,
-            ref: u,
+            ref: g,
             type: o,
             "aria-invalid": r ? "true" : "false",
             ...$
@@ -1046,7 +1062,7 @@ const bo = h({
         r && /* @__PURE__ */ t(
           d,
           {
-            as: H,
+            as: B,
             css: { color: "$red600", marginRight: "$2" },
             size: 24
           }
@@ -1055,15 +1071,15 @@ const bo = h({
       typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
     ] });
   }
-), Ko = n("textarea", O), Uo = n("div", X, {
+), Ko = n("textarea", N), Uo = n("div", O, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), De = g(
+}), He = u(
   ({ label: o, error: e, style: r, css: a, suffix: i, id: s, ...l }, $) => {
-    const u = w();
-    return s = s || u, /* @__PURE__ */ c(d, { css: a, children: [
+    const g = w();
+    return s = s || g, /* @__PURE__ */ c(d, { css: a, children: [
       o && /* @__PURE__ */ t(
         d,
         {
@@ -1101,7 +1117,7 @@ const bo = h({
         e && /* @__PURE__ */ t(
           d,
           {
-            as: H,
+            as: B,
             css: { color: "$red600", marginRight: "$2" },
             size: 24
           }
@@ -1110,7 +1126,7 @@ const bo = h({
       typeof e == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: e })
     ] });
   }
-), qo = n(F.Root, {
+), _o = n(F.Root, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -1158,14 +1174,14 @@ const bo = h({
     size: "md",
     color: "primary"
   }
-}), Jo = n(F.Indicator, {
+}), qo = n(F.Indicator, {
   "[data-icon]": {
     display: "none"
   },
   "&[data-state=checked] [data-icon=checked], &[data-state=indeterminate] [data-icon=indeterminate]": {
     display: "block"
   }
-}), Qo = n("label", {
+}), Jo = n("label", {
   flex: "0 1 auto",
   paddingLeft: "$2",
   variants: {
@@ -1184,7 +1200,7 @@ const bo = h({
   defaultVariants: {
     size: "md"
   }
-}), Be = ({
+}), De = ({
   id: o,
   size: e,
   label: r,
@@ -1192,13 +1208,13 @@ const bo = h({
 }) => {
   const i = w();
   return o = o || i, /* @__PURE__ */ c(d, { css: { display: "flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ t(qo, { id: o, size: e, ...a, children: /* @__PURE__ */ c(Jo, { children: [
-      /* @__PURE__ */ t(uo, { "data-icon": "indeterminate" }),
+    /* @__PURE__ */ t(_o, { id: o, size: e, ...a, children: /* @__PURE__ */ c(qo, { children: [
+      /* @__PURE__ */ t(go, { "data-icon": "indeterminate" }),
       /* @__PURE__ */ t(po, { "data-icon": "checked" })
     ] }) }),
-    r && /* @__PURE__ */ t(Qo, { htmlFor: o, size: e, children: r })
+    r && /* @__PURE__ */ t(Jo, { htmlFor: o, size: e, children: r })
   ] });
-}, Zo = n(M.Root, {
+}, Qo = n(W.Root, {
   width: "42px",
   height: "25px",
   backgroundColor: "$gray200",
@@ -1212,7 +1228,7 @@ const bo = h({
   "&[data-state='checked']": {
     backgroundColor: "$green400"
   }
-}), _o = n(M.Thumb, {
+}), Zo = n(W.Thumb, {
   display: "block",
   width: "21px",
   height: "21px",
@@ -1243,25 +1259,25 @@ const bo = h({
   defaultVariants: {
     size: "md"
   }
-}), He = ({
+}), Be = ({
   label: o,
   stackProps: e,
   labelProps: r,
   size: a,
   ...i
-}) => /* @__PURE__ */ c(Vo, { direction: "row", align: "center", ...e, children: [
+}) => /* @__PURE__ */ c(Ao, { direction: "row", align: "center", ...e, children: [
   o && /* @__PURE__ */ t(oe, { size: a, ...r, children: o }),
-  /* @__PURE__ */ t(Zo, { ...i, children: /* @__PURE__ */ t(_o, {}) })
+  /* @__PURE__ */ t(Qo, { ...i, children: /* @__PURE__ */ t(Zo, {}) })
 ] });
 export {
   se as Alert,
   ve as Avatar,
   de as Badge,
   d as Box,
-  P as Button,
-  V as ButtonInToolbar,
+  M as Button,
+  A as ButtonInToolbar,
   pe as Card,
-  Be as Checkbox,
+  De as Checkbox,
   Ie as Combobox,
   fe as Dialog,
   xe as DialogActions,
@@ -1271,29 +1287,29 @@ export {
   Se as DropdownMenuIconItem,
   Ce as DropdownMenuItem,
   we as DropdownMenuSeparator,
-  Xo as MenuOverlayCard,
+  Oo as MenuOverlayCard,
   he as NavBar,
   be as NavBarItem,
-  A as OverlayCard,
-  Bo as Popover,
+  P as OverlayCard,
+  Do as Popover,
   Fo as PopoverContent,
   C as PopoverContext,
-  Ho as PopoverTrigger,
+  Bo as PopoverTrigger,
   Re as Select,
   ko as Spinner,
-  Vo as Stack,
-  He as Switch,
-  De as TextArea,
+  Ao as Stack,
+  Be as Switch,
+  He as TextArea,
   Te as TextInput,
   ce as Toolbar,
-  ge as ToolbarButton,
+  ue as ToolbarButton,
   me as ToolbarSeparator,
   $e as ToolbarToggleGroup,
-  ue as ToolbarToggleItem,
+  ge as ToolbarToggleItem,
   le as Tooltip,
   f as css,
-  Pe as getCssText,
-  Ae as globalCss,
+  Me as getCssText,
+  Pe as globalCss,
   h as keyframes,
   S as menuItemStyles,
   n as styled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "type": "module",
   "exports": {
     "./oidc": {