@postenbring/hedwig-react 0.0.65 → 0.0.67

package/dist/form/fieldset/fieldset.mjs

@@ -1,7 +1,7 @@
 import {
   Fieldset,
   useFieldsetContext
-} from "../../chunk-HXV2UMEV.mjs";
+} from "../../chunk-DM4PJFLG.mjs";
 import "../../chunk-NSLSA7F7.mjs";
 import "../../chunk-IL7576PP.mjs";
 import "../../chunk-R4SQKVDQ.mjs";

package/dist/form/fieldset/index.js

@@ -117,7 +117,7 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
             children: legend
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
       ]
     })

package/dist/form/fieldset/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset, useFieldsetContext } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <div className={clsx(\"hds-fieldset__input-wrapper\")}>\n        <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n          {children}\n        </FieldsetContext.Provider>\n      </div>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n  return (\n    <div\n      aria-live=\"assertive\"\n      className={clsx(\"hds-error-message\", className as undefined)}\n      id={id}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA6D;AAE7D,IAAAA,0BAAqB;;;ACFrB,6BAAqB;AAWjB;AAFG,SAAS,aAAa,EAAE,UAAU,IAAI,UAAU,GAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,MAC3D;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ADoBI,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,4BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,yBAAW,eAAe;AAE3D,IAAM,eAAW,yBAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,oBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,SAAI,eAAW,8BAAK,6BAA6B,GAChD,uDAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH,GACF;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_typed_classname","import_jsx_runtime","Fieldset"]}
+{"version":3,"sources":["../../../src/form/fieldset/index.tsx","../../../src/form/fieldset/fieldset.tsx","../../../src/form/error-message/error-message.tsx"],"sourcesContent":["export { Fieldset, useFieldsetContext } from \"./fieldset\";\nexport type * from \"./fieldset\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { ReactNode } from \"react\";\n\nexport interface ErrorMessageProps {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport function ErrorMessage({ children, id, className }: ErrorMessageProps) {\n  return (\n    <div\n      aria-live=\"assertive\"\n      className={clsx(\"hds-error-message\", className as undefined)}\n      id={id}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA6D;AAE7D,IAAAA,0BAAqB;;;ACFrB,6BAAqB;AAWjB;AAFG,SAAS,aAAa,EAAE,UAAU,IAAI,UAAU,GAAsB;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,MAC3D;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ADoBI,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,4BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,yBAAW,eAAe;AAE3D,IAAM,eAAW,yBAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,oBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;","names":["import_typed_classname","import_jsx_runtime","Fieldset"]}

package/dist/form/fieldset/index.mjs

@@ -2,7 +2,7 @@ import "../../chunk-LMF3QGSF.mjs";
 import {
   Fieldset,
   useFieldsetContext
-} from "../../chunk-HXV2UMEV.mjs";
+} from "../../chunk-DM4PJFLG.mjs";
 import "../../chunk-NSLSA7F7.mjs";
 import "../../chunk-IL7576PP.mjs";
 import "../../chunk-R4SQKVDQ.mjs";

package/dist/form/index.d.mts

@@ -1,18 +1,20 @@
+export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
+export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
+export { DatePicker_alias_2 as DatePicker } from '../_tsup-dts-rollup';
+export { DatePickerProps_alias_2 as DatePickerProps } from '../_tsup-dts-rollup';
+export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
+export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
 export { Fieldset_alias_2 as Fieldset } from '../_tsup-dts-rollup';
 export { useFieldsetContext_alias_2 as useFieldsetContext } from '../_tsup-dts-rollup';
 export { FieldsetProps_alias_2 as FieldsetProps } from '../_tsup-dts-rollup';
 export { Input_alias_2 as Input } from '../_tsup-dts-rollup';
 export { InputProps_alias_2 as InputProps } from '../_tsup-dts-rollup';
-export { Select_alias_2 as Select } from '../_tsup-dts-rollup';
-export { SelectProps_alias_2 as SelectProps } from '../_tsup-dts-rollup';
-export { Textarea_alias_2 as Textarea } from '../_tsup-dts-rollup';
-export { TextareaProps_alias_2 as TextareaProps } from '../_tsup-dts-rollup';
-export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
-export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
 export { Radiobutton_alias_2 as Radiobutton } from '../_tsup-dts-rollup';
 export { RadioGroup_alias_2 as RadioGroup } from '../_tsup-dts-rollup';
 export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
 export { RadiobuttonProps_alias_2 as RadiobuttonProps } from '../_tsup-dts-rollup';
 export { RadioGroupProps_alias_2 as RadioGroupProps } from '../_tsup-dts-rollup';
-export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
-export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
+export { Select_alias_2 as Select } from '../_tsup-dts-rollup';
+export { SelectProps_alias_2 as SelectProps } from '../_tsup-dts-rollup';
+export { Textarea_alias_2 as Textarea } from '../_tsup-dts-rollup';
+export { TextareaProps_alias_2 as TextareaProps } from '../_tsup-dts-rollup';

package/dist/form/index.d.ts

@@ -1,18 +1,20 @@
+export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
+export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
+export { DatePicker_alias_2 as DatePicker } from '../_tsup-dts-rollup';
+export { DatePickerProps_alias_2 as DatePickerProps } from '../_tsup-dts-rollup';
+export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
+export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
 export { Fieldset_alias_2 as Fieldset } from '../_tsup-dts-rollup';
 export { useFieldsetContext_alias_2 as useFieldsetContext } from '../_tsup-dts-rollup';
 export { FieldsetProps_alias_2 as FieldsetProps } from '../_tsup-dts-rollup';
 export { Input_alias_2 as Input } from '../_tsup-dts-rollup';
 export { InputProps_alias_2 as InputProps } from '../_tsup-dts-rollup';
-export { Select_alias_2 as Select } from '../_tsup-dts-rollup';
-export { SelectProps_alias_2 as SelectProps } from '../_tsup-dts-rollup';
-export { Textarea_alias_2 as Textarea } from '../_tsup-dts-rollup';
-export { TextareaProps_alias_2 as TextareaProps } from '../_tsup-dts-rollup';
-export { Checkbox_alias_2 as Checkbox } from '../_tsup-dts-rollup';
-export { CheckboxProps_alias_2 as CheckboxProps } from '../_tsup-dts-rollup';
 export { Radiobutton_alias_2 as Radiobutton } from '../_tsup-dts-rollup';
 export { RadioGroup_alias_2 as RadioGroup } from '../_tsup-dts-rollup';
 export { useRadioGroupContext_alias_2 as useRadioGroupContext } from '../_tsup-dts-rollup';
 export { RadiobuttonProps_alias_2 as RadiobuttonProps } from '../_tsup-dts-rollup';
 export { RadioGroupProps_alias_2 as RadioGroupProps } from '../_tsup-dts-rollup';
-export { ErrorMessage_alias_2 as ErrorMessage } from '../_tsup-dts-rollup';
-export { ErrorMessageProps_alias_2 as ErrorMessageProps } from '../_tsup-dts-rollup';
+export { Select_alias_2 as Select } from '../_tsup-dts-rollup';
+export { SelectProps_alias_2 as SelectProps } from '../_tsup-dts-rollup';
+export { Textarea_alias_2 as Textarea } from '../_tsup-dts-rollup';
+export { TextareaProps_alias_2 as TextareaProps } from '../_tsup-dts-rollup';

package/dist/form/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,12 +46,21 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/form/index.tsx
 var form_exports = {};
 __export(form_exports, {
   Checkbox: () => Checkbox,
+  DatePicker: () => DatePicker,
   ErrorMessage: () => ErrorMessage,
   Fieldset: () => Fieldset,
   Input: () => Input,
@@ -62,9 +73,9 @@ __export(form_exports, {
 });
 module.exports = __toCommonJS(form_exports);
 
-// src/form/fieldset/fieldset.tsx
-var import_react = require("react");
-var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
+// src/form/checkbox/checkbox.tsx
+var import_react2 = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/error-message/error-message.tsx
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
@@ -82,6 +93,8 @@ function ErrorMessage({ children, id, className }) {
 }
 
 // src/form/fieldset/fieldset.tsx
+var import_react = require("react");
+var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FieldsetContext = (0, import_react.createContext)({ hasError: false });
 var useFieldsetContext = () => (0, import_react.useContext)(FieldsetContext);
@@ -125,22 +138,80 @@ var Fieldset = (0, import_react.forwardRef)(function Fieldset2(_a, ref) {
             children: legend
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname2.clsx)("hds-fieldset__input-wrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldsetContext.Provider, { value: { hasError: Boolean(errorMessage) }, children }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
       ]
     })
   );
 });
 
-// src/form/input/input.tsx
-var import_react3 = require("react");
-var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
+// src/form/checkbox/checkbox.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Checkbox = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "plain",
+      hasError: hasErrorProp,
+      errorMessage,
+      title,
+      children,
+      className
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "hasError",
+      "errorMessage",
+      "title",
+      "children",
+      "className"
+    ]);
+    const errorMessageId = (0, import_react2.useId)();
+    const { hasError: hasFieldsetError } = useFieldsetContext();
+    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_typed_classname3.clsx)("hds-checkbox-wrapper"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: (0, import_typed_classname3.clsx)(
+            "hds-checkbox",
+            {
+              [`hds-checkbox--${variant}`]: variant === "bounding-box",
+              "hds-checkbox--error": hasError
+            },
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                __spreadProps(__spreadValues({}, rest), {
+                  "aria-invalid": hasError ? true : void 0,
+                  "aria-describedby": errorMessage ? errorMessageId : void 0,
+                  ref,
+                  type: "checkbox"
+                })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
+              title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
+            ] }),
+            title ? children : null
+          ]
+        }
+      ),
+      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage }) : null
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/form/date-picker/date-picker.tsx
+var import_react5 = require("react");
+var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/input-group/input-group.tsx
-var import_react2 = require("react");
-var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var InputGroup = (0, import_react2.forwardRef)(function InputGroup2(_a, ref) {
+var import_react3 = require("react");
+var import_typed_classname4 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var InputGroup = (0, import_react3.forwardRef)(function InputGroup2(_a, ref) {
   var _b = _a, {
     id,
     className,
@@ -165,25 +236,31 @@ var InputGroup = (0, import_react2.forwardRef)(function InputGroup2(_a, ref) {
     "readOnly",
     "children"
   ]);
-  const errorMessageId = (0, import_react2.useId)();
-  const inputId = (0, import_react2.useId)();
+  const errorMessageId = (0, import_react3.useId)();
+  const inputId = (0, import_react3.useId)();
   const renderInput = () => {
-    const input = import_react2.Children.toArray(children)[0];
-    if (!(0, import_react2.isValidElement)(input)) {
-      return;
-    }
-    return (0, import_react2.cloneElement)(input, __spreadProps(__spreadValues({
+    var _a2;
+    const inputProps = {
       "aria-describedby": errorMessage ? errorMessageId : void 0,
       "aria-invalid": errorMessage ? true : void 0,
-      id: id != null ? id : inputId
-    }, input.props), {
-      className: (0, import_typed_classname3.clsx)("hds-input-group__input", input.props.className)
+      id: id != null ? id : inputId,
+      className: (0, import_typed_classname4.clsx)("hds-input-group__input")
+    };
+    if (typeof children === "function") {
+      return children(inputProps);
+    }
+    const input = import_react3.Children.toArray(children)[0];
+    if (!(0, import_react3.isValidElement)(input)) {
+      return;
+    }
+    return (0, import_react3.cloneElement)(input, __spreadProps(__spreadValues(__spreadValues({}, inputProps), input.props), {
+      className: `${inputProps.className} ${(_a2 = input.props.className) != null ? _a2 : ""}`
     }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     __spreadProps(__spreadValues({
-      className: (0, import_typed_classname3.clsx)(
+      className: (0, import_typed_classname4.clsx)(
         "hds-input-group",
         {
           [`hds-input-group--${variant}`]: variant,
@@ -195,85 +272,128 @@ var InputGroup = (0, import_react2.forwardRef)(function InputGroup2(_a, ref) {
       style
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "label",
           __spreadProps(__spreadValues({
-            className: (0, import_typed_classname3.clsx)("hds-input-group__label", labelClassName)
+            className: (0, import_typed_classname4.clsx)("hds-input-group__label", labelClassName)
           }, labelProps), {
             htmlFor: id != null ? id : inputId,
             children: label
           })
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
-            className: (0, import_typed_classname3.clsx)("hds-input-group__input-wrapper"),
+            className: (0, import_typed_classname4.clsx)("hds-input-group__input-wrapper"),
             "data-disabled": disabled,
             "data-readonly": readOnly,
             children: renderInput()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage })
       ]
     })
   );
 });
 
-// src/form/input/input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Input = (0, import_react3.forwardRef)(function Input2(_a, ref) {
-  var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    InputGroup,
-    {
-      className: (0, import_typed_classname4.clsx)("hds-input", className),
-      disabled,
-      errorMessage,
-      id,
-      label,
-      labelProps,
-      readOnly,
-      style,
-      variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+// src/utils.ts
+var React = __toESM(require("react"));
+var import_react4 = require("react");
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
     }
-  );
-});
-Input.displayName = "Input";
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
 
-// src/form/select/select.tsx
-var import_react4 = require("react");
-var import_typed_classname5 = require("@postenbring/hedwig-css/typed-classname");
+// src/form/date-picker/date-picker.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Select = (0, import_react4.forwardRef)(function Select2(_a, ref) {
-  var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, children } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "children"]);
+var DatePicker = (0, import_react5.forwardRef)(function DatePicker2(_a, ref) {
+  var _b = _a, {
+    className,
+    variant,
+    errorMessage,
+    labelProps,
+    label,
+    id,
+    style,
+    disabled,
+    readOnly,
+    calendarButtonTitle = "\xC5pne kalender"
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "variant",
+    "errorMessage",
+    "labelProps",
+    "label",
+    "id",
+    "style",
+    "disabled",
+    "readOnly",
+    "calendarButtonTitle"
+  ]);
+  const inputRef = (0, import_react5.useRef)(null);
+  const mergedRef = useMergeRefs([inputRef, ref]);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname5.clsx)("hds-select", className),
+      className: (0, import_typed_classname5.clsx)("hds-date-picker", className),
       disabled,
       errorMessage,
       id,
       label,
       labelProps,
+      readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+      children: (inputProps) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          __spreadProps(__spreadValues(__spreadValues({}, rest), inputProps), {
+            disabled,
+            readOnly,
+            ref: mergedRef,
+            type: "date"
+          })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            className: (0, import_typed_classname5.clsx)("hds-date-picker__calendar-button"),
+            type: "button",
+            title: calendarButtonTitle,
+            onClick: () => {
+              var _a2;
+              (_a2 = inputRef.current) == null ? void 0 : _a2.showPicker();
+            }
+          }
+        )
+      ] })
     }
   );
 });
-Select.displayName = "Select";
+DatePicker.displayName = "DatePicker";
 
-// src/form/textarea/textarea.tsx
-var import_react5 = require("react");
+// src/form/input/input.tsx
+var import_react6 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Textarea = (0, import_react5.forwardRef)(function Textarea2(_a, ref) {
+var Input = (0, import_react6.forwardRef)(function Input2(_a, ref) {
   var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     InputGroup,
     {
-      className: (0, import_typed_classname6.clsx)("hds-textarea", className),
+      className: (0, import_typed_classname6.clsx)("hds-input", className),
       disabled,
       errorMessage,
       id,
@@ -282,79 +402,19 @@ var Textarea = (0, import_react5.forwardRef)(function Textarea2(_a, ref) {
       readOnly,
       style,
       variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
     }
   );
 });
-Textarea.displayName = "Textarea";
-
-// src/form/checkbox/checkbox.tsx
-var import_react6 = require("react");
-var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Checkbox = (0, import_react6.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, {
-      variant = "plain",
-      hasError: hasErrorProp,
-      errorMessage,
-      title,
-      children,
-      className
-    } = _b, rest = __objRest(_b, [
-      "variant",
-      "hasError",
-      "errorMessage",
-      "title",
-      "children",
-      "className"
-    ]);
-    const errorMessageId = (0, import_react6.useId)();
-    const { hasError: hasFieldsetError } = useFieldsetContext();
-    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_typed_classname7.clsx)("hds-checkbox-wrapper"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "div",
-        {
-          className: (0, import_typed_classname7.clsx)(
-            "hds-checkbox",
-            {
-              [`hds-checkbox--${variant}`]: variant === "bounding-box",
-              "hds-checkbox--error": hasError
-            },
-            className
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "input",
-                __spreadProps(__spreadValues({}, rest), {
-                  "aria-invalid": hasError ? true : void 0,
-                  "aria-describedby": errorMessage ? errorMessageId : void 0,
-                  ref,
-                  type: "checkbox"
-                })
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": true, className: "hds-checkbox__checkmark" }),
-              title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "hds-checkbox__title", children: title }) : children
-            ] }),
-            title ? children : null
-          ]
-        }
-      ),
-      errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { id: errorMessageId, children: errorMessage }) : null
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
+Input.displayName = "Input";
 
 // src/form/radiobutton/radiobutton.tsx
 var import_react8 = require("react");
-var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
+var import_typed_classname7 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/form/radiobutton/radiogroup.tsx
 var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react7.createContext)({
   hasError: false,
   onChange: () => {
@@ -364,12 +424,12 @@ var RadioGroupContext = (0, import_react7.createContext)({
 var useRadioGroupContext = () => (0, import_react7.useContext)(RadioGroupContext);
 var RadioGroup = (0, import_react7.forwardRef)(function RadioGroup2(_a, ref) {
   var _b = _a, { name, value, errorMessage, onChange, children } = _b, rest = __objRest(_b, ["name", "value", "errorMessage", "onChange", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadioGroupContext.Provider, { value: { name, value, hasError: Boolean(errorMessage), onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Fieldset, __spreadProps(__spreadValues({ errorMessage }, rest), { ref, children })) });
 });
 RadioGroup.displayName = "RadioGroup";
 
 // src/form/radiobutton/radiobutton.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var isChecked = ({
   checked,
   selectedValue,
@@ -409,10 +469,10 @@ var Radiobutton = (0, import_react8.forwardRef)(
     ]);
     const { hasError: hasFieldsetError } = useFieldsetContext();
     const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        className: (0, import_typed_classname8.clsx)(
+        className: (0, import_typed_classname7.clsx)(
           "hds-radiobutton",
           {
             [`hds-radiobutton--${variant}`]: variant === "bounding-box",
@@ -421,8 +481,8 @@ var Radiobutton = (0, import_react8.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               __spreadProps(__spreadValues(__spreadValues({}, context), rest), {
                 checked: isChecked({ checked, selectedValue, value }),
@@ -431,8 +491,8 @@ var Radiobutton = (0, import_react8.forwardRef)(
                 type: "radio"
               })
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": true, className: "hds-radiobutton__checkmark" }),
-            title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "hds-radiobutton__title", children: title }) : children
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "hds-radiobutton__checkmark" }),
+            title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "hds-radiobutton__title", children: title }) : children
           ] }),
           title ? children : null
         ]
@@ -441,9 +501,57 @@ var Radiobutton = (0, import_react8.forwardRef)(
   }
 );
 Radiobutton.displayName = "Radiobutton";
+
+// src/form/select/select.tsx
+var import_react9 = require("react");
+var import_typed_classname8 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Select = (0, import_react9.forwardRef)(function Select2(_a, ref) {
+  var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, children } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    InputGroup,
+    {
+      className: (0, import_typed_classname8.clsx)("hds-select", className),
+      disabled,
+      errorMessage,
+      id,
+      label,
+      labelProps,
+      style,
+      variant,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("select", __spreadProps(__spreadValues({}, rest), { disabled, ref, children }))
+    }
+  );
+});
+Select.displayName = "Select";
+
+// src/form/textarea/textarea.tsx
+var import_react10 = require("react");
+var import_typed_classname9 = require("@postenbring/hedwig-css/typed-classname");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Textarea = (0, import_react10.forwardRef)(function Textarea2(_a, ref) {
+  var _b = _a, { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly } = _b, rest = __objRest(_b, ["className", "variant", "errorMessage", "labelProps", "label", "id", "style", "disabled", "readOnly"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    InputGroup,
+    {
+      className: (0, import_typed_classname9.clsx)("hds-textarea", className),
+      disabled,
+      errorMessage,
+      id,
+      label,
+      labelProps,
+      readOnly,
+      style,
+      variant,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("textarea", __spreadProps(__spreadValues({}, rest), { disabled, readOnly, ref }))
+    }
+  );
+});
+Textarea.displayName = "Textarea";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Checkbox,
+  DatePicker,
   ErrorMessage,
   Fieldset,
   Input,