@dynamic-framework/ui-react 1.2.1 → 1.3.0

package/dist/types/stories/components/{MFormikInputCurrency.stories.d.ts → DFormikInputCurrency.stories.d.ts}

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

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

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

package/dist/types/stories/components/{MIcon.stories.d.ts → DIcon.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MIcon } from '../../components';
-declare const meta: Meta<typeof MIcon>;
+import { DIcon } from '../../components';
+declare const meta: Meta<typeof DIcon>;
 export default meta;
-declare type Story = StoryObj<typeof MIcon>;
+declare type Story = StoryObj<typeof DIcon>;
 export declare const Default: Story;
 export declare const Circle: Story;

package/dist/types/stories/components/{MInput.stories.d.ts → DInput.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInput } from '../../components';
-declare const config: Meta<typeof MInput>;
+import { DInput } from '../../components';
+declare const config: Meta<typeof DInput>;
 export default config;
-declare type Story = StoryObj<typeof MInput>;
+declare type Story = StoryObj<typeof DInput>;
 export declare const Default: Story;
 export declare const Value: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputCheck.stories.d.ts → DInputCheck.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputCheck } from '../../components';
-declare const config: Meta<typeof MInputCheck>;
+import { DInputCheck } from '../../components';
+declare const config: Meta<typeof DInputCheck>;
 export default config;
-declare type Story = StoryObj<typeof MInputCheck>;
+declare type Story = StoryObj<typeof DInputCheck>;
 export declare const CheckboxWithoutLabel: Story;
 export declare const CheckboxDefault: Story;
 export declare const CheckboxChecked: Story;

package/dist/types/stories/components/{MInputCounter.stories.d.ts → DInputCounter.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputCounter } from '../../components';
-declare const config: Meta<typeof MInputCounter>;
+import { DInputCounter } from '../../components';
+declare const config: Meta<typeof DInputCounter>;
 export default config;
-declare type Story = StoryObj<typeof MInputCounter>;
+declare type Story = StoryObj<typeof DInputCounter>;
 export declare const Default: Story;
 export declare const Error: Story;
 export declare const Confirm: Story;

package/dist/types/stories/components/{MInputCurrency.stories.d.ts → DInputCurrency.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputCurrency } from '../../components';
-declare const config: Meta<typeof MInputCurrency>;
+import { DInputCurrency } from '../../components';
+declare const config: Meta<typeof DInputCurrency>;
 export default config;
-declare type Story = StoryObj<typeof MInputCurrency>;
+declare type Story = StoryObj<typeof DInputCurrency>;
 export declare const Default: Story;
 export declare const Value: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputCurrencyBase.stories.d.ts → DInputCurrencyBase.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputCurrencyBase } from '../../components';
-declare const config: Meta<typeof MInputCurrencyBase>;
+import { DInputCurrencyBase } from '../../components';
+declare const config: Meta<typeof DInputCurrencyBase>;
 export default config;
-declare type Story = StoryObj<typeof MInputCurrencyBase>;
+declare type Story = StoryObj<typeof DInputCurrencyBase>;
 export declare const Default: Story;
 export declare const Value: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputPassword.stories.d.ts → DInputPassword.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputPassword } from '../../components';
-declare const config: Meta<typeof MInputPassword>;
+import { DInputPassword } from '../../components';
+declare const config: Meta<typeof DInputPassword>;
 export default config;
-declare type Story = StoryObj<typeof MInputPassword>;
+declare type Story = StoryObj<typeof DInputPassword>;
 export declare const Default: Story;
 export declare const Value: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputPin.stories.d.ts → DInputPin.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputPin } from '../../components';
-declare const config: Meta<typeof MInputPin>;
+import { DInputPin } from '../../components';
+declare const config: Meta<typeof DInputPin>;
 export default config;
-declare type Story = StoryObj<typeof MInputPin>;
+declare type Story = StoryObj<typeof DInputPin>;
 export declare const Default: Story;
 export declare const WithoutLabel: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputSearch.stories.d.ts → DInputSearch.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputSearch } from '../../components';
-declare const config: Meta<typeof MInputSearch>;
+import { DInputSearch } from '../../components';
+declare const config: Meta<typeof DInputSearch>;
 export default config;
-declare type Story = StoryObj<typeof MInputSearch>;
+declare type Story = StoryObj<typeof DInputSearch>;
 export declare const Default: Story;
 export declare const Value: Story;
 export declare const Error: Story;

package/dist/types/stories/components/{MInputSelect.stories.d.ts → DInputSelect.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputSelect } from '../../components';
-declare const config: Meta<typeof MInputSelect>;
+import { DInputSelect } from '../../components';
+declare const config: Meta<typeof DInputSelect>;
 export default config;
-declare type Story = StoryObj<typeof MInputSelect>;
+declare type Story = StoryObj<typeof DInputSelect>;
 export declare const Default: Story;
 export declare const Disabled: Story;
 export declare const Icon: Story;

package/dist/types/stories/components/{MInputSwitch.stories.d.ts → DInputSwitch.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MInputSwitch } from '../../components';
-declare const config: Meta<typeof MInputSwitch>;
+import { DInputSwitch } from '../../components';
+declare const config: Meta<typeof DInputSwitch>;
 export default config;
-declare type Story = StoryObj<typeof MInputSwitch>;
+declare type Story = StoryObj<typeof DInputSwitch>;
 export declare const WithoutLabel: Story;
 export declare const Default: Story;
 export declare const Checked: Story;

package/dist/types/stories/components/{MList.stories.d.ts → DList.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MList } from '../../components';
-declare const config: Meta<typeof MList>;
+import { DList } from '../../components';
+declare const config: Meta<typeof DList>;
 export default config;
-declare type Story = StoryObj<typeof MList>;
+declare type Story = StoryObj<typeof DList>;
 export declare const Default: Story;
 export declare const Flush: Story;
 export declare const Numbered: Story;

package/dist/types/stories/components/{MListItem.stories.d.ts → DListItem.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MListItem } from '../../components';
-declare const config: Meta<typeof MListItem>;
+import { DListItem } from '../../components';
+declare const config: Meta<typeof DListItem>;
 export default config;
-declare type Story = StoryObj<typeof MListItem>;
+declare type Story = StoryObj<typeof DListItem>;
 export declare const Default: Story;
 export declare const Active: Story;
 export declare const Disabled: Story;

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

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

package/dist/types/stories/components/{MPaginator.stories.d.ts → DPaginator.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import MPaginator from '../../components/MPaginator';
-declare const meta: Meta<typeof MPaginator>;
+import { DPaginator } from '../../components';
+declare const meta: Meta<typeof DPaginator>;
 export default meta;
-declare type Story = StoryObj<typeof MPaginator>;
+declare type Story = StoryObj<typeof DPaginator>;
 export declare const Default: Story;
 export declare const LabelArrows: Story;
 export declare const NoArrows: Story;

package/dist/types/stories/components/{MProgressBar.stories.d.ts → DProgress.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MProgressBar } from '../../components';
-declare const config: Meta<typeof MProgressBar>;
+import { DProgress } from '../../components';
+declare const config: Meta<typeof DProgress>;
 export default config;
-declare type Story = StoryObj<typeof MProgressBar>;
+declare type Story = StoryObj<typeof DProgress>;
 export declare const Default: Story;
 export declare const Stripped: Story;
 export declare const Valueless: Story;

package/dist/types/stories/components/{MQuickActionButton.stories.d.ts → DQuickActionButton.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MQuickActionButton } from '../../components';
-declare const config: Meta<typeof MQuickActionButton>;
+import { DQuickActionButton } from '../../components';
+declare const config: Meta<typeof DQuickActionButton>;
 export default config;
-declare type Story = StoryObj<typeof MQuickActionButton>;
+declare type Story = StoryObj<typeof DQuickActionButton>;
 export declare const PersonalInfo: Story;
 export declare const ButtonDoubleAction: Story;
 export declare const AccountBox: Story;

package/dist/types/stories/components/{MQuickActionCheck.stories.d.ts → DQuickActionCheck.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MQuickActionCheck } from '../../components';
-declare const config: Meta<typeof MQuickActionCheck>;
+import { DQuickActionCheck } from '../../components';
+declare const config: Meta<typeof DQuickActionCheck>;
 export default config;
-declare type Story = StoryObj<typeof MQuickActionCheck>;
+declare type Story = StoryObj<typeof DQuickActionCheck>;
 export declare const Default: Story;
 export declare const Example: Story;
 export declare const Checked: Story;

package/dist/types/stories/components/{MQuickActionSelect.stories.d.ts → DQuickActionSelect.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MQuickActionSelect } from '../../components';
-declare const config: Meta<typeof MQuickActionSelect>;
+import { DQuickActionSelect } from '../../components';
+declare const config: Meta<typeof DQuickActionSelect>;
 export default config;
-declare type Story = StoryObj<typeof MQuickActionSelect>;
+declare type Story = StoryObj<typeof DQuickActionSelect>;
 export declare const Default: Story;
 export declare const Example: Story;
 export declare const Selected: Story;

package/dist/types/stories/components/{MQuickActionSwitch.stories.d.ts → DQuickActionSwitch.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MQuickActionSwitch } from '../../components';
-declare const config: Meta<typeof MQuickActionSwitch>;
+import { DQuickActionSwitch } from '../../components';
+declare const config: Meta<typeof DQuickActionSwitch>;
 export default config;
-declare type Story = StoryObj<typeof MQuickActionSwitch>;
+declare type Story = StoryObj<typeof DQuickActionSwitch>;
 export declare const Default: Story;
 export declare const Checked: Story;
 export declare const DefaultDisabled: Story;

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

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

package/dist/types/stories/components/{MStepper.stories.d.ts → DStepper.stories.d.ts}

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

package/dist/types/stories/components/{MTooltip.stories.d.ts → DTooltip.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MTooltip } from '../../components';
-declare const config: Meta<typeof MTooltip>;
+import { DTooltip } from '../../components';
+declare const config: Meta<typeof DTooltip>;
 export default config;
-declare type Story = StoryObj<typeof MTooltip>;
+declare type Story = StoryObj<typeof DTooltip>;
 export declare const Top: Story;
 export declare const Right: Story;
 export declare const Bottom: Story;

package/dist/types/stories/constants.d.ts

@@ -1,8 +1,7 @@
 export declare const ICONS: string[];
 export declare const FIRST_ICON: string;
 export declare const THEMES: string[];
-export declare const ALL_COLORS: string[];
 export declare const ALERT_TYPES: string[];
-export declare const ALL_COLORS_WITH_EMPTY: (string | undefined)[];
+export declare const THEMES_WITH_EMPTY: (string | undefined)[];
 export declare const INPUT_STATE: string[];
 export declare const COMPONENT_SIZE: (string | undefined)[];

package/dist/types/stories/hooks/useOffcanvasContext.stories.d.ts

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MOffcanvas } from '../../components';
+import { DOffcanvas } from '../../components';
 declare const Example: () => import("react/jsx-runtime").JSX.Element;
 declare const config: Meta<typeof Example>;
 export default config;
-declare type Story = StoryObj<typeof MOffcanvas>;
+declare type Story = StoryObj<typeof DOffcanvas>;
 export declare const useOffcanvasContext: Story;

package/dist/types/stories/patterns/{MAlert.stories.d.ts → DAlert.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MAlert } from '../../components';
-declare const config: Meta<typeof MAlert>;
+import { DAlert } from '../../components';
+declare const config: Meta<typeof DAlert>;
 export default config;
-declare type Story = StoryObj<typeof MAlert>;
+declare type Story = StoryObj<typeof DAlert>;
 export declare const Light: Story;
 export declare const Dark: Story;
 export declare const Success: Story;

package/dist/types/stories/{components/MCarousel.stories.d.ts → patterns/DCarousel.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MCarousel } from '../../components';
-declare const config: Meta<typeof MCarousel>;
+import DCarousel from '../../components/DCarousel';
+declare const config: Meta<typeof DCarousel>;
 export default config;
-declare type Story = StoryObj<typeof MCarousel>;
+declare type Story = StoryObj<typeof DCarousel>;
 export declare const Default: Story;
 export declare const TwoPerPage: Story;
 export declare const WithBreakpoints: Story;

package/dist/types/stories/patterns/{MCollapse.stories.d.ts → DCollapse.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MCollapse } from '../../components';
-declare const config: Meta<typeof MCollapse>;
+import { DCollapse } from '../../components';
+declare const config: Meta<typeof DCollapse>;
 export default config;
-declare type Story = StoryObj<typeof MCollapse>;
+declare type Story = StoryObj<typeof DCollapse>;
 export declare const HeaderText: Story;
 export declare const HeaderComponent: Story;
 export declare const Collapsed: Story;

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

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

package/dist/types/stories/patterns/{MModal.stories.d.ts → DModal.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MModal } from '../../components';
-declare const config: Meta<typeof MModal>;
+import { DModal } from '../../components';
+declare const config: Meta<typeof DModal>;
 export default config;
-declare type Story = StoryObj<typeof MModal>;
+declare type Story = StoryObj<typeof DModal>;
 export declare const Default: Story;
 export declare const ActionsPlacementStart: Story;
 export declare const ActionsPlacementEnd: Story;

package/dist/types/stories/patterns/{MOffcanvas.stories.d.ts → DOffcanvas.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MOffcanvas } from '../../components';
-declare const config: Meta<typeof MOffcanvas>;
+import { DOffcanvas } from '../../components';
+declare const config: Meta<typeof DOffcanvas>;
 export default config;
-declare type Story = StoryObj<typeof MOffcanvas>;
+declare type Story = StoryObj<typeof DOffcanvas>;
 export declare const Default: Story;
 export declare const ActionsPlacementStart: Story;
 export declare const ActionsPlacementEnd: Story;

package/dist/types/stories/patterns/{MPopover.stories.d.ts → DPopover.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { MPopover } from '../../components';
-declare const config: Meta<typeof MPopover>;
+import { DPopover } from '../../components';
+declare const config: Meta<typeof DPopover>;
 export default config;
-declare type Story = StoryObj<typeof MPopover>;
+declare type Story = StoryObj<typeof DPopover>;
 export declare const Default: Story;
 export declare const Open: Story;
 export declare const Plain: Story;

package/dist/types/stories/patterns/{MTabs.stories.d.ts → DTabs.stories.d.ts}

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dynamic-framework/ui-react",
   "sideEffects": false,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
     "src/style"
   ],
   "dependencies": {
-    "@dynamic-framework/ui": "^1.3.1",
+    "@dynamic-framework/ui": "^1.4.0",
     "@floating-ui/react": "^0.24.1",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
@@ -133,5 +133,5 @@
       "@dynamic-framework/ui"
     ]
   },
-  "gitHead": "e14dc1c7b3beee8f1b6dc6818bf8e92181c23e99"
+  "gitHead": "3a9dae429ce335225a5d569e401034770395f0c1"
 }

package/src/style/components/_+import.scss

@@ -1,12 +1,15 @@
-@import "m-collapse";
-@import "m-collapse-icon-text";
-@import "m-datepicker";
-@import "m-timepicker";
-@import "m-monthpicker";
-@import "m-tabs";
-@import "m-popover";
-@import "m-box-file";
-@import "m-carousel";
-@import "m-stepper";
-@import "m-paginator";
-@import "m-card-account";
+@import "d-collapse";
+@import "d-collapse-icon-text";
+@import "d-datepicker";
+@import "d-timepicker";
+@import "d-monthpicker";
+@import "d-tabs";
+@import "d-popover";
+@import "d-box-file";
+@import "d-carousel";
+@import "d-stepper";
+@import "d-paginator";
+@import "d-card-account";
+
+// TODO: review.
+@import "d-permission-group";

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

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

package/src/style/components/{_m-card-account.scss → _d-card-account.scss}

@@ -1,4 +1,4 @@
-.m-card-account {
+.d-card-account {
   // Card
   --#{$prefix}card-border-width: 0px;
   --#{$prefix}card-spacer-y: #{$spacer};

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

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

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

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