@gnist/design-system 3.8.4 → 3.9.0

package/dist/components/inputs/pickers/calendar.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 export interface CalendarProps {
     /** Seleted date */
     selected: Date | undefined;
@@ -13,11 +14,12 @@ export interface CalendarProps {
     onNavigate?: (date: Date) => void;
     /** Decides if the calendar is in a loading state */
     isLoading?: boolean;
+    ref?: Ref<HTMLDivElement>;
 }
 /**
  * When a user does not know what date they will select, it can be useful to offer a browsing experience using a calendar component. This allows users to see dates organized into weeks and months, or with additional context such as which dates are unavailable for selection.
  *
  *  Documentation: [Calendar](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-pickers-calendar--docs)
  */
-export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Calendar({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading, ref, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=calendar.d.ts.map

package/dist/components/inputs/pickers/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/calendar.tsx"],"names":[],"mappings":"AA6SA,MAAM,WAAW,aAAa;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,kCAAkC;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;GAIG;AAEH,eAAO,MAAM,QAAQ,0GAyHnB,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/pickers/calendar.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAC;AA4RzD,MAAM,WAAW,aAAa;IAC1B,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,SAAS,CAAC;IAC3B,kCAAkC;IAClC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IAC5C,6BAA6B;IAC7B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC7B;AAED;;;;GAIG;AAEH,wBAAgB,QAAQ,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,iBAAiB,EACjB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,UAAU,EACV,SAAS,EACT,GAAG,GACN,EAAE,aAAa,2CA8Gf"}

package/dist/components/inputs/pickers/calendar.js

@@ -7,7 +7,7 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import "../../../foundation/iconography/Icon.js";
 import "../../../foundation/typography/index.js";
-import { forwardRef, useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import "@gnist/themes/atoms.css.js";
@@ -26,11 +26,13 @@ import "../../progress/Spinner.js";
 import "../../actions/buttons/styles.css.js";
 import "../../../styles/states.css.js";
 import { IconButton } from "../../actions/buttons/IconButton.js";
-import "../../actions/selectionControls/Checkbox.js";
-import "../../actions/selectionControls/RadioButton.js";
-import "../../actions/chips/ActionChip.js";
-import "../../actions/chips/FilterChip.js";
-import "../../actions/chips/TagChip.js";
+import "../../actions/selectionControls/checkbox.css.js";
+import "../../actions/selectionControls/shared.css.js";
+import "../../../utilities/layout/Column.js";
+import "../../actions/selectionControls/radiobutton.css.js";
+import "../../actions/selectionControls/Switch.js";
+import "../../../styles/animations.css.js";
+import "../../actions/chips/styles.css.js";
 import { headerCell, containerStyle, selectMonthRow, buttonRow, arrowButton, gridStyle, rowStyle, cellSkeletonStyle, firstDay, cellRecipe } from "./Calendar.css.js";
 const HeaderCell = component("HeaderCell", headerCell, "div");
 function weekDayNumberStartingMonday(date) {
@@ -163,7 +165,7 @@ function clampDate(date, minDate, maxDate) {
   }
   return date;
 }
-const Calendar = forwardRef(function Calendar2({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading }, ref) {
+function Calendar({ selected, setSelected, isDateUnavailable, minDate: origMinDate, maxDate: origMaxDate, onNavigate, isLoading, ref }) {
   const minDate = origMinDate ? getStartOfDay(origMinDate) : void 0;
   const maxDate = origMaxDate ? getStartOfDay(origMaxDate) : void 0;
   const text = useTranslation((t) => t.components.inputs.pickers.calendar);
@@ -202,7 +204,7 @@ const Calendar = forwardRef(function Calendar2({ selected, setSelected, isDateUn
   }, label: text.showPreviousMonth, disabled: minDate && maxDayOfMonth(nextMonth(current, -1)) < minDate }), jsx(IconButton, { className: arrowButton, icon: "arrow_forward", onClick: () => {
     handleChangeMonth(1);
   }, label: text.showNextMonth, disabled: maxDate && nextMonth(current, 1) > maxDate })] })] }), jsxs("div", { className: gridStyle, role: "grid", children: [jsxs("div", { className: rowStyle, role: "row", style: { height: "unset" }, children: [jsx(HeaderCell, { role: "columnheader", children: days.mon }), jsx(HeaderCell, { role: "columnheader", children: days.tue }), jsx(HeaderCell, { role: "columnheader", children: days.wed }), jsx(HeaderCell, { role: "columnheader", children: days.thu }), jsx(HeaderCell, { role: "columnheader", children: days.fri }), jsx(HeaderCell, { role: "columnheader", children: days.sat }), jsx(HeaderCell, { role: "columnheader", children: days.sun })] }), jsx(DateGrid, { current, setCurrent, selected, setSelected, focused, setFocus, focusRef, isDateUnavailable, minDate, maxDate, isLoading: !!isLoading })] })] });
-});
+}
 export {
   Calendar
 };

package/dist/components/inputs/textFields/TextArea.cjs

@@ -6,7 +6,7 @@ const InputHelperText = require("../../../building-blocks/inputs/InputHelperText
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
-const React = require("react");
+require("react");
 require("../../../foundation/iconography/ExtraIconsProvider.cjs");
 require("../../../foundation/iconography/IconVariantProvider.cjs");
 require("../../../foundation/iconography/icons.cjs");
@@ -25,10 +25,10 @@ const shared = require("../shared.cjs");
 const textArea_css = require("./textArea.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const TextArea = React.forwardRef(function TextArea2({ counterText, visibleLines: visibleLinesProp, ...props }, ref) {
+function TextArea({ counterText, visibleLines: visibleLinesProp, ref, ...props }) {
   const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
   const { inputProps } = shared.getInputFieldProps(props);
-  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
@@ -40,7 +40,7 @@ const TextArea = React.forwardRef(function TextArea2({ counterText, visibleLines
     ...dynamic.assignInlineVars({
       [inputFieldConstants_css.visibleLines]: (visibleLinesProp ?? 4).toString()
     })
-  }, children: [jsxRuntime.jsx("textarea", { ...commonInputProps, ...inputProps, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: {
+  }, children: [jsxRuntime.jsx("textarea", { ...commonInputProps, ...inputProps, ref, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: {
     ...dynamic.assignInlineVars({
       [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
       [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
@@ -63,7 +63,7 @@ const TextArea = React.forwardRef(function TextArea2({ counterText, visibleLines
     placement: "right",
     density: wrapperProps.density
   }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
-});
+}
 const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
 const characterCount = (value, max) => `${value.trim().length}/${max}`;
 exports.TextArea = TextArea;

package/dist/components/inputs/textFields/TextArea.d.ts

@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes } from "react";
+import { Ref, TextareaHTMLAttributes } from "react";
 import { TextInputProps } from "../shared.js";
 export type TextAreaProps = TextInputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "value"> & {
     /**
@@ -15,6 +15,7 @@ export type TextAreaProps = TextInputProps & Omit<TextareaHTMLAttributes<HTMLTex
      * @default 4
      */
     visibleLines?: number;
+    ref?: Ref<HTMLTextAreaElement>;
 };
 /**
 Text areas are fixed-height fields that are taller than text fields and wrap overflow text onto a new line.
@@ -28,22 +29,7 @@ If they are used, you must ensure the label and helper text in combination adequ
 
 Documentation: [TextArea](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textarea--docs)
 */
-export declare const TextArea: import("react").ForwardRefExoticComponent<TextInputProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "placeholder"> & {
-    /**
-     * Text which shows e.g. a word or character count.
-     * `wordCount` and `characterCount` functions are available to generate this text.
-     *
-     * Accessibility note: The counter is hidden from screen readers, as live updates to the count tend to be "cut off"
-     * by the word being typed. If there is a max count it should also be communicated through helper text and
-     * validation.
-     */
-    counterText?: string;
-    /**
-     * Number of lines that should be visible without scrolling
-     * @default 4
-     */
-    visibleLines?: number;
-} & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function TextArea({ counterText, visibleLines: visibleLinesProp, ref, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
 export declare const wordCount: (value: string, max: number) => string;
 export declare const characterCount: (value: string, max: number) => string;
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/components/inputs/textFields/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA4B,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAezE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,eAAO,MAAM,QAAQ;IA5Bb;;;;;;;OAOG;kBACW,MAAM;IACpB;;;OAGG;mBACY,MAAM;mDAiK3B,CAAC;AAEH,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextArea.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAepD,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG,cAAc,GACtC,IAAI,CACA,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,aAAa,GAAG,OAAO,CAC1B,GAAG;IACA;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAClC,CAAC;AAEN;;;;;;;;;;;EAWE;AACF,wBAAgB,QAAQ,CAAC,EACrB,WAAW,EACX,YAAY,EAAE,gBAAgB,EAC9B,GAAG,EACH,GAAG,KAAK,EACX,EAAE,aAAa,2CA6If;AAED,eAAO,MAAM,SAAS,UAAW,MAAM,OAAO,MAAM,WAMjC,CAAC;AAEpB,eAAO,MAAM,cAAc,UAAW,MAAM,OAAO,MAAM,WACtB,CAAC"}

package/dist/components/inputs/textFields/TextArea.js

@@ -4,7 +4,7 @@ import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
-import { forwardRef } from "react";
+import "react";
 import "../../../foundation/iconography/ExtraIconsProvider.js";
 import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
@@ -21,10 +21,10 @@ import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
 import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
 import { wordCounterStyle } from "./textArea.css.js";
-const TextArea = forwardRef(function TextArea2({ counterText, visibleLines: visibleLinesProp, ...props }, ref) {
+function TextArea({ counterText, visibleLines: visibleLinesProp, ref, ...props }) {
   const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
   const { inputProps } = getInputFieldProps(props);
-  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
@@ -36,7 +36,7 @@ const TextArea = forwardRef(function TextArea2({ counterText, visibleLines: visi
     ...assignInlineVars({
       [visibleLines]: (visibleLinesProp ?? 4).toString()
     })
-  }, children: [jsx("textarea", { ...commonInputProps, ...inputProps, className: classNames(inputFieldStyle, inputProps.className), style: {
+  }, children: [jsx("textarea", { ...commonInputProps, ...inputProps, ref, className: classNames(inputFieldStyle, inputProps.className), style: {
     ...assignInlineVars({
       [preInputWidth]: wrapperProps.preInputWidth,
       [postInputWidth]: wrapperProps.postInputWidth
@@ -59,7 +59,7 @@ const TextArea = forwardRef(function TextArea2({ counterText, visibleLines: visi
     placement: "right",
     density: wrapperProps.density
   }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
-});
+}
 const wordCount = (value, max) => `${value.trim().split(/\s/).filter((x) => !!x).length}/${max} words`;
 const characterCount = (value, max) => `${value.trim().length}/${max}`;
 export {

package/dist/components/inputs/textFields/TextField.cjs

@@ -9,11 +9,11 @@ const Icon = require("../../../foundation/iconography/Icon.cjs");
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const dynamic = require("@vanilla-extract/dynamic");
 const classNames = require("classnames");
-const React = require("react");
 const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
 require("../../../utilities/layout/Row.cjs");
 require("@gnist/themes/tokens.css.js");
 require("react-content-loader");
+require("react");
 const iconButtonOverlay_css = require("../shared-styles/iconButtonOverlay.css.cjs");
 const inputField_css = require("../shared-styles/inputField.css.cjs");
 const inputFieldConstants_css = require("../shared-styles/inputFieldConstants.css.cjs");
@@ -22,7 +22,7 @@ const suffixPrefix_css = require("../shared-styles/suffixPrefix.css.cjs");
 const shared = require("../shared.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const TextField = React.forwardRef(function TextField2(props, ref) {
+function TextField(props) {
   const { wrapperProps, contentProps, commonInputProps } = shared.useInputFieldLogic(props);
   const { inputProps } = shared.getInputFieldProps(props);
   const isModeCurrencyOrNumberFormatting = props.mode?.style === "currency" || props.mode?.style === "numberSpacing";
@@ -47,14 +47,14 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
     }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
     inputProps.value = numberPrefix + formattedValue;
   }
-  return jsxRuntime.jsxs("span", { ref, className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
+  return jsxRuntime.jsxs("span", { className: classNames__default.default(wrapperProps.className, inputField_css.wrapperStyle), children: [props.leadingIcon && shared.isClickableIcon(props.leadingIcon) && jsxRuntime.jsx("button", { className: iconButtonOverlay_css.iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxRuntime.jsxs("label", { htmlFor: props.id, className: inputField_css.inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
+  }), children: [jsxRuntime.jsx("input", { ...commonInputProps, ...inputProps, ref: props.ref, value: inputProps.value, onChange: onChangeHandler, className: classNames__default.default(inputField_css.inputFieldStyle, inputProps.className), style: dynamic.assignInlineVars({
     [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
     [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -75,5 +75,5 @@ const TextField = React.forwardRef(function TextField2(props, ref) {
     placement: "right",
     density: wrapperProps.density
   }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsxRuntime.jsx(InputHelperText.InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
-});
+}
 exports.TextField = TextField;

package/dist/components/inputs/textFields/TextField.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from "react";
+import { InputHTMLAttributes, Ref } from "react";
 import { TextInputProps } from "../shared.js";
 export type TextFieldModeProps = {
     /**
@@ -11,7 +11,9 @@ export type TextFieldModeProps = {
         currency: "NOK";
     };
 };
-export type TextFieldProps = TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value">;
+export type TextFieldProps = TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "value"> & {
+    ref?: Ref<HTMLInputElement>;
+};
 /**
 A text field is an input that allows a user to write or edit text. Text fields typically appear in forms and dialogs.
 
@@ -23,5 +25,5 @@ _Accessibility note:_ The leading/trailing icon and prefix/suffix text will not
 
 Documentation: [TextField](https://gnist.moller.no/developers/components/latest/?path=/docs/components-inputs-textfields-textfield--docs)
  */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextInputProps & TextFieldModeProps & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/inputs/textFields/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAetE,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAEzE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,wMAqLpB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/textFields/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAejD,OAAO,EAGH,cAAc,EAEjB,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,kBAAkB,GAAG;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,eAAe,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACvC,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,GAAG;IACnE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC/B,CAAC;AAEN;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAgL9C"}

package/dist/components/inputs/textFields/TextField.js

@@ -7,18 +7,18 @@ import { Icon } from "../../../foundation/iconography/Icon.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import classNames from "classnames";
-import { forwardRef } from "react";
 import { InputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
 import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
+import "react";
 import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
 import { inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
 import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
 import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";
 import { useInputFieldLogic, getInputFieldProps, isClickableIcon } from "../shared.js";
-const TextField = forwardRef(function TextField2(props, ref) {
+function TextField(props) {
   const { wrapperProps, contentProps, commonInputProps } = useInputFieldLogic(props);
   const { inputProps } = getInputFieldProps(props);
   const isModeCurrencyOrNumberFormatting = props.mode?.style === "currency" || props.mode?.style === "numberSpacing";
@@ -43,14 +43,14 @@ const TextField = forwardRef(function TextField2(props, ref) {
     }).format(parseFloat(inputProps.value)).replaceAll(/[^0-9.,\W]/g, "").trim();
     inputProps.value = numberPrefix + formattedValue;
   }
-  return jsxs("span", { ref, className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
+  return jsxs("span", { className: classNames(wrapperProps.className, wrapperStyle), children: [props.leadingIcon && isClickableIcon(props.leadingIcon) && jsx("button", { className: iconButtonOverlayRecipe({
     placement: "left",
     density: wrapperProps.density
   }), title: props.leadingIcon.title, onClick: props.leadingIcon.onClick }), jsxs("label", { htmlFor: props.id, className: inputFieldWrapperRecipe({
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsx("input", { ...commonInputProps, ...inputProps, value: inputProps.value, onChange: onChangeHandler, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
+  }), children: [jsx("input", { ...commonInputProps, ...inputProps, ref: props.ref, value: inputProps.value, onChange: onChangeHandler, className: classNames(inputFieldStyle, inputProps.className), style: assignInlineVars({
     [preInputWidth]: wrapperProps.preInputWidth,
     [postInputWidth]: wrapperProps.postInputWidth
   }), onFocus: (event) => {
@@ -71,7 +71,7 @@ const TextField = forwardRef(function TextField2(props, ref) {
     placement: "right",
     density: wrapperProps.density
   }), title: props.trailingIcon.title, onClick: props.trailingIcon.onClick, type: "button" }), jsx(InputHelperText, { id: contentProps.helperId, validity: props.validity, helperText: props.helperText, reserveSpaceForMessage: props.reserveSpaceForMessage, disabled: props.disabled })] });
-});
+}
 export {
   TextField
 };

package/dist/components/surfaces/modal/Modal.cjs

@@ -19,11 +19,16 @@ require("../../actions/buttons/styles.css.cjs");
 require("../../../styles/states.css.cjs");
 const TextButton = require("../../actions/buttons/TextButton.cjs");
 const IconButton = require("../../actions/buttons/IconButton.cjs");
-require("../../actions/selectionControls/Checkbox.cjs");
-require("../../actions/selectionControls/RadioButton.cjs");
-require("../../actions/chips/ActionChip.cjs");
-require("../../actions/chips/FilterChip.cjs");
-require("../../actions/chips/TagChip.cjs");
+require("../../../building-blocks/inputs/internal/TextBelowInput.cjs");
+require("@gnist/themes/atoms.css.js");
+require("../../actions/selectionControls/checkbox.css.cjs");
+require("../../actions/selectionControls/shared.css.cjs");
+require("../../../utilities/layout/Column.cjs");
+require("../../../utilities/layout/Row.cjs");
+require("../../actions/selectionControls/radiobutton.css.cjs");
+require("../../actions/selectionControls/Switch.cjs");
+require("../../../styles/animations.css.cjs");
+require("../../actions/chips/styles.css.cjs");
 const index = require("../../../translations/index.cjs");
 const reactDom = require("react-dom");
 const modal_css = require("./modal.css.cjs");

package/dist/components/surfaces/modal/Modal.js

@@ -18,11 +18,16 @@ import "../../actions/buttons/styles.css.js";
 import "../../../styles/states.css.js";
 import { TextButton } from "../../actions/buttons/TextButton.js";
 import { IconButton } from "../../actions/buttons/IconButton.js";
-import "../../actions/selectionControls/Checkbox.js";
-import "../../actions/selectionControls/RadioButton.js";
-import "../../actions/chips/ActionChip.js";
-import "../../actions/chips/FilterChip.js";
-import "../../actions/chips/TagChip.js";
+import "../../../building-blocks/inputs/internal/TextBelowInput.js";
+import "@gnist/themes/atoms.css.js";
+import "../../actions/selectionControls/checkbox.css.js";
+import "../../actions/selectionControls/shared.css.js";
+import "../../../utilities/layout/Column.js";
+import "../../../utilities/layout/Row.js";
+import "../../actions/selectionControls/radiobutton.css.js";
+import "../../actions/selectionControls/Switch.js";
+import "../../../styles/animations.css.js";
+import "../../actions/chips/styles.css.js";
 import { useTranslation } from "../../../translations/index.js";
 import { createPortal } from "react-dom";
 import { modalStyle, backdropStyle, headerRowRecipe, modalHeadingStyle, contentContainerRecipe, actionRowRecipe, dialogRecipe } from "./modal.css.js";

package/dist/foundation/typography/index.d.ts

@@ -6,7 +6,7 @@ export interface DensityTextProps {
 }
 export declare const TextContainer: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, "div">;
 /**
-Display is reserved for the title of a screen. Display style is the largest text on the screen, reserved for short, important text or numerals.
+ The Display type is designed for attention-grabbing, prominent text that needs to stand out.  Use this type sparingly to avoid overwhelming the user and ensure it retains its impact.
 */
 export declare const DisplayText: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, "h1">;
 /**
@@ -22,9 +22,7 @@ export declare const Heading2Text: import("@gnist/component-utils").VanillaCompo
  */
 export declare const Heading3Text: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, "h4">;
 /**
-A lead is an opening paragraph that gives the reader the most important information of the article (often answers “what”, “where” and “when” of the story) while still maintaining the readers' interest.
-
-The lead paragraph should be not be longer than a single sentence, containing no more than 30 words.
+ Lead is the opening paragraph in an article that gives the reader a summary of the article and draws them in. This typo is mainly used in editorial content. The paragraph should be no longer than 30 words.
  */
 export declare const LeadText: import("@gnist/component-utils").VanillaComponent<import("react").ElementType, "p">;
 /**

package/dist/foundation/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/foundation/typography/index.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAIjD,eAAO,MAAM,YAAY,sCAExB,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,uFAAmD,CAAC;AAE9E;;EAEE;AACF,eAAO,MAAM,WAAW,sFAA8C,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qFAAuC,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,QAAQ,uFAAyC,CAAC;AAE/D;;EAEE;AACF,eAAO,MAAM,IAAI,qFAAmC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,UAAU,qFAA2C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/foundation/typography/index.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAIjD,eAAO,MAAM,YAAY,sCAExB,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,gBAAgB;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,uFAAmD,CAAC;AAE9E;;EAEE;AACF,eAAO,MAAM,WAAW,sFAA8C,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,YAAY,sFAAgD,CAAC;AAE1E;;GAEG;AACH,eAAO,MAAM,QAAQ,qFAAuC,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,QAAQ,uFAAyC,CAAC;AAE/D;;EAEE;AACF,eAAO,MAAM,IAAI,qFAAmC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,UAAU,qFAA2C,CAAC"}

package/dist/index.cjs

@@ -11,6 +11,7 @@ const TextButton = require("./components/actions/buttons/TextButton.cjs");
 const IconButton = require("./components/actions/buttons/IconButton.cjs");
 const Checkbox = require("./components/actions/selectionControls/Checkbox.cjs");
 const RadioButton = require("./components/actions/selectionControls/RadioButton.cjs");
+const Switch = require("./components/actions/selectionControls/Switch.cjs");
 const ActionChip = require("./components/actions/chips/ActionChip.cjs");
 const FilterChip = require("./components/actions/chips/FilterChip.cjs");
 const TagChip = require("./components/actions/chips/TagChip.cjs");
@@ -60,6 +61,7 @@ exports.TextButton = TextButton.TextButton;
 exports.IconButton = IconButton.IconButton;
 exports.Checkbox = Checkbox.Checkbox;
 exports.RadioButton = RadioButton.RadioButton;
+exports.Switch = Switch.Switch;
 exports.ActionChip = ActionChip.ActionChip;
 exports.FilterChip = FilterChip.FilterChip;
 exports.TagChip = TagChip.TagChip;

package/dist/index.js

@@ -9,6 +9,7 @@ import { TextButton } from "./components/actions/buttons/TextButton.js";
 import { IconButton } from "./components/actions/buttons/IconButton.js";
 import { Checkbox } from "./components/actions/selectionControls/Checkbox.js";
 import { RadioButton } from "./components/actions/selectionControls/RadioButton.js";
+import { Switch } from "./components/actions/selectionControls/Switch.js";
 import { ActionChip } from "./components/actions/chips/ActionChip.js";
 import { FilterChip } from "./components/actions/chips/FilterChip.js";
 import { TagChip } from "./components/actions/chips/TagChip.js";
@@ -101,6 +102,7 @@ export {
   SkodaFont,
   Spinner,
   SuccessButton,
+  Switch,
   TagChip,
   TextArea,
   TextButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "3.8.4",
+  "version": "3.9.0",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "0bcdc4c9a824dcaaa343ff49c65f21b221f17ee4"
+  "gitHead": "3e5cba978c8b0145ee4f46b341191212e14ecd6f"
 }