@telia/teddy 0.0.37 → 0.0.39

package/dist/components/card/index.d.ts

@@ -1,2 +1,64 @@
-export { Card } from './card';
-export type { CardProps } from './card';
+import { HeadingProps } from './card-heading';
+import { RootProps } from './card';
+import { ButtonProps } from './card-button';
+import { ContentProps } from './card-content';
+import { IllustrationProps } from './card-illustration';
+import { LineProps } from './card-line';
+import { LinkProps } from './card-link';
+import { SlotProps } from './card-slot';
+import { FooterProps } from './card-footer';
+
+export declare const Card: import('react').ForwardRefExoticComponent<RootProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+    Button: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+    } & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & {
+        iconOnly: true;
+        "aria-label": string;
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "aria-label"> & import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+        display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+    } & {
+        asChild?: boolean | undefined;
+        loading?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & {
+        iconOnly?: false | undefined;
+        "aria-label"?: string | undefined;
+    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "variant"> & {
+        variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
+    Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        inset?: "top" | "bottom" | "left" | "right" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
+        rounded?: boolean | undefined;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+    Line: import('react').ForwardRefExoticComponent<LineProps & import('react').RefAttributes<HTMLDivElement>>;
+    Link: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        asChild?: boolean | undefined;
+        disableVisited?: boolean | undefined;
+        ensureTargetArea?: boolean | undefined;
+        silent?: boolean | undefined;
+        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+    } & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+    Slot: import('react').ForwardRefExoticComponent<SlotProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export type CardProps = {
+    Root: RootProps;
+    Heading: HeadingProps;
+    Button: ButtonProps;
+    Content: ContentProps;
+    Illustration: IllustrationProps;
+    Line: LineProps;
+    Link: LinkProps;
+    Slot: SlotProps;
+    Footer: FooterProps;
+};

package/dist/components/card/index.js

@@ -1,4 +1,31 @@
-import { Card } from "./card.js";
+import { Heading } from "./card-heading.js";
+import { Root } from "./card.js";
+import { Button } from "./card-button.js";
+import { Content } from "./card-content.js";
+import { Illustration } from "./card-illustration.js";
+import { Line } from "./card-line.js";
+import { Link } from "./card-link.js";
+import { Slot } from "./card-slot.js";
+import { Footer } from "./card-footer.js";
+Root.displayName = "Card";
+Button.displayName = "Card.Button";
+Content.displayName = "Card.Content";
+Heading.displayName = "Card.Heading";
+Illustration.displayName = "Card.Illustration";
+Line.displayName = "Card.Line";
+Link.displayName = "Card.Link";
+Slot.displayName = "Card.Slot";
+Footer.displayName = "Card.Footer";
+const Card = Object.assign(Root, {
+  Heading,
+  Button,
+  Content,
+  Illustration,
+  Line,
+  Link,
+  Slot,
+  Footer
+});
 export {
   Card
 };

package/dist/components/card/utils.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
+exports.variantOptions = variantOptions;

package/dist/components/card/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const variantOptions: readonly ["purple-light", "purple-dark", "gray", "white", "beige"];
+export type Variant = (typeof variantOptions)[number];

package/dist/components/card/utils.js

@@ -0,0 +1,4 @@
+const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
+export {
+  variantOptions
+};

package/dist/components/date-picker/css.cjs

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const styles = {
+  "date-picker": "_date-picker_1vj0x_1",
+  "date-picker__container": "_date-picker__container_1vj0x_7",
+  "date-picker__input": "_date-picker__input_1vj0x_20",
+  "date-picker__input--touched": "_date-picker__input--touched_1vj0x_38",
+  "date-picker__input-icon-container": "_date-picker__input-icon-container_1vj0x_46",
+  "date-picker__toggle-button": "_date-picker__toggle-button_1vj0x_52",
+  "date-picker__additional": "_date-picker__additional_1vj0x_59",
+  "date-picker__error": "_date-picker__error_1vj0x_62",
+  "date-picker__toggle-icon": "_date-picker__toggle-icon_1vj0x_70",
+  "date-picker__dialog-container": "_date-picker__dialog-container_1vj0x_79",
+  "date-picker__dialog": "_date-picker__dialog_1vj0x_79",
+  "is-active": "_is-active_1vj0x_108",
+  "date-picker__dialog-content": "_date-picker__dialog-content_1vj0x_113",
+  "date-picker__table-scrollable": "_date-picker__table-scrollable_1vj0x_137",
+  "date-picker__table-wrapper": "_date-picker__table-wrapper_1vj0x_142",
+  "date-picker__table": "_date-picker__table_1vj0x_137",
+  "date-picker__table-header": "_date-picker__table-header_1vj0x_156",
+  "date-picker__row": "_date-picker__row_1vj0x_167",
+  "date-picker__cell": "_date-picker__cell_1vj0x_170",
+  "date-picker__year-button": "_date-picker__year-button_1vj0x_175",
+  "date-picker__year-chevron": "_date-picker__year-chevron_1vj0x_204",
+  "date-picker__year": "_date-picker__year_1vj0x_175",
+  "is-today": "_is-today_1vj0x_226",
+  "is-focused": "_is-focused_1vj0x_230",
+  "date-picker__day": "_date-picker__day_1vj0x_259",
+  "is-month": "_is-month_1vj0x_280",
+  "date-picker__header": "_date-picker__header_1vj0x_311",
+  "date-picker__nav": "_date-picker__nav_1vj0x_317",
+  "date-picker__nav-month": "_date-picker__nav-month_1vj0x_323",
+  "date-picker__prev": "_date-picker__prev_1vj0x_331",
+  "date-picker__next": "_date-picker__next_1vj0x_331",
+  "date-picker__prev-icon": "_date-picker__prev-icon_1vj0x_362",
+  "date-picker__next-icon": "_date-picker__next-icon_1vj0x_367",
+  "date-picker__select": "_date-picker__select_1vj0x_372",
+  "date-picker__select-label": "_date-picker__select-label_1vj0x_386",
+  "date-picker__select-icon": "_date-picker__select-icon_1vj0x_389",
+  "date-picker__close_year": "_date-picker__close_year_1vj0x_408",
+  "date-picker__vhidden": "_date-picker__vhidden_1vj0x_422"
+};
+const rootClassName = "date-picker";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+exports.css = css;

package/dist/components/date-picker/css.d.ts

@@ -0,0 +1 @@
+export declare const css: (suffix: string | null) => string;

package/dist/components/date-picker/css.js

@@ -0,0 +1,59 @@
+import clsx from "clsx";
+const styles = {
+  "date-picker": "_date-picker_1vj0x_1",
+  "date-picker__container": "_date-picker__container_1vj0x_7",
+  "date-picker__input": "_date-picker__input_1vj0x_20",
+  "date-picker__input--touched": "_date-picker__input--touched_1vj0x_38",
+  "date-picker__input-icon-container": "_date-picker__input-icon-container_1vj0x_46",
+  "date-picker__toggle-button": "_date-picker__toggle-button_1vj0x_52",
+  "date-picker__additional": "_date-picker__additional_1vj0x_59",
+  "date-picker__error": "_date-picker__error_1vj0x_62",
+  "date-picker__toggle-icon": "_date-picker__toggle-icon_1vj0x_70",
+  "date-picker__dialog-container": "_date-picker__dialog-container_1vj0x_79",
+  "date-picker__dialog": "_date-picker__dialog_1vj0x_79",
+  "is-active": "_is-active_1vj0x_108",
+  "date-picker__dialog-content": "_date-picker__dialog-content_1vj0x_113",
+  "date-picker__table-scrollable": "_date-picker__table-scrollable_1vj0x_137",
+  "date-picker__table-wrapper": "_date-picker__table-wrapper_1vj0x_142",
+  "date-picker__table": "_date-picker__table_1vj0x_137",
+  "date-picker__table-header": "_date-picker__table-header_1vj0x_156",
+  "date-picker__row": "_date-picker__row_1vj0x_167",
+  "date-picker__cell": "_date-picker__cell_1vj0x_170",
+  "date-picker__year-button": "_date-picker__year-button_1vj0x_175",
+  "date-picker__year-chevron": "_date-picker__year-chevron_1vj0x_204",
+  "date-picker__year": "_date-picker__year_1vj0x_175",
+  "is-today": "_is-today_1vj0x_226",
+  "is-focused": "_is-focused_1vj0x_230",
+  "date-picker__day": "_date-picker__day_1vj0x_259",
+  "is-month": "_is-month_1vj0x_280",
+  "date-picker__header": "_date-picker__header_1vj0x_311",
+  "date-picker__nav": "_date-picker__nav_1vj0x_317",
+  "date-picker__nav-month": "_date-picker__nav-month_1vj0x_323",
+  "date-picker__prev": "_date-picker__prev_1vj0x_331",
+  "date-picker__next": "_date-picker__next_1vj0x_331",
+  "date-picker__prev-icon": "_date-picker__prev-icon_1vj0x_362",
+  "date-picker__next-icon": "_date-picker__next-icon_1vj0x_367",
+  "date-picker__select": "_date-picker__select_1vj0x_372",
+  "date-picker__select-label": "_date-picker__select-label_1vj0x_386",
+  "date-picker__select-icon": "_date-picker__select-icon_1vj0x_389",
+  "date-picker__close_year": "_date-picker__close_year_1vj0x_408",
+  "date-picker__vhidden": "_date-picker__vhidden_1vj0x_422"
+};
+const rootClassName = "date-picker";
+const css = (suffix) => {
+  if (suffix == null)
+    return "";
+  let tmp = null;
+  if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
+    tmp = clsx([styles[`${rootClassName + suffix}`]], "");
+  } else {
+    tmp = clsx([styles[`${suffix}`]], "");
+  }
+  if (!tmp) {
+    console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
+  }
+  return tmp;
+};
+export {
+  css
+};

package/dist/components/date-picker/date-picker-day.cjs

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_datePicker_dateUtils = require("./date-utils.cjs");
+const components_datePicker_css = require("./css.cjs");
+const DatePickerDay = ({
+  focusedDay,
+  today,
+  day,
+  onDaySelect,
+  disabled,
+  inRange,
+  isSelected,
+  dateFormatter
+}) => {
+  const isToday = components_datePicker_dateUtils.isEqual(day, today);
+  const isMonth = components_datePicker_dateUtils.isEqualMonth(day, focusedDay);
+  const isFocused = components_datePicker_dateUtils.isEqual(day, focusedDay);
+  const isOutsideRange = !inRange;
+  const isDisabled = disabled || isOutsideRange;
+  const handleClick = (e) => {
+    onDaySelect(e, day);
+  };
+  const buttonRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isFocused && buttonRef.current) {
+      setTimeout(() => {
+        var _a;
+        return (_a = buttonRef.current) == null ? void 0 : _a.focus();
+      }, 3);
+    }
+  }, [isFocused, buttonRef]);
+  let dayClass = components_datePicker_css.css("__day");
+  if (isDisabled) {
+    dayClass += " " + components_datePicker_css.css("is-disabled");
+  } else {
+    if (isToday) {
+      dayClass += " " + components_datePicker_css.css("is-today");
+    }
+    if (isMonth) {
+      dayClass += " " + components_datePicker_css.css("is-month");
+    }
+    if (isFocused) {
+      dayClass += " " + components_datePicker_css.css("is-focused");
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: dayClass,
+      tabIndex: isFocused ? 0 : void 0,
+      onClick: handleClick,
+      "aria-disabled": isDisabled ? "true" : void 0,
+      disabled: isOutsideRange,
+      type: "button",
+      "aria-label": day.getDate().toString(),
+      "aria-pressed": isSelected ? "true" : "false",
+      ref: buttonRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: day.getDate() }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: components_datePicker_css.css("__vhidden"), children: dateFormatter == null ? void 0 : dateFormatter.format(day) })
+      ]
+    }
+  );
+};
+exports.DatePickerDay = DatePickerDay;

package/dist/components/date-picker/date-picker-day.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export type DatePickerDayProps = {
+    focusedDay: Date;
+    today: Date;
+    day: Date;
+    disabled: boolean;
+    inRange: boolean;
+    isSelected: boolean;
+    dateFormatter: Intl.DateTimeFormat | undefined;
+    onDaySelect: (event: React.MouseEvent<HTMLButtonElement>, day: Date) => void;
+};
+export declare const DatePickerDay: React.FC<DatePickerDayProps>;

package/dist/components/date-picker/date-picker-day.js

@@ -0,0 +1,67 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useRef } from "react";
+import { isEqual, isEqualMonth } from "./date-utils.js";
+import { css } from "./css.js";
+const DatePickerDay = ({
+  focusedDay,
+  today,
+  day,
+  onDaySelect,
+  disabled,
+  inRange,
+  isSelected,
+  dateFormatter
+}) => {
+  const isToday = isEqual(day, today);
+  const isMonth = isEqualMonth(day, focusedDay);
+  const isFocused = isEqual(day, focusedDay);
+  const isOutsideRange = !inRange;
+  const isDisabled = disabled || isOutsideRange;
+  const handleClick = (e) => {
+    onDaySelect(e, day);
+  };
+  const buttonRef = useRef(null);
+  React__default.useEffect(() => {
+    if (isFocused && buttonRef.current) {
+      setTimeout(() => {
+        var _a;
+        return (_a = buttonRef.current) == null ? void 0 : _a.focus();
+      }, 3);
+    }
+  }, [isFocused, buttonRef]);
+  let dayClass = css("__day");
+  if (isDisabled) {
+    dayClass += " " + css("is-disabled");
+  } else {
+    if (isToday) {
+      dayClass += " " + css("is-today");
+    }
+    if (isMonth) {
+      dayClass += " " + css("is-month");
+    }
+    if (isFocused) {
+      dayClass += " " + css("is-focused");
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: dayClass,
+      tabIndex: isFocused ? 0 : void 0,
+      onClick: handleClick,
+      "aria-disabled": isDisabled ? "true" : void 0,
+      disabled: isOutsideRange,
+      type: "button",
+      "aria-label": day.getDate().toString(),
+      "aria-pressed": isSelected ? "true" : "false",
+      ref: buttonRef,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: day.getDate() }),
+        /* @__PURE__ */ jsx("span", { className: css("__vhidden"), children: dateFormatter == null ? void 0 : dateFormatter.format(day) })
+      ]
+    }
+  );
+};
+export {
+  DatePickerDay
+};

package/dist/components/date-picker/date-picker-input.cjs

@@ -0,0 +1,89 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+require("../../assets/sprite.269ba410-teddy.svg");
+const components_icon_icon = require("../icon/icon.cjs");
+const components_datePicker_css = require("./css.cjs");
+const DatePickerInput = ({
+  dateFormatter,
+  describedBy,
+  localization,
+  name,
+  formattedValue,
+  valueAsDate,
+  value,
+  identifier,
+  disabled,
+  readonly,
+  required,
+  role,
+  touched,
+  buttonRef,
+  inputRef,
+  onInput,
+  onBlur,
+  onFocus,
+  makeTouched,
+  formId
+}) => {
+  const handleBlur = (event) => {
+    makeTouched();
+    onBlur(event);
+  };
+  const handleInvalid = (event) => {
+    makeTouched();
+    event.preventDefault();
+  };
+  const onCalendarIconClicked = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = document.getElementById(identifier)) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: components_datePicker_css.css("__input-icon-container"), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: components_datePicker_css.css("__toggle-button"),
+        onClick: onCalendarIconClicked,
+        ref: buttonRef,
+        type: "button",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "calendar", className: components_datePicker_css.css("__toggle-icon") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: components_datePicker_css.css("__vhidden"), children: [
+            localization.buttonLabel,
+            valueAsDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              ", ",
+              localization.selectedDateMessage,
+              " ",
+              dateFormatter == null ? void 0 : dateFormatter.format(valueAsDate)
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: components_datePicker_css.css("__input") + " " + components_datePicker_css.css(touched ? "__input--touched" : null),
+        value: formattedValue,
+        placeholder: localization.calendarPlaceholderFormat,
+        id: identifier,
+        disabled,
+        readOnly: readonly,
+        role,
+        required: required ? true : void 0,
+        "aria-autocomplete": "none",
+        "aria-describedby": describedBy,
+        onInput: (e) => onInput(e),
+        onFocus,
+        onBlur: handleBlur,
+        autoComplete: "off",
+        ref: inputRef,
+        onInvalid: handleInvalid,
+        form: formId
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value })
+  ] });
+};
+module.exports = DatePickerInput;

package/dist/components/date-picker/date-picker-input.d.ts

@@ -0,0 +1,27 @@
+import { DatePickerLocalizedText } from './date-picker-localization';
+
+type DatePickerInputProps = {
+    value: string;
+    formattedValue: string;
+    valueAsDate: Date | undefined;
+    localization: DatePickerLocalizedText;
+    name: string | undefined;
+    identifier: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    role: string | undefined;
+    dateFormatter: Intl.DateTimeFormat | undefined;
+    describedBy: string;
+    touched: boolean;
+    onInput: (event: any) => void;
+    onBlur: (event: any) => void;
+    onFocus: (event: any) => void;
+    buttonLabel: string | undefined;
+    buttonRef: (element: HTMLButtonElement) => void;
+    inputRef: (element: HTMLInputElement) => void;
+    makeTouched: () => void;
+    formId?: string;
+};
+declare const DatePickerInput: React.FC<DatePickerInputProps>;
+export default DatePickerInput;

package/dist/components/date-picker/date-picker-input.js

@@ -0,0 +1,90 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../../assets/sprite.269ba410-teddy.svg";
+import { Icon } from "../icon/icon.js";
+import { css } from "./css.js";
+const DatePickerInput = ({
+  dateFormatter,
+  describedBy,
+  localization,
+  name,
+  formattedValue,
+  valueAsDate,
+  value,
+  identifier,
+  disabled,
+  readonly,
+  required,
+  role,
+  touched,
+  buttonRef,
+  inputRef,
+  onInput,
+  onBlur,
+  onFocus,
+  makeTouched,
+  formId
+}) => {
+  const handleBlur = (event) => {
+    makeTouched();
+    onBlur(event);
+  };
+  const handleInvalid = (event) => {
+    makeTouched();
+    event.preventDefault();
+  };
+  const onCalendarIconClicked = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = document.getElementById(identifier)) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: css("__input-icon-container"), children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: css("__toggle-button"),
+        onClick: onCalendarIconClicked,
+        ref: buttonRef,
+        type: "button",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "calendar", className: css("__toggle-icon") }),
+          /* @__PURE__ */ jsxs("span", { className: css("__vhidden"), children: [
+            localization.buttonLabel,
+            valueAsDate && /* @__PURE__ */ jsxs("span", { children: [
+              ", ",
+              localization.selectedDateMessage,
+              " ",
+              dateFormatter == null ? void 0 : dateFormatter.format(valueAsDate)
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: css("__input") + " " + css(touched ? "__input--touched" : null),
+        value: formattedValue,
+        placeholder: localization.calendarPlaceholderFormat,
+        id: identifier,
+        disabled,
+        readOnly: readonly,
+        role,
+        required: required ? true : void 0,
+        "aria-autocomplete": "none",
+        "aria-describedby": describedBy,
+        onInput: (e) => onInput(e),
+        onFocus,
+        onBlur: handleBlur,
+        autoComplete: "off",
+        ref: inputRef,
+        onInvalid: handleInvalid,
+        form: formId
+      }
+    ),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
+  ] });
+};
+export {
+  DatePickerInput as default
+};

package/dist/components/date-picker/date-picker-localization.cjs

@@ -0,0 +1,31 @@
+"use strict";
+const localization = {
+  buttonLabel: "Åpne kalender",
+  placeholder: "YYYY-MM-DD",
+  selectedDateMessage: "Valgt dato er",
+  prevMonthLabel: "Forrige",
+  nextMonthLabel: "Neste",
+  monthSelectLabel: "Måned",
+  yearSelectLabel: "År",
+  closeLabel: "Lukk",
+  calendarPlaceholderFormat: "dd.MM.yyyy",
+  calendarHeading: "Velg dato",
+  dayNames: ["Søndag", "Mandag", "Tirsdag", "Onsdag", "Torsdag", "Fredag", "Lørdag"],
+  monthNames: [
+    "Januar",
+    "Februar",
+    "Mars",
+    "April",
+    "Mai",
+    "Juni",
+    "Juli",
+    "August",
+    "September",
+    "Oktober",
+    "November",
+    "Desember"
+  ],
+  monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"],
+  locale: "no-NO"
+};
+module.exports = localization;

package/dist/components/date-picker/date-picker-localization.d.ts

@@ -0,0 +1,20 @@
+type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];
+type DayNames = [string, string, string, string, string, string, string];
+export type DatePickerLocalizedText = {
+    buttonLabel: string;
+    placeholder: string;
+    selectedDateMessage: string;
+    prevMonthLabel: string;
+    nextMonthLabel: string;
+    monthSelectLabel: string;
+    yearSelectLabel: string;
+    closeLabel: string;
+    calendarPlaceholderFormat: string;
+    calendarHeading: string;
+    dayNames: DayNames;
+    monthNames: MonthsNames;
+    monthNamesShort: MonthsNames;
+    locale: string | string[];
+};
+declare const localization: DatePickerLocalizedText;
+export default localization;