@arkitektbedriftene/fe-lib 7.1.0 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/system/components/Spinner.es.js +1 -1
  2. package/dist/ui/components/Form/Checkbox.d.ts +128 -128
  3. package/dist/ui.es.js +10 -9
  4. package/package.json +1 -1
package/dist/system/components/Spinner.es.js CHANGED
@@ -15,7 +15,7 @@ const a = n(
15
15
  y: "0px",
16
16
  viewBox: "0 0 150 150",
17
17
  xmlns: "http://www.w3.org/2000/svg",
18
- className: "animate-spinner block",
18
+ className: "animate-spinner !block",
19
19
  children: /* @__PURE__ */ r(
20
20
  "circle",
21
21
  {
package/dist/ui/components/Form/Checkbox.d.ts CHANGED
@@ -1,134 +1,134 @@
1
- import { ComponentProps, ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  import * as RCheckbox from "@radix-ui/react-checkbox";
3
- declare const Root: import('@stitches/react/types/styled-component').StyledComponent<import('react').ForwardRefExoticComponent<RCheckbox.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>, {
3
+ export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<{
4
+ label?: string | ReactNode;
5
+ } & Omit<RCheckbox.CheckboxProps & import('react').RefAttributes<HTMLButtonElement>, "color" | "css" | "size"> & import('@stitches/react/types/styled-component').TransformProps<{
4
6
  size?: "sm" | "md" | "lg" | undefined;
5
- color?: "primary" | "secondary" | undefined;
7
+ color?: "primary" | "secondary" | "danger" | undefined;
6
8
  }, {
7
9
  md: "(min-width: 768px)";
8
10
  lg: "(min-width: 1200px)";
9
11
  print: "print";
10
- }, import('@stitches/react/types/css-util').CSS<{
11
- md: "(min-width: 768px)";
12
- lg: "(min-width: 1200px)";
13
- print: "print";
14
- }, {
15
- colors: {
16
- black: "#1d1d1d";
17
- white: "#fff";
18
- gray50: "#F9FAFA";
19
- gray100: "#EBEEEE";
20
- gray200: "#CFD6D7";
21
- gray300: "#B3BEC0";
22
- gray400: "#97A6A8";
23
- gray500: "#7C8E91";
24
- gray600: "#627578";
25
- gray700: "#4F5F61";
26
- gray800: "#414D4F";
27
- gray900: "#2C3435";
28
- blue50: "#F7FBFB";
29
- blue100: "#E3F0F2";
30
- blue200: "#BADADF";
31
- blue300: "#92C5CC";
32
- blue400: "#67AEB8";
33
- blue500: "#3C97A3";
34
- blue600: "#1F7D8A";
35
- blue700: "#19656F";
36
- blue800: "#14525B";
37
- blue900: "#0E383E";
38
- yellow50: "#FDFAEF";
39
- yellow100: "#F9EDCA";
40
- yellow200: "#EFD27A";
41
- yellow300: "#E5B626";
42
- yellow400: "#C89E1C";
43
- yellow500: "#AA8618";
44
- yellow600: "#8C6E14";
45
- yellow700: "#715910";
46
- yellow800: "#5C490D";
47
- yellow900: "#3E3109";
48
- orange500: "#D1721C";
49
- red50: "#FDF9F9";
50
- red100: "#F7EBEB";
51
- red200: "#EBCECD";
52
- red300: "#DFB1B0";
53
- red400: "#D39392";
54
- red500: "#C67473";
55
- red600: "#B85250";
56
- red700: "#A92F2D";
57
- red800: "#901F1E";
58
- red900: "#631614";
59
- green50: "#F8FAF9";
60
- green100: "#E7F0EA";
61
- green200: "#C5D9CB";
62
- green300: "#A4C4AD";
63
- green400: "#82AD8D";
64
- green500: "#60976F";
65
- green600: "#3C7F4E";
66
- green700: "#296839";
67
- green800: "#21552F";
68
- green900: "#163920";
69
- primaryTextOnLightBg: "#194b58";
70
- primaryBg: "$blue600";
71
- primaryBgHover: "$blue700";
72
- primaryTextOnWhite: "$blue600";
73
- bodyGray: "$gray100";
74
- hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
75
- borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
76
- selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
77
- selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
78
- darkGrayBg: "#1f2937";
79
- border: "hsl(214deg, 25%, 80%)";
80
- text: "#1f2937";
81
- secondaryText: "$gray500";
82
- focusRing: "hsla(214deg, 15%, 10%, 0.6)";
83
- flask: "#122a0d";
84
- flaskHover: "#173611";
85
- clay: "#eee6d3";
86
- clayHover: "#d6c9b6";
87
- sand: "#f3f1eb";
88
- sandHover: "#e6dfce";
89
- };
90
- fontSizes: {
91
- xs: "0.75rem";
92
- sm: "0.875rem";
93
- md: "1rem";
94
- lg: "1.125rem";
95
- xl: "1.25rem";
96
- "2xl": "1.5rem";
97
- "3xl": "1.875rem";
98
- };
99
- fontWeights: {
100
- normal: "var(--ui-font-weight-normal, 400)";
101
- medium: "var(--ui-font-weight-semibold, 500)";
102
- bold: "var(--ui-font-weight-bold, 700)";
103
- };
104
- space: {
105
- 1: "0.25rem";
106
- 2: "0.5rem";
107
- 3: "0.75rem";
108
- 4: "1rem";
109
- 6: "1.5rem";
110
- 8: "2rem";
111
- };
112
- shadows: {
113
- xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
114
- sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
115
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
116
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
117
- 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)";
118
- };
119
- radii: {
120
- xs: "0.125rem";
121
- sm: "0.25rem";
122
- md: "0.5rem";
123
- mdmd: "calc(0.5rem - 0.125rem)";
124
- full: "9999px";
125
- };
126
- zIndices: {
127
- toast: number;
128
- overlayCard: number;
129
- };
130
- }, import('@stitches/react/types/config').DefaultThemeMap, {}>>;
131
- export declare const Checkbox: ({ id, size, label, ...props }: {
132
- label?: string | ReactNode;
133
- } & ComponentProps<typeof Root>) => import("react/jsx-runtime").JSX.Element;
134
- export {};
12
+ }> & {
13
+ css?: import('@stitches/react/types/css-util').CSS<{
14
+ md: "(min-width: 768px)";
15
+ lg: "(min-width: 1200px)";
16
+ print: "print";
17
+ }, {
18
+ colors: {
19
+ black: "#1d1d1d";
20
+ white: "#fff";
21
+ gray50: "#F9FAFA";
22
+ gray100: "#EBEEEE";
23
+ gray200: "#CFD6D7";
24
+ gray300: "#B3BEC0";
25
+ gray400: "#97A6A8";
26
+ gray500: "#7C8E91";
27
+ gray600: "#627578";
28
+ gray700: "#4F5F61";
29
+ gray800: "#414D4F";
30
+ gray900: "#2C3435";
31
+ blue50: "#F7FBFB";
32
+ blue100: "#E3F0F2";
33
+ blue200: "#BADADF";
34
+ blue300: "#92C5CC";
35
+ blue400: "#67AEB8";
36
+ blue500: "#3C97A3";
37
+ blue600: "#1F7D8A";
38
+ blue700: "#19656F";
39
+ blue800: "#14525B";
40
+ blue900: "#0E383E";
41
+ yellow50: "#FDFAEF";
42
+ yellow100: "#F9EDCA";
43
+ yellow200: "#EFD27A";
44
+ yellow300: "#E5B626";
45
+ yellow400: "#C89E1C";
46
+ yellow500: "#AA8618";
47
+ yellow600: "#8C6E14";
48
+ yellow700: "#715910";
49
+ yellow800: "#5C490D";
50
+ yellow900: "#3E3109";
51
+ orange500: "#D1721C";
52
+ red50: "#FDF9F9";
53
+ red100: "#F7EBEB";
54
+ red200: "#EBCECD";
55
+ red300: "#DFB1B0";
56
+ red400: "#D39392";
57
+ red500: "#C67473";
58
+ red600: "#B85250";
59
+ red700: "#A92F2D";
60
+ red800: "#901F1E";
61
+ red900: "#631614";
62
+ green50: "#F8FAF9";
63
+ green100: "#E7F0EA";
64
+ green200: "#C5D9CB";
65
+ green300: "#A4C4AD";
66
+ green400: "#82AD8D";
67
+ green500: "#60976F";
68
+ green600: "#3C7F4E";
69
+ green700: "#296839";
70
+ green800: "#21552F";
71
+ green900: "#163920";
72
+ primaryTextOnLightBg: "#194b58";
73
+ primaryBg: "$blue600";
74
+ primaryBgHover: "$blue700";
75
+ primaryTextOnWhite: "$blue600";
76
+ bodyGray: "$gray100";
77
+ hoverDarker: "hsla(214deg, 25%, 21%, 0.06)";
78
+ borderDarker: "hsla(214deg, 25%, 21%, 0.1)";
79
+ selectedDarker: "hsla(214deg, 25%, 21%, 0.06)";
80
+ selectedOnBodyGray: "hsl(214deg, 35%, 80%)";
81
+ darkGrayBg: "#1f2937";
82
+ border: "hsl(214deg, 25%, 80%)";
83
+ text: "#1f2937";
84
+ secondaryText: "$gray500";
85
+ focusRing: "hsla(214deg, 15%, 10%, 0.6)";
86
+ flask: "#122a0d";
87
+ flaskHover: "#173611";
88
+ clay: "#eee6d3";
89
+ clayHover: "#d6c9b6";
90
+ sand: "#f3f1eb";
91
+ sandHover: "#e6dfce";
92
+ };
93
+ fontSizes: {
94
+ xs: "0.75rem";
95
+ sm: "0.875rem";
96
+ md: "1rem";
97
+ lg: "1.125rem";
98
+ xl: "1.25rem";
99
+ "2xl": "1.5rem";
100
+ "3xl": "1.875rem";
101
+ };
102
+ fontWeights: {
103
+ normal: "var(--ui-font-weight-normal, 400)";
104
+ medium: "var(--ui-font-weight-semibold, 500)";
105
+ bold: "var(--ui-font-weight-bold, 700)";
106
+ };
107
+ space: {
108
+ 1: "0.25rem";
109
+ 2: "0.5rem";
110
+ 3: "0.75rem";
111
+ 4: "1rem";
112
+ 6: "1.5rem";
113
+ 8: "2rem";
114
+ };
115
+ shadows: {
116
+ xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
117
+ sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
118
+ md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
119
+ lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
120
+ 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)";
121
+ };
122
+ radii: {
123
+ xs: "0.125rem";
124
+ sm: "0.25rem";
125
+ md: "0.5rem";
126
+ mdmd: "calc(0.5rem - 0.125rem)";
127
+ full: "9999px";
128
+ };
129
+ zIndices: {
130
+ toast: number;
131
+ overlayCard: number;
132
+ };
133
+ }, import('@stitches/react/types/config').DefaultThemeMap, {}> | undefined;
134
+ }, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
package/dist/ui.es.js CHANGED
@@ -1175,6 +1175,12 @@ const bo = h({
1175
1175
  "&[data-state=checked], &[data-state=indeterminate]": {
1176
1176
  backgroundColor: "$gray800"
1177
1177
  }
1178
+ },
1179
+ danger: {
1180
+ border: "2px solid $red600",
1181
+ "&[data-state=checked], &[data-state=indeterminate]": {
1182
+ backgroundColor: "$red500"
1183
+ }
1178
1184
  }
1179
1185
  }
1180
1186
  },
@@ -1213,21 +1219,16 @@ const bo = h({
1213
1219
  defaultVariants: {
1214
1220
  size: "md"
1215
1221
  }
1216
- }), Be = ({
1217
- id: o,
1218
- size: e,
1219
- label: r,
1220
- ...a
1221
- }) => {
1222
- const i = w();
1223
- return o = o || i, /* @__PURE__ */ c(d, { css: { display: "flex", alignItems: "center" }, children: [
1222
+ }), Be = u(({ id: o, size: e, label: r, ...a }, i) => {
1223
+ const s = w();
1224
+ return o = o || s, /* @__PURE__ */ c(d, { ref: i, css: { display: "flex", alignItems: "center" }, children: [
1224
1225
  /* @__PURE__ */ t(_o, { id: o, size: e, ...a, children: /* @__PURE__ */ c(qo, { children: [
1225
1226
  /* @__PURE__ */ t(uo, { "data-icon": "indeterminate" }),
1226
1227
  /* @__PURE__ */ t(go, { "data-icon": "checked" })
1227
1228
  ] }) }),
1228
1229
  r && /* @__PURE__ */ t(Jo, { htmlFor: o, size: e, children: r })
1229
1230
  ] });
1230
- }, Qo = n(W.Root, {
1231
+ }), Qo = n(W.Root, {
1231
1232
  width: "42px",
1232
1233
  height: "25px",
1233
1234
  backgroundColor: "$gray200",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arkitektbedriftene/fe-lib",
3
- "version": "7.1.0",
3
+ "version": "7.2.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  "./oidc": {