@dynamic-framework/ui-react 1.14.0 → 1.15.0

package/dist/types/components/DSelect/components/DSelectOptionEmoji.d.ts

@@ -0,0 +1,7 @@
+import type { GroupBase, OptionProps } from 'react-select';
+export type OptionEmoji = {
+    label: string;
+    value: string;
+    emoji: string;
+};
+export default function DSelectOptionEmoji<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, data, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DSelect/components/DSelectOptionIcon.d.ts

@@ -0,0 +1,7 @@
+import type { GroupBase, OptionProps } from 'react-select';
+export type OptionIcon = {
+    label: string;
+    value: string;
+    icon: string;
+};
+export default function DSelectOptionIcon<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, data, ...props }: OptionProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DSelect/components/DSelectSingleValueEmoji.d.ts

@@ -0,0 +1,2 @@
+import type { GroupBase, SingleValueProps } from 'react-select';
+export default function DSelectSingleValueEmoji<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, getValue, ...props }: SingleValueProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DSelect/components/DSelectSingleValueEmojiText.d.ts

@@ -0,0 +1,2 @@
+import type { GroupBase, SingleValueProps } from 'react-select';
+export default function DSelectSingleValueEmojiText<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, getValue, ...props }: SingleValueProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DSelect/components/DSelectSingleValueIconText.d.ts

@@ -0,0 +1,2 @@
+import type { GroupBase, SingleValueProps } from 'react-select';
+export default function DSelectSingleValueIconText<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ children, getValue, ...props }: SingleValueProps<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DSelect/index.d.ts

@@ -0,0 +1,4 @@
+import DSelect from './DSelect';
+export type { OptionIcon } from './components/DSelectOptionIcon';
+export type { OptionEmoji } from './components/DSelectOptionEmoji';
+export default DSelect;

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

@@ -7,9 +7,12 @@ export type Step = {
 type Props = BaseProps & {
     options: Array<Step>;
     currentStep: number;
-    successIcon?: string;
+    iconSuccess?: string;
+    iconSuccessFamilyClass?: string;
+    iconSuccessFamilyPrefix?: string;
+    iconSuccessMaterialStyle?: boolean;
     vertical?: boolean;
     breakpoint?: BreakpointSize;
 };
-export default function DStepper({ options, currentStep, successIcon, vertical, breakpoint, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,8 +6,11 @@ type Step = {
 type Props = BaseProps & {
     options: Array<Step>;
     currentStep: number;
-    successIcon?: string;
+    iconSuccess?: string;
+    iconSuccessFamilyClass?: string;
+    iconSuccessFamilyPrefix?: string;
+    iconSuccessMaterialStyle?: boolean;
     vertical?: boolean;
 };
-export default function DStepper({ options, currentStep, successIcon, vertical, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DTabs/index.d.ts

@@ -1,5 +1,5 @@
 import DTabs from './DTabs';
-export { DTabOption } from './DTabs';
+export type { DTabOption } from './DTabs';
 export { default as DTabContent } from './components/DTabContent';
 export { useTabContext } from './TabContext';
 export default DTabs;

package/dist/types/components/DToastContainer/useToast.d.ts

@@ -5,7 +5,9 @@ export type ToastConfig = {
     showClose?: boolean;
     position?: ToastPosition;
     autoClose?: number | false;
+    icon?: string;
+    iconClose?: string;
 };
 export default function useToast(): {
-    toast: (message: string, { position, type, showClose, autoClose, }?: ToastConfig) => void;
+    toast: (message: string, { position, type, showClose, autoClose, icon, iconClose, }?: ToastConfig) => void;
 };

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

@@ -1,5 +1,3 @@
-import { AlertTypeIconMap } from './interface';
 export declare const PREFIX_BS = "bs-";
 export declare const ICON_FAMILY_CLASS = "bi";
 export declare const ICON_FAMILY_PREFIX = "bi-";
-export declare const ALERT_TYPE_ICON: AlertTypeIconMap;

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

@@ -4,11 +4,9 @@ export { default as DBadge } from './DBadge';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
 export { default as DCard, DCardHeader, DCardBody, DCardFooter, } from './DCard';
-export { default as DCardAccount } from './DCardAccount';
 export { default as DCarousel, DCarouselSlide, } from './DCarousel';
 export { default as DChip } from './DChip';
 export { default as DCollapse } from './DCollapse';
-export { default as DCollapseIconText } from './DCollapseIconText';
 export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
@@ -22,8 +20,9 @@ export { default as DInputSearch } from './DInputSearch';
 export { default as DInputPassword } from './DInputPassword';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
-export { default as DInputSelect, DInputSelectProps } from './DInputSelect';
+export { default as DInputSelect, DInputSelectDefaultOption, DInputSelectProps } from './DInputSelect';
 export { default as DInputSwitch } from './DInputSwitch';
+export { default as DSelect } from './DSelect';
 export { default as DList, DListItem, } from './DList';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';

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

@@ -19,11 +19,13 @@ export type BaseProps = {
 export type FamilyIconProps = {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
+    iconMaterialStyle?: boolean;
 };
 export type LabelIconProps = {
     labelIcon?: string;
     labelIconFamilyClass?: string;
     labelIconFamilyPrefix?: string;
+    labelIconMaterialStyle?: boolean;
 };
 export type StartIconProps = {
     iconStart?: string;
@@ -32,6 +34,7 @@ export type StartIconProps = {
     iconStartFamilyPrefix?: string;
     iconStartAriaLabel?: string;
     iconStartTabIndex?: number;
+    iconStartMaterialStyle?: boolean;
 };
 export type EndIconProps = {
     iconEnd?: string;
@@ -40,6 +43,11 @@ export type EndIconProps = {
     iconEndFamilyPrefix?: string;
     iconEndAriaLabel?: string;
     iconEndTabIndex?: number;
+    iconEndMaterialStyle?: boolean;
+};
+export type StateIcons = {
+    invalidIcon?: string;
+    validIcon?: string;
 };
 export type AlertType = 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | 'primary' | 'secondary';
 export type AlertTypeIconMap = {

package/dist/types/contexts/DContext.d.ts

@@ -1,22 +1,47 @@
 import type { PropsWithChildren } from 'react';
+import type { AlertTypeIconMap } from '../components/interface';
+type CurrencyProps = {
+    symbol: string;
+    precision: number;
+    separator: string;
+    decimal: string;
+};
+type IconProps = {
+    familyClass: string;
+    familyPrefix: string;
+    materialStyle: boolean;
+};
+type IconMapProps = {
+    x: string;
+    xLg: string;
+    chevronDown: string;
+    chevronUp: string;
+    chevronLeft: string;
+    chevronRight: string;
+    alert: AlertTypeIconMap;
+    upload: string;
+    calendar: string;
+    check: string;
+    input: {
+        invalid: string;
+        valid: string;
+        search: string;
+        show: string;
+        hide: string;
+        decrease: string;
+        increase: string;
+    };
+};
 type Props = {
     language: string;
-    currency: {
-        symbol: string;
-        precision: number;
-        separator: string;
-        decimal: string;
-    };
-    icon: {
-        familyClass?: string;
-        familyPrefix?: string;
-        materialStyle?: boolean;
-    };
+    currency: CurrencyProps;
+    icon: IconProps;
+    iconMap: IconMapProps;
 };
 type Context = Props & {
     setContext: (value: Props) => void;
 };
 export declare const DContext: import("react").Context<Context>;
-export declare function DContextProvider({ language, currency, icon, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
+export declare function DContextProvider({ language, currency, icon, iconMap, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
 export declare function useDContext(): Context;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -43,14 +43,15 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:storybook": "test-storybook",
-    "build": "pnpm clean && pnpm build:react && pnpm build:scss",
+    "build": "pnpm clean && pnpm build:react && pnpm build:scss && pnpm cp:bootstrap",
     "build:react": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "./scripts/build-scss.sh",
+    "cp:bootstrap": "scripts/cp-boostrap.sh",
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
     "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build -o docs",
+    "build:storybook": "storybook build --docs -o docs",
     "eslint": "pnpm eslint:src && pnpm eslint:stories && pnpm eslint:test",
     "eslint:src": "eslint src/**/*{.ts,.tsx} --ignore-pattern '**/*.spec.tsx'",
     "eslint:stories": "eslint stories/**/*.stories.tsx",
@@ -70,6 +71,7 @@
     "@react-input/mask": "^1.0.20",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "^4.1.4",
+    "@types/react-datepicker": "^4.19.1",
     "bootstrap": "^5.3.2",
     "classnames": "^2.3.2",
     "currency.js": "^2.0.4",
@@ -79,6 +81,7 @@
     "react-datepicker": "^4.21.0",
     "react-dropzone": "^14.2.3",
     "react-responsive-pagination": "^2.2.3",
+    "react-select": "^5.8.0",
     "react-toastify": "^9.1.3"
   },
   "devDependencies": {
@@ -144,5 +147,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "f3f0bb4841b88a468dd5868819e924ef6f3057af"
+  "gitHead": "a37c9aa8e3eac83d13f9c2b8837334aa35ad0128"
 }

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

@@ -19,7 +19,7 @@ $btn-padding-y-lg: .875rem !default;
 $btn-padding-x-lg: $spacer-4 !default;
 $btn-font-size-lg: $h6-font-size !default;
 
-$btn-border-width: 2px !default;
+$btn-border-width: 1px !default;
 
 $btn-font-weight: $font-weight-normal !default;
 $btn-box-shadow: none !default;

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

@@ -40,10 +40,10 @@ $input-font-size-lg: $input-font-size !default;
 $input-bg: var(--#{$prefix}white) !default;
 $input-disabled-color: var(--#{$prefix}gray) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
-$input-disabled-border-color: var(--#{$prefix}gray-200) !default;
+$input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
 $input-color: var(--#{$prefix}gray) !default;
-$input-border-color: var(--#{$prefix}gray-200) !default;      // unused
+$input-border-color: var(--#{$prefix}gray-300) !default;      // unused
 $input-border-width: $input-btn-border-width !default;          // unused
 $input-box-shadow: $box-shadow-inset !default;                  // unused
 

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

@@ -56,6 +56,7 @@
 @import "d-paginator";
 @import "d-card-account";
 @import "d-tooltip";
+@import "d-select";
 
 // TODO: review.
 @import "d-permission-group";

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

@@ -2,7 +2,7 @@
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-dot-height: #{$badge-dot-height};
 
-  display: block;
+  display: inline-block;
   background-color: var(--#{$prefix}badge-bg);
 
   @each $theme, $value in $theme-colors {

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

@@ -26,7 +26,7 @@
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
   --#{$prefix}btn-sm-border-radius: var(--#{$prefix}btn-component-sm-border-radius, #{$btn-border-radius-sm});
 
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: var(--#{$prefix}btn-gap, $spacer-2);
   align-items: center;
@@ -57,6 +57,7 @@
   &:hover,
   &.hover {
     color: var(--#{$prefix}btn-hover-color);
+    text-decoration: none;
     background-color: var(--#{$prefix}btn-hover-bg);
     border-color: var(--#{$prefix}btn-hover-border-color);
   }
@@ -155,6 +156,10 @@
   }
 
   .btn-link-#{$color} {
+    span {
+      text-decoration: underline;
+    }
+
     @include df-button-link-variant($color);
   }
 }

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

@@ -5,15 +5,13 @@
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 
-  // we need to use important in this case to avoid to use the display of the family class
-  display: inline-flex !important; // stylelint-disable-line declaration-no-important
+  display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
   align-items: center;
   justify-content: center;
   width: var(--#{$prefix}icon-size);
   height: var(--#{$prefix}icon-size);
   padding: var(--#{$prefix}icon-padding);
-  // we need to use important in this case to avoid to use the font-size of the family class
-  font-size: var(--#{$prefix}icon-size) !important; // stylelint-disable-line declaration-no-important
+  font-size: var(--#{$prefix}icon-size) !important; /* stylelint-disable-line declaration-no-important */
   color: var(--#{$prefix}icon-color);
   background-color: var(--#{$prefix}icon-bg-color);
   border-radius: var(--#{$prefix}icon-padding);

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

@@ -7,8 +7,6 @@
   --#{$prefix}input-label-padding-x: #{$form-label-padding-x};
   --#{$prefix}input-label-padding-y: #{$form-label-padding-y};
   --#{$prefix}input-label-gap: #{$form-label-gap};
-  // label if input has value
-  --#{$prefix}input-label-has-value-color: #{$form-label-has-value-color};
 
   // input group
   --#{$prefix}input-group-border-color: #{$input-group-border-color};
@@ -31,7 +29,7 @@
   // input disabled
   --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
   --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
-  --#{$prefix}input-group-disabled-color: #{$input-group-disabled-color};
+  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
 
   display: flex;
   flex-direction: column;
@@ -74,7 +72,7 @@
   }
 
   // not empty
-  .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown, :disabled)) {
+  .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown)) {
     border-color: var(--#{$prefix}input-group-hover-border-color);
   }
 
@@ -95,9 +93,7 @@
       }
 
       .d-input-validation-icon {
-        .d-icon {
-          --#{$prefix}icon-color: #{$tooltip-bg-color};
-        }
+        --#{$prefix}icon-color: #{$tooltip-bg-color};
       }
     }
   }
@@ -144,10 +140,6 @@
   .input-group-text {
     border: 0;
     outline: 0;
-
-    &:disabled {
-      color: var(--#{$prefix}input-group-disabled-color);
-    }
   }
 
   // input disabled
@@ -157,11 +149,9 @@
 
 
   &:has(.form-control:disabled) {
-    border-color: var(--#{$prefix}input-group-disabled-color);
 
     // input addons disabled
     .input-group-text {
-      color: var(--#{$prefix}input-group-disabled-color);
       background: var(--#{$prefix}input-group-disabled-bg);
     }
 

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

@@ -0,0 +1,252 @@
+// stylelint-disable selector-class-pattern
+
+.d-select {
+  --#{$prefix}input-gap: #{$spacer-2};
+
+  // label
+  --#{$prefix}input-label-color: #{$form-label-color};
+  --#{$prefix}input-label-font-weight: #{$form-label-font-weight};
+  --#{$prefix}input-label-font-size: #{$form-label-font-size};
+  --#{$prefix}input-label-padding-x: #{$form-label-padding-x};
+  --#{$prefix}input-label-padding-y: #{$form-label-padding-y};
+  --#{$prefix}input-label-gap: #{$form-label-gap};
+
+  // input group
+  --#{$prefix}input-group-border-color: #{$input-group-border-color};
+  --#{$prefix}input-group-border-width: #{$input-group-border-width};
+  --#{$prefix}input-group-border-radius: #{$input-group-border-radius};
+  // input group hover
+  --#{$prefix}input-group-hover-border-color: #{$input-group-hover-border-color};
+  // input group focus
+  --#{$prefix}input-group-focus-border-color: #{$input-group-focus-border-color};
+  --#{$prefix}input-group-focus-box-shadow: #{$input-group-focus-box-shadow};
+
+  // input
+  --#{$prefix}input-padding-y: #{$input-padding-y};
+  --#{$prefix}input-padding-x: #{$input-padding-x};
+  --#{$prefix}input-font-family: #{$input-font-family};
+  --#{$prefix}input-font-size: #{$input-font-size};
+  --#{$prefix}input-font-weight: #{$input-font-weight};
+  --#{$prefix}input-line-height: #{$input-line-height};
+  --#{$prefix}input-color: #{$input-color};
+  --#{$prefix}input-bg: #{$input-bg};
+  --#{$prefix}input-focus-color: #{$input-focus-color};
+  --#{$prefix}input-focus-bg: #{$input-focus-bg};
+  --#{$prefix}input-placeholder-color: #{$input-placeholder-color};
+
+  // hint
+  --#{$prefix}input-form-text-padding: #{$form-control-padding-y} #{$form-control-padding-x};
+  --#{$prefix}input-form-text-gap: #{$form-control-gap};
+  --#{$prefix}input-form-text-color: #{$form-control-color};
+
+  // input disabled
+  --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color};
+  --#{$prefix}input-group-disabled-bg: #{$input-disabled-bg};
+  --#{$prefix}input-group-disabled-color: #{$input-disabled-color};
+
+  // select
+  --#{$prefix}select-menu-shadow: #{$box-shadow-sm};
+
+  --#{$prefix}select-option-focus-bg: var(--#{$prefix}gray-100);
+
+  --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
+  --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
+
+  --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
+
+  --#{$prefix}select-option-has-icon-icon-size: #{$spacer-3};
+
+  --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}input-gap);
+  --#{$prefix}select-multi-value-padding-y: 0;
+  --#{$prefix}select-multi-value-margin-right: var(--#{$prefix}input-gap);
+  --#{$prefix}select-multi-value-background: var(--#{$prefix}gray-100);
+  --#{$prefix}select-multi-value-border-radius: #{$spacer-1};
+  --#{$prefix}select-multi-value-label-color: var(--#{$prefix}secondary);
+
+  --#{$prefix}select-indicator-width: #{$spacer-4};
+  --#{$prefix}select-indicator-height: #{$spacer-4};
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}input-gap);
+  align-items: flex-start;
+
+  // focus
+  &:focus-within {
+    .input-group {
+      border-color: var(--#{$prefix}input-group-focus-border-color);
+      box-shadow: var(--#{$prefix}input-group-focus-box-shadow);
+    }
+  }
+
+  .d-select-control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}input-gap);
+    width: 100%;
+  }
+
+  label {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-label-gap);
+    align-items: center;
+
+    .d-select-icon {
+      .d-icon {
+        --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
+      }
+    }
+  }
+
+  // input with elements
+  .input-group {
+    border: var(--#{$prefix}input-group-border-width) solid var(--#{$prefix}input-group-border-color);
+    border-radius: var(--#{$prefix}input-group-border-radius);
+  }
+
+  // not empty
+  .input-group:not(.disabled):not(:focus-within):not(.has-validation):has(.d-select__value-container--has-value) {
+    border-color: var(--#{$prefix}input-group-hover-border-color);
+  }
+
+  // input hint
+  .input-group ~ .form-text {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-form-text-gap);
+    align-items: center;
+    padding: var(--#{$prefix}input-form-text-padding);
+    color: var(--#{$prefix}input-form-text-color);
+  }
+
+  // select control
+  .d-select-component {
+    border-radius: var(--#{$prefix}input-group-border-radius);
+  }
+
+  .d-select__control {
+    width: 100%;
+    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+    font-family: var(--#{$prefix}input-font-family);
+    @include rfs($input-font-size, --#{$prefix}input-font-size);
+    font-weight: var(--#{$prefix}input-font-weight);
+    line-height: var(--#{$prefix}input-line-height);
+    color: var(--#{$prefix}input-color);
+    appearance: none; // Fix appearance for date inputs in Safari
+    background-color: var(--#{$prefix}input-bg);
+    background-clip: padding-box;
+    // border: $input-border-width solid $input-border-color;
+
+    @include border-radius($input-border-radius, 0);
+
+    @include transition($input-transition);
+
+    // Customize the `:focus` state to imitate native WebKit styles.
+    &:focus {
+      color: var(--#{$prefix}input-focus-color);
+      background-color: var(--#{$prefix}input-focus-bg);
+      outline: 0;
+    }
+  }
+
+  .d-select__placeholder {
+    color: var(--#{$prefix}input-placeholder-color);
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  // select menu
+  .d-select__menu-list {
+    top: calc(var(--#{$prefix}input-group-border-width) * 2);
+    background: var(--#{$prefix}input-bg);
+    border-radius: var(--#{$prefix}input-group-border-radius);
+    box-shadow: var(--#{$prefix}select-menu-shadow);
+  }
+
+  .d-select__control--menu-is-open .d-select__dropdown-indicator {
+    transform: rotateX(180deg);
+  }
+
+  // select option
+  .d-select__option {
+    display: block;
+    padding: var(--#{$prefix}input-padding-y) var(--#{$prefix}input-padding-x);
+  }
+
+  .d-select__option--is-focused {
+    background: var(--#{$prefix}select-option-focus-bg);
+  }
+
+  .d-select__option--is-selected {
+    color: var(--#{$prefix}select-option-selected-color);
+    background: var(--#{$prefix}select-option-selected-bg);
+  }
+
+  // select option with checkbox
+  .d-select__option--is-checkbox {
+    padding: 0;
+
+    > label {
+      width: 100%;
+      padding: var(--#{$prefix}input-padding-x);
+    }
+
+    .form-check-input {
+      margin-right: var(--#{$prefix}input-padding-x);
+    }
+  }
+
+  .d-select__option--is-checkbox label {
+    font-size: var(--#{$prefix}select-option-is-checkbox-font-size);
+    font-weight: var(--#{$prefix}select-option-is-checkbox-font-weight);
+    color: var(--#{$prefix}select-option-is-checkbox-color);
+  }
+
+  // select multi control
+  .d-select__multi-value {
+    padding: var(--#{$prefix}select-multi-value-padding-y) var(--#{$prefix}select-multi-value-padding-x);
+    margin-right: var(--#{$prefix}select-multi-value-margin-right);
+    background: var(--#{$prefix}select-multi-value-background);
+    border-radius: var(--#{$prefix}select-multi-value-border-radius);
+  }
+
+  .d-select__multi-value__label {
+    color: var(--#{$prefix}select-multi-value-label-color);
+  }
+
+  .d-select__control--has-icon,
+  .d-select__option--has-icon {
+    display: flex;
+    flex-direction: row;
+    gap: var(--#{$prefix}input-padding-x);
+    align-items: center;
+    white-space: nowrap;
+
+    .d-icon {
+      --bs-icon-size: var(--#{$prefix}select-option-has-icon-icon-size);
+    }
+  }
+
+  .d-select__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}select-indicator-width);
+    height: var(--#{$prefix}select-indicator-height);
+  }
+
+  .d-select__indicator-separator {
+    width: var(--#{$prefix}input-gap);
+  }
+
+  &.disabled .d-select__control {
+    background: var(--#{$prefix}input-group-disabled-bg);
+  }
+
+  &.disabled .input-group {
+    border-color: var(--#{$prefix}input-group-disabled-border-color);
+  }
+}