@arkitektbedriftene/fe-lib 0.4.37 → 0.4.38

package/dist/stitches.config-00c23cdb.js

@@ -0,0 +1,136 @@
+import { createStitches as l } from "@stitches/react";
+let e = 9999;
+const r = () => (e--, e), { styled: g, css: x, keyframes: d, globalCss: o, getCssText: s } = l({
+  theme: {
+    colors: {
+      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",
+      // Primary
+      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: "0.75rem",
+      // 12px
+      sm: "0.875rem",
+      // 14px
+      md: "1rem",
+      // 16px
+      lg: "1.125rem",
+      // 18px
+      xl: "1.25rem",
+      // 20px
+      "2xl": "1.5rem",
+      // 24px
+      "3xl": "1.875rem"
+      // 30px
+    },
+    fontWeights: {
+      normal: "var(--ui-font-weight-normal)",
+      medium: "var(--ui-font-weight-semibold)",
+      bold: "var(--ui-font-weight-bold)"
+    },
+    space: {
+      1: "0.25rem",
+      2: "0.5rem",
+      3: "0.75rem",
+      4: "1rem",
+      6: "1.5rem",
+      8: "2rem"
+    },
+    shadows: {
+      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: "0.125rem",
+      sm: "0.25rem",
+      md: "0.5rem",
+      mdmd: "calc(0.5rem - 0.125rem)",
+      full: "9999px"
+    },
+    zIndices: {
+      /**
+       * By using createLayerBelow() we can order the list of layers.
+       * Layers higher up will be on top of layers lower down.
+       */
+      toast: r(),
+      overlayCard: r()
+    }
+  },
+  media: {
+    lg: "(min-width: 1200px)",
+    print: "print"
+  }
+});
+export {
+  s as a,
+  x as c,
+  o as g,
+  d as k,
+  g as s
+};

package/dist/ui.es.js

@@ -1,15 +1,16 @@
-import { k as p, s as n, g as f, u as G, j as K, l as U, m as q, n as J, h as Q, e as Z, d as _, F as oo, a as eo, o as ro, f as to, c as no } from "./stitches.config-543644f4.js";
-import { q as Be, p as He } from "./stitches.config-543644f4.js";
-import { jsx as t, jsxs as c, Fragment as ao } from "react/jsx-runtime";
-import { forwardRef as u, createContext as io, useMemo as k, useContext as B, isValidElement as so, cloneElement as lo, useState as co, useId as C } from "react";
+import { k as p, s as n, c as f } from "./stitches.config-00c23cdb.js";
+import { a as He, g as Fe } from "./stitches.config-00c23cdb.js";
+import { jsx as t, jsxs as c, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as u, createContext as K, useMemo as k, useContext as B, isValidElement as U, cloneElement as q, useState as J, useId as C } from "react";
+import { useFloating as Q, autoUpdate as Z, offset as _, flip as oo, shift as eo, useTransitionStyles as ro, useClick as to, useHover as no, safePolygon as ao, useDismiss as io, useRole as so, useInteractions as lo, FloatingPortal as co } from "@floating-ui/react";
 import * as y from "@radix-ui/react-toolbar";
-import { b as $o, c as mo, d as uo } from "./index.esm-55efa2d1.js";
+import { b as $o, c as mo, d as uo } from "./index.esm-ab03d8db.js";
 import * as b from "@radix-ui/react-dialog";
 import * as m from "@radix-ui/react-dropdown-menu";
-import { f as go, g as H } from "./index.esm-e4db0c1f.js";
+import { f as go, g as H } from "./index.esm-67eba761.js";
 import po from "react-select";
 import * as F from "@radix-ui/react-checkbox";
-import "react-dom";
+import "@stitches/react";
 const ho = p({
   "0%": {
     transform: "rotate(0)"
@@ -311,7 +312,7 @@ const ho = p({
     color: "info",
     size: "md"
   }
-}), te = u(
+}), ne = u(
   ({ children: o, ...e }, r) => /* @__PURE__ */ t(
     Co,
     {
@@ -357,7 +358,7 @@ const ho = p({
   "div",
   Ro,
   To
-), d = n("div"), w = io(
+), d = n("div"), w = K(
   {}
 ), Do = ({
   children: o,
@@ -369,13 +370,13 @@ const ho = p({
   placement: l = "bottom",
   role: $ = "dialog"
 }) => {
-  const { refs: g, floatingStyles: x, context: h } = G({
+  const { refs: g, floatingStyles: x, context: h } = Q({
     open: r,
     onOpenChange: a,
     placement: l,
-    whileElementsMounted: eo,
-    middleware: [ro(e), to(), no()]
-  }), { isMounted: I, styles: z } = K(h, {
+    whileElementsMounted: Z,
+    middleware: [_(e), oo(), eo()]
+  }), { isMounted: I, styles: z } = ro(h, {
     initial: ({ side: L }) => ({
       opacity: 0,
       transform: {
@@ -385,12 +386,12 @@ const ho = p({
         left: "translateX(-0.5rem)"
       }[L]
     })
-  }), O = U(h, { enabled: i === "click" }), N = q(h, {
+  }), j = to(h, { enabled: i === "click" }), N = no(h, {
     enabled: i === "hover",
     delay: s,
-    handleClose: J()
-  }), X = Q(h), Y = Z(h, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = _([
-    O,
+    handleClose: ao()
+  }), X = io(h), Y = so(h, { role: $ }), { getFloatingProps: R, getReferenceProps: T } = lo([
+    j,
     N,
     X,
     Y
@@ -415,7 +416,7 @@ const ho = p({
   return /* @__PURE__ */ t(w.Provider, { value: E, children: o });
 }, Bo = ({ children: o }) => {
   const { getReferenceProps: e, refs: r } = B(w);
-  return /* @__PURE__ */ t(ao, { children: so(o) && lo(o, {
+  return /* @__PURE__ */ t(G, { children: U(o) && q(o, {
     ref: r.setReference,
     ...e()
   }) });
@@ -427,7 +428,7 @@ const ho = p({
     floatingStyles: s,
     transitionStyles: l
   } = B(w);
-  return a ? /* @__PURE__ */ t(oo, { children: /* @__PURE__ */ t(
+  return a ? /* @__PURE__ */ t(co, { children: /* @__PURE__ */ t(
     d,
     {
       ref: i.setFloating,
@@ -439,8 +440,8 @@ const ho = p({
       children: /* @__PURE__ */ t(P, { ...e, style: l, children: o })
     }
   ) }) : null;
-}, ne = ({ children: o, content: e }) => {
-  const [r, a] = co(!1);
+}, ae = ({ children: o, content: e }) => {
+  const [r, a] = J(!1);
   return /* @__PURE__ */ c(
     Do,
     {
@@ -463,7 +464,7 @@ const ho = p({
       ]
     }
   );
-}, ae = n("span", {
+}, ie = n("span", {
   flex: "0 0 auto",
   display: "inline-flex",
   padding: "$1 $2",
@@ -500,17 +501,17 @@ const ho = p({
   defaultVariants: {
     color: "primary"
   }
-}), ie = n(y.Root, {
+}), se = n(y.Root, {
   backgroundColor: "$gray50",
   display: "flex",
   alignItems: "center",
   padding: "$1",
   gap: "$1"
-}), se = n(y.ToggleGroup, {
+}), le = n(y.ToggleGroup, {
   display: "flex",
   gap: "$1",
   alignItems: "center"
-}), le = n(y.Separator, {
+}), de = n(y.Separator, {
   width: "1px",
   height: "1.5rem",
   my: "$1",
@@ -531,7 +532,7 @@ const ho = p({
     },
     ...e
   }
-)), de = u(
+)), ce = u(
   ({ children: o, dropdown: e, ...r }, a) => /* @__PURE__ */ t(
     y.Button,
     {
@@ -551,7 +552,7 @@ const ho = p({
       )
     }
   )
-), ce = u(({
+), $e = u(({
   children: o,
   value: e,
   ...r
@@ -572,7 +573,7 @@ const ho = p({
       }
     )
   }
-)), $e = n("div", {
+)), me = n("div", {
   color: "$$cardText",
   backgroundColor: "$$cardBackground",
   borderRadius: "$md",
@@ -605,7 +606,7 @@ const ho = p({
   display: "flex",
   alignItems: "center",
   gap: "$1"
-}), me = (o) => /* @__PURE__ */ t(Fo, { ...o }), ue = ({
+}), ue = (o) => /* @__PURE__ */ t(Fo, { ...o }), ge = ({
   children: o,
   active: e = !1,
   ...r
@@ -642,7 +643,7 @@ const ho = p({
   maxHeight: "85vh",
   padding: "$8",
   "&:focus": { outline: "none" }
-}), ge = ({
+}), pe = ({
   children: o,
   open: e,
   onOpenChange: r,
@@ -655,11 +656,11 @@ const ho = p({
     /* @__PURE__ */ t(Mo, {}),
     /* @__PURE__ */ t(Po, { css: i, ...s, children: o })
   ] })
-] }), pe = n("h2", {
+] }), he = n("h2", {
   fontSize: "$xl",
   fontWeight: "$medium",
   marginBottom: "$6"
-}), he = n("div", {
+}), be = n("div", {
   display: "flex",
   gap: "$2",
   justifyContent: "flex-end",
@@ -668,7 +669,7 @@ const ho = p({
   padding: "$4",
   borderBottomRightRadius: "$md",
   borderBottomLeftRadius: "$md"
-}), be = n("div", {
+}), fe = n("div", {
   display: "flex",
   variants: {
     direction: {
@@ -743,7 +744,7 @@ const ho = p({
   defaultVariants: {
     size: "md"
   }
-}), fe = ({
+}), ye = ({
   css: o,
   colorString: e,
   ...r
@@ -779,7 +780,7 @@ const ho = p({
       backgroundColor: "transparent"
     }
   }
-}), ye = ({
+}), xe = ({
   side: o = "bottom",
   align: e = "center",
   trigger: r,
@@ -799,7 +800,7 @@ const ho = p({
       children: /* @__PURE__ */ t(Vo, { children: a })
     }
   ) })
-] }), jo = n(m.ItemIndicator, {
+] }), Oo = n(m.ItemIndicator, {
   position: "absolute",
   left: 0,
   top: 0,
@@ -808,26 +809,26 @@ const ho = p({
   display: "flex",
   justifyContent: "center",
   alignItems: "center"
-}), xe = n(m.Separator, {
+}), ve = n(m.Separator, {
   height: 1,
   backgroundColor: "$gray200",
   margin: 1
-}), ve = n(m.Item, S), ke = n(m.Item, S, {
+}), ke = n(m.Item, S), Ce = n(m.Item, S, {
   padding: "$2",
   display: "flex",
   alignItems: "center",
   gap: "$2"
-}), Oo = n(m.CheckboxItem, S), Ce = ({
+}), jo = n(m.CheckboxItem, S), we = ({
   value: o,
   onChange: e,
   children: r
 }) => /* @__PURE__ */ c(
-  Oo,
+  jo,
   {
     checked: o,
     onCheckedChange: e,
     children: [
-      /* @__PURE__ */ t(jo, { children: /* @__PURE__ */ t(go, { size: "0.75rem" }) }),
+      /* @__PURE__ */ t(Oo, { children: /* @__PURE__ */ t(go, { size: "0.75rem" }) }),
       r
     ]
   }
@@ -914,7 +915,7 @@ const ho = p({
     [e]
   );
   return /* @__PURE__ */ t(po, { components: s, styles: i, ...a });
-}, we = (o) => /* @__PURE__ */ t(W, { ...o, isSearchable: !0 }), Se = ({
+}, Se = (o) => /* @__PURE__ */ t(W, { ...o, isSearchable: !0 }), Ie = ({
   label: o,
   css: e,
   error: r,
@@ -954,7 +955,7 @@ const ho = p({
   "-webkit-appearance": "none",
   "-moz-appearance": "none",
   appearance: "none"
-}), j = f({
+}), O = f({
   display: "block",
   width: "100%",
   background: "#fff",
@@ -978,12 +979,12 @@ const ho = p({
       }
     }
   }
-}), Yo = n("input", V), Eo = n("div", j, {
+}), Yo = n("input", V), Eo = n("div", O, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), Ie = u(
+}), ze = u(
   ({ type: o = "text", label: e, error: r, style: a, css: i, suffix: s, id: l, ...$ }, g) => {
     const x = C();
     return l = l || x, /* @__PURE__ */ c(d, { css: i, children: [
@@ -1034,12 +1035,12 @@ const ho = p({
       typeof r == "string" && /* @__PURE__ */ t(d, { css: { color: "$red600", fontSize: "$sm", marginTop: "$2" }, children: r })
     ] });
   }
-), Lo = n("textarea", V), Go = n("div", j, {
+), Lo = n("textarea", V), Go = n("div", O, {
   display: "flex",
   alignItems: "center",
   gap: "$2",
   width: "100%"
-}), ze = u(
+}), Re = u(
   ({ label: o, error: e, style: r, css: a, suffix: i, id: s, ...l }, $) => {
     const g = C();
     return s = s || g, /* @__PURE__ */ c(d, { css: a, children: [
@@ -1150,7 +1151,7 @@ const ho = p({
   defaultVariants: {
     size: "md"
   }
-}), Re = ({
+}), Te = ({
   id: o,
   size: e,
   label: r,
@@ -1166,44 +1167,44 @@ const ho = p({
   ] });
 };
 export {
-  te as Alert,
-  fe as Avatar,
-  ae as Badge,
+  ne as Alert,
+  ye as Avatar,
+  ie as Badge,
   d as Box,
   M as Button,
   A as ButtonInToolbar,
-  $e as Card,
-  Re as Checkbox,
-  we as Combobox,
-  ge as Dialog,
-  he as DialogActions,
-  pe as DialogHeader,
-  ye as DropdownMenu,
-  Ce as DropdownMenuCheckboxItem,
-  ke as DropdownMenuIconItem,
-  ve as DropdownMenuItem,
-  xe as DropdownMenuSeparator,
+  me as Card,
+  Te as Checkbox,
+  Se as Combobox,
+  pe as Dialog,
+  be as DialogActions,
+  he as DialogHeader,
+  xe as DropdownMenu,
+  we as DropdownMenuCheckboxItem,
+  Ce as DropdownMenuIconItem,
+  ke as DropdownMenuItem,
+  ve as DropdownMenuSeparator,
   Vo as MenuOverlayCard,
-  me as NavBar,
-  ue as NavBarItem,
+  ue as NavBar,
+  ge as NavBarItem,
   P as OverlayCard,
   Do as Popover,
   Ho as PopoverContent,
   Bo as PopoverTrigger,
-  Se as Select,
+  Ie as Select,
   vo as Spinner,
-  be as Stack,
-  ze as TextArea,
-  Ie as TextInput,
-  ie as Toolbar,
-  de as ToolbarButton,
-  le as ToolbarSeparator,
-  se as ToolbarToggleGroup,
-  ce as ToolbarToggleItem,
-  ne as Tooltip,
+  fe as Stack,
+  Re as TextArea,
+  ze as TextInput,
+  se as Toolbar,
+  ce as ToolbarButton,
+  de as ToolbarSeparator,
+  le as ToolbarToggleGroup,
+  $e as ToolbarToggleItem,
+  ae as Tooltip,
   f as css,
-  Be as getCssText,
-  He as globalCss,
+  He as getCssText,
+  Fe as globalCss,
   p as keyframes,
   S as menuItemStyles,
   n as styled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.4.37",
+  "version": "0.4.38",
   "type": "module",
   "exports": {
     ".": {