@telia/teddy 0.0.36 → 0.0.38

package/dist/components/card/card.js

@@ -1,51 +1,48 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { composeRefs } from "../../utils/composeRefs.js";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-import { Box } from "../box/box.js";
-import { Heading as Heading$1 } from "../heading/heading.js";
-import { Button as Button$1 } from "../button/button.js";
-import { Link as Link$1 } from "../link/link.js";
-import { teddySpacing50 } from "../../tokens/spacing/variables.js";
 import { Grid } from "../grid/grid.js";
+import { teddyColorTransparentWhite850, teddyColorTransparentWhite800, teddyColorTransparentWhite100, teddyColorTransparentBlack600, teddyColorTransparentBlack200 } from "../../tokens/color/variables.js";
 const styles = {
-  "teddy-card": "_teddy-card_aok47_3",
-  "teddy-card__slot": "_teddy-card__slot_aok47_13",
-  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_aok47_16",
-  "teddy-card__slot--center": "_teddy-card__slot--center_aok47_19",
-  "teddy-card--shadow": "_teddy-card--shadow_aok47_41",
-  "teddy-card__action": "_teddy-card__action_aok47_45",
-  "teddy-card__action--disabled": "_teddy-card__action--disabled_aok47_45",
-  "teddy-card--border": "_teddy-card--border_aok47_52",
-  "teddy-card--layout": "_teddy-card--layout_aok47_55",
-  "teddy-card__illustration": "_teddy-card__illustration_aok47_55",
-  "teddy-card__content": "_teddy-card__content_aok47_58",
-  "teddy-card__heading": "_teddy-card__heading_aok47_61",
-  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_aok47_67",
-  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_aok47_86",
-  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_aok47_98",
-  "teddy-card--rich-card": "_teddy-card--rich-card_aok47_110",
-  "teddy-card__line": "_teddy-card__line_aok47_128",
-  "teddy-card--purple-light": "_teddy-card--purple-light_aok47_132",
-  "teddy-card--purple-dark": "_teddy-card--purple-dark_aok47_146",
-  "teddy-card--white": "_teddy-card--white_aok47_165",
-  "teddy-card--gray": "_teddy-card--gray_aok47_179",
-  "teddy-card--beige": "_teddy-card--beige_aok47_193",
-  "teddy-card__image--as-background": "_teddy-card__image--as-background_aok47_207",
-  "teddy-card--background-image": "_teddy-card--background-image_aok47_213",
-  "teddy-card__inset": "_teddy-card__inset_aok47_218",
-  "teddy-card__inset--top": "_teddy-card__inset--top_aok47_221",
-  "teddy-card__inset--left": "_teddy-card__inset--left_aok47_224",
-  "teddy-card__inset--right": "_teddy-card__inset--right_aok47_227",
-  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_aok47_230"
+  "teddy-card": "_teddy-card_141ee_3",
+  "teddy-card__slot": "_teddy-card__slot_141ee_13",
+  "teddy-card__slot--bottom": "_teddy-card__slot--bottom_141ee_16",
+  "teddy-card__slot--center": "_teddy-card__slot--center_141ee_19",
+  "teddy-card--shadow": "_teddy-card--shadow_141ee_41",
+  "teddy-card__action": "_teddy-card__action_141ee_45",
+  "teddy-card__action--disabled": "_teddy-card__action--disabled_141ee_45",
+  "teddy-card--border": "_teddy-card--border_141ee_52",
+  "teddy-card--layout": "_teddy-card--layout_141ee_55",
+  "teddy-card__illustration": "_teddy-card__illustration_141ee_55",
+  "teddy-card__content": "_teddy-card__content_141ee_58",
+  "teddy-card__heading": "_teddy-card__heading_141ee_61",
+  "teddy-card__footer": "_teddy-card__footer_141ee_67",
+  "teddy-card--default": "_teddy-card--default_141ee_70",
+  "teddy-card--navigation-vertical": "_teddy-card--navigation-vertical_141ee_75",
+  "teddy-card--navigation-horizontal-small": "_teddy-card--navigation-horizontal-small_141ee_94",
+  "teddy-card--navigation-horizontal-large": "_teddy-card--navigation-horizontal-large_141ee_106",
+  "teddy-card--rich-card": "_teddy-card--rich-card_141ee_118",
+  "teddy-card__line": "_teddy-card__line_141ee_136",
+  "teddy-card--purple-light": "_teddy-card--purple-light_141ee_140",
+  "teddy-card--purple-dark": "_teddy-card--purple-dark_141ee_154",
+  "teddy-card--white": "_teddy-card--white_141ee_173",
+  "teddy-card--gray": "_teddy-card--gray_141ee_187",
+  "teddy-card--beige": "_teddy-card--beige_141ee_201",
+  "teddy-card__image--as-background": "_teddy-card__image--as-background_141ee_215",
+  "teddy-card--background-image": "_teddy-card--background-image_141ee_221",
+  "teddy-card__illustration--rounded": "_teddy-card__illustration--rounded_141ee_226",
+  "teddy-card__inset": "_teddy-card__inset_141ee_230",
+  "teddy-card__inset--top": "_teddy-card__inset--top_141ee_233",
+  "teddy-card__inset--left": "_teddy-card__inset--left_141ee_236",
+  "teddy-card__inset--right": "_teddy-card__inset--right_141ee_239",
+  "teddy-card__inset--bottom": "_teddy-card__inset--bottom_141ee_242"
 };
 const rootClassName = "teddy-card";
 const actionElementIdentifier = `${rootClassName}__action`;
-const variantOptions = ["purple-light", "purple-dark", "gray", "white", "beige"];
 const RootContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, children, shadow, backgroundImageSrc, layout, variant, bordered, ...props }, forwardRef) => {
+  ({ className, children, shadow, backgroundImageSrc, imageGradient, layout, variant, bordered, ...props }, forwardRef) => {
     const buttonRef = React__default.useRef(null);
     const linkRef = React__default.useRef(null);
     const classes = clsx(
@@ -55,17 +52,32 @@ const Root = React__default.forwardRef(
         [styles[`${rootClassName}--border`]]: bordered,
         [styles[`${rootClassName}--shadow`]]: shadow,
         [styles[`${rootClassName}--background-image`]]: backgroundImageSrc,
+        [styles[`${rootClassName}--background-image--${layout}`]]: layout,
         [styles[`${rootClassName}--layout`]]: layout,
         [styles[`${rootClassName}--${layout}`]]: layout
       },
       className
     );
+    const customStyle = backgroundImageSrc ? imageGradient === "light" ? {
+      backgroundImage: `
+        linear-gradient(${teddyColorTransparentWhite850} 0%, 
+        ${teddyColorTransparentWhite800} 50%, 
+        ${teddyColorTransparentWhite100} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : {
+      backgroundImage: `
+        linear-gradient(${teddyColorTransparentBlack600} 0%,
+        ${teddyColorTransparentBlack200} 100%), 
+        url(${backgroundImageSrc})`,
+      ...props.style
+    } : props.style;
     return /* @__PURE__ */ jsx(RootContext.Provider, { value: { buttonRef, linkRef, variant, layout }, children: /* @__PURE__ */ jsx(
       Grid,
       {
         ...props,
         className: classes,
-        style: backgroundImageSrc ? { backgroundImage: `url(${backgroundImageSrc})`, ...props.style } : props.style,
+        style: customStyle,
         onClick: composeEventHandlers(props.onClick, (e) => {
           var _a;
           if (e.isDefaultPrevented())
@@ -80,140 +92,11 @@ const Root = React__default.forwardRef(
     ) });
   }
 );
-Root.displayName = "Card";
-const Heading = React__default.forwardRef(
-  ({ className, as = "h2", ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__heading`]], className);
-    const variant = props.variant ?? "title-200";
-    return /* @__PURE__ */ jsx(
-      Heading$1,
-      {
-        ...props,
-        ...!props.asChild ? { as, asChild: false } : { as: void 0, asChild: true },
-        variant,
-        ref: forwardRef,
-        className: classes
-      }
-    );
-  }
-);
-Heading.displayName = "Card.Heading";
-const Content = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__content`]], className);
-  return /* @__PURE__ */ jsx(Box, { ...props, ref: forwardRef, className: classes });
-});
-Content.displayName = "Card.Content";
-const Slot = React__default.forwardRef(({ className, align, ...props }, forwardRef) => {
-  const classes = clsx(
-    [
-      styles[`${rootClassName}__slot`],
-      {
-        [styles[`${rootClassName}__slot--center`]]: align === "top" || align === "bottom",
-        [styles[`${rootClassName}__slot--bottom`]]: align == null ? void 0 : align.includes("bottom")
-      }
-    ],
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      position: "absolute",
-      top: (align == null ? void 0 : align.includes("top")) ? "0" : void 0,
-      bottom: (align == null ? void 0 : align.includes("bottom")) ? "0" : void 0,
-      left: (align == null ? void 0 : align.includes("left")) ? "200" : (align == null ? void 0 : align.includes("right")) ? void 0 : "50%",
-      right: (align == null ? void 0 : align.includes("right")) ? "200" : void 0,
-      ...props,
-      ref: forwardRef,
-      className: classes
-    }
-  );
-});
-const insetOptions = [
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "all",
-  "top-right-left",
-  "bottom-left-right",
-  "top-left",
-  "top-right",
-  "bottom-left",
-  "bottom-right",
-  "top-bottom",
-  "left-right"
-];
-const Illustration = React__default.forwardRef(
-  ({ className, children, ...props }, forwardRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const classes = clsx([styles[`${rootClassName}__illustration`]], className, [styles[`${rootClassName}__inset`]], {
-      [styles[`${rootClassName}__inset--top`]]: ((_a = props.inset) == null ? void 0 : _a.includes("top")) || ((_b = props.inset) == null ? void 0 : _b.includes("all")),
-      [styles[`${rootClassName}__inset--bottom`]]: ((_c = props.inset) == null ? void 0 : _c.includes("bottom")) || ((_d = props.inset) == null ? void 0 : _d.includes("all")),
-      [styles[`${rootClassName}__inset--left`]]: ((_e = props.inset) == null ? void 0 : _e.includes("left")) || ((_f = props.inset) == null ? void 0 : _f.includes("all")),
-      [styles[`${rootClassName}__inset--right`]]: ((_g = props.inset) == null ? void 0 : _g.includes("right")) || ((_h = props.inset) == null ? void 0 : _h.includes("all"))
-    });
-    return /* @__PURE__ */ jsx("div", { ...props, className: classes, ref: forwardRef, children });
-  }
-);
-Illustration.displayName = "Card.Illustration";
-function getButtonVariant(variant) {
-  switch (variant) {
-    case "purple-dark":
-      return "primary-negative";
-    default:
-      return "primary";
-  }
-}
-const Button = React__default.forwardRef(
-  ({ className, iconOnly = false, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const classes = clsx(
-      [styles[`${rootClassName}__button`]],
-      styles[actionElementIdentifier],
-      {
-        [styles[`${actionElementIdentifier}--disabled`]]: props.disabled
-      },
-      className
-    );
-    const ref = composeRefs(context == null ? void 0 : context.buttonRef, forwardRef);
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        ...!iconOnly || !props["aria-label"] ? { iconOnly: false, "aria-label": void 0 } : { iconOnly: true, "aria-label": props["aria-label"] },
-        ref,
-        variant: getButtonVariant(context == null ? void 0 : context.variant),
-        ...props,
-        className: classes
-      }
-    ) });
-  }
-);
-Button.displayName = "Card.Button";
-const Link = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const classes = clsx([styles[`${rootClassName}__link`]], styles[actionElementIdentifier], className);
-    const ref = composeRefs(context == null ? void 0 : context.linkRef, forwardRef);
-    return /* @__PURE__ */ jsx(Link$1, { ...props, ref, className: classes });
-  }
-);
-Link.displayName = "Card.Link";
-const Line = React__default.forwardRef(({ className, ...props }, forwardRef) => {
-  const classes = clsx([styles[`${rootClassName}__line`]], className);
-  return /* @__PURE__ */ jsx(Box, { width: "100%", p: "0", m: `${teddySpacing50} 0`, ...props, ref: forwardRef, className: classes, asChild: true, children: /* @__PURE__ */ jsx("hr", {}) });
-});
-const Card = Object.assign(Root, {
-  Root,
-  Heading,
-  Content,
-  Illustration,
-  Button,
-  Link,
-  Slot,
-  Line,
-  variantOptions,
-  insetOptions
-});
+Root.displayName = "Root";
 export {
-  Card
+  Root,
+  RootContext,
+  actionElementIdentifier,
+  rootClassName,
+  styles as s
 };

package/dist/components/card/index.cjs

@@ -1,4 +1,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_card_cardHeading = require("./card-heading.cjs");
 const components_card_card = require("./card.cjs");
-exports.Card = components_card_card.Card;
+const components_card_cardButton = require("./card-button.cjs");
+const components_card_cardContent = require("./card-content.cjs");
+const components_card_cardIllustration = require("./card-illustration.cjs");
+const components_card_cardLine = require("./card-line.cjs");
+const components_card_cardLink = require("./card-link.cjs");
+const components_card_cardSlot = require("./card-slot.cjs");
+const components_card_cardFooter = require("./card-footer.cjs");
+components_card_card.Root.displayName = "Card";
+components_card_cardButton.Button.displayName = "Card.Button";
+components_card_cardContent.Content.displayName = "Card.Content";
+components_card_cardHeading.Heading.displayName = "Card.Heading";
+components_card_cardIllustration.Illustration.displayName = "Card.Illustration";
+components_card_cardLine.Line.displayName = "Card.Line";
+components_card_cardLink.Link.displayName = "Card.Link";
+components_card_cardSlot.Slot.displayName = "Card.Slot";
+components_card_cardFooter.Footer.displayName = "Card.Footer";
+const Card = Object.assign(components_card_card.Root, {
+  Heading: components_card_cardHeading.Heading,
+  Button: components_card_cardButton.Button,
+  Content: components_card_cardContent.Content,
+  Illustration: components_card_cardIllustration.Illustration,
+  Line: components_card_cardLine.Line,
+  Link: components_card_cardLink.Link,
+  Slot: components_card_cardSlot.Slot,
+  Footer: components_card_cardFooter.Footer
+});
+exports.Card = Card;

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>;