@dynamic-framework/ui-react 1.2.1 → 1.3.0

package/src/style/components/_d-tabs.scss

@@ -0,0 +1,56 @@
+.d-tabs {
+  --#{$prefix}tabs-nav-gap: #{$nav-nav-gap};
+  --#{$prefix}tabs-nav-padding-x: #{$nav-nav-padding-x};
+  --#{$prefix}tabs-nav-padding-y: #{$nav-nav-padding-y};
+  --#{$prefix}tabs-link-border-height: #{$nav-link-border-height};
+  --#{$prefix}tabs-link-line-height: #{$nav-link-line-height};
+  --#{$prefix}tabs-link-border-border-radius: #{$nav-link-border-border-radius};
+  --#{$prefix}tabs-link-border-active-color: #{$nav-link-border-active-color};
+  --#{$prefix}tabs-link-border-active-font-weight: #{$nav-link-border-active-font-weight};
+  --#{$prefix}tabs-link-border-active-bg: #{$nav-link-border-active-bg};
+
+  display: flex;
+  flex-direction: column;
+
+  .nav {
+    gap: var(--#{$prefix}tabs-nav-gap);
+    padding: var(--#{$prefix}tabs-nav-padding-y) var(--#{$prefix}tabs-nav-padding-x);
+  }
+
+  .nav-link {
+    position: relative;
+    line-height: var(--#{$prefix}tabs-link-line-height);
+
+    &.active {
+      font-weight: var(--#{$prefix}tabs-link-border-active-font-weight);
+      color: var(--#{$prefix}tabs-link-border-active-color);
+
+      &::before {
+        background: var(--#{$prefix}tabs-link-border-active-bg);
+      }
+    }
+  }
+
+  .nav-link::before {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--#{$prefix}tabs-link-border-height);
+    content: " ";
+    border-radius: var(--#{$prefix}tabs-link-border-border-radius);
+  }
+
+  &.d-tabs-vertical {
+    flex-direction: row;
+
+    .nav {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .tab-content {
+      flex: 1;
+    }
+  }
+}

package/src/style/components/_d-timepicker.scss

@@ -0,0 +1,37 @@
+.d-datepicker-time {
+  --#{$prefix}datepicker-time-input: 100%;
+  --#{$prefix}datepicker-webkit-time-color: var(--#{$prefix}black);
+  --#{$prefix}datepicker-webkit-time-align: left;
+  --#{$prefix}datepicker-webkit-edit-text-padding: 2px;
+
+  --#{$prefix}datepicker-webkit-edit-ampm-padding: 0 4px;
+  --#{$prefix}datepicker-webkit-edit-ampm-color: var(--#{$prefix}secondary-900);
+  --#{$prefix}datepicker-webkit-edit-ampm-bg: var(--#{$prefix}secondary-100);
+  --#{$prefix}datepicker-webkit-edit-ampm-radius: 4px;
+
+  --#{$prefix}datepicker-calendar-picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-clock' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
+
+  .d-input {
+    width: var(--#{$prefix}datepicker-time-input);
+  }
+  // stylelint-disable selector-no-qualifying-type
+  input[type="time"] {
+    &::-webkit-datetime-edit {
+      color: var(--#{$prefix}datepicker-webkit-time-color);
+      text-align: var(--#{$prefix}datepicker-webkit-time-align);
+    }
+    &::-webkit-datetime-edit-text {
+      padding-inline: var(--#{$prefix}datepicker-webkit-edit-text-padding);
+    }
+    &::-webkit-datetime-edit-ampm-field {
+      padding: var(--#{$prefix}datepicker-webkit-edit-ampm-padding);
+      color: var(--#{$prefix}datepicker-webkit-edit-ampm-color);
+      background-color: var(--#{$prefix}datepicker-webkit-edit-ampm-bg);
+      border-radius: var(--#{$prefix}datepicker-webkit-edit-ampm-radius);
+    }
+    &::-webkit-calendar-picker-indicator {
+      background-image: var(--#{$prefix}datepicker-calendar-picker-icon);
+    }
+  }
+
+}

package/dist/types/components/MCardAccount.d.ts

@@ -1,13 +0,0 @@
-declare type Props = {
-    className?: string;
-    icon: string;
-    theme: string;
-    name: string;
-    number: string;
-    balance: string;
-    balanceText: string;
-    onClick: () => void;
-    onClickText: string;
-};
-export default function MCardAccount({ className, icon, theme, name, number, balance, balanceText, onClick, onClickText, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MCollapse.d.ts

@@ -1,11 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-declare type Props = PropsWithChildren<{
-    id?: string;
-    className?: string;
-    Component: JSX.Element | ReactNode;
-    hasSeparator?: boolean;
-    defaultCollapsed?: boolean;
-    onChange?: (value: boolean) => void;
-}>;
-export default function MCollapse({ id, className, Component, hasSeparator, defaultCollapsed, onChange, children, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MDatePickerInput.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps } from 'react';
-import { MInput } from './proxies';
-export declare type InnerDatePickerProps = {
-    value?: string;
-    onClick?: () => void;
-};
-declare type MDatePickerInputProps = InnerDatePickerProps & Omit<ComponentProps<typeof MInput>, 'type' | 'isReadOnly' | 'onMIconEndClick' | 'value'>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MDatePickerInputProps, "ref"> & import("react").RefAttributes<unknown>>;
-export default _default;

package/dist/types/components/MDatePickerTime.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, FormEventHandler } from 'react';
-import { MInput } from './proxies';
-export declare type InnerDatePickerTimeProps = {
-    value?: string | number;
-    onChange?: ((value: string) => void) & FormEventHandler<HTMLMInputElement>;
-};
-declare type MDatePickerTimeProps = InnerDatePickerTimeProps & Omit<ComponentProps<typeof MInput>, 'type' | 'isReadOnly' | 'onMChange' | 'value'>;
-export default function MDatePickerTime({ value, onChange, mId, label, ...props }: MDatePickerTimeProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MFormikInput.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentProps } from 'react';
-import { MInput } from './proxies';
-declare type Props = Omit<ComponentProps<typeof MInput>, 'name' | 'value'> & {
-    name: string;
-};
-export default function MFormikInput({ name, hint, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MFormikInputCurrency.d.ts

@@ -1,7 +0,0 @@
-import type { ComponentProps } from 'react';
-import MInputCurrency from './MInputCurrency';
-declare type Props = Omit<ComponentProps<typeof MInputCurrency>, 'name' | 'value'> & {
-    name: string;
-};
-export default function MFormikInputCurrency({ name, hint, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MInputCurrency.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps } from 'react';
-import { MInputCurrencyBase } from './proxies';
-declare type Props = {
-    onChange: (value: number) => void;
-    onBlur?: (value: number) => void;
-    onFocus?: (value: number) => void;
-} & Omit<ComponentProps<typeof MInputCurrencyBase>, 'currencyOptions' | 'onChange' | 'onMChange'>;
-export default function MInputCurrency({ onChange, onBlur, onFocus, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MMonthPicker.d.ts

@@ -1,7 +0,0 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-declare type CalendarProps = Omit<ReactDatePickerProps, 'onChange' | 'selectsRange'> & {
-    date: string;
-    setDate: (value: Date | null) => void;
-};
-export default function MMonthPicker({ setDate, date, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/MPopover.d.ts

@@ -1,8 +0,0 @@
-import type { PropsWithChildren } from 'react';
-declare type Props = PropsWithChildren<{
-    renderComponent: (isOpen: boolean) => JSX.Element;
-    isOpen: boolean;
-    setIsOpen?: (isOpen: boolean) => void;
-}>;
-export default function MPopover({ children, renderComponent, isOpen, setIsOpen, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/stories/components/MBoxFile.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MBoxFile } from '../../components';
-declare const config: Meta<typeof MBoxFile>;
-export default config;
-declare type Story = StoryObj<typeof MBoxFile>;
-export declare const Default: Story;

package/dist/types/stories/components/MCardAccount.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import MCardAccount from '../../components/MCardAccount';
-declare const config: Meta<typeof MCardAccount>;
-export default config;
-declare type Story = StoryObj<typeof MCardAccount>;
-export declare const Default: Story;

package/dist/types/stories/components/MFormikInput.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MFormikInput } from '../../components';
-declare const config: Meta<typeof MFormikInput>;
-export default config;
-declare type Story = StoryObj<typeof MFormikInput>;
-export declare const Default: Story;
-export declare const Empty: Story;

package/dist/types/stories/components/MFormikInputSelect.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MFormikInputSelect } from '../../components';
-declare const config: Meta<typeof MFormikInputSelect>;
-export default config;
-declare type Story = StoryObj<typeof MFormikInputSelect>;
-export declare const Default: Story;
-export declare const Empty: Story;

package/dist/types/stories/components/MListItemMovement.stories.d.ts

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MListItemMovement } from '../../components';
-declare const config: Meta<typeof MListItemMovement>;
-export default config;
-declare type Story = StoryObj<typeof MListItemMovement>;
-export declare const Movement: Story;
-export declare const Movements: Story;

package/dist/types/stories/components/MSkeleton.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MSkeleton } from '../../components';
-declare const config: Meta<typeof MSkeleton>;
-export default config;
-declare type Story = StoryObj<typeof MSkeleton>;
-export declare const Default: Story;

package/dist/types/stories/patterns/MCollapseIconText.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { MCollapseIconText } from '../../components';
-declare const config: Meta<typeof MCollapseIconText>;
-export default config;
-declare type Story = StoryObj<typeof MCollapseIconText>;
-export declare const Default: Story;

package/src/style/components/_m-box-file.scss

@@ -1,66 +0,0 @@
-.m-box-file {
-  --#{$prefix}m-box-file-gap: #{$box-file-gap};
-  --#{$prefix}m-box-file-border: #{$box-file-border};
-  --#{$prefix}m-box-file-border-radius: #{$box-file-border-radius};
-  --#{$prefix}m-box-file-padding: #{$box-file-padding};
-  --#{$prefix}m-box-file-content-max-width: #{$box-file-content-max-width};
-  --#{$prefix}m-box-file-icon-size: #{$box-file-icon-size};
-  --#{$prefix}m-box-file-icon-color: #{$box-file-icon-color};
-
-  --#{$prefix}m-box-file-hover-border: #{$box-file-hover-border};
-  --#{$prefix}m-box-file-hover-bg: #{$box-file-hover-background};
-
-  --#{$prefix}m-box-file-selected-border: #{$box-file-selected-border};
-  --#{$prefix}m-box-file-selected-bg: #{$box-file-selected-background};
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--#{$prefix}m-box-file-gap);
-  width: 100%;
-  cursor: pointer;
-  border: var(--#{$prefix}m-box-file-border);
-  border-radius: var(--#{$prefix}m-box-file-border-radius);
-
-  &:hover {
-    background: var(--#{$prefix}m-box-file-hover-bg);
-    border: var(--#{$prefix}m-box-file-hover-border);
-  }
-
-  &.m-box-file-selected {
-    background: var(--#{$prefix}m-box-file-selected-bg);
-    border: var(--#{$prefix}m-box-file-selected-border);
-  }
-
-  .m-icon {
-    --#{$prefix}m-icon-size: var(--#{$prefix}m-box-file-icon-size);
-    --#{$prefix}m-icon-color: var(--#{$prefix}m-box-file-icon-color);
-  }
-
-  .m-box-file-dropzone {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}m-box-file-gap);
-    align-items: center;
-    width: 100%;
-    padding: var(--#{$prefix}m-box-file-padding);
-
-    &:not(:last-child) {
-      padding-bottom: 0;
-    }
-  }
-
-  .m-box-content {
-    max-width: var(--#{$prefix}m-box-file-content-max-width);
-  }
-
-  .m-box-files {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}m-box-file-gap);
-    padding: 0 var(--#{$prefix}m-box-file-padding) var(--#{$prefix}m-box-file-padding);
-  }
-
-  .m-box-files-text {
-    word-break: break-word;
-  }
-}

package/src/style/components/_m-carousel.scss

@@ -1,44 +0,0 @@
-@import "@splidejs/splide/src/css/template/default/index";
-
-.m-carousel {
-  // Arrows
-  --#{$prefix}m-carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-3) * -1);
-  // Pagination
-  --#{$prefix}m-carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-3) * -1);
-  --#{$prefix}m-carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
-  --#{$prefix}m-carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
-  // :focus
-  --#{$prefix}m-carousel-focus-outline-color: var(--#{$prefix}focus-ring-color);
-
-  .m-carousel-arrows {
-
-    .m-carousel-arrow.m-carousel-arrow-prev {
-      left: var(--#{$prefix}m-carousel-arrow-space);
-    }
-    .m-carousel-arrow.m-carousel-arrow-next {
-      right: var(--#{$prefix}m-carousel-arrow-space);
-    }
-  }
-  .m-carousel-pagination {
-    bottom: var(--#{$prefix}m-carousel-pagination-bottom);
-
-    .m-carousel-pagination-page {
-      background-color: var(--#{$prefix}m-carousel-pagination-page-bg);
-
-      &.is-active {
-        background-color: var(--#{$prefix}m-carousel-pagination-active-page-bg);
-      }
-    }
-  }
-
-  &.splide.is-focus-in .m-carousel-arrow:focus,
-  &.splide.is-focus-in .m-carousel-pagination-page:focus {
-    outline-color: var(--#{$prefix}m-carousel-focus-outline-color);
-  }
-
-  .m-carousel-slide.is-active.is-visible {
-    > * {
-      // TODO: ASK. Exist active state on slide(?)
-    }
-  }
-}

package/src/style/components/_m-collapse-icon-text.scss

@@ -1,16 +0,0 @@
-.m-collapse-icon-text {
-  --#{$prefix}m-collapse-icon-text-header-gap: #{$collapse-icon-text-header-gap};
-  --#{$prefix}m-collapse-icon-text-header-font-size: #{$collapse-icon-text-header-font-size};
-  --#{$prefix}m-collapse-icon-text-header-font-weight: #{$collapse-icon-text-header-font-weight};
-
-  .m-collapse-icon-text-header {
-    display: flex;
-    gap: var(--#{$prefix}m-collapse-icon-text-header-gap);
-    align-items: center;
-  }
-
-  .m-collapse-icon-text-title {
-    font-size: var(--#{$prefix}m-collapse-icon-text-header-font-size);
-    font-weight: var(--#{$prefix}m-collapse-icon-text-header-font-weight);
-  }
-}

package/src/style/components/_m-collapse.scss

@@ -1,56 +0,0 @@
-.m-collapse {
-  // Container
-  --#{$prefix}m-collapse-bg: var(--#{$prefix}white);
-  --#{$prefix}m-collapse-border-radius: var(--#{$prefix}ref-spacer-1);
-  --#{$prefix}m-collapse-box-shadow: var(--#{$prefix}box-shadow-sm);
-  // Button
-  --#{$prefix}m-collapse-button-padding-x: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-collapse-button-padding-y: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-collapse-button-gap: var(--#{$prefix}ref-spacer-3);
-  // Body
-  --#{$prefix}m-collapse-body-padding-x: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-collapse-body-padding-y: var(--#{$prefix}ref-spacer-3);
-  // Separator
-  --#{$prefix}m-collapse-separator-display: none;
-  --#{$prefix}m-collapse-separator-height: 1px;
-  --#{$prefix}m-collapse-separator-bg: var(--#{$prefix}gray-200);
-
-  &.collapse-container {
-    background-color: var(--#{$prefix}m-collapse-bg);
-    border-radius: var(--#{$prefix}m-collapse-border-radius);
-    box-shadow: var(--#{$prefix}m-collapse-box-shadow);
-  }
-
-  .collapse-button {
-    display: flex;
-    gap: var(--#{$prefix}m-collapse-button-gap);
-    align-items: center;
-    width: 100%;
-    padding: var(--#{$prefix}m-collapse-button-padding-y) var(--#{$prefix}m-collapse-button-padding-x);
-    text-align: left;
-    user-select: none;
-    background: transparent;
-    border: 0;
-
-    &:focus,
-    &:focus-visible {
-      outline: 0;
-    }
-  }
-
-  .collapse-body {
-    position: relative;
-    padding: var(--#{$prefix}m-collapse-body-padding-y) var(--#{$prefix}m-collapse-body-padding-x);
-    padding-top: 0;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      display: var(--#{$prefix}m-collapse-separator-display);
-      width: calc(100% - (var(--#{$prefix}m-collapse-body-padding-x) * 2));
-      height: var(--#{$prefix}m-collapse-separator-height);
-      content: " ";
-      background-color: var(--#{$prefix}m-collapse-separator-bg);
-    }
-  }
-}

package/src/style/components/_m-datepicker.scss

@@ -1,224 +0,0 @@
-@import "react-datepicker/src/stylesheets/datepicker";
-
-// stylelint-disable selector-class-pattern
-
-.react-datepicker {
-  --#{$prefix}m-datepicker-font-family: var(--#{$prefix}font-sans-serif);
-  --#{$prefix}m-datepicker-border: 0px;
-  --#{$prefix}m-datepicker-box-shadow: var(--#{$prefix}box-shadow);
-  --#{$prefix}m-datepicker-font-size: var(--#{$prefix}ref-spacer-3);
-
-  // Header variables
-  --#{$prefix}m-datepicker-header-gap: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-datepicker-header-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}m-datepicker-header-background-color: var(--#{$prefix}indigo-soft);
-  --#{$prefix}m-datepicker-header-border: 0;
-  --#{$prefix}m-datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
-
-  --#{$prefix}m-datepicker-day-names-margin: 0;
-  --#{$prefix}m-datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-3);
-
-  --#{$prefix}m-datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
-  --#{$prefix}m-datepicker-day-name-margin: 0;
-  --#{$prefix}m-datepicker-day-name-size: 20px;
-  --#{$prefix}m-datepicker-day-name-color: var(--#{$prefix}gray-500);
-
-  // Calendar variables
-  --#{$prefix}m-datepicker-month-gap: var(--#{$prefix}ref-fs-subparagraph);
-  --#{$prefix}m-datepicker-month-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}m-datepicker-month-margin: 0;
-
-  --#{$prefix}m-datepicker-week-gap: 1.875rem;
-
-  // Day variables
-  --#{$prefix}m-datepicker-day-margin: 0;
-  --#{$prefix}m-datepicker-day-font-size: var(--#{$prefix}ref-fs-subparagraph);
-  --#{$prefix}m-datepicker-day-size: 20px;
-  --#{$prefix}m-datepicker-day-radius: 100%;
-
-  --#{$prefix}m-datepicker-day-bg-hover: var(--#{$prefix}body);
-  --#{$prefix}m-datepicker-day-color-hover: var(--#{$prefix}info-100);
-
-  --#{$prefix}m-datepicker-day-selected-color: var(--#{$prefix}white);
-  --#{$prefix}m-datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
-
-  --#{$prefix}m-datepicker-day-in-range-color: var(--#{$prefix}dark);
-  --#{$prefix}m-datepicker-day-in-range-bg: var(--#{$prefix}secondary-100);
-
-  --#{$prefix}m-datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
-
-  --#{$prefix}m-datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
-  --#{$prefix}m-datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
-
-  // Time variables
-  --#{$prefix}m-datepicker-time-container-margin: 0;
-  --#{$prefix}m-datepicker-time-container-align: center;
-  --#{$prefix}m-datepicker-time-input-width: 50%;
-  --#{$prefix}m-datepicker-time-input-margin: 0;
-  --#{$prefix}m-datepicker-time-input-align: center;
-
-  --#{$prefix}m-datepicker-time-input-padding: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}m-datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}m-datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
-  --#{$prefix}m-datepicker-time-input-label-color: var(--#{$prefix}gray-700);
-  --#{$prefix}m-datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
-
-  font-family: var(--#{$prefix}m-datepicker-font-family);
-  font-size: var(--#{$prefix}m-datepicker-font-size);
-  border: var(--#{$prefix}m-datepicker-border);
-  box-shadow: var(--#{$prefix}m-datepicker-box-shadow);
-
-  .react-datepicker__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}m-datepicker-header-gap);
-    padding: var(--#{$prefix}m-datepicker-header-padding);
-    font-size: var(--#{$prefix}m-datepicker-header-font-size);
-    background-color: var(--#{$prefix}m-datepicker-header-background-color);
-    border: var(--#{$prefix}m-datepicker-header-border);
-
-    .react-datepicker__day-names {
-      display: flex;
-      justify-content: space-between;
-      margin: var(--#{$prefix}m-datepicker-day-names-margin);
-      font-size: var(--#{$prefix}m-datepicker-day-names-font-size);
-    }
-    .react-datepicker__day-name {
-      width: var(--#{$prefix}m-datepicker-day-name-size);
-      height: var(--#{$prefix}m-datepicker-day-name-size);
-      margin: var(--#{$prefix}m-datepicker-day-name-margin);
-      font-weight: var(--#{$prefix}m-datepicker-day-name-weight);
-      line-height: var(--#{$prefix}m-datepicker-day-name-size);
-      color: var(--#{$prefix}m-datepicker-day-name-color);
-    }
-  }
-
-  .react-datepicker__month {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}m-datepicker-month-gap);
-    padding: var(--#{$prefix}m-datepicker-month-padding);
-    margin: var(--#{$prefix}m-datepicker-month-margin);
-
-    .react-datepicker__week {
-      display: flex;
-      gap: var(--#{$prefix}m-datepicker-week-gap);
-    }
-
-    .react-datepicker__day {
-      width: var(--#{$prefix}m-datepicker-day-size);
-      height: var(--#{$prefix}m-datepicker-day-size);
-      margin: var(--#{$prefix}m-datepicker-day-margin);
-      font-size: var(--#{$prefix}m-datepicker-day-font-size);
-      line-height: var(--#{$prefix}m-datepicker-day-size);
-    }
-  }
-
-  // Hover state
-  .react-datepicker__day,
-  .react-datepicker__month-text,
-  .react-datepicker__quarter-text,
-  .react-datepicker__year-text {
-    &:not(
-    .react-datepicker__day--selected,
-    .react-datepicker__month-text--selected,
-    .react-datepicker__quarter-text--selected,
-    .react-datepicker__year-text--selected):hover {
-      color: var(--#{$prefix}m-datepicker-day-bg-hover);
-      background-color: var(--#{$prefix}m-datepicker-day-color-hover);
-      border-radius: var(--#{$prefix}m-datepicker-day-radius);
-    }
-  }
-
-  // Selected single item
-  .react-datepicker__day--selected,
-  .react-datepicker__month--selected,
-  .react-datepicker__quarter--selected,
-  .react-datepicker__year--selected {
-    color: var(--#{$prefix}m-datepicker-day-selected-color);
-    background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
-    border-radius: var(--#{$prefix}m-datepicker-day-radius);
-  }
-
-  .react-datepicker__day--selected {
-    &.react-datepicker__day--in-range.react-datepicker__day--range-start,
-    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
-      color: var(--#{$prefix}m-datepicker-day-selected-color);
-      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
-    }
-  }
-  .react-datepicker__day {
-    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
-    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
-      color: var(--#{$prefix}m-datepicker-day-selected-color);
-      background-color: var(--#{$prefix}m-datepicker-day-selected-bg);
-    }
-  }
-
-  .react-datepicker__day--in-range,
-  .react-datepicker__month-text--in-range,
-  .react-datepicker__quarter-text--in-range,
-  .react-datepicker__year-text--in-range,
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__quarter-text--in-selecting-range,
-  .react-datepicker__year-text--in-selecting-range,
-  .react-datepicker__day--keyboard-selected,
-  .react-datepicker__month-text--keyboard-selected,
-  .react-datepicker__quarter-text--keyboard-selected,
-  .react-datepicker__year-text--keyboard-selected {
-    color: var(--#{$prefix}m-datepicker-day-in-range-color);
-    background-color: var(--#{$prefix}m-datepicker-day-in-range-bg);
-    border-radius: var(--#{$prefix}m-datepicker-day-radius);
-  }
-
-  .react-datepicker__day--outside-month {
-    color: var(--#{$prefix}m-datepicker-day-outside-month-color);
-  }
-
-  /* Start time selector */
-  .react-datepicker__input-time-container {
-    width: 100%;
-    margin: var(--#{$prefix}m-datepicker-time-container-margin);
-    text-align: var(--#{$prefix}m-datepicker-time-container-align);
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}light);
-
-    .react-datepicker-time__caption {
-      display: none;
-    }
-
-    .react-datepicker-time__input-container {
-      width: 100%;
-
-      .react-datepicker-time__input {
-        width: var(--#{$prefix}m-datepicker-time-input-width);
-        margin: var(--#{$prefix}m-datepicker-time-input-margin);
-        text-align: var(--#{$prefix}m-datepicker-time-input-align);
-        outline: 0;
-      }
-    }
-  }
-
-  /* End time selector */
-
-  .react-datepicker__day--today {
-    font-weight: var(--#{$prefix}m-datepicker-day-today-font-weight);
-    border-radius: var(--#{$prefix}m-datepicker-day-radius);
-    box-shadow: var(--#{$prefix}m-datepicker-day-today-box-shadow);
-  }
-
-  .m-datepicker-time {
-    gap: var(--#{$prefix}m-datepicker-time-input-gap);
-    padding: var(--#{$prefix}m-datepicker-time-input-padding);
-    .m-datepicker-time-label {
-      font-size: var(--#{$prefix}m-datepicker-time-input-label-size);
-      font-weight: var(--#{$prefix}m-datepicker-time-input-label-weight);
-      color: var(--#{$prefix}m-datepicker-time-input-label-color);
-    }
-  }
-  .m-datepicker-header {
-    font-size: var(--#{$prefix}ref-fs-6);
-  }
-}
-
-// stylelint-enable selector-class-pattern