@telia/teddy 0.2.13 → 0.2.15

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

@@ -2,44 +2,44 @@
 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"
+  "date-picker": "_date-picker_yt3fh_1",
+  "date-picker__container": "_date-picker__container_yt3fh_7",
+  "date-picker__input": "_date-picker__input_yt3fh_20",
+  "date-picker__input--touched": "_date-picker__input--touched_yt3fh_44",
+  "date-picker__input-icon-container": "_date-picker__input-icon-container_yt3fh_52",
+  "date-picker__toggle-button": "_date-picker__toggle-button_yt3fh_58",
+  "date-picker__additional": "_date-picker__additional_yt3fh_65",
+  "date-picker__error": "_date-picker__error_yt3fh_68",
+  "date-picker__toggle-icon": "_date-picker__toggle-icon_yt3fh_76",
+  "date-picker__dialog-container": "_date-picker__dialog-container_yt3fh_85",
+  "date-picker__dialog": "_date-picker__dialog_yt3fh_85",
+  "is-active": "_is-active_yt3fh_118",
+  "date-picker__dialog-content": "_date-picker__dialog-content_yt3fh_123",
+  "date-picker__table-scrollable": "_date-picker__table-scrollable_yt3fh_147",
+  "date-picker__table-wrapper": "_date-picker__table-wrapper_yt3fh_152",
+  "date-picker__table": "_date-picker__table_yt3fh_147",
+  "date-picker__table-header": "_date-picker__table-header_yt3fh_166",
+  "date-picker__row": "_date-picker__row_yt3fh_177",
+  "date-picker__cell": "_date-picker__cell_yt3fh_180",
+  "date-picker__year-button": "_date-picker__year-button_yt3fh_191",
+  "date-picker__year-chevron": "_date-picker__year-chevron_yt3fh_220",
+  "date-picker__year": "_date-picker__year_yt3fh_191",
+  "is-today": "_is-today_yt3fh_242",
+  "is-focused": "_is-focused_yt3fh_246",
+  "date-picker__day": "_date-picker__day_yt3fh_275",
+  "is-month": "_is-month_yt3fh_303",
+  "date-picker__header": "_date-picker__header_yt3fh_334",
+  "date-picker__nav": "_date-picker__nav_yt3fh_345",
+  "date-picker__nav-month": "_date-picker__nav-month_yt3fh_351",
+  "date-picker__prev": "_date-picker__prev_yt3fh_359",
+  "date-picker__next": "_date-picker__next_yt3fh_359",
+  "date-picker__prev-icon": "_date-picker__prev-icon_yt3fh_390",
+  "date-picker__next-icon": "_date-picker__next-icon_yt3fh_395",
+  "date-picker__select": "_date-picker__select_yt3fh_400",
+  "date-picker__select-label": "_date-picker__select-label_yt3fh_414",
+  "date-picker__select-icon": "_date-picker__select-icon_yt3fh_417",
+  "date-picker__close_year": "_date-picker__close_year_yt3fh_436",
+  "date-picker__vhidden": "_date-picker__vhidden_yt3fh_450"
 };
 const rootClassName = "date-picker";
 const css = (suffix) => {

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

@@ -1,43 +1,43 @@
 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"
+  "date-picker": "_date-picker_yt3fh_1",
+  "date-picker__container": "_date-picker__container_yt3fh_7",
+  "date-picker__input": "_date-picker__input_yt3fh_20",
+  "date-picker__input--touched": "_date-picker__input--touched_yt3fh_44",
+  "date-picker__input-icon-container": "_date-picker__input-icon-container_yt3fh_52",
+  "date-picker__toggle-button": "_date-picker__toggle-button_yt3fh_58",
+  "date-picker__additional": "_date-picker__additional_yt3fh_65",
+  "date-picker__error": "_date-picker__error_yt3fh_68",
+  "date-picker__toggle-icon": "_date-picker__toggle-icon_yt3fh_76",
+  "date-picker__dialog-container": "_date-picker__dialog-container_yt3fh_85",
+  "date-picker__dialog": "_date-picker__dialog_yt3fh_85",
+  "is-active": "_is-active_yt3fh_118",
+  "date-picker__dialog-content": "_date-picker__dialog-content_yt3fh_123",
+  "date-picker__table-scrollable": "_date-picker__table-scrollable_yt3fh_147",
+  "date-picker__table-wrapper": "_date-picker__table-wrapper_yt3fh_152",
+  "date-picker__table": "_date-picker__table_yt3fh_147",
+  "date-picker__table-header": "_date-picker__table-header_yt3fh_166",
+  "date-picker__row": "_date-picker__row_yt3fh_177",
+  "date-picker__cell": "_date-picker__cell_yt3fh_180",
+  "date-picker__year-button": "_date-picker__year-button_yt3fh_191",
+  "date-picker__year-chevron": "_date-picker__year-chevron_yt3fh_220",
+  "date-picker__year": "_date-picker__year_yt3fh_191",
+  "is-today": "_is-today_yt3fh_242",
+  "is-focused": "_is-focused_yt3fh_246",
+  "date-picker__day": "_date-picker__day_yt3fh_275",
+  "is-month": "_is-month_yt3fh_303",
+  "date-picker__header": "_date-picker__header_yt3fh_334",
+  "date-picker__nav": "_date-picker__nav_yt3fh_345",
+  "date-picker__nav-month": "_date-picker__nav-month_yt3fh_351",
+  "date-picker__prev": "_date-picker__prev_yt3fh_359",
+  "date-picker__next": "_date-picker__next_yt3fh_359",
+  "date-picker__prev-icon": "_date-picker__prev-icon_yt3fh_390",
+  "date-picker__next-icon": "_date-picker__next-icon_yt3fh_395",
+  "date-picker__select": "_date-picker__select_yt3fh_400",
+  "date-picker__select-label": "_date-picker__select-label_yt3fh_414",
+  "date-picker__select-icon": "_date-picker__select-icon_yt3fh_417",
+  "date-picker__close_year": "_date-picker__close_year_yt3fh_436",
+  "date-picker__vhidden": "_date-picker__vhidden_yt3fh_450"
 };
 const rootClassName = "date-picker";
 const css = (suffix) => {

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

@@ -5,6 +5,7 @@ import { ClearButtonProps } from './input-clear-button';
 
 declare const InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     frameClassName?: string | undefined;
+    preventGroupClickSelect?: boolean | undefined;
 } & import('react').RefAttributes<HTMLDivElement>> & {
     Input: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "children"> & {
         validationState?: ("invalid" | "valid") | undefined;

package/dist/components/input/input-group.cjs

@@ -43,7 +43,7 @@ function setCursorOnInput(e) {
 }
 const InputGroupContext = React.createContext(void 0);
 const Root = React.forwardRef(
-  ({ className, children, frameClassName, ...props }, forwardRef) => {
+  ({ className, preventGroupClickSelect, children, frameClassName, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
     const inputRef = React.useRef(null);
     const [isDirty, setIsDirty] = React.useState(false);
@@ -54,6 +54,8 @@ const Root = React.forwardRef(
         onPointerDown: (e) => {
           var _a;
           (_a = props.onPointerDown) == null ? void 0 : _a.call(props, e);
+          if (preventGroupClickSelect)
+            return;
           setCursorOnInput(e);
         },
         ref: forwardRef,

package/dist/components/input/input-group.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 
 export type InputGroupRootProps = React.ComponentPropsWithoutRef<'div'> & {
     frameClassName?: string;
+    preventGroupClickSelect?: boolean;
 };
 type InputGroupContextValue = {
     isDirty: boolean;
@@ -12,5 +13,6 @@ export declare const InputGroupContext: React.Context<InputGroupContextValue | u
 /** This is the element that wraps the input element gives the outline effect */
 export declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     frameClassName?: string | undefined;
+    preventGroupClickSelect?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/input/input-group.js

@@ -41,7 +41,7 @@ function setCursorOnInput(e) {
 }
 const InputGroupContext = React__default.createContext(void 0);
 const Root = React__default.forwardRef(
-  ({ className, children, frameClassName, ...props }, forwardRef) => {
+  ({ className, preventGroupClickSelect, children, frameClassName, ...props }, forwardRef) => {
     const classes = clsx([styles[`${rootClassName}`]], className);
     const inputRef = React__default.useRef(null);
     const [isDirty, setIsDirty] = React__default.useState(false);
@@ -52,6 +52,8 @@ const Root = React__default.forwardRef(
         onPointerDown: (e) => {
           var _a;
           (_a = props.onPointerDown) == null ? void 0 : _a.call(props, e);
+          if (preventGroupClickSelect)
+            return;
           setCursorOnInput(e);
         },
         ref: forwardRef,

package/dist/components/text-field/index.d.ts

@@ -21,6 +21,7 @@ export declare const TextField: import('react').ForwardRefExoticComponent<Omit<i
     } & import('react').RefAttributes<HTMLLabelElement>>;
     InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         frameClassName?: string | undefined;
+        preventGroupClickSelect?: boolean | undefined;
     } & import('react').RefAttributes<HTMLDivElement>>;
     HelperText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     ErrorList: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "children"> & {

package/dist/components/text-field/text-field-input-group.d.ts

@@ -4,4 +4,5 @@ import { InputGroupProps } from '../input';
 export type TextFieldInputGroupProps = InputGroupProps['Root'];
 export declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     frameClassName?: string | undefined;
+    preventGroupClickSelect?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/style.css

@@ -5245,18 +5245,18 @@
   100% {
     max-height: 0;
   }
-}._date-picker_1vj0x_1 {
+}._date-picker_yt3fh_1 {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
 }
-._date-picker__container_1vj0x_7 {
+._date-picker__container_yt3fh_7 {
   display: block;
   width: 100%;
   max-width: 480px;
 }
-._date-picker_1vj0x_1 > label {
+._date-picker_yt3fh_1 > label {
   font-family: var(--teddy-typography-family-default);
   color: var(--teddy-color-transparent-black-800);
   font-weight: 500;
@@ -5264,7 +5264,7 @@
   order: 2;
   margin-bottom: 4px;
 }
-._date-picker__input_1vj0x_20 {
+._date-picker__input_yt3fh_20 {
   font-family: var(--teddy-typography-family-default);
   order: 2;
   height: 2.875rem;
@@ -5279,34 +5279,40 @@
   border-radius: 4px;
   background: #fff;
 }
-._date-picker__input_1vj0x_20:invalid {
+@media screen and (max-width: 378px) {
+  ._date-picker__input_yt3fh_20 {
+    width: 100%;
+    max-width: 18rem;
+  }
+}
+._date-picker__input_yt3fh_20:invalid {
   border: 1px solid var(--teddy-color-red-500);
 }
-._date-picker__input--touched_1vj0x_38:invalid {
+._date-picker__input--touched_yt3fh_44:invalid {
   border: 1px solid var(--teddy-color-red-500);
 }
-._date-picker__input_1vj0x_20:focus-visible {
+._date-picker__input_yt3fh_20:focus-visible {
   border: 12px solid transparent;
   box-shadow: 0 0 0 2x var(--teddy-color-blue-600); /* Outline-like box-shadow */
   padding-left: calc(3em - 11px);
 }
-._date-picker__input-icon-container_1vj0x_46 {
+._date-picker__input-icon-container_yt3fh_52 {
   position: absolute;
   margin: 0;
   margin-top: 2.2rem;
   order: 3;
 }
-._date-picker__toggle-button_1vj0x_52 {
+._date-picker__toggle-button_yt3fh_58 {
   background: transparent;
   border: 0;
   cursor: pointer;
   transition: all 300ms ease;
   color: var(--teddy-color-transparent-black-400);
 }
-._date-picker__additional_1vj0x_59 {
+._date-picker__additional_yt3fh_65 {
   order: 5;
 }
-._date-picker__error_1vj0x_62 {
+._date-picker__error_yt3fh_68 {
   margin: 4px 0 0;
   display: flex;
   gap: 0.25rem;
@@ -5314,19 +5320,19 @@
   order: 6 !important;
   color: var(--teddy-color-red-500) !important;
 }
-._date-picker__toggle-icon_1vj0x_70 {
+._date-picker__toggle-icon_yt3fh_76 {
   display: inline-block;
   margin-left: 4px;
   height: 1.5rem;
   width: 1.5rem;
 }
-._date-picker__input--touched_1vj0x_38:invalid ~ ._date-picker__input-icon-container_1vj0x_46 {
+._date-picker__input--touched_yt3fh_44:invalid ~ ._date-picker__input-icon-container_yt3fh_52 {
   color: #e4175c;
 }
-._date-picker__dialog-container_1vj0x_79 {
+._date-picker__dialog-container_yt3fh_85 {
   order: 4;
 }
-._date-picker__dialog_1vj0x_79 {
+._date-picker__dialog_yt3fh_85 {
   z-index: 300;
   background-color: rgba(0, 0, 0, 0.22);
   bottom: 0;
@@ -5341,9 +5347,8 @@
   visibility: hidden;
   min-width: 288px;
   width: 100%;
-  max-width: 100%;
-  will-change: transform, opacity, visibility;
   max-width: 288px;
+  will-change: transform, opacity, visibility;
   background: none;
   bottom: auto;
   position: absolute;
@@ -5352,12 +5357,17 @@
   transform: scale(0.96) translateZ(0) translateY(-2rem);
   transform-origin: top right;
 }
-._date-picker__dialog_1vj0x_79._is-active_1vj0x_108 {
+@media screen and (max-width: 378px) {
+  ._date-picker__dialog_yt3fh_85 {
+    min-width: 224px;
+  }
+}
+._date-picker__dialog_yt3fh_85._is-active_yt3fh_118 {
   opacity: 1;
   transform: scale(1.0001) translateZ(0) translateY(0);
   visibility: visible;
 }
-._date-picker__dialog-content_1vj0x_113 {
+._date-picker__dialog-content_yt3fh_123 {
   display: none;
   background: white;
   border-radius: 8px;
@@ -5377,21 +5387,21 @@
   visibility: visible;
   transition: transform 300 ease, opacity 300 ease, visibility 300 ease;
 }
-._is-active_1vj0x_108 ._date-picker__dialog-content_1vj0x_113 {
+._is-active_yt3fh_118 ._date-picker__dialog-content_yt3fh_123 {
   display: block;
   transform: translateZ(0) translateY(0);
 }
-._date-picker__table-scrollable_1vj0x_137 {
+._date-picker__table-scrollable_yt3fh_147 {
   max-height: 200px;
   overflow-x: hidden;
   overflow-y: scroll;
 }
-._date-picker__table-wrapper_1vj0x_142 {
+._date-picker__table-wrapper_yt3fh_152 {
   padding: 0 8px;
   padding-top: 16px;
   padding-bottom: 12px;
 }
-._date-picker__table_1vj0x_137 {
+._date-picker__table_yt3fh_147 {
   border-collapse: collapse;
   border-spacing: 0;
   line-height: 1.25;
@@ -5400,7 +5410,7 @@
   text-align: center;
   width: 100%;
 }
-._date-picker__table-header_1vj0x_156 {
+._date-picker__table-header_yt3fh_166 {
   font-family: var(--teddy-typography-family-default);
   color: var(--teddy-color-transparent-black-600);
   letter-spacing: dynamic-rem(0.1rem);
@@ -5411,15 +5421,21 @@
   font-weight: 500;
   letter-spacing: 1px;
 }
-._date-picker__row_1vj0x_167 {
+._date-picker__row_yt3fh_177 {
   line-height: 1.4;
 }
-._date-picker__cell_1vj0x_170 {
+._date-picker__cell_yt3fh_180 {
   text-align: center;
   width: 24px;
   height: 24px;
 }
-._date-picker__year-button_1vj0x_175 {
+@media screen and (max-width: 378px) {
+  ._date-picker__cell_yt3fh_180 {
+    width: 22px;
+    height: 22px;
+  }
+}
+._date-picker__year-button_yt3fh_191 {
   line-height: 1.25;
   font-size: 1rem;
   background: transparent;
@@ -5431,30 +5447,30 @@
   height: 40px;
   min-width: 40px;
 }
-._date-picker__year-button_1vj0x_175 span {
+._date-picker__year-button_yt3fh_191 span {
   color: var(--teddy-color-purple-700);
   font-weight: bold;
   font-family: var(--teddy-typography-family-default);
 }
-._date-picker__year-button_1vj0x_175:hover span {
+._date-picker__year-button_yt3fh_191:hover span {
   color: var(--teddy-color-purple-800);
 }
-._date-picker__year-button_1vj0x_175:focus-visible {
+._date-picker__year-button_yt3fh_191:focus-visible {
   outline: 0;
   border: 0;
   padding: 4px;
   box-shadow: 0px 0px 0px 2px var(--teddy-color-blue-600);
 }
-._date-picker__year-button_1vj0x_175:active span {
+._date-picker__year-button_yt3fh_191:active span {
   color: var(--teddy-color-purple-800);
 }
-._date-picker__year-chevron_1vj0x_204 {
+._date-picker__year-chevron_yt3fh_220 {
   position: relative;
   width: 24px;
   top: 2px;
   color: var(--teddy-color-purple-700);
 }
-._date-picker__year_1vj0x_175 {
+._date-picker__year_yt3fh_191 {
   color: var(--teddy-color-purple-700);
   appearance: none;
   background: transparent;
@@ -5470,40 +5486,40 @@
   width: fit-content;
   outline: 0;
 }
-._date-picker__year_1vj0x_175._is-today_1vj0x_226 {
+._date-picker__year_yt3fh_191._is-today_yt3fh_242 {
   border: 0.5px solid;
   color: var(--teddy-color-purple-800);
 }
-._date-picker__year_1vj0x_175._is-focused_1vj0x_230 {
+._date-picker__year_yt3fh_191._is-focused_yt3fh_246 {
   border: 0.75px solid;
   color: var(--teddy-color-purple-700);
 }
-._date-picker__year_1vj0x_175:hover {
+._date-picker__year_yt3fh_191:hover {
   background: var(--teddy-color-purple-100);
   color: var(--teddy-color-purple-900);
 }
-._date-picker__year_1vj0x_175:focus {
+._date-picker__year_yt3fh_191:focus {
   background: var(--teddy-color-purple-100);
   color: var(--teddy-color-purple-900);
   border: 0;
   outline: 0;
 }
-._date-picker__year_1vj0x_175:active {
+._date-picker__year_yt3fh_191:active {
   background: var(--teddy-color-purple-200);
   color: var(--teddy-color-purple-900);
 }
-._date-picker__year_1vj0x_175[aria-pressed=true] {
+._date-picker__year_yt3fh_191[aria-pressed=true] {
   background-color: var(--teddy-color-purple-800);
   color: white;
   box-shadow: none;
   outline: 0;
 }
-._date-picker__year_1vj0x_175[aria-disabled=true] {
+._date-picker__year_yt3fh_191[aria-disabled=true] {
   cursor: default;
   background: transparent;
   color: #dcdce1;
 }
-._date-picker__day_1vj0x_259 {
+._date-picker__day_yt3fh_275 {
   font-family: var(--teddy-typography-family-default);
   color: var(--teddy-color-purple-700);
   font-style: normal;
@@ -5524,58 +5540,70 @@
   vertical-align: middle;
   width: 2rem;
 }
-._date-picker__day_1vj0x_259:not(._is-month_1vj0x_280) {
+@media screen and (max-width: 378px) {
+  ._date-picker__day_yt3fh_275 {
+    width: 22px;
+    height: 22px;
+    padding: 0;
+  }
+}
+._date-picker__day_yt3fh_275:not(._is-month_yt3fh_303) {
   box-shadow: none;
   color: var(--teddy-color-transparent-black-400);
 }
-._date-picker__day_1vj0x_259._is-today_1vj0x_226 {
+._date-picker__day_yt3fh_275._is-today_yt3fh_242 {
   border: 0.5px solid;
   color: var(--teddy-color-purple-800);
 }
-._date-picker__day_1vj0x_259:hover {
+._date-picker__day_yt3fh_275:hover {
   background: var(--teddy-color-purple-100);
   color: var(--teddy-color-purple-900);
 }
-._date-picker__day_1vj0x_259:focus {
+._date-picker__day_yt3fh_275:focus {
   background: var(--teddy-color-purple-100);
   color: var(--teddy-color-purple-900);
 }
-._date-picker__day_1vj0x_259:active {
+._date-picker__day_yt3fh_275:active {
   background: var(--teddy-color-purple-200);
   color: var(--teddy-color-purple-900);
 }
-._date-picker__day_1vj0x_259[aria-pressed=true] {
+._date-picker__day_yt3fh_275[aria-pressed=true] {
   background-color: var(--teddy-color-purple-800);
   color: white;
   box-shadow: none;
   outline: 0;
 }
-._date-picker__day_1vj0x_259[aria-disabled=true] {
+._date-picker__day_yt3fh_275[aria-disabled=true] {
   cursor: default;
   background: transparent;
   color: #dcdce1;
 }
-._date-picker__header_1vj0x_311 {
+._date-picker__header_yt3fh_334 {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 1rem 1rem 0;
 }
-._date-picker__nav_1vj0x_317 {
+@media screen and (max-width: 378px) {
+  ._date-picker__header_yt3fh_334 {
+    padding: 0.75rem 0.75rem 0;
+  }
+}
+._date-picker__nav_yt3fh_345 {
   white-space: nowrap;
   position: relative;
   display: inline-flex;
   width: 100%;
 }
-._date-picker__nav-month_1vj0x_323 {
+._date-picker__nav-month_yt3fh_351 {
   white-space: nowrap;
   display: inline-flex;
   width: 160px;
-  margin-left: 34px;
+  margin-left: auto;
   color: var(--teddy-color-purple-700);
   font-family: var(--teddy-typography-family-default);
 }
-._date-picker__prev_1vj0x_331, ._date-picker__next_1vj0x_331 {
+._date-picker__prev_yt3fh_359, ._date-picker__next_yt3fh_359 {
   background: transparent;
   border: 0;
   font-family: var(--teddy-typography-family-default);
@@ -5593,34 +5621,34 @@
   padding: 0;
   outline: none;
 }
-._date-picker__prev_1vj0x_331:not([disabled]):hover, ._date-picker__next_1vj0x_331:not([disabled]):hover {
+._date-picker__prev_yt3fh_359:not([disabled]):hover, ._date-picker__next_yt3fh_359:not([disabled]):hover {
   color: var(--teddy-color-purple-900);
 }
-._date-picker__prev_1vj0x_331:active, ._date-picker__prev_1vj0x_331:focus, ._date-picker__next_1vj0x_331:active, ._date-picker__next_1vj0x_331:focus {
+._date-picker__prev_yt3fh_359:active, ._date-picker__prev_yt3fh_359:focus, ._date-picker__next_yt3fh_359:active, ._date-picker__next_yt3fh_359:focus {
   color: var(--teddy-color-purple-500);
   box-shadow: none;
   border: solid 0.1px var(--teddy-color-purple-500);
   border-radius: 100%;
 }
-._date-picker__prev_1vj0x_331:disabled, ._date-picker__next_1vj0x_331:disabled {
+._date-picker__prev_yt3fh_359:disabled, ._date-picker__next_yt3fh_359:disabled {
   cursor: default;
   opacity: 0.5;
 }
-._date-picker__prev-icon_1vj0x_362 {
+._date-picker__prev-icon_yt3fh_390 {
   margin: 0 auto;
   width: 24px;
   height: 16px;
 }
-._date-picker__next-icon_1vj0x_367 {
+._date-picker__next-icon_yt3fh_395 {
   margin: 0 auto;
   width: 24px;
   height: 16px;
 }
-._date-picker__select_1vj0x_372 {
+._date-picker__select_yt3fh_400 {
   position: relative;
   display: inline-flex;
 }
-._date-picker__select_1vj0x_372 select {
+._date-picker__select_yt3fh_400 select {
   cursor: pointer;
   font-size: 1rem;
   height: 100%;
@@ -5630,13 +5658,13 @@
   top: 0;
   width: 100%;
 }
-._date-picker__select_1vj0x_372 select:focus + ._date-picker__select-label_1vj0x_386 {
+._date-picker__select_yt3fh_400 select:focus + ._date-picker__select-label_yt3fh_414 {
   box-shadow: 0 0 0 0.2rem var(--teddy-color-purple-800);
 }
-._date-picker__select-icon_1vj0x_389 {
+._date-picker__select-icon_yt3fh_417 {
   margin: 0 0 0 4px;
 }
-._date-picker__select-label_1vj0x_386 {
+._date-picker__select-label_yt3fh_414 {
   font-weight: bold;
   color: var(--teddy-color-purple-700);
   font-family: var(--teddy-typography-family-default);
@@ -5652,7 +5680,7 @@
   display: inline-flex;
   justify-content: center;
 }
-._date-picker__close_year_1vj0x_408 {
+._date-picker__close_year_yt3fh_436 {
   right: 0;
   position: absolute;
   height: 30px;
@@ -5666,7 +5694,7 @@
   display: flex;
   justify-content: center;
 }
-._date-picker__vhidden_1vj0x_422 {
+._date-picker__vhidden_yt3fh_450 {
   border: 0;
   clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
   height: 0.0625rem;

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.15",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"