@gnist/design-system 6.0.0-alpha.3 → 6.1.0

package/dist/translations/no.js

@@ -1,77 +1,63 @@
 "use client";
-const no = {
-  components: {
-    feedback: {
-      alerts: {
-        dismissLabel: "Lukk"
-      }
-    },
-    surfaces: {
-      modal: {
-        dismissLabel: "Lukk"
-      }
-    },
-    inputs: {
-      pickers: {
-        calendar: {
-          calendar: "Kalender",
-          showPreviousMonth: "Vis forrige måned",
-          showNextMonth: "Vis neste måned",
-          shortDayNames: {
-            mon: "Man",
-            tue: "Tir",
-            wed: "Ons",
-            thu: "Tor",
-            fri: "Fre",
-            sat: "Lør",
-            sun: "Søn"
-          },
-          monthNames: {
-            1: "Januar",
-            2: "Februar",
-            3: "Mars",
-            4: "April",
-            5: "Mai",
-            6: "Juni",
-            7: "Juli",
-            8: "August",
-            9: "September",
-            10: "Oktober",
-            11: "November",
-            12: "Desember"
-          }
-        }
-      }
-    }
-  },
-  validation: {
-    defaultRequiredError: "Vennligst fyll ut dette feltet.",
-    required: "Må fylles ut",
-    optional: "Valgfritt",
-    characters: "tegn",
-    digits: "siffer",
-    errors: {
-      invalidCharacters: "Inneholder ugyldige tegn.",
-      onlyDigits: "Kan kun inneholde siffer.",
-      invalidEmail: "Ugyldig e-postadresse.",
-      invalidName: "Ugyldig navn.",
-      invalidNameRegex: "Kan kun inneholde bokstaver, mellomrom, apostrof og bindestrek.",
-      invalidPhoneNumber: "Ugyldig telefonnummer.",
-      invalidCellPhoneFirstDigit: "Må starte med 4 eller 9.",
-      invalidRegistrationNumber: "Må bestå av 2 bokstaver og 5 siffer. Eksempel: AB12345",
-      invalidLength: (length, characterType) => `Må bestå av ${length} ${characterType}.`,
-      invalidMaxLength: (maxLength, characterType) => `Kan ikke være mer enn ${maxLength} ${characterType}.`
-    }
-  },
-  form: {
-    fieldNecessityPreamble: {
-      allFieldsRequired: "Alle felter må fylles ut.",
-      allFieldsOptional: "Alle felter er valgfri.",
-      allFieldsRequiredUnless: "Alle felter må fylles ut med mindre noe annet er spesifisert.",
-      allFieldsOptionalUnless: "Alle felter er valgfri med mindre noe annet er spesifisert."
-    }
-  }
-};
-export {
-  no
+//#region src/translations/no.ts
+var no = {
+	components: {
+		feedback: { alerts: { dismissLabel: "Lukk" } },
+		surfaces: { modal: { dismissLabel: "Lukk" } },
+		inputs: { pickers: { calendar: {
+			calendar: "Kalender",
+			showPreviousMonth: "Vis forrige måned",
+			showNextMonth: "Vis neste måned",
+			shortDayNames: {
+				mon: "Man",
+				tue: "Tir",
+				wed: "Ons",
+				thu: "Tor",
+				fri: "Fre",
+				sat: "Lør",
+				sun: "Søn"
+			},
+			monthNames: {
+				1: "Januar",
+				2: "Februar",
+				3: "Mars",
+				4: "April",
+				5: "Mai",
+				6: "Juni",
+				7: "Juli",
+				8: "August",
+				9: "September",
+				10: "Oktober",
+				11: "November",
+				12: "Desember"
+			}
+		} } }
+	},
+	validation: {
+		defaultRequiredError: "Vennligst fyll ut dette feltet.",
+		required: "Må fylles ut",
+		optional: "Valgfritt",
+		characters: "tegn",
+		digits: "siffer",
+		errors: {
+			invalidCharacters: "Inneholder ugyldige tegn.",
+			onlyDigits: "Kan kun inneholde siffer.",
+			invalidEmail: "Ugyldig e-postadresse.",
+			invalidName: "Ugyldig navn.",
+			invalidNameRegex: "Kan kun inneholde bokstaver, mellomrom, apostrof og bindestrek.",
+			invalidPhoneNumber: "Ugyldig telefonnummer.",
+			invalidCellPhoneFirstDigit: "Må starte med 4 eller 9.",
+			invalidRegistrationNumber: "Må bestå av 2 bokstaver og 5 siffer. Eksempel: AB12345",
+			invalidLength: (length, characterType) => `Må bestå av ${length} ${characterType}.`,
+			invalidMaxLength: (maxLength, characterType) => `Kan ikke være mer enn ${maxLength} ${characterType}.`
+		}
+	},
+	form: { fieldNecessityPreamble: {
+		allFieldsRequired: "Alle felter må fylles ut.",
+		allFieldsOptional: "Alle felter er valgfri.",
+		allFieldsRequiredUnless: "Alle felter må fylles ut med mindre noe annet er spesifisert.",
+		allFieldsOptionalUnless: "Alle felter er valgfri med mindre noe annet er spesifisert."
+	} }
 };
+//#endregion
+export { no };

package/dist/utilities/accessibility/ScreenReaderOnly.cjs

@@ -1,7 +1,7 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const visuallyHidden_css = require("./visuallyHidden.css.cjs");
-const componentUtils = require("@gnist/component-utils");
-const ScreenReaderOnly = componentUtils.component("ScreenReaderOnly", visuallyHidden_css.visuallyHidden, "span");
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_visuallyHidden_css = require("./visuallyHidden.css.cjs");
+//#region src/utilities/accessibility/ScreenReaderOnly.ts
+var ScreenReaderOnly = (0, require("@gnist/component-utils").component)("ScreenReaderOnly", require_visuallyHidden_css.visuallyHidden, "span");
+//#endregion
 exports.ScreenReaderOnly = ScreenReaderOnly;

package/dist/utilities/accessibility/ScreenReaderOnly.js

@@ -1,7 +1,7 @@
 "use client";
 import { visuallyHidden } from "./visuallyHidden.css.js";
 import { component } from "@gnist/component-utils";
-const ScreenReaderOnly = component("ScreenReaderOnly", visuallyHidden, "span");
-export {
-  ScreenReaderOnly
-};
+//#region src/utilities/accessibility/ScreenReaderOnly.ts
+var ScreenReaderOnly = component("ScreenReaderOnly", visuallyHidden, "span");
+//#endregion
+export { ScreenReaderOnly };

package/dist/utilities/accessibility/index.cjs

@@ -1,7 +1,6 @@
 "use client";
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const ScreenReaderOnly = require("./ScreenReaderOnly.cjs");
-const visuallyHidden_css = require("./visuallyHidden.css.cjs");
-exports.ScreenReaderOnly = ScreenReaderOnly.ScreenReaderOnly;
-exports.visuallyHidden = visuallyHidden_css.visuallyHidden;
+const require_visuallyHidden_css = require("./visuallyHidden.css.cjs");
+const require_ScreenReaderOnly = require("./ScreenReaderOnly.cjs");
+exports.ScreenReaderOnly = require_ScreenReaderOnly.ScreenReaderOnly;
+exports.visuallyHidden = require_visuallyHidden_css.visuallyHidden;

package/dist/utilities/accessibility/index.js

@@ -1,7 +1,4 @@
 "use client";
-import { ScreenReaderOnly } from "./ScreenReaderOnly.js";
 import { visuallyHidden } from "./visuallyHidden.css.js";
-export {
-  ScreenReaderOnly,
-  visuallyHidden
-};
+import { ScreenReaderOnly } from "./ScreenReaderOnly.js";
+export { ScreenReaderOnly, visuallyHidden };

package/dist/utilities/accessibility/visuallyHidden.css.cjs

@@ -1,18 +1,18 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const layers_css_js = require("@gnist/themes/layers.css.js");
-const visuallyHidden = layers_css_js.gnistStyle({
-  border: "0 !important",
-  clip: "rect(1px, 1px, 1px, 1px) !important",
-  WebkitClipPath: "inset(50%) !important",
-  clipPath: "inset(50%) !important",
-  height: "1px !important",
-  margin: "-1px !important",
-  overflow: "hidden !important",
-  padding: "0 !important",
-  position: "absolute",
-  width: "1px !important",
-  whiteSpace: "nowrap !important"
+require("../../_virtual/_rolldown/runtime.cjs");
+//#region src/utilities/accessibility/visuallyHidden.css.ts
+var visuallyHidden = (0, require("@vanilla-extract/css").style)({
+	border: "0 !important",
+	clip: "rect(1px, 1px, 1px, 1px) !important",
+	WebkitClipPath: "inset(50%) !important",
+	clipPath: "inset(50%) !important",
+	height: "1px !important",
+	margin: "-1px !important",
+	overflow: "hidden !important",
+	padding: "0 !important",
+	position: "absolute",
+	width: "1px !important",
+	whiteSpace: "nowrap !important"
 });
+//#endregion
 exports.visuallyHidden = visuallyHidden;

package/dist/utilities/accessibility/visuallyHidden.css.js

@@ -1,18 +1,18 @@
 "use client";
-import { gnistStyle } from "@gnist/themes/layers.css.js";
-const visuallyHidden = gnistStyle({
-  border: "0 !important",
-  clip: "rect(1px, 1px, 1px, 1px) !important",
-  WebkitClipPath: "inset(50%) !important",
-  clipPath: "inset(50%) !important",
-  height: "1px !important",
-  margin: "-1px !important",
-  overflow: "hidden !important",
-  padding: "0 !important",
-  position: "absolute",
-  width: "1px !important",
-  whiteSpace: "nowrap !important"
+import { style } from "@vanilla-extract/css";
+//#region src/utilities/accessibility/visuallyHidden.css.ts
+var visuallyHidden = style({
+	border: "0 !important",
+	clip: "rect(1px, 1px, 1px, 1px) !important",
+	WebkitClipPath: "inset(50%) !important",
+	clipPath: "inset(50%) !important",
+	height: "1px !important",
+	margin: "-1px !important",
+	overflow: "hidden !important",
+	padding: "0 !important",
+	position: "absolute",
+	width: "1px !important",
+	whiteSpace: "nowrap !important"
 });
-export {
-  visuallyHidden
-};
+//#endregion
+export { visuallyHidden };

package/dist/utilities/forms/formContext.cjs

@@ -1,48 +1,68 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const atoms_css_js = require("@gnist/themes/atoms.css.js");
-const React = require("react");
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === "object" && "default" in e) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
-const formContext = React__namespace.createContext(void 0);
-const Form = ({ onSubmit, submitOnEnter, children, ...rest }) => jsxRuntime.jsx("form", { onSubmit: (event) => {
-  event.preventDefault();
-  onSubmit?.();
-}, ...rest, children: jsxRuntime.jsx("div", { role: "presentation", onKeyDown: (event) => {
-  const target = event.target;
-  if (event.key === "Enter" && target.tagName !== "TEXTAREA" && !submitOnEnter) {
-    event.preventDefault();
-  }
-}, children }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _gnist_themes_atoms_css_js = require("@gnist/themes/atoms.css.js");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+//#region src/utilities/forms/formContext.tsx
+var formContext = react.createContext(void 0);
+var Form = ({ onSubmit, submitOnEnter, children, ...rest }) => (0, react_jsx_runtime.jsx)("form", {
+	onSubmit: (event) => {
+		event.preventDefault();
+		onSubmit?.();
+	},
+	...rest,
+	children: (0, react_jsx_runtime.jsx)("div", {
+		role: "presentation",
+		onKeyDown: (event) => {
+			const target = event.target;
+			if (event.key === "Enter" && target.tagName !== "TEXTAREA" && !submitOnEnter) event.preventDefault();
+		},
+		children
+	})
+});
+/**
+Provides an easy way to create a form with consistent validation logic. Input fields inside this component will automatically be connected to the form, as long as their `field` prop refers to one of the form's fields.
+
+The following input component properties will be set automatically:
+- `value`
+- `onChange`
+- `onBlur`
+- `validity`
+- `id`
+
+A text explaining the necessity (required/optional) of fields will be inserted at the top unless `hideNecessityText` is set to true.
+
+Additionally, `helperText` will be prefixed with the correct necessity indicator if the form contains a mix of required and optional fields.
+
+Documentation: [FormProvider](https://gnist.moller.no/developers/components/latest/?path=/docs/utilities-forms-formprovider--docs)
+*/
 function FormProvider({ id, form, onSubmit, hideNecessityText = false, submitOnEnter = false, children, ...rest }) {
-  return jsxRuntime.jsxs(formContext.Provider, { value: { id, form }, children: [!hideNecessityText && jsxRuntime.jsx("p", { className: atoms_css_js.atoms({ marginBottom: "m" }), children: form.necessityText }), jsxRuntime.jsx(Form, { onSubmit: () => {
-    if (form.state.isValid) {
-      onSubmit?.(form.state.validated);
-      return;
-    }
-    form.showAllErrors();
-  }, submitOnEnter, ...rest, children })] });
+	return (0, react_jsx_runtime.jsxs)(formContext.Provider, {
+		value: {
+			id,
+			form
+		},
+		children: [!hideNecessityText && (0, react_jsx_runtime.jsx)("p", {
+			className: (0, _gnist_themes_atoms_css_js.atoms)({ marginBottom: "m" }),
+			children: form.necessityText
+		}), (0, react_jsx_runtime.jsx)(Form, {
+			onSubmit: () => {
+				if (form.state.isValid) {
+					onSubmit?.(form.state.validated);
+					return;
+				}
+				form.showAllErrors();
+			},
+			submitOnEnter,
+			...rest,
+			children
+		})]
+	});
 }
 function useForm() {
-  return React__namespace.useContext(formContext);
+	return react.useContext(formContext);
 }
+//#endregion
 exports.FormProvider = FormProvider;
 exports.useForm = useForm;

package/dist/utilities/forms/formContext.js

@@ -1,30 +1,65 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import * as React from "react";
-const formContext = React.createContext(void 0);
-const Form = ({ onSubmit, submitOnEnter, children, ...rest }) => jsx("form", { onSubmit: (event) => {
-  event.preventDefault();
-  onSubmit?.();
-}, ...rest, children: jsx("div", { role: "presentation", onKeyDown: (event) => {
-  const target = event.target;
-  if (event.key === "Enter" && target.tagName !== "TEXTAREA" && !submitOnEnter) {
-    event.preventDefault();
-  }
-}, children }) });
+//#region src/utilities/forms/formContext.tsx
+var formContext = React.createContext(void 0);
+var Form = ({ onSubmit, submitOnEnter, children, ...rest }) => jsx("form", {
+	onSubmit: (event) => {
+		event.preventDefault();
+		onSubmit?.();
+	},
+	...rest,
+	children: jsx("div", {
+		role: "presentation",
+		onKeyDown: (event) => {
+			const target = event.target;
+			if (event.key === "Enter" && target.tagName !== "TEXTAREA" && !submitOnEnter) event.preventDefault();
+		},
+		children
+	})
+});
+/**
+Provides an easy way to create a form with consistent validation logic. Input fields inside this component will automatically be connected to the form, as long as their `field` prop refers to one of the form's fields.
+
+The following input component properties will be set automatically:
+- `value`
+- `onChange`
+- `onBlur`
+- `validity`
+- `id`
+
+A text explaining the necessity (required/optional) of fields will be inserted at the top unless `hideNecessityText` is set to true.
+
+Additionally, `helperText` will be prefixed with the correct necessity indicator if the form contains a mix of required and optional fields.
+
+Documentation: [FormProvider](https://gnist.moller.no/developers/components/latest/?path=/docs/utilities-forms-formprovider--docs)
+*/
 function FormProvider({ id, form, onSubmit, hideNecessityText = false, submitOnEnter = false, children, ...rest }) {
-  return jsxs(formContext.Provider, { value: { id, form }, children: [!hideNecessityText && jsx("p", { className: atoms({ marginBottom: "m" }), children: form.necessityText }), jsx(Form, { onSubmit: () => {
-    if (form.state.isValid) {
-      onSubmit?.(form.state.validated);
-      return;
-    }
-    form.showAllErrors();
-  }, submitOnEnter, ...rest, children })] });
+	return jsxs(formContext.Provider, {
+		value: {
+			id,
+			form
+		},
+		children: [!hideNecessityText && jsx("p", {
+			className: atoms({ marginBottom: "m" }),
+			children: form.necessityText
+		}), jsx(Form, {
+			onSubmit: () => {
+				if (form.state.isValid) {
+					onSubmit?.(form.state.validated);
+					return;
+				}
+				form.showAllErrors();
+			},
+			submitOnEnter,
+			...rest,
+			children
+		})]
+	});
 }
 function useForm() {
-  return React.useContext(formContext);
+	return React.useContext(formContext);
 }
-export {
-  FormProvider,
-  useForm
-};
+//#endregion
+export { FormProvider, useForm };

package/dist/utilities/forms/formHelpers.cjs

@@ -1,54 +1,68 @@
 "use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const immer = require("immer");
-const React = require("react");
-const LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
-require("../validation/validators.cjs");
-const validation = require("../validation/validation.cjs");
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
+const require_validation = require("../validation/validation.cjs");
+require("../validation/index.cjs");
+let react = require("react");
+let immer = require("immer");
+//#region src/utilities/forms/formHelpers.ts
+/**
+* Hook for getting utilities like `inputProps('myFormField')` for handling form logic
+* @param form The form state
+* @param setField Setter for updating a field
+* @param setBlurred Setter for updating a field's blur state
+* @returns A {@link FormHelpers} object for easily setting up the correct values for each field in the view
+*/
 function useFormHelpers(form, validators, setField, setBlurred) {
-  const lang = LocalizationProvider.useLanguage();
-  const setValue = React.useCallback((field) => (value) => setField([field, value]), [setField]);
-  return {
-    setValue,
-    inputProps: (field) => ({
-      value: form.raw[field],
-      setValue: setValue(field),
-      ...form.showError[field] && !form.validation[field]?.isValid && {
-        validity: {
-          type: "error",
-          message: validation.getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
-        }
-      },
-      onBlur: () => setBlurred(field)
-    })
-  };
+	const lang = require_LocalizationProvider.useLanguage();
+	const setValue = (0, react.useCallback)((field) => (value) => setField([field, value]), [setField]);
+	return {
+		setValue,
+		inputProps: (field) => ({
+			value: form.raw[field],
+			setValue: setValue(field),
+			...form.showError[field] && !form.validation[field]?.isValid && { validity: {
+				type: "error",
+				message: require_validation.getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
+			} },
+			onBlur: () => setBlurred(field)
+		})
+	};
 }
-const makePropertySetter = (formValidator) => (state, [property, value]) => {
-  const raw = immer.produce(state.raw, (draft) => {
-    draft[property] = value;
-  });
-  const result = formValidator(raw);
-  const showError = immer.produce(state.showError, (draft) => {
-    if (result.validation[property]?.showMessageImmediately) {
-      draft[property] = true;
-    } else {
-      draft[property] = false;
-    }
-  });
-  return {
-    ...state,
-    ...result,
-    raw,
-    showError
-  };
+/**
+* Function for creating a "property setter", which sets properties in a form object.
+* Ensures validation state is updated.
+*
+* @param formValidator Validation function for the form object
+* @returns Function for setting individual properties in a form object
+*/
+var makePropertySetter = (formValidator) => (state, [property, value]) => {
+	const raw = (0, immer.produce)(state.raw, (draft) => {
+		draft[property] = value;
+	});
+	const result = formValidator(raw);
+	const showError = (0, immer.produce)(state.showError, (draft) => {
+		if (result.validation[property]?.showMessageImmediately) draft[property] = true;
+		else draft[property] = false;
+	});
+	return {
+		...state,
+		...result,
+		raw,
+		showError
+	};
 };
-const makeBlurSetter = () => (state, property) => immer.produce(state, (draft) => {
-  const rawValue = draft.raw[property];
-  if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) {
-    draft.showError[property] = true;
-  }
+/**
+* Function for creating an "onBlur" function, which sets the blur state for properties in a form object.
+* Ensures validation is shown, if necessary, when the user leaves a form field.
+*
+* @returns Function for usage "onBlur" on individual form fields
+*/
+var makeBlurSetter = () => (state, property) => (0, immer.produce)(state, (draft) => {
+	const rawValue = draft.raw[property];
+	if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) draft.showError[property] = true;
 });
+//#endregion
 exports.makeBlurSetter = makeBlurSetter;
 exports.makePropertySetter = makePropertySetter;
 exports.useFormHelpers = useFormHelpers;