@arkitektbedriftene/fe-lib 0.3.2 → 0.3.3

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 (10) hide show
  1. package/dist/lib/ui/components/Alert.d.ts +124 -0
  2. package/dist/lib/ui/components/Button.d.ts +4 -5
  3. package/dist/lib/ui/components/Spinner.d.ts +118 -120
  4. package/dist/lib/ui/ui.d.ts +1 -0
  5. package/dist/ui.es.js +124 -80
  6. package/package.json +4 -4
  7. package/src/lib/ui/components/Alert.tsx +55 -0
  8. package/src/lib/ui/components/Button.tsx +13 -8
  9. package/src/lib/ui/components/Spinner.tsx +1 -5
  10. package/src/lib/ui/ui.ts +2 -1
package/dist/lib/ui/components/Alert.d.ts ADDED
@@ -0,0 +1,124 @@
1
+ declare const AlertStyled: import("@stitches/react/types/styled-component").StyledComponent<"div", {
2
+ color?: "warning" | "danger" | "info" | undefined;
3
+ size?: "sm" | "md" | undefined;
4
+ }, {
5
+ lg: "(min-width: 1200px)";
6
+ print: "print";
7
+ }, import("@stitches/react/types/css-util").CSS<{
8
+ lg: "(min-width: 1200px)";
9
+ print: "print";
10
+ }, {
11
+ colors: {
12
+ gray50: string;
13
+ gray100: string;
14
+ gray200: string;
15
+ gray300: string;
16
+ gray400: string;
17
+ gray500: string;
18
+ gray600: string;
19
+ gray700: string;
20
+ gray800: string;
21
+ gray900: string;
22
+ blue50: string;
23
+ blue100: string;
24
+ blue200: string;
25
+ blue300: string;
26
+ blue400: string;
27
+ blue500: string;
28
+ blue600: string;
29
+ blue700: string;
30
+ blue800: string;
31
+ blue900: string;
32
+ yellow50: string;
33
+ yellow100: string;
34
+ yellow200: string;
35
+ yellow300: string;
36
+ yellow400: string;
37
+ yellow500: string;
38
+ yellow600: string;
39
+ yellow700: string;
40
+ yellow800: string;
41
+ yellow900: string;
42
+ orange500: string;
43
+ red50: string;
44
+ red100: string;
45
+ red200: string;
46
+ red300: string;
47
+ red400: string;
48
+ red500: string;
49
+ red600: string;
50
+ red700: string;
51
+ red800: string;
52
+ red900: string;
53
+ green50: string;
54
+ green100: string;
55
+ green200: string;
56
+ green300: string;
57
+ green400: string;
58
+ green500: string;
59
+ green600: string;
60
+ green700: string;
61
+ green800: string;
62
+ green900: string;
63
+ primaryTextOnLightBg: string;
64
+ primaryBg: string;
65
+ primaryBgHover: string;
66
+ primaryTextOnWhite: string;
67
+ bodyGray: string;
68
+ hoverDarker: string;
69
+ borderDarker: string;
70
+ selectedDarker: string;
71
+ selectedOnBodyGray: string;
72
+ darkGrayBg: string;
73
+ border: string;
74
+ text: string;
75
+ secondaryText: string;
76
+ focusRing: string;
77
+ };
78
+ fontSizes: {
79
+ xs: string;
80
+ sm: string;
81
+ md: string;
82
+ lg: string;
83
+ xl: string;
84
+ "2xl": string;
85
+ "3xl": string;
86
+ };
87
+ fontWeights: {
88
+ normal: string;
89
+ medium: string;
90
+ bold: string;
91
+ };
92
+ space: {
93
+ 1: string;
94
+ 2: string;
95
+ 3: string;
96
+ 4: string;
97
+ 6: string;
98
+ 8: string;
99
+ };
100
+ shadows: {
101
+ xs: string;
102
+ sm: string;
103
+ md: string;
104
+ lg: string;
105
+ overlayCard: string;
106
+ };
107
+ radii: {
108
+ xs: string;
109
+ sm: string;
110
+ md: string;
111
+ mdmd: string;
112
+ full: string;
113
+ };
114
+ zIndices: {
115
+ toast: number;
116
+ overlayCard: number;
117
+ modal: number;
118
+ };
119
+ }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
120
+ type AlertProps = React.ComponentProps<typeof AlertStyled> & {
121
+ as?: React.ElementType;
122
+ };
123
+ export declare const Alert: import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
124
+ export {};
package/dist/lib/ui/components/Button.d.ts CHANGED
@@ -1,8 +1,7 @@
1
- import type * as Stitches from "@stitches/react";
2
1
  declare const ButtonStyled: import("@stitches/react/types/styled-component").StyledComponent<"button", {
3
- color?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
2
+ color?: "warning" | "danger" | "primary" | "secondary" | "success" | undefined;
4
3
  size?: "md" | "lg" | undefined;
5
- variant?: "outline" | "solid" | "transparent" | undefined;
4
+ variant?: "outline" | "transparent" | "primary" | undefined;
6
5
  }, {
7
6
  lg: "(min-width: 1200px)";
8
7
  print: "print";
@@ -119,8 +118,8 @@ declare const ButtonStyled: import("@stitches/react/types/styled-component").Sty
119
118
  modal: number;
120
119
  };
121
120
  }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
122
- type ButtonProps = React.ComponentPropsWithRef<"button"> & Stitches.VariantProps<typeof ButtonStyled> & {
123
- css?: Stitches.CSS;
121
+ type ButtonProps = React.ComponentProps<typeof ButtonStyled> & {
122
+ as?: React.ElementType;
124
123
  isLoading?: boolean;
125
124
  };
126
125
  export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
package/dist/lib/ui/components/Spinner.d.ts CHANGED
@@ -1,125 +1,123 @@
1
- import type * as Stitches from "@stitches/react";
2
- declare const SpinnerStyled: import("@stitches/react/types/styled-component").StyledComponent<"div", {
1
+ export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
2
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3
+ }, "color" | "css" | "size"> & import("@stitches/react/types/styled-component").TransformProps<{
3
4
  size?: "xs" | "sm" | "md" | "lg" | undefined;
4
5
  color?: "inherit" | "dark" | "light" | undefined;
5
6
  }, {
6
7
  lg: "(min-width: 1200px)";
7
8
  print: "print";
8
- }, import("@stitches/react/types/css-util").CSS<{
9
- lg: "(min-width: 1200px)";
10
- print: "print";
11
- }, {
12
- colors: {
13
- gray50: string;
14
- gray100: string;
15
- gray200: string;
16
- gray300: string;
17
- gray400: string;
18
- gray500: string;
19
- gray600: string;
20
- gray700: string;
21
- gray800: string;
22
- gray900: string;
23
- blue50: string;
24
- blue100: string;
25
- blue200: string;
26
- blue300: string;
27
- blue400: string;
28
- blue500: string;
29
- blue600: string;
30
- blue700: string;
31
- blue800: string;
32
- blue900: string;
33
- yellow50: string;
34
- yellow100: string;
35
- yellow200: string;
36
- yellow300: string;
37
- yellow400: string;
38
- yellow500: string;
39
- yellow600: string;
40
- yellow700: string;
41
- yellow800: string;
42
- yellow900: string;
43
- orange500: string;
44
- red50: string;
45
- red100: string;
46
- red200: string;
47
- red300: string;
48
- red400: string;
49
- red500: string;
50
- red600: string;
51
- red700: string;
52
- red800: string;
53
- red900: string;
54
- green50: string;
55
- green100: string;
56
- green200: string;
57
- green300: string;
58
- green400: string;
59
- green500: string;
60
- green600: string;
61
- green700: string;
62
- green800: string;
63
- green900: string;
64
- primaryTextOnLightBg: string;
65
- primaryBg: string;
66
- primaryBgHover: string;
67
- primaryTextOnWhite: string;
68
- bodyGray: string;
69
- hoverDarker: string;
70
- borderDarker: string;
71
- selectedDarker: string;
72
- selectedOnBodyGray: string;
73
- darkGrayBg: string;
74
- border: string;
75
- text: string;
76
- secondaryText: string;
77
- focusRing: string;
78
- };
79
- fontSizes: {
80
- xs: string;
81
- sm: string;
82
- md: string;
83
- lg: string;
84
- xl: string;
85
- "2xl": string;
86
- "3xl": string;
87
- };
88
- fontWeights: {
89
- normal: string;
90
- medium: string;
91
- bold: string;
92
- };
93
- space: {
94
- 1: string;
95
- 2: string;
96
- 3: string;
97
- 4: string;
98
- 6: string;
99
- 8: string;
100
- };
101
- shadows: {
102
- xs: string;
103
- sm: string;
104
- md: string;
105
- lg: string;
106
- overlayCard: string;
107
- };
108
- radii: {
109
- xs: string;
110
- sm: string;
111
- md: string;
112
- mdmd: string;
113
- full: string;
114
- };
115
- zIndices: {
116
- toast: number;
117
- overlayCard: number;
118
- modal: number;
119
- };
120
- }, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
121
- type SpinnerProps = React.ComponentPropsWithRef<"div"> & Stitches.VariantProps<typeof SpinnerStyled> & {
122
- css?: Stitches.CSS;
123
- };
124
- export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
125
- export {};
9
+ }> & {
10
+ css?: import("@stitches/react/types/css-util").CSS<{
11
+ lg: "(min-width: 1200px)";
12
+ print: "print";
13
+ }, {
14
+ colors: {
15
+ gray50: string;
16
+ gray100: string;
17
+ gray200: string;
18
+ gray300: string;
19
+ gray400: string;
20
+ gray500: string;
21
+ gray600: string;
22
+ gray700: string;
23
+ gray800: string;
24
+ gray900: string;
25
+ blue50: string;
26
+ blue100: string;
27
+ blue200: string;
28
+ blue300: string;
29
+ blue400: string;
30
+ blue500: string;
31
+ blue600: string;
32
+ blue700: string;
33
+ blue800: string;
34
+ blue900: string;
35
+ yellow50: string;
36
+ yellow100: string;
37
+ yellow200: string;
38
+ yellow300: string;
39
+ yellow400: string;
40
+ yellow500: string;
41
+ yellow600: string;
42
+ yellow700: string;
43
+ yellow800: string;
44
+ yellow900: string;
45
+ orange500: string;
46
+ red50: string;
47
+ red100: string;
48
+ red200: string;
49
+ red300: string;
50
+ red400: string;
51
+ red500: string;
52
+ red600: string;
53
+ red700: string;
54
+ red800: string;
55
+ red900: string;
56
+ green50: string;
57
+ green100: string;
58
+ green200: string;
59
+ green300: string;
60
+ green400: string;
61
+ green500: string;
62
+ green600: string;
63
+ green700: string;
64
+ green800: string;
65
+ green900: string;
66
+ primaryTextOnLightBg: string;
67
+ primaryBg: string;
68
+ primaryBgHover: string;
69
+ primaryTextOnWhite: string;
70
+ bodyGray: string;
71
+ hoverDarker: string;
72
+ borderDarker: string;
73
+ selectedDarker: string;
74
+ selectedOnBodyGray: string;
75
+ darkGrayBg: string;
76
+ border: string;
77
+ text: string;
78
+ secondaryText: string;
79
+ focusRing: string;
80
+ };
81
+ fontSizes: {
82
+ xs: string;
83
+ sm: string;
84
+ md: string;
85
+ lg: string;
86
+ xl: string;
87
+ "2xl": string;
88
+ "3xl": string;
89
+ };
90
+ fontWeights: {
91
+ normal: string;
92
+ medium: string;
93
+ bold: string;
94
+ };
95
+ space: {
96
+ 1: string;
97
+ 2: string;
98
+ 3: string;
99
+ 4: string;
100
+ 6: string;
101
+ 8: string;
102
+ };
103
+ shadows: {
104
+ xs: string;
105
+ sm: string;
106
+ md: string;
107
+ lg: string;
108
+ overlayCard: string;
109
+ };
110
+ radii: {
111
+ xs: string;
112
+ sm: string;
113
+ md: string;
114
+ mdmd: string;
115
+ full: string;
116
+ };
117
+ zIndices: {
118
+ toast: number;
119
+ overlayCard: number;
120
+ modal: number;
121
+ };
122
+ }, import("@stitches/react/types/config").DefaultThemeMap, {}> | undefined;
123
+ }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
package/dist/lib/ui/ui.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export * from './stitches.config';
2
2
  export * from './components/Button';
3
3
  export * from './components/Spinner';
4
+ export * from './components/Alert';
package/dist/ui.es.js CHANGED
@@ -1,63 +1,63 @@
1
- import T, { forwardRef as ie } from "react";
2
- import { j as L } from "./jsx-runtime-a0589023.js";
3
- var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap: l, gridColumnGap: l, rowGap: l, gridRowGap: l, inset: l, insetBlock: l, insetBlockEnd: l, insetBlockStart: l, insetInline: l, insetInlineEnd: l, insetInlineStart: l, margin: l, marginTop: l, marginRight: l, marginBottom: l, marginLeft: l, marginBlock: l, marginBlockEnd: l, marginBlockStart: l, marginInline: l, marginInlineEnd: l, marginInlineStart: l, padding: l, paddingTop: l, paddingRight: l, paddingBottom: l, paddingLeft: l, paddingBlock: l, paddingBlockEnd: l, paddingBlockStart: l, paddingInline: l, paddingInlineEnd: l, paddingInlineStart: l, top: l, right: l, bottom: l, left: l, scrollMargin: l, scrollMarginTop: l, scrollMarginRight: l, scrollMarginBottom: l, scrollMarginLeft: l, scrollMarginX: l, scrollMarginY: l, scrollMarginBlock: l, scrollMarginBlockEnd: l, scrollMarginBlockStart: l, scrollMarginInline: l, scrollMarginInlineEnd: l, scrollMarginInlineStart: l, scrollPadding: l, scrollPaddingTop: l, scrollPaddingRight: l, scrollPaddingBottom: l, scrollPaddingLeft: l, scrollPaddingX: l, scrollPaddingY: l, scrollPaddingBlock: l, scrollPaddingBlockEnd: l, scrollPaddingBlockStart: l, scrollPaddingInline: l, scrollPaddingInlineEnd: l, scrollPaddingInlineStart: l, fontSize: "fontSizes", background: $, backgroundColor: $, backgroundImage: $, borderImage: $, border: $, borderBlock: $, borderBlockEnd: $, borderBlockStart: $, borderBottom: $, borderBottomColor: $, borderColor: $, borderInline: $, borderInlineEnd: $, borderInlineStart: $, borderLeft: $, borderLeftColor: $, borderRight: $, borderRightColor: $, borderTop: $, borderTopColor: $, caretColor: $, color: $, columnRuleColor: $, fill: $, outline: $, outlineColor: $, stroke: $, textDecorationColor: $, fontFamily: "fonts", fontWeight: "fontWeights", lineHeight: "lineHeights", letterSpacing: "letterSpacings", blockSize: x, minBlockSize: x, maxBlockSize: x, inlineSize: x, minInlineSize: x, maxInlineSize: x, width: x, minWidth: x, maxWidth: x, height: x, minHeight: x, maxHeight: x, flexBasis: x, gridTemplateColumns: x, gridTemplateRows: x, borderWidth: "borderWidths", borderTopWidth: "borderWidths", borderRightWidth: "borderWidths", borderBottomWidth: "borderWidths", borderLeftWidth: "borderWidths", borderStyle: "borderStyles", borderTopStyle: "borderStyles", borderRightStyle: "borderStyles", borderBottomStyle: "borderStyles", borderLeftStyle: "borderStyles", borderRadius: "radii", borderTopLeftRadius: "radii", borderTopRightRadius: "radii", borderBottomRightRadius: "radii", borderBottomLeftRadius: "radii", boxShadow: "shadows", textShadow: "shadows", transition: "transitions", zIndex: "zIndices" }, ce = (e, t) => typeof t == "function" ? { "()": Function.prototype.toString.call(t) } : t, A = () => {
1
+ import T, { forwardRef as K } from "react";
2
+ import { j as A } from "./jsx-runtime-a0589023.js";
3
+ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap: l, gridColumnGap: l, rowGap: l, gridRowGap: l, inset: l, insetBlock: l, insetBlockEnd: l, insetBlockStart: l, insetInline: l, insetInlineEnd: l, insetInlineStart: l, margin: l, marginTop: l, marginRight: l, marginBottom: l, marginLeft: l, marginBlock: l, marginBlockEnd: l, marginBlockStart: l, marginInline: l, marginInlineEnd: l, marginInlineStart: l, padding: l, paddingTop: l, paddingRight: l, paddingBottom: l, paddingLeft: l, paddingBlock: l, paddingBlockEnd: l, paddingBlockStart: l, paddingInline: l, paddingInlineEnd: l, paddingInlineStart: l, top: l, right: l, bottom: l, left: l, scrollMargin: l, scrollMarginTop: l, scrollMarginRight: l, scrollMarginBottom: l, scrollMarginLeft: l, scrollMarginX: l, scrollMarginY: l, scrollMarginBlock: l, scrollMarginBlockEnd: l, scrollMarginBlockStart: l, scrollMarginInline: l, scrollMarginInlineEnd: l, scrollMarginInlineStart: l, scrollPadding: l, scrollPaddingTop: l, scrollPaddingRight: l, scrollPaddingBottom: l, scrollPaddingLeft: l, scrollPaddingX: l, scrollPaddingY: l, scrollPaddingBlock: l, scrollPaddingBlockEnd: l, scrollPaddingBlockStart: l, scrollPaddingInline: l, scrollPaddingInlineEnd: l, scrollPaddingInlineStart: l, fontSize: "fontSizes", background: $, backgroundColor: $, backgroundImage: $, borderImage: $, border: $, borderBlock: $, borderBlockEnd: $, borderBlockStart: $, borderBottom: $, borderBottomColor: $, borderColor: $, borderInline: $, borderInlineEnd: $, borderInlineStart: $, borderLeft: $, borderLeftColor: $, borderRight: $, borderRightColor: $, borderTop: $, borderTopColor: $, caretColor: $, color: $, columnRuleColor: $, fill: $, outline: $, outlineColor: $, stroke: $, textDecorationColor: $, fontFamily: "fonts", fontWeight: "fontWeights", lineHeight: "lineHeights", letterSpacing: "letterSpacings", blockSize: x, minBlockSize: x, maxBlockSize: x, inlineSize: x, minInlineSize: x, maxInlineSize: x, width: x, minWidth: x, maxWidth: x, height: x, minHeight: x, maxHeight: x, flexBasis: x, gridTemplateColumns: x, gridTemplateRows: x, borderWidth: "borderWidths", borderTopWidth: "borderWidths", borderRightWidth: "borderWidths", borderBottomWidth: "borderWidths", borderLeftWidth: "borderWidths", borderStyle: "borderStyles", borderTopStyle: "borderStyles", borderRightStyle: "borderStyles", borderBottomStyle: "borderStyles", borderLeftStyle: "borderStyles", borderRadius: "radii", borderTopLeftRadius: "radii", borderTopRightRadius: "radii", borderBottomRightRadius: "radii", borderBottomLeftRadius: "radii", boxShadow: "shadows", textShadow: "shadows", transition: "transitions", zIndex: "zIndices" }, ce = (e, t) => typeof t == "function" ? { "()": Function.prototype.toString.call(t) } : t, M = () => {
4
4
  const e = /* @__PURE__ */ Object.create(null);
5
5
  return (t, o, ...r) => {
6
6
  const i = ((n) => JSON.stringify(n, ce))(t);
7
7
  return i in e ? e[i] : e[i] = o(t, ...r);
8
8
  };
9
- }, z = Symbol.for("sxs.internal"), K = (e, t) => Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)), Q = (e) => {
9
+ }, C = Symbol.for("sxs.internal"), X = (e, t) => Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)), _ = (e) => {
10
10
  for (const t in e)
11
11
  return !0;
12
12
  return !1;
13
- }, { hasOwnProperty: ge } = Object.prototype, q = (e) => e.includes("-") ? e : e.replace(/[A-Z]/g, (t) => "-" + t.toLowerCase()), pe = /\s+(?![^()]*\))/, F = (e) => (t) => e(...typeof t == "string" ? String(t).split(pe) : [t]), _ = { appearance: (e) => ({ WebkitAppearance: e, appearance: e }), backfaceVisibility: (e) => ({ WebkitBackfaceVisibility: e, backfaceVisibility: e }), backdropFilter: (e) => ({ WebkitBackdropFilter: e, backdropFilter: e }), backgroundClip: (e) => ({ WebkitBackgroundClip: e, backgroundClip: e }), boxDecorationBreak: (e) => ({ WebkitBoxDecorationBreak: e, boxDecorationBreak: e }), clipPath: (e) => ({ WebkitClipPath: e, clipPath: e }), content: (e) => ({ content: e.includes('"') || e.includes("'") || /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(e) ? e : `"${e}"` }), hyphens: (e) => ({ WebkitHyphens: e, hyphens: e }), maskImage: (e) => ({ WebkitMaskImage: e, maskImage: e }), maskSize: (e) => ({ WebkitMaskSize: e, maskSize: e }), tabSize: (e) => ({ MozTabSize: e, tabSize: e }), textSizeAdjust: (e) => ({ WebkitTextSizeAdjust: e, textSizeAdjust: e }), userSelect: (e) => ({ WebkitUserSelect: e, userSelect: e }), marginBlock: F((e, t) => ({ marginBlockStart: e, marginBlockEnd: t || e })), marginInline: F((e, t) => ({ marginInlineStart: e, marginInlineEnd: t || e })), maxSize: F((e, t) => ({ maxBlockSize: e, maxInlineSize: t || e })), minSize: F((e, t) => ({ minBlockSize: e, minInlineSize: t || e })), paddingBlock: F((e, t) => ({ paddingBlockStart: e, paddingBlockEnd: t || e })), paddingInline: F((e, t) => ({ paddingInlineStart: e, paddingInlineEnd: t || e })) }, Y = /([\d.]+)([^]*)/, ue = (e, t) => e.length ? e.reduce((o, r) => (o.push(...t.map((i) => i.includes("&") ? i.replace(/&/g, /[ +>|~]/.test(r) && /&.*&/.test(i) ? `:is(${r})` : r) : r + " " + i)), o), []) : t, me = (e, t) => e in he && typeof t == "string" ? t.replace(/^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/, (o, r, i, n) => r + (i === "stretch" ? `-moz-available${n};${q(e)}:${r}-webkit-fill-available` : `-moz-fit-content${n};${q(e)}:${r}fit-content`) + n) : String(t), he = { blockSize: 1, height: 1, inlineSize: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, width: 1 }, I = (e) => e ? e + "-" : "", le = (e, t, o) => e.replace(/([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g, (r, i, n, c, d) => c == "$" == !!n ? r : (i || c == "--" ? "calc(" : "") + "var(--" + (c === "$" ? I(t) + (d.includes("$") ? "" : I(o)) + d.replace(/\$/g, "-") : d) + ")" + (i || c == "--" ? "*" + (i || "") + (n || "1") + ")" : "")), fe = /\s*,\s*(?![^()]*\))/, $e = Object.prototype.toString, D = (e, t, o, r, i) => {
13
+ }, { hasOwnProperty: ge } = Object.prototype, q = (e) => e.includes("-") ? e : e.replace(/[A-Z]/g, (t) => "-" + t.toLowerCase()), pe = /\s+(?![^()]*\))/, F = (e) => (t) => e(...typeof t == "string" ? String(t).split(pe) : [t]), ee = { appearance: (e) => ({ WebkitAppearance: e, appearance: e }), backfaceVisibility: (e) => ({ WebkitBackfaceVisibility: e, backfaceVisibility: e }), backdropFilter: (e) => ({ WebkitBackdropFilter: e, backdropFilter: e }), backgroundClip: (e) => ({ WebkitBackgroundClip: e, backgroundClip: e }), boxDecorationBreak: (e) => ({ WebkitBoxDecorationBreak: e, boxDecorationBreak: e }), clipPath: (e) => ({ WebkitClipPath: e, clipPath: e }), content: (e) => ({ content: e.includes('"') || e.includes("'") || /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(e) ? e : `"${e}"` }), hyphens: (e) => ({ WebkitHyphens: e, hyphens: e }), maskImage: (e) => ({ WebkitMaskImage: e, maskImage: e }), maskSize: (e) => ({ WebkitMaskSize: e, maskSize: e }), tabSize: (e) => ({ MozTabSize: e, tabSize: e }), textSizeAdjust: (e) => ({ WebkitTextSizeAdjust: e, textSizeAdjust: e }), userSelect: (e) => ({ WebkitUserSelect: e, userSelect: e }), marginBlock: F((e, t) => ({ marginBlockStart: e, marginBlockEnd: t || e })), marginInline: F((e, t) => ({ marginInlineStart: e, marginInlineEnd: t || e })), maxSize: F((e, t) => ({ maxBlockSize: e, maxInlineSize: t || e })), minSize: F((e, t) => ({ minBlockSize: e, minInlineSize: t || e })), paddingBlock: F((e, t) => ({ paddingBlockStart: e, paddingBlockEnd: t || e })), paddingInline: F((e, t) => ({ paddingInlineStart: e, paddingInlineEnd: t || e })) }, Y = /([\d.]+)([^]*)/, ue = (e, t) => e.length ? e.reduce((o, r) => (o.push(...t.map((i) => i.includes("&") ? i.replace(/&/g, /[ +>|~]/.test(r) && /&.*&/.test(i) ? `:is(${r})` : r) : r + " " + i)), o), []) : t, me = (e, t) => e in he && typeof t == "string" ? t.replace(/^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/, (o, r, i, n) => r + (i === "stretch" ? `-moz-available${n};${q(e)}:${r}-webkit-fill-available` : `-moz-fit-content${n};${q(e)}:${r}fit-content`) + n) : String(t), he = { blockSize: 1, height: 1, inlineSize: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, width: 1 }, I = (e) => e ? e + "-" : "", le = (e, t, o) => e.replace(/([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g, (r, i, n, c, d) => c == "$" == !!n ? r : (i || c == "--" ? "calc(" : "") + "var(--" + (c === "$" ? I(t) + (d.includes("$") ? "" : I(o)) + d.replace(/\$/g, "-") : d) + ")" + (i || c == "--" ? "*" + (i || "") + (n || "1") + ")" : "")), fe = /\s*,\s*(?![^()]*\))/, $e = Object.prototype.toString, D = (e, t, o, r, i) => {
14
14
  let n, c, d;
15
15
  const s = (p, m, u) => {
16
16
  let a, g;
17
17
  const f = (b) => {
18
18
  for (a in b) {
19
- const y = a.charCodeAt(0) === 64, V = y && Array.isArray(b[a]) ? b[a] : [b[a]];
20
- for (g of V) {
21
- const v = /[A-Z]/.test(h = a) ? h : h.replace(/-[^]/g, (k) => k[1].toUpperCase()), M = typeof g == "object" && g && g.toString === $e && (!r.utils[v] || !m.length);
22
- if (v in r.utils && !M) {
19
+ const y = a.charCodeAt(0) === 64, G = y && Array.isArray(b[a]) ? b[a] : [b[a]];
20
+ for (g of G) {
21
+ const v = /[A-Z]/.test(h = a) ? h : h.replace(/-[^]/g, (k) => k[1].toUpperCase()), P = typeof g == "object" && g && g.toString === $e && (!r.utils[v] || !m.length);
22
+ if (v in r.utils && !P) {
23
23
  const k = r.utils[v];
24
24
  if (k !== c) {
25
25
  c = k, f(k(g)), c = null;
26
26
  continue;
27
27
  }
28
- } else if (v in _) {
29
- const k = _[v];
28
+ } else if (v in ee) {
29
+ const k = ee[v];
30
30
  if (k !== d) {
31
31
  d = k, f(k(g)), d = null;
32
32
  continue;
33
33
  }
34
34
  }
35
- if (y && (S = a.slice(1) in r.media ? "@media " + r.media[a.slice(1)] : a, a = S.replace(/\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, (k, B, R, C, w, E) => {
36
- const W = Y.test(B), O = 0.0625 * (W ? -1 : 1), [N, X] = W ? [C, B] : [B, C];
37
- return "(" + (R[0] === "=" ? "" : R[0] === ">" === W ? "max-" : "min-") + N + ":" + (R[0] !== "=" && R.length === 1 ? X.replace(Y, (ae, J, U) => Number(J) + O * (R === ">" ? 1 : -1) + U) : X) + (w ? ") and (" + (w[0] === ">" ? "min-" : "max-") + N + ":" + (w.length === 1 ? E.replace(Y, (ae, J, U) => Number(J) + O * (w === ">" ? -1 : 1) + U) : E) : "") + ")";
38
- })), M) {
35
+ if (y && (S = a.slice(1) in r.media ? "@media " + r.media[a.slice(1)] : a, a = S.replace(/\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, (k, B, R, z, w, E) => {
36
+ const W = Y.test(B), N = 0.0625 * (W ? -1 : 1), [V, Q] = W ? [z, B] : [B, z];
37
+ return "(" + (R[0] === "=" ? "" : R[0] === ">" === W ? "max-" : "min-") + V + ":" + (R[0] !== "=" && R.length === 1 ? Q.replace(Y, (ae, J, U) => Number(J) + N * (R === ">" ? 1 : -1) + U) : Q) + (w ? ") and (" + (w[0] === ">" ? "min-" : "max-") + V + ":" + (w.length === 1 ? E.replace(Y, (ae, J, U) => Number(J) + N * (w === ">" ? -1 : 1) + U) : E) : "") + ")";
38
+ })), P) {
39
39
  const k = y ? u.concat(a) : [...u], B = y ? [...m] : ue(m, a.split(fe));
40
- n !== void 0 && i(ee(...n)), n = void 0, s(g, B, k);
40
+ n !== void 0 && i(te(...n)), n = void 0, s(g, B, k);
41
41
  } else
42
- n === void 0 && (n = [[], m, u]), a = y || a.charCodeAt(0) !== 36 ? a : `--${I(r.prefix)}${a.slice(1).replace(/\$/g, "-")}`, g = M ? g : typeof g == "number" ? g && v in be ? String(g) + "px" : String(g) : le(me(v, g ?? ""), r.prefix, r.themeMap[v]), n[0].push(`${y ? `${a} ` : `${q(a)}:`}${g}`);
42
+ n === void 0 && (n = [[], m, u]), a = y || a.charCodeAt(0) !== 36 ? a : `--${I(r.prefix)}${a.slice(1).replace(/\$/g, "-")}`, g = P ? g : typeof g == "number" ? g && v in be ? String(g) + "px" : String(g) : le(me(v, g ?? ""), r.prefix, r.themeMap[v]), n[0].push(`${y ? `${a} ` : `${q(a)}:`}${g}`);
43
43
  }
44
44
  }
45
45
  var S, h;
46
46
  };
47
- f(p), n !== void 0 && i(ee(...n)), n = void 0;
47
+ f(p), n !== void 0 && i(te(...n)), n = void 0;
48
48
  };
49
49
  s(e, t, o);
50
- }, ee = (e, t, o) => `${o.map((r) => `${r}{`).join("")}${t.length ? `${t.join(",")}{` : ""}${e.join(";")}${t.length ? "}" : ""}${Array(o.length ? o.length + 1 : 0).join("}")}`, be = { animationDelay: 1, animationDuration: 1, backgroundSize: 1, blockSize: 1, border: 1, borderBlock: 1, borderBlockEnd: 1, borderBlockEndWidth: 1, borderBlockStart: 1, borderBlockStartWidth: 1, borderBlockWidth: 1, borderBottom: 1, borderBottomLeftRadius: 1, borderBottomRightRadius: 1, borderBottomWidth: 1, borderEndEndRadius: 1, borderEndStartRadius: 1, borderInlineEnd: 1, borderInlineEndWidth: 1, borderInlineStart: 1, borderInlineStartWidth: 1, borderInlineWidth: 1, borderLeft: 1, borderLeftWidth: 1, borderRadius: 1, borderRight: 1, borderRightWidth: 1, borderSpacing: 1, borderStartEndRadius: 1, borderStartStartRadius: 1, borderTop: 1, borderTopLeftRadius: 1, borderTopRightRadius: 1, borderTopWidth: 1, borderWidth: 1, bottom: 1, columnGap: 1, columnRule: 1, columnRuleWidth: 1, columnWidth: 1, containIntrinsicSize: 1, flexBasis: 1, fontSize: 1, gap: 1, gridAutoColumns: 1, gridAutoRows: 1, gridTemplateColumns: 1, gridTemplateRows: 1, height: 1, inlineSize: 1, inset: 1, insetBlock: 1, insetBlockEnd: 1, insetBlockStart: 1, insetInline: 1, insetInlineEnd: 1, insetInlineStart: 1, left: 1, letterSpacing: 1, margin: 1, marginBlock: 1, marginBlockEnd: 1, marginBlockStart: 1, marginBottom: 1, marginInline: 1, marginInlineEnd: 1, marginInlineStart: 1, marginLeft: 1, marginRight: 1, marginTop: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, offsetDistance: 1, offsetRotate: 1, outline: 1, outlineOffset: 1, outlineWidth: 1, overflowClipMargin: 1, padding: 1, paddingBlock: 1, paddingBlockEnd: 1, paddingBlockStart: 1, paddingBottom: 1, paddingInline: 1, paddingInlineEnd: 1, paddingInlineStart: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1, perspective: 1, right: 1, rowGap: 1, scrollMargin: 1, scrollMarginBlock: 1, scrollMarginBlockEnd: 1, scrollMarginBlockStart: 1, scrollMarginBottom: 1, scrollMarginInline: 1, scrollMarginInlineEnd: 1, scrollMarginInlineStart: 1, scrollMarginLeft: 1, scrollMarginRight: 1, scrollMarginTop: 1, scrollPadding: 1, scrollPaddingBlock: 1, scrollPaddingBlockEnd: 1, scrollPaddingBlockStart: 1, scrollPaddingBottom: 1, scrollPaddingInline: 1, scrollPaddingInlineEnd: 1, scrollPaddingInlineStart: 1, scrollPaddingLeft: 1, scrollPaddingRight: 1, scrollPaddingTop: 1, shapeMargin: 1, textDecoration: 1, textDecorationThickness: 1, textIndent: 1, textUnderlineOffset: 1, top: 1, transitionDelay: 1, transitionDuration: 1, verticalAlign: 1, width: 1, wordSpacing: 1 }, te = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), j = (e) => ((t) => {
50
+ }, te = (e, t, o) => `${o.map((r) => `${r}{`).join("")}${t.length ? `${t.join(",")}{` : ""}${e.join(";")}${t.length ? "}" : ""}${Array(o.length ? o.length + 1 : 0).join("}")}`, be = { animationDelay: 1, animationDuration: 1, backgroundSize: 1, blockSize: 1, border: 1, borderBlock: 1, borderBlockEnd: 1, borderBlockEndWidth: 1, borderBlockStart: 1, borderBlockStartWidth: 1, borderBlockWidth: 1, borderBottom: 1, borderBottomLeftRadius: 1, borderBottomRightRadius: 1, borderBottomWidth: 1, borderEndEndRadius: 1, borderEndStartRadius: 1, borderInlineEnd: 1, borderInlineEndWidth: 1, borderInlineStart: 1, borderInlineStartWidth: 1, borderInlineWidth: 1, borderLeft: 1, borderLeftWidth: 1, borderRadius: 1, borderRight: 1, borderRightWidth: 1, borderSpacing: 1, borderStartEndRadius: 1, borderStartStartRadius: 1, borderTop: 1, borderTopLeftRadius: 1, borderTopRightRadius: 1, borderTopWidth: 1, borderWidth: 1, bottom: 1, columnGap: 1, columnRule: 1, columnRuleWidth: 1, columnWidth: 1, containIntrinsicSize: 1, flexBasis: 1, fontSize: 1, gap: 1, gridAutoColumns: 1, gridAutoRows: 1, gridTemplateColumns: 1, gridTemplateRows: 1, height: 1, inlineSize: 1, inset: 1, insetBlock: 1, insetBlockEnd: 1, insetBlockStart: 1, insetInline: 1, insetInlineEnd: 1, insetInlineStart: 1, left: 1, letterSpacing: 1, margin: 1, marginBlock: 1, marginBlockEnd: 1, marginBlockStart: 1, marginBottom: 1, marginInline: 1, marginInlineEnd: 1, marginInlineStart: 1, marginLeft: 1, marginRight: 1, marginTop: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, offsetDistance: 1, offsetRotate: 1, outline: 1, outlineOffset: 1, outlineWidth: 1, overflowClipMargin: 1, padding: 1, paddingBlock: 1, paddingBlockEnd: 1, paddingBlockStart: 1, paddingBottom: 1, paddingInline: 1, paddingInlineEnd: 1, paddingInlineStart: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1, perspective: 1, right: 1, rowGap: 1, scrollMargin: 1, scrollMarginBlock: 1, scrollMarginBlockEnd: 1, scrollMarginBlockStart: 1, scrollMarginBottom: 1, scrollMarginInline: 1, scrollMarginInlineEnd: 1, scrollMarginInlineStart: 1, scrollMarginLeft: 1, scrollMarginRight: 1, scrollMarginTop: 1, scrollPadding: 1, scrollPaddingBlock: 1, scrollPaddingBlockEnd: 1, scrollPaddingBlockStart: 1, scrollPaddingBottom: 1, scrollPaddingInline: 1, scrollPaddingInlineEnd: 1, scrollPaddingInlineStart: 1, scrollPaddingLeft: 1, scrollPaddingRight: 1, scrollPaddingTop: 1, shapeMargin: 1, textDecoration: 1, textDecorationThickness: 1, textIndent: 1, textUnderlineOffset: 1, top: 1, transitionDelay: 1, transitionDuration: 1, verticalAlign: 1, width: 1, wordSpacing: 1 }, re = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), j = (e) => ((t) => {
51
51
  let o, r = "";
52
52
  for (o = Math.abs(t); o > 52; o = o / 52 | 0)
53
- r = te(o % 52) + r;
54
- return te(o % 52) + r;
53
+ r = re(o % 52) + r;
54
+ return re(o % 52) + r;
55
55
  })(((t, o) => {
56
56
  let r = o.length;
57
57
  for (; r; )
58
58
  t = 33 * t ^ o.charCodeAt(--r);
59
59
  return t;
60
- })(5381, JSON.stringify(e)) >>> 0), H = ["themed", "global", "styled", "onevar", "resonevar", "allvar", "inline"], ye = (e) => {
60
+ })(5381, JSON.stringify(e)) >>> 0), L = ["themed", "global", "styled", "onevar", "resonevar", "allvar", "inline"], ye = (e) => {
61
61
  if (e.href && !e.href.startsWith(location.origin))
62
62
  return !1;
63
63
  try {
@@ -109,7 +109,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
109
109
  const { cssText: a } = m;
110
110
  if (!a.startsWith("--sxs"))
111
111
  continue;
112
- const g = a.slice(14, -3).trim().split(/\s+/), f = H[g[0]];
112
+ const g = a.slice(14, -3).trim().split(/\s+/), f = L[g[0]];
113
113
  f && (t || (t = { sheet: d, reset: r, rules: {}, toString: o }), t.rules[f] = { group: u, index: s, cache: new Set(g) });
114
114
  }
115
115
  if (t)
@@ -124,10 +124,10 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
124
124
  t = { sheet: e ? (e.head || e).appendChild(document.createElement("style")).sheet : d("", "text/css"), rules: {}, reset: r, toString: o };
125
125
  }
126
126
  const { sheet: n, rules: c } = t;
127
- for (let d = H.length - 1; d >= 0; --d) {
128
- const s = H[d];
127
+ for (let d = L.length - 1; d >= 0; --d) {
128
+ const s = L[d];
129
129
  if (!c[s]) {
130
- const p = H[d + 1], m = c[p] ? c[p].index : n.cssRules.length;
130
+ const p = L[d + 1], m = c[p] ? c[p].index : n.cssRules.length;
131
131
  n.insertRule("@media{}", m), n.insertRule(`--sxs{--sxs:${d}}`, m), c[s] = { group: n.cssRules[m + 1], index: m, cache: /* @__PURE__ */ new Set([d]) };
132
132
  }
133
133
  xe(c[s]);
@@ -143,13 +143,13 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
143
143
  } catch {
144
144
  }
145
145
  };
146
- }, P = Symbol(), ke = A(), re = (e, t) => ke(e, () => (...o) => {
146
+ }, H = Symbol(), ke = M(), oe = (e, t) => ke(e, () => (...o) => {
147
147
  let r = { type: null, composers: /* @__PURE__ */ new Set() };
148
148
  for (const i of o)
149
149
  if (i != null)
150
- if (i[z]) {
151
- r.type == null && (r.type = i[z].type);
152
- for (const n of i[z].composers)
150
+ if (i[C]) {
151
+ r.type == null && (r.type = i[C].type);
152
+ for (const n of i[C].composers)
153
153
  r.composers.add(n);
154
154
  } else
155
155
  i.constructor !== Object || i.$$typeof ? r.type == null && (r.type = i) : r.composers.add(Be(i, e));
@@ -165,7 +165,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
165
165
  for (const f in g) {
166
166
  const b = { [a]: String(f) };
167
167
  String(f) === "undefined" && p.push(a);
168
- const S = g[f], h = [b, S, !Q(S)];
168
+ const S = g[f], h = [b, S, !_(S)];
169
169
  c.push(h);
170
170
  }
171
171
  }
@@ -176,20 +176,20 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
176
176
  g = typeof g == "object" && g || {};
177
177
  for (const S in f)
178
178
  f[S] = String(f[S]);
179
- const b = [f, g, !Q(g)];
179
+ const b = [f, g, !_(g)];
180
180
  d.push(b);
181
181
  }
182
182
  return [n, r, c, d, s, p];
183
183
  }, we = (e, t, o) => {
184
184
  const [r, i, n, c] = ve(t.composers), d = typeof t.type == "function" || t.type.$$typeof ? ((u) => {
185
185
  function a() {
186
- for (let g = 0; g < a[P].length; g++) {
187
- const [f, b] = a[P][g];
186
+ for (let g = 0; g < a[H].length; g++) {
187
+ const [f, b] = a[H][g];
188
188
  u.rules[f].apply(b);
189
189
  }
190
- return a[P] = [], null;
190
+ return a[H] = [], null;
191
191
  }
192
- return a[P] = [], a.rules = {}, H.forEach((g) => a.rules[g] = { apply: (f) => a[P].push([g, f]) }), a;
192
+ return a[H] = [], a.rules = {}, L.forEach((g) => a.rules[g] = { apply: (f) => a[H].push([g, f]) }), a;
193
193
  })(o) : null, s = (d || o).rules, p = `.${r}${i.length > 1 ? `:where(.${i.slice(1).join(".")})` : ""}`, m = (u) => {
194
194
  u = typeof u == "object" && u || Re;
195
195
  const { css: a, ...g } = u, f = {};
@@ -200,26 +200,26 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
200
200
  } else
201
201
  f[h] = n[h];
202
202
  const b = /* @__PURE__ */ new Set([...i]);
203
- for (const [h, y, V, v] of t.composers) {
203
+ for (const [h, y, G, v] of t.composers) {
204
204
  o.rules.styled.cache.has(h) || (o.rules.styled.cache.add(h), D(y, [`.${h}`], [], e, (B) => {
205
205
  s.styled.apply(B);
206
206
  }));
207
- const M = oe(V, f, e.media), k = oe(v, f, e.media, !0);
208
- for (const B of M)
207
+ const P = ne(G, f, e.media), k = ne(v, f, e.media, !0);
208
+ for (const B of P)
209
209
  if (B !== void 0)
210
- for (const [R, C, w] of B) {
211
- const E = `${h}-${j(C)}-${R}`;
210
+ for (const [R, z, w] of B) {
211
+ const E = `${h}-${j(z)}-${R}`;
212
212
  b.add(E);
213
- const W = (w ? o.rules.resonevar : o.rules.onevar).cache, O = w ? s.resonevar : s.onevar;
214
- W.has(E) || (W.add(E), D(C, [`.${E}`], [], e, (N) => {
215
- O.apply(N);
213
+ const W = (w ? o.rules.resonevar : o.rules.onevar).cache, N = w ? s.resonevar : s.onevar;
214
+ W.has(E) || (W.add(E), D(z, [`.${E}`], [], e, (V) => {
215
+ N.apply(V);
216
216
  }));
217
217
  }
218
218
  for (const B of k)
219
219
  if (B !== void 0)
220
- for (const [R, C] of B) {
221
- const w = `${h}-${j(C)}-${R}`;
222
- b.add(w), o.rules.allvar.cache.has(w) || (o.rules.allvar.cache.add(w), D(C, [`.${w}`], [], e, (E) => {
220
+ for (const [R, z] of B) {
221
+ const w = `${h}-${j(z)}-${R}`;
222
+ b.add(w), o.rules.allvar.cache.has(w) || (o.rules.allvar.cache.add(w), D(z, [`.${w}`], [], e, (E) => {
223
223
  s.allvar.apply(E);
224
224
  }));
225
225
  }
@@ -235,7 +235,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
235
235
  const S = g.className = [...b].join(" ");
236
236
  return { type: t.type, className: S, selector: p, props: g, toString: () => S, deferredInjector: d };
237
237
  };
238
- return K(m, { className: r, selector: p, [z]: t, toString: () => (o.rules.styled.cache.has(r) || m(), r) });
238
+ return X(m, { className: r, selector: p, [C]: t, toString: () => (o.rules.styled.cache.has(r) || m(), r) });
239
239
  }, ve = (e) => {
240
240
  let t = "";
241
241
  const o = [], r = {}, i = [];
@@ -247,7 +247,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
247
247
  }
248
248
  }
249
249
  return [t, o, r, new Set(i)];
250
- }, oe = (e, t, o, r) => {
250
+ }, ne = (e, t, o, r) => {
251
251
  const i = [];
252
252
  e:
253
253
  for (let [n, c, d] of e) {
@@ -280,7 +280,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
280
280
  (i[p] = i[p] || []).push([r ? "cv" : `${s}-${n[s]}`, c, m]);
281
281
  }
282
282
  return i;
283
- }, Re = {}, Ee = A(), Ie = (e, t) => Ee(e, () => (...o) => {
283
+ }, Re = {}, Ee = M(), Ie = (e, t) => Ee(e, () => (...o) => {
284
284
  const r = () => {
285
285
  for (let i of o) {
286
286
  i = typeof i == "object" && i || {};
@@ -299,8 +299,8 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
299
299
  }
300
300
  return "";
301
301
  };
302
- return K(r, { toString: r });
303
- }), Ce = A(), ze = (e, t) => Ce(e, () => (o) => {
302
+ return X(r, { toString: r });
303
+ }), ze = M(), Ce = (e, t) => ze(e, () => (o) => {
304
304
  const r = `${I(e.prefix)}k-${j(o)}`, i = () => {
305
305
  if (!t.rules.global.cache.has(r)) {
306
306
  t.rules.global.cache.add(r);
@@ -311,7 +311,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
311
311
  }
312
312
  return r;
313
313
  };
314
- return K(i, { get name() {
314
+ return X(i, { get name() {
315
315
  return i();
316
316
  }, toString: i });
317
317
  }), je = class {
@@ -327,7 +327,7 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
327
327
  toString() {
328
328
  return this.computedValue;
329
329
  }
330
- }, We = A(), Te = (e, t) => We(e, () => (o, r) => {
330
+ }, We = M(), Te = (e, t) => We(e, () => (o, r) => {
331
331
  r = typeof o == "object" && o || Object(r);
332
332
  const i = `.${o = (o = typeof o == "string" ? o : "") || `${I(e.prefix)}t-${j(r)}`}`, n = {}, c = [];
333
333
  for (const s in r) {
@@ -348,12 +348,12 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
348
348
  return { ...n, get className() {
349
349
  return d();
350
350
  }, selector: i, toString: d };
351
- }), Fe = A(), De = A(), Ae = (e) => {
351
+ }), Fe = M(), De = M(), Ae = (e) => {
352
352
  const t = ((o) => {
353
353
  let r = !1;
354
354
  const i = Fe(o, (n) => {
355
355
  r = !0;
356
- const c = "prefix" in (n = typeof n == "object" && n || {}) ? String(n.prefix) : "", d = typeof n.media == "object" && n.media || {}, s = typeof n.root == "object" ? n.root || null : globalThis.document || null, p = typeof n.theme == "object" && n.theme || {}, m = { prefix: c, media: d, theme: p, themeMap: typeof n.themeMap == "object" && n.themeMap || { ...de }, utils: typeof n.utils == "object" && n.utils || {} }, u = Se(s), a = { css: re(m, u), globalCss: Ie(m, u), keyframes: ze(m, u), createTheme: Te(m, u), reset() {
356
+ const c = "prefix" in (n = typeof n == "object" && n || {}) ? String(n.prefix) : "", d = typeof n.media == "object" && n.media || {}, s = typeof n.root == "object" ? n.root || null : globalThis.document || null, p = typeof n.theme == "object" && n.theme || {}, m = { prefix: c, media: d, theme: p, themeMap: typeof n.themeMap == "object" && n.themeMap || { ...de }, utils: typeof n.utils == "object" && n.utils || {} }, u = Se(s), a = { css: oe(m, u), globalCss: Ie(m, u), keyframes: Ce(m, u), createTheme: Te(m, u), reset() {
357
357
  u.reset(), a.theme.toString();
358
358
  }, theme: {}, sheet: u, config: m, prefix: c, getCssText: u.toString, toString: u.toString };
359
359
  return String(a.theme = a.createTheme(p)), a;
@@ -361,18 +361,18 @@ var $ = "colors", x = "sizes", l = "space", de = { gap: l, gridGap: l, columnGap
361
361
  return r || i.reset(), i;
362
362
  })(e);
363
363
  return t.styled = (({ config: o, sheet: r }) => De(o, () => {
364
- const i = re(o, r);
364
+ const i = oe(o, r);
365
365
  return (...n) => {
366
- const c = i(...n), d = c[z].type, s = T.forwardRef((p, m) => {
366
+ const c = i(...n), d = c[C].type, s = T.forwardRef((p, m) => {
367
367
  const u = p && p.as || d, { props: a, deferredInjector: g } = c(p);
368
368
  return delete a.as, a.ref = m, g ? T.createElement(T.Fragment, null, T.createElement(u, a), T.createElement(g, null)) : T.createElement(u, a);
369
369
  });
370
- return s.className = c.className, s.displayName = `Styled.${d.displayName || d.name || d}`, s.selector = c.selector, s.toString = () => c.selector, s[z] = c[z], s;
370
+ return s.className = c.className, s.displayName = `Styled.${d.displayName || d.name || d}`, s.selector = c.selector, s.toString = () => c.selector, s[C] = c[C], s;
371
371
  };
372
372
  }))(t), t;
373
373
  };
374
- let ne = 9999;
375
- const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye } = Ae({
374
+ let ie = 9999;
375
+ const Z = () => (ie--, ie), { styled: O, css: Ye, keyframes: se, globalCss: Ze } = Ae({
376
376
  theme: {
377
377
  colors: {
378
378
  gray50: "#F9FAFA",
@@ -513,9 +513,9 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
513
513
  "100%": {
514
514
  strokeDashoffset: 0
515
515
  }
516
- }), He = G("svg", {
516
+ }), He = O("svg", {
517
517
  animation: `${Me} 2s linear infinite`
518
- }), Le = G("circle", {
518
+ }), Le = O("circle", {
519
519
  animation: `${Pe} 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite`,
520
520
  fill: "transparent",
521
521
  stroke: "currentColor",
@@ -524,7 +524,7 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
524
524
  strokeLinecap: "round",
525
525
  strokeMiterlimit: 10,
526
526
  strokeWidth: 12
527
- }), Oe = G("div", {
527
+ }), Oe = O("div", {
528
528
  lineHeight: 0,
529
529
  flexShrink: 0,
530
530
  variants: {
@@ -562,19 +562,19 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
562
562
  size: "sm",
563
563
  color: "dark"
564
564
  }
565
- }), Ne = ie(
566
- (e, t) => /* @__PURE__ */ L.jsx(
565
+ }), Ne = K(
566
+ (e, t) => /* @__PURE__ */ A.jsx(
567
567
  Oe,
568
568
  {
569
569
  ref: t,
570
570
  ...e,
571
- children: /* @__PURE__ */ L.jsx(
571
+ children: /* @__PURE__ */ A.jsx(
572
572
  He,
573
573
  {
574
574
  x: "0px",
575
575
  y: "0px",
576
576
  viewBox: "0 0 150 150",
577
- children: /* @__PURE__ */ L.jsx(
577
+ children: /* @__PURE__ */ A.jsx(
578
578
  Le,
579
579
  {
580
580
  cx: "75",
@@ -586,7 +586,7 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
586
586
  )
587
587
  }
588
588
  )
589
- ), Ge = G("button", {
589
+ ), Ve = O("button", {
590
590
  appearance: "none",
591
591
  margin: 0,
592
592
  padding: 0,
@@ -672,7 +672,7 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
672
672
  }
673
673
  },
674
674
  variant: {
675
- solid: {
675
+ primary: {
676
676
  background: "$$solid",
677
677
  color: "white",
678
678
  "&:hover:enabled": {
@@ -710,26 +710,70 @@ const Z = () => (ne--, ne), { styled: G, css: Ue, keyframes: se, globalCss: Ye }
710
710
  color: "secondary",
711
711
  size: "md"
712
712
  }
713
- }), Ze = ie(
714
- ({ children: e, disabled: t, isLoading: o, ...r }, i) => /* @__PURE__ */ L.jsxs(
715
- Ge,
713
+ }), qe = K(
714
+ ({ children: e, disabled: t, isLoading: o, variant: r, color: i, ...n }, c) => (!i && r === "primary" && (i = "primary"), /* @__PURE__ */ A.jsxs(
715
+ Ve,
716
716
  {
717
- ref: i,
717
+ ref: c,
718
718
  type: "button",
719
719
  disabled: t || o,
720
- ...r,
720
+ variant: r,
721
+ color: i,
722
+ ...n,
721
723
  children: [
722
724
  e,
723
- o && /* @__PURE__ */ L.jsx(Ne, { color: "inherit" })
725
+ o && /* @__PURE__ */ A.jsx(Ne, { color: "inherit" })
724
726
  ]
725
727
  }
728
+ ))
729
+ ), Ge = O("div", {
730
+ padding: "$3",
731
+ borderRadius: "$md",
732
+ variants: {
733
+ color: {
734
+ warning: {
735
+ background: "$yellow200",
736
+ color: "#000"
737
+ },
738
+ danger: {
739
+ background: "$red600",
740
+ color: "#fff"
741
+ },
742
+ info: {
743
+ background: "$blue200",
744
+ color: "#000"
745
+ }
746
+ },
747
+ size: {
748
+ sm: {
749
+ fontSize: "$sm"
750
+ },
751
+ md: {
752
+ fontSize: "$md"
753
+ }
754
+ }
755
+ },
756
+ defaultVariants: {
757
+ color: "info",
758
+ size: "md"
759
+ }
760
+ }), Ke = K(
761
+ ({ children: e, ...t }, o) => /* @__PURE__ */ A.jsx(
762
+ Ge,
763
+ {
764
+ ref: o,
765
+ role: "alert",
766
+ ...t,
767
+ children: e
768
+ }
726
769
  )
727
770
  );
728
771
  export {
729
- Ze as Button,
772
+ Ke as Alert,
773
+ qe as Button,
730
774
  Ne as Spinner,
731
- Ue as css,
732
- Ye as globalCss,
775
+ Ye as css,
776
+ Ze as globalCss,
733
777
  se as keyframes,
734
- G as styled
778
+ O as styled
735
779
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arkitektbedriftene/fe-lib",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "module": "./dist/index.es.js",
@@ -58,12 +58,12 @@
58
58
  "@lexical/headless": "^0.12.0",
59
59
  "@lexical/html": "^0.12.0",
60
60
  "@lexical/link": "^0.12.0",
61
- "@lexical/rich-text": "^0.12.0"
61
+ "@lexical/rich-text": "^0.12.0",
62
+ "@types/react": "*",
63
+ "@types/react-dom": "*"
62
64
  },
63
65
  "devDependencies": {
64
66
  "@biomejs/biome": "^1.6.2",
65
- "@types/react": "^18.0.28",
66
- "@types/react-dom": "^18.0.11",
67
67
  "@vitejs/plugin-react-swc": "^3.0.0",
68
68
  "typescript": "^4.9.3",
69
69
  "vite": "^4.2.0",
package/src/lib/ui/components/Alert.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import { styled } from "../stitches.config";
2
+ import { forwardRef } from "react";
3
+
4
+ const AlertStyled = styled("div", {
5
+ padding: "$3",
6
+ borderRadius: "$md",
7
+
8
+ variants: {
9
+ color: {
10
+ warning: {
11
+ background: "$yellow200",
12
+ color: "#000",
13
+ },
14
+ danger: {
15
+ background: "$red600",
16
+ color: "#fff",
17
+ },
18
+ info: {
19
+ background: "$blue200",
20
+ color: "#000",
21
+ },
22
+ },
23
+ size: {
24
+ sm: {
25
+ fontSize: "$sm",
26
+ },
27
+ md: {
28
+ fontSize: "$md",
29
+ },
30
+ },
31
+ },
32
+
33
+ defaultVariants: {
34
+ color: "info",
35
+ size: "md",
36
+ },
37
+ });
38
+
39
+ type AlertProps = React.ComponentProps<typeof AlertStyled> & {
40
+ as?: React.ElementType;
41
+ }
42
+
43
+ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
44
+ ({ children, ...props }, ref) => {
45
+ return (
46
+ <AlertStyled
47
+ ref={ref}
48
+ role="alert"
49
+ {...props}
50
+ >
51
+ {children}
52
+ </AlertStyled>
53
+ );
54
+ },
55
+ );
package/src/lib/ui/components/Button.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import { styled } from "../stitches.config";
2
- import type * as Stitches from "@stitches/react";
3
2
  import { forwardRef } from "react";
4
3
  import { Spinner } from "./Spinner";
5
4
 
@@ -104,7 +103,7 @@ const ButtonStyled = styled("button", {
104
103
  },
105
104
  },
106
105
  variant: {
107
- solid: {
106
+ primary: {
108
107
  background: "$$solid",
109
108
  color: "white",
110
109
  "&:hover:enabled": {
@@ -145,19 +144,25 @@ const ButtonStyled = styled("button", {
145
144
  },
146
145
  });
147
146
 
148
- type ButtonProps = React.ComponentPropsWithRef<"button"> &
149
- Stitches.VariantProps<typeof ButtonStyled> & {
150
- css?: Stitches.CSS;
151
- isLoading?: boolean;
152
- };
147
+ type ButtonProps = React.ComponentProps<typeof ButtonStyled> & {
148
+ as?: React.ElementType;
149
+ isLoading?: boolean;
150
+ };
153
151
 
154
152
  export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
155
- ({ children, disabled, isLoading, ...props }, ref) => {
153
+ ({ children, disabled, isLoading, variant, color, ...props }, ref) => {
154
+
155
+ if (!color && variant === "primary") {
156
+ color = "primary";
157
+ }
158
+
156
159
  return (
157
160
  <ButtonStyled
158
161
  ref={ref}
159
162
  type="button"
160
163
  disabled={disabled || isLoading}
164
+ variant={variant}
165
+ color={color}
161
166
  {...props}
162
167
  >
163
168
  {children}
package/src/lib/ui/components/Spinner.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import type * as Stitches from "@stitches/react";
2
1
  import { forwardRef } from "react";
3
2
  import { keyframes, styled } from "../stitches.config";
4
3
 
@@ -77,10 +76,7 @@ const SpinnerStyled = styled("div", {
77
76
  },
78
77
  });
79
78
 
80
- type SpinnerProps = React.ComponentPropsWithRef<"div"> &
81
- Stitches.VariantProps<typeof SpinnerStyled> & {
82
- css?: Stitches.CSS;
83
- };
79
+ type SpinnerProps = React.ComponentProps<typeof SpinnerStyled>;
84
80
 
85
81
  export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
86
82
  (props, ref) => {
package/src/lib/ui/ui.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './stitches.config';
2
2
 
3
3
  export * from './components/Button';
4
- export * from './components/Spinner';
4
+ export * from './components/Spinner';
5
+ export * from './components/Alert';