@dynamic-framework/ui-react 1.1.1

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

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

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

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

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

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

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

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

package/dist/types/utils/configureI18n.d.ts

@@ -0,0 +1,2 @@
+import { InitOptions, Resource, TFunction } from 'i18next';
+export default function configureI8n(resources: Resource, { lng, fallbackLng, ...config }?: InitOptions | undefined): Promise<TFunction>;

package/dist/types/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as configureI18n } from './configureI18n';

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "@dynamic-framework/ui-react",
+  "sideEffects": false,
+  "version": "1.1.1",
+  "description": "React Dynamic Framework",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dynamic-framework/dynamic-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "type": "git",
+    "url": "https://github.com/dynamic-framework/dynamic-ui.git"
+  },
+  "author": {
+    "name": "Abraham José González Barboza",
+    "email": "agonzalez@modyo.com",
+    "url": "https://github.com/abe-modyo"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "pnpm build:react && pnpm build:style",
+    "build:react": "rimraf dist && tsc -p . && rollup -c rollup.config.js",
+    "build:react:watch": "tsc -p . && rollup -c rollup.config.js",
+    "build:scss": "sass --load-path=node_modules --source-map --style=compressed src/style/main.scss dist/css/dynamic-ui-react.css",
+    "build:scss:watch": "sass --load-path=node_modules --source-map -w src/style/main.scss dist/css/dynamic-ui-react.css",
+    "build:autoprefixer": "postcss dist/css/dynamic-ui-react.css --use autoprefixer -o dist/css/dynamic-ui-react.css",
+    "build:style": "pnpm build:scss && pnpm build:autoprefixer",
+    "clean": "rimraf dist",
+    "compile": "tsc -p . && rollup -c rollup.config.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o docs",
+    "eslint": "eslint src/**/*{.ts,.tsx}",
+    "stylelint": "stylelint \"**/*.{css,scss}\" --rd",
+    "lint-staged": "lint-staged"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist/",
+    "src/style"
+  ],
+  "dependencies": {
+    "@floating-ui/react": "^0.24.1",
+    "axios": "^1.1.2",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
+    "i18next": "~21.9.0",
+    "react-content-loader": "~6.2.0",
+    "react-datepicker": "~4.8.0",
+    "react-dropzone": "^14.2.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
+    "@dynamic-framework/ui": "^1.1.1",
+    "@mdx-js/react": "^2.3.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@storybook/addon-actions": "7.0.6",
+    "@storybook/addon-essentials": "7.0.6",
+    "@storybook/addon-interactions": "7.0.6",
+    "@storybook/addon-links": "7.0.6",
+    "@storybook/addon-viewport": "7.0.6",
+    "@storybook/blocks": "7.0.6",
+    "@storybook/react": "7.0.6",
+    "@storybook/react-webpack5": "7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.24",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "29.1.2",
+    "@types/lodash.camelcase": "^4.3.7",
+    "@types/luxon": "~3.0.1",
+    "@types/node": "^15.12.2",
+    "@types/react": "^18.0.8",
+    "@types/react-datepicker": "~4.8.0",
+    "@types/react-dom": "^18.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^8.2.5",
+    "bootstrap": "^5.3.0",
+    "eslint": "8.22.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "formik": "^2.2.9",
+    "html2canvas": "^1.4.1",
+    "jest": "^29.1.2",
+    "jest-cli": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
+    "lint-staged": "^12.4.1",
+    "luxon": "~3.0.3",
+    "postcss-cli": "^10.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "~11.18.3",
+    "react-toastify": "~9.0.8",
+    "rimraf": "^2.6.3",
+    "rollup": "^2.72.1",
+    "sass": "^1.62.1",
+    "storybook": "^7.0.5",
+    "stylelint": "^15.6.2",
+    "stylelint-config-twbs-bootstrap": "^10.0.0",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@dynamic-framework/ui": "*",
+    "formik": "^2.2.9",
+    "html2canvas": "^1.4.1",
+    "luxon": "~3.0.3",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "~11.18.3",
+    "react-toastify": "~9.0.8"
+  },
+  "nx": {
+    "implicitDependencies": [
+      "@dynamic-framework/ui"
+    ]
+  },
+  "gitHead": "c40ab13540ce3253c4280f845e663ac82d716576"
+}

package/src/style/_shame.scss

@@ -0,0 +1 @@
+// keep empty.

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

@@ -0,0 +1,3 @@
+@import "@dynamic-framework/ui/src/style/abstracts/+import";
+
+@import "variables/+import";

package/src/style/abstracts/variables/_+import.scss

@@ -0,0 +1,2 @@
+@import "collapse-icon-text";
+@import "box-file";

package/src/style/abstracts/variables/_box-file.scss

@@ -0,0 +1,15 @@
+$box-file-gap: $spacer-3 !default;
+$box-file-border: 1px dashed var(--#{$prefix}gray-700) !default;
+$box-file-border-radius: $border-radius !default;
+$box-file-padding: $spacer-5 !default;
+$box-file-content-max-width: 220px !default;
+$box-file-icon-size: $spacer-8 !default;
+$box-file-icon-color: var(--#{$prefix}secondary-300) !default;
+
+$box-file-hover-border: 1px dashed var(--#{$prefix}secondary-700) !default;
+$box-file-hover-background: var(--#{$prefix}secondary-100) !default;
+
+$box-file-selected-border: 1px dashed var(--#{$prefix}secondary-700) !default;
+$box-file-selected-background: var(--#{$prefix}white) !default;
+
+$box-file-files-color: var(--#{$prefix}gray-500) !default;

package/src/style/abstracts/variables/_calendar.scss

@@ -0,0 +1,19 @@
+// stylelint-disable scss/dollar-variable-pattern
+$datepicker__background-color: transparent !default;
+$datepicker__border-color: transparent !default;
+$datepicker__highlighted-color: var(--#{$prefix}secondary) !default;
+$datepicker__muted-color: #ccc !default;
+$datepicker__selected-color: var(--#{$prefix}secondary) !default;
+$datepicker__text-color: var(--#{$prefix}body-color) !default;
+$datepicker__header-color: var(--#{$prefix}body-color) !default;
+$datepicker__navigation-disabled-color: var(--#{$prefix}light) !default;
+
+$datepicker__border-radius: .3rem !default;
+$datepicker__day-margin: .166rem !default;
+$datepicker__font-size: .8rem !default;
+$datepicker__font-family: "Helvetica Neue", helvetica, arial, sans-serif !default;
+$datepicker__item-size: 1.7rem !default;
+$datepicker__margin: .4rem !default;
+$datepicker__navigation-button-size: 32px !default;
+$datepicker__triangle-size: 8px !default;
+// stylelint-enable scss/dollar-variable-pattern

package/src/style/abstracts/variables/_collapse-icon-text.scss

@@ -0,0 +1,3 @@
+$collapse-icon-text-header-gap: $spacer-3 !default;
+$collapse-icon-text-header-font-size: $h6-font-size !default;
+$collapse-icon-text-header-font-weight: $font-weight-bold !default;

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

@@ -0,0 +1,6 @@
+@import "m-collapse";
+@import "m-collapse-icon-text";
+@import "m-calendar";
+@import "m-tabs";
+@import "m-popover";
+@import "m-box-file";

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

@@ -0,0 +1,66 @@
+.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-calendar.scss

@@ -0,0 +1,205 @@
+@import "react-datepicker/src/stylesheets/datepicker";
+
+// stylelint-disable selector-class-pattern
+.react-datepicker {
+  border: 0;
+
+  .react-datepicker__header {
+    padding: 20px 0;
+    background-color: transparent;
+    border: 0;
+  }
+
+  .react-datepicker-border {
+    border: 1px solid var(--#{$prefix}dark);
+  }
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--selected,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--selected,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__year-text--in-range {
+    color: var(--#{$prefix}dark);
+    background-color: rgba(var(--#{$prefix}tertiary-rgb), .2);
+    border-radius: 50rem;
+  }
+
+  .react-datepicker__day--in-selecting-range:not(.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__month-text--in-selecting-range:not(.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__quarter-text--in-selecting-range:not(.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__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
+    background-color: rgba(var(--#{$prefix}secondary-rgb), .1);
+  }
+
+  .react-datepicker__day:hover,
+  .react-datepicker__month-text:hover,
+  .react-datepicker__quarter-text:hover,
+  .react-datepicker__year-text:hover {
+    background-color: rgba(var(--#{$prefix}tertiary-rgb), .1);
+    border-radius: 50rem;
+  }
+
+  .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}dark);
+    background-color: transparent;
+  }
+
+  .react-datepicker__day--outside-month {
+    visibility: hidden;
+  }
+
+  .react-datepicker__input-time-container {
+    width: 100%;
+    padding-top: .5rem;
+    margin: 0;
+    text-align: center;
+    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: 68%;
+        text-align: center;
+        outline: 0;
+      }
+    }
+  }
+
+  .react-datepicker-time__input[type="time"] {
+    width: 100%;
+    font-family: inherit;
+    font-size: .75rem;
+    color: #2a2c2d;
+    border: 0;
+  }
+
+  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-fields-wrapper {
+    display: flex;
+  }
+
+  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-text {
+    padding: 8px;
+  }
+
+  /* Hour and Minute */
+  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-hour-field,
+  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-minute-field {
+    padding: 8px;
+    cursor: text;
+    user-select: all;
+    background-color: var(--#{$prefix}light);
+    border-radius: 15%;
+  }
+
+  /* Clock Icon */
+  .react-datepicker-time__input[type="time"]::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'  class='bi bi-alarm' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z'/%3E%3Cpath d='M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z'/%3E%3C/svg%3E");
+  }
+
+  .react-datepicker__day--today,
+  .react-datepicker__month-text--today,
+  .react-datepicker__quarter-text--today,
+  .react-datepicker__year-text--today {
+    font-weight: 400;
+    border: 1px solid var(--#{$prefix}tertiary);
+    border-radius: 50rem;
+  }
+
+  .react-datepicker__portal {
+    .react-datepicker {
+      .react-datepicker__input-time-container {
+
+        margin-bottom: 20px;
+
+      }
+    }
+  }
+
+  .repeat-end-container {
+    >div {
+      width: 100%;
+    }
+  }
+
+  .react-datepicker__input-container {
+
+    width: 100%;
+
+    .input-date {
+      --bg-size: 20px;
+      --padding-x: calc(8px - var(--#{$prefix}border-width));
+      --padding-y: calc(6px - var(--#{$prefix}border-width));
+      width: 100%;
+      padding: var(--padding-y) var(--padding-x);
+      padding-right: calc(var(--bg-size) + 1rem);
+      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 16 16' fill='%234848B7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.923 16h-9.8462c-0.81605 0-1.5987-0.3241-2.1757-0.9012-0.57704-0.577-0.90121-1.3596-0.90121-2.1757v-8.6154c0-0.81605 0.32418-1.5987 0.90121-2.1757 0.57704-0.57703 1.3597-0.90121 2.1757-0.90121h9.8462c0.816 0 1.5987 0.32418 2.1757 0.90121 0.577 0.57704 0.9012 1.3597 0.9012 2.1757v8.6154c0 0.8161-0.3242 1.5987-0.9012 2.1757-0.577 0.5771-1.3597 0.9012-2.1757 0.9012zm-9.8462-13.538c-0.48963 0-0.9592 0.19451-1.3054 0.54073-0.34623 0.34622-0.54073 0.8158-0.54073 1.3054v8.6154c0 0.4897 0.1945 0.9592 0.54073 1.3054 0.34622 0.3463 0.81579 0.5408 1.3054 0.5408h9.8462c0.4896 0 0.9592-0.1945 1.3054-0.5408 0.3462-0.3462 0.5407-0.8157 0.5407-1.3054v-8.6154c0-0.48963-0.1945-0.95921-0.5407-1.3054s-0.8158-0.54073-1.3054-0.54073h-9.8462z' /%3E%3Cpath d='m12.923 13.538h-2.4615c-0.1632 0-0.3198-0.0648-0.4352-0.1802-0.11537-0.1154-0.18021-0.272-0.18021-0.4352v-2.4615c0-0.1632 0.06484-0.3198 0.18021-0.4352 0.1154-0.11537 0.272-0.18021 0.4352-0.18021h2.4615c0.1632 0 0.3198 0.06484 0.4352 0.18021 0.1154 0.1154 0.1802 0.272 0.1802 0.4352v2.4615c0 0.1632-0.0648 0.3198-0.1802 0.4352s-0.272 0.1802-0.4352 0.1802zm-1.8461-1.2308h1.2307v-1.2307h-1.2307v1.2307z' /%3E%3Cpath d='m15.385 6.1539h-14.769c-0.16321 0-0.31974-0.06483-0.43514-0.18024-0.11541-0.1154-0.18024-0.27193-0.18024-0.43514s0.064835-0.31974 0.18024-0.43514c0.11541-0.11541 0.27193-0.18024 0.43514-0.18024h14.769c0.1632 0 0.3198 0.06483 0.4352 0.18024 0.1154 0.1154 0.1802 0.27193 0.1802 0.43514s-0.0648 0.31974-0.1802 0.43514c-0.1154 0.11541-0.272 0.18024-0.4352 0.18024z' /%3E%3Cpath d='m4.923 3.6923c-0.16321 0-0.31973-0.06484-0.43514-0.18024-0.11541-0.11541-0.18024-0.27194-0.18024-0.43515v-2.4615c0-0.16321 0.06483-0.31974 0.18024-0.43514s0.27193-0.18024 0.43514-0.18024 0.31974 0.064835 0.43514 0.18024c0.11541 0.11541 0.18025 0.27193 0.18025 0.43514v2.4615c0 0.16321-0.06484 0.31974-0.18025 0.43515-0.1154 0.1154-0.27193 0.18024-0.43514 0.18024z' /%3E%3Cpath d='m11.077 3.6923c-0.1632 0-0.3197-0.06484-0.4351-0.18024-0.1154-0.11541-0.1803-0.27194-0.1803-0.43515v-2.4615c0-0.16321 0.0649-0.31974 0.1803-0.43514s0.2719-0.18024 0.4351-0.18024 0.3197 0.064835 0.4352 0.18024c0.1154 0.11541 0.1802 0.27193 0.1802 0.43514v2.4615c0 0.16321-0.0648 0.31974-0.1802 0.43515-0.1155 0.1154-0.272 0.18024-0.4352 0.18024z' /%3E%3C/svg%3E%0A");
+      background-repeat: no-repeat;
+      background-position: right .5rem center;
+      background-origin: border-box;
+      background-size: var(--bg-size);
+
+      border: var(--#{$prefix}border-width) solid var(--#{$prefix}info);
+      border-radius: var(--#{$prefix}border-radius-sm);
+      outline: 0;
+
+    }
+  }
+
+  .react-datepicker__current-month {
+    text-transform: capitalize;
+  }
+}
+
+// Two calendars with same date range
+.react-datepicker.calendar-start {
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range {
+
+    &.react-datepicker__day--selecting-range-start,
+    &.react-datepicker__day--range-start {
+      color: var(--#{$prefix}white);
+      background-color: var(--#{$prefix}tertiary);
+
+      &:hover {
+        background-color: rgba(var(--#{$prefix}tertiary-rgb), .7);
+      }
+    }
+  }
+}
+
+.react-datepicker.calendar-end {
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range {
+
+    &.react-datepicker__day--selecting-range-end,
+    &.react-datepicker__day--range-end {
+      color: var(--#{$prefix}white);
+      background-color: var(--#{$prefix}tertiary);
+
+      &:hover {
+        background-color: rgba(var(--#{$prefix}tertiary-rgb), .7);
+      }
+    }
+  }
+}
+// stylelint-enable selector-class-pattern

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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,56 @@
+.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-popover.scss

@@ -0,0 +1,12 @@
+.m-popover {
+  position: relative;
+  width: 100%;
+
+  .m-popover-content {
+    width: 100%;
+
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+}

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

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

package/src/style/main.scss

@@ -0,0 +1,7 @@
+@charset "utf-8";
+
+@import "abstracts/+import";
+
+@import "components/+import";
+
+@import "shame";