@dynamic-framework/ui-react 1.2.2 → 1.3.1

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

@@ -0,0 +1,156 @@
+.d-stepper {
+  /* Icon container */
+  --#{$prefix}step-icon-container-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-icon-container-background-color: var(--#{$prefix}white);
+  --#{$prefix}step-icon-container-size: 34px;
+  --#{$prefix}step-icon-container-border-width: 1px;
+  --#{$prefix}step-icon-container-border-color: var(--#{$prefix}secondary);
+  --#{$prefix}step-icon-container-border-radius: 100%;
+  --#{$prefix}step-icon-container-z-index: 3;
+
+  /* Base step */
+  --#{$prefix}step-label-height: 3rem;
+  --#{$prefix}step-icon-size: 1.125rem;
+  --#{$prefix}step-gap: .5rem;
+  --#{$prefix}step-z-index: 2;
+
+  /* Checked step */
+  --#{$prefix}step-check-text-color: var(--#{$prefix}white);
+  --#{$prefix}step-check-background-color: var(--#{$prefix}success);
+  --#{$prefix}step-check-border-color: var(--#{$prefix}success);
+
+  /* Current step */
+  --#{$prefix}step-current-text-color: var(--#{$prefix}white);
+  --#{$prefix}step-current-background-color: var(--#{$prefix}secondary);
+
+  /* Step line */
+  --#{$prefix}step-line-stroke: 1px;
+  --#{$prefix}step-line-color: var(--#{$prefix}secondary);
+
+  /* Step label */
+  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-3);
+
+
+  position: relative;
+  display: flex;
+
+  .d-step {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--#{$prefix}step-gap);
+
+    .d-step-value {
+      position: relative;
+      display: flex;
+      justify-content: center;
+    }
+
+    .d-step-icon-container {
+      position: relative;
+      z-index: var(--#{$prefix}step-icon-container-z-index);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--#{$prefix}step-icon-container-size);
+      height: var(--#{$prefix}step-icon-container-size);
+
+      color: var(--#{$prefix}step-icon-container-color);
+      background-color: var(--#{$prefix}step-icon-container-background-color);
+      border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+      border-radius: var(--#{$prefix}step-icon-container-border-radius);
+    }
+
+    .d-step-check {
+      color: var(--#{$prefix}step-check-text-color);
+      background-color: var(--#{$prefix}step-check-background-color);
+      border-color: var(--#{$prefix}step-check-border-color);
+    }
+
+    .d-step-current {
+      color: var(--#{$prefix}step-current-text-color);
+      background-color: var(--#{$prefix}step-current-background-color);
+    }
+
+    .d-step-value::after {
+      position: absolute;
+      top: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 100%;
+      height: var(--#{$prefix}step-line-stroke);
+      content: "";
+      background-color: var(--#{$prefix}step-line-color);
+    }
+
+    &:first-child .d-step-value::after {
+      left: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 50%;
+    }
+
+    &:last-child .d-step-value::after {
+      right: 50%;
+      z-index: var(--#{$prefix}step-z-index);
+      width: 50%;
+    }
+
+    .d-step-label {
+      padding-right: var(--#{$prefix}step-label-padding);
+      padding-left: var(--#{$prefix}step-label-padding);
+      text-align: center;
+    }
+  }
+
+  &.is-vertical {
+    flex-direction: column;
+
+    .d-step {
+      flex-direction: row;
+      align-items: center;
+
+      .d-step-value {
+        align-items: center;
+        height: 100%;
+      }
+
+      .d-step-label {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        min-height: var(--#{$prefix}step-label-height);
+        padding: var(--#{$prefix}step-vertical-label-padding);
+        text-align: left;
+      }
+
+      .d-step-value::after {
+        position: absolute;
+        top: 0;
+        left: calc(50% - var(--#{$prefix}step-line-stroke));
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 100%;
+        content: "";
+        border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
+      }
+
+      &:first-child .d-step-value::after {
+        top: 50%;
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 50%;
+      }
+
+      &:last-child .d-step-value::after {
+        z-index: var(--#{$prefix}step-z-index);
+        width: 0;
+        height: 50%;
+      }
+    }
+  }
+
+  .d-step-icon {
+    display: flex;
+    font-size: var(--#{$prefix}step-icon-size);
+  }
+}

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