@dynamic-framework/ui-react 1.26.0 → 1.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/css/dynamic-ui-non-root.css +269 -905
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +228 -152
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +496 -1056
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +112 -47
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +113 -46
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DButtonIcon/DButtonIcon.d.ts +19 -0
  12. package/dist/types/components/DButtonIcon/index.d.ts +2 -0
  13. package/dist/types/components/DInput/DInput.d.ts +3 -2
  14. package/dist/types/components/DInputCheck/DInputCheck.d.ts +3 -1
  15. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -1
  16. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -1
  17. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -1
  18. package/dist/types/components/DInputMask/DInputMask.d.ts +2 -1
  19. package/dist/types/components/DInputSearch/DInputSearch.d.ts +2 -1
  20. package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -2
  21. package/dist/types/components/DInputSwitch/DInputSwitch.d.ts +3 -1
  22. package/dist/types/components/DSelect/DSelect.d.ts +3 -3
  23. package/dist/types/components/DStepper/DStepper.d.ts +2 -1
  24. package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts +2 -1
  25. package/dist/types/components/DTableHead/DTableHead.d.ts +9 -0
  26. package/dist/types/components/DTableHead/index.d.ts +2 -0
  27. package/dist/types/components/DToastContainer/DToastContainer.d.ts +2 -14
  28. package/dist/types/components/DToastContainer/useDToast.d.ts +11 -12
  29. package/dist/types/components/index.d.ts +2 -0
  30. package/dist/types/contexts/DContext.d.ts +1 -1
  31. package/dist/types/hooks/useFormatCurrency.d.ts +2 -1
  32. package/package.json +4 -4
  33. package/src/style/abstracts/_mixins.scss +41 -21
  34. package/src/style/abstracts/variables/_+import.scss +11 -3
  35. package/src/style/abstracts/variables/_border.scss +1 -1
  36. package/src/style/abstracts/variables/_buttons.scss +3 -5
  37. package/src/style/abstracts/variables/_colors.scss +10 -10
  38. package/src/style/abstracts/variables/_forms.scss +24 -50
  39. package/src/style/abstracts/variables/_quick-action-switch.scss +0 -2
  40. package/src/style/base/_alert.scss +1 -1
  41. package/src/style/base/_buttons.scss +41 -16
  42. package/src/style/base/_form-check.scss +2 -19
  43. package/src/style/base/_form-switch.scss +4 -53
  44. package/src/style/components/_+import.scss +3 -2
  45. package/src/style/components/_d-button-icon.scss +26 -0
  46. package/src/style/components/_d-close.scss +11 -0
  47. package/src/style/components/_d-modal.scss +0 -11
  48. package/src/style/components/_d-offcanvas.scss +0 -11
  49. package/src/style/components/_d-quick-action-switch.scss +0 -7
  50. package/src/style/components/_d-table-head.scss +18 -0
  51. package/src/style/root/_root.scss +42 -36
@@ -0,0 +1,19 @@
1
+ import type { MouseEvent } from 'react';
2
+ import type { BaseProps, ButtonType, ButtonVariant, ComponentSize, FamilyIconProps, InputState } from '../interface';
3
+ type Props = BaseProps & FamilyIconProps & {
4
+ id?: string;
5
+ icon: string;
6
+ size?: ComponentSize;
7
+ variant?: ButtonVariant;
8
+ theme?: string;
9
+ state?: InputState;
10
+ type?: ButtonType;
11
+ loading?: boolean;
12
+ loadingAriaLabel?: string;
13
+ ariaLabel?: string;
14
+ stopPropagationEnabled?: boolean;
15
+ disabled?: boolean;
16
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
17
+ };
18
+ export default function DButtonIcon({ id, icon, size, className, variant, state, loadingAriaLabel, iconMaterialStyle, ariaLabel, theme, type, loading, disabled, stopPropagationEnabled, style, iconFamilyClass, iconFamilyPrefix, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
19
+ export {};
@@ -0,0 +1,2 @@
1
+ import DButtonIcon from './DButtonIcon';
2
+ export default DButtonIcon;
@@ -1,10 +1,11 @@
1
1
  import type { ReactNode } from 'react';
2
- import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
3
- declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
2
+ import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
3
+ declare const ForwardedDInput: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof BaseProps | keyof FamilyIconProps | keyof LabelIconProps | keyof StartIconProps | keyof EndIconProps | keyof StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & {
4
4
  value?: string | undefined;
5
5
  label?: string | undefined;
6
6
  loading?: boolean | undefined;
7
7
  hint?: string | undefined;
8
+ size?: ComponentSize | undefined;
8
9
  invalid?: boolean | undefined;
9
10
  valid?: boolean | undefined;
10
11
  floatingLabel?: boolean | undefined;
@@ -8,9 +8,11 @@ type Props = BaseProps & {
8
8
  ariaLabel?: string;
9
9
  checked?: boolean;
10
10
  disabled?: boolean;
11
+ invalid?: boolean;
12
+ valid?: boolean;
11
13
  indeterminate?: boolean;
12
14
  value?: string;
13
15
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
14
16
  };
15
- export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
17
+ export default function DInputCheck({ id: idProp, type, name, label, ariaLabel, checked, disabled, invalid, valid, indeterminate, value, onChange, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
16
18
  export {};
@@ -5,11 +5,12 @@ type NonDInputProps = {
5
5
  maxValue: number;
6
6
  onChange?: (value?: number) => void;
7
7
  };
8
- declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
8
+ declare const ForwardedDInputCounter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
9
9
  value?: string | undefined;
10
10
  label?: string | undefined;
11
11
  loading?: boolean | undefined;
12
12
  hint?: string | undefined;
13
+ size?: import("../interface").ComponentSize | undefined;
13
14
  invalid?: boolean | undefined;
14
15
  valid?: boolean | undefined;
15
16
  floatingLabel?: boolean | undefined;
@@ -6,11 +6,12 @@ type NonDInputProps = {
6
6
  currencyCode?: string;
7
7
  onChange?: (value?: number) => void;
8
8
  };
9
- declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
9
+ declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
10
10
  value?: string | undefined;
11
11
  label?: string | undefined;
12
12
  loading?: boolean | undefined;
13
13
  hint?: string | undefined;
14
+ size?: import("../interface").ComponentSize | undefined;
14
15
  invalid?: boolean | undefined;
15
16
  valid?: boolean | undefined;
16
17
  floatingLabel?: boolean | undefined;
@@ -8,11 +8,12 @@ type NonDInputProps = {
8
8
  currencyCode?: string;
9
9
  onChange?: (value?: number) => void;
10
10
  };
11
- declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
11
+ declare const ForwardedDInputCurrencyBase: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
12
12
  value?: string | undefined;
13
13
  label?: string | undefined;
14
14
  loading?: boolean | undefined;
15
15
  hint?: string | undefined;
16
+ size?: import("../interface").ComponentSize | undefined;
16
17
  invalid?: boolean | undefined;
17
18
  valid?: boolean | undefined;
18
19
  floatingLabel?: boolean | undefined;
@@ -1,10 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import type { MaskProps } from '@react-input/mask';
3
- declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
3
+ declare const ForwardedDInputMask: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
4
4
  value?: string | undefined;
5
5
  label?: string | undefined;
6
6
  loading?: boolean | undefined;
7
7
  hint?: string | undefined;
8
+ size?: import("../interface").ComponentSize | undefined;
8
9
  invalid?: boolean | undefined;
9
10
  valid?: boolean | undefined;
10
11
  floatingLabel?: boolean | undefined;
@@ -1,9 +1,10 @@
1
1
  /// <reference types="react" />
2
- declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
2
+ declare const ForwardedDInputSearch: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "value" | "onChange">, "value" | "loading" | "label" | "invalid" | "size" | "onChange" | keyof import("../interface").BaseProps | keyof import("../interface").FamilyIconProps | keyof import("../interface").LabelIconProps | keyof import("../interface").StartIconProps | keyof import("../interface").EndIconProps | keyof import("../interface").StateIcons | "hint" | "valid" | "floatingLabel" | "inputStart" | "inputEnd" | "onIconStartClick" | "onIconEndClick"> & import("../interface").BaseProps & import("../interface").FamilyIconProps & import("../interface").LabelIconProps & import("../interface").StartIconProps & import("../interface").EndIconProps & import("../interface").StateIcons & {
3
3
  value?: string | undefined;
4
4
  label?: string | undefined;
5
5
  loading?: boolean | undefined;
6
6
  hint?: string | undefined;
7
+ size?: import("../interface").ComponentSize | undefined;
7
8
  invalid?: boolean | undefined;
8
9
  valid?: boolean | undefined;
9
10
  floatingLabel?: boolean | undefined;
@@ -1,5 +1,5 @@
1
1
  import type { FocusEvent, MouseEvent } from 'react';
2
- import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
2
+ import type { BaseProps, ComponentSize, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
3
3
  export type DefaultOption = {
4
4
  value: string | number;
5
5
  label: string;
@@ -19,8 +19,9 @@ export type Props<T> = BaseProps & FamilyIconProps & LabelIconProps & StartIconP
19
19
  onIconEndClick?: (event: MouseEvent) => void;
20
20
  options: Array<T>;
21
21
  value?: string | number;
22
+ size?: ComponentSize;
22
23
  onChange?: (selectedOption: T) => void;
23
24
  valueExtractor?: (item: T) => string | number;
24
25
  labelExtractor?: (item: T) => string;
25
26
  };
26
- export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
27
+ export default function DInputSelect<T extends object = DefaultOption>({ id: idProp, name, label, className, style, options, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, disabled, loading, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, invalidIcon: invalidIconProp, validIcon: validIconProp, hint, value, size, floatingLabel, invalid, valid, valueExtractor, labelExtractor, onChange, onBlur, onIconStartClick, onIconEndClick, }: Props<T>): import("react/jsx-runtime").JSX.Element;
@@ -6,8 +6,10 @@ type Props = BaseProps & {
6
6
  name?: string;
7
7
  checked?: boolean;
8
8
  disabled?: boolean;
9
+ invalid?: boolean;
10
+ valid?: boolean;
9
11
  readonly?: boolean;
10
12
  onChange?: (isChecked: boolean) => void;
11
13
  };
12
- export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
14
+ export default function DInputSwitch({ id: idProp, label, ariaLabel, name, checked, disabled, invalid, valid, readonly, className, style, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
13
15
  export {};
@@ -9,8 +9,8 @@ import DSelectLoadingIndicator from './components/DSelectLoadingIndicator';
9
9
  import DSelectOptionEmoji from './components/DSelectOptionEmoji';
10
10
  import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';
11
11
  import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';
12
- import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
13
- type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
12
+ import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps, StateIcons } from '../interface';
13
+ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & LabelIconProps & StartIconProps & EndIconProps & StateIcons & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
14
14
  label?: string;
15
15
  hint?: string;
16
16
  invalid?: boolean;
@@ -25,7 +25,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
25
25
  searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
26
26
  multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
27
27
  };
28
- declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
28
+ declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, style, label, labelIcon, labelIconFamilyClass, labelIconFamilyPrefix, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, invalidIcon: invalidIconProp, validIcon: validIconProp, menuWithMaxContent, disabled, clearable, loading, rtl, searchable, multi, components, defaultValue, onIconStartClick, onIconEndClick, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
29
29
  declare const _default: typeof DSelect & {
30
30
  OptionCheck: typeof DSelectOptionCheck;
31
31
  OptionIcon: typeof DSelectOptionIcon;
@@ -12,7 +12,8 @@ type Props = BaseProps & {
12
12
  iconSuccessFamilyPrefix?: string;
13
13
  iconSuccessMaterialStyle?: boolean;
14
14
  vertical?: boolean;
15
+ completed?: boolean;
15
16
  breakpoint?: BreakpointSize;
16
17
  };
17
- export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
18
+ export default function DStepper({ options, currentStep, iconSuccess, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, breakpoint, className, completed, style, }: Props): import("react/jsx-runtime").JSX.Element;
18
19
  export {};
@@ -11,6 +11,7 @@ type Props = BaseProps & {
11
11
  iconSuccessFamilyPrefix?: string;
12
12
  iconSuccessMaterialStyle?: boolean;
13
13
  vertical?: boolean;
14
+ completed?: boolean;
14
15
  };
15
- export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
16
+ export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, completed, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
16
17
  export {};
@@ -0,0 +1,9 @@
1
+ import { BaseProps } from '../interface';
2
+ type Props = BaseProps & {
3
+ field: string;
4
+ label: string;
5
+ value?: string;
6
+ onChange: (value: string) => void;
7
+ };
8
+ export default function DTableHead({ className, style, field, label, value, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -0,0 +1,2 @@
1
+ import DTableHead from './DTableHead';
2
+ export default DTableHead;
@@ -1,14 +1,2 @@
1
- import type { CSSProperties } from 'react';
2
- import type { ToastContainerProps } from 'react-toastify';
3
- import { BaseProps } from '../interface';
4
- type Props = BaseProps & Pick<ToastContainerProps, 'autoClose' | 'closeOnClick' | 'position'> & {
5
- containerId?: string;
6
- stacked?: boolean;
7
- style?: CSSProperties & {
8
- '--toastify-toast-width': string | number;
9
- [index: string]: string | number;
10
- };
11
- transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
12
- };
13
- export default function DToastContainer({ style, className, closeOnClick, position, autoClose, stacked, transition, containerId, }: Props): import("react/jsx-runtime").JSX.Element;
14
- export {};
1
+ import { ToasterProps } from 'react-hot-toast';
2
+ export default function DToastContainer({ containerClassName, position, reverseOrder, containerStyle, toastOptions, gutter, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
@@ -1,16 +1,15 @@
1
- import type { ToastPosition } from 'react-toastify';
2
- import type { AlertType } from '../interface';
3
- export type ToastConfig = {
4
- type?: AlertType;
1
+ import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
2
+ type ToastData = {
3
+ title: string;
4
+ description?: string;
5
+ timestamp?: string;
5
6
  icon?: string;
6
- iconClose?: string;
7
- showClose?: boolean;
8
- position?: ToastPosition;
9
- autoClose?: number | false;
10
- stacked?: boolean;
11
- containerId?: string;
12
- transition?: 'slide' | 'flip' | 'bounce' | 'zoom';
7
+ closeIcon?: string;
8
+ theme?: string;
9
+ soft?: boolean;
13
10
  };
11
+ type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
14
12
  export default function useDToast(): {
15
- toast: (message: string, { icon, iconClose, type, showClose, transition, ...rest }: ToastConfig) => void;
13
+ toast: (data: ToastData | ValueFunction<Renderable, Toast>, toastProps: Props) => string;
16
14
  };
15
+ export {};
@@ -2,6 +2,7 @@ export { default as DAlert } from './DAlert';
2
2
  export { default as DBadge } from './DBadge';
3
3
  export { default as DBoxFile } from './DBoxFile';
4
4
  export { default as DButton } from './DButton';
5
+ export { default as DButtonIcon } from './DButtonIcon';
5
6
  export { default as DCard, DCardHeader, DCardBody, DCardFooter, } from './DCard';
6
7
  export { default as DCarousel, DCarouselSlide, } from './DCarousel';
7
8
  export { default as DChip } from './DChip';
@@ -41,3 +42,4 @@ export { default as DTooltip } from './DTooltip';
41
42
  export { default as DTabs, useTabContext, DTabOption, DTabContent, } from './DTabs';
42
43
  export { default as DToast } from './DToast';
43
44
  export { default as DToastContainer, useDToast, } from './DToastContainer';
45
+ export { default as DTableHead } from './DTableHead';
@@ -1,7 +1,7 @@
1
1
  import type { PropsWithChildren } from 'react';
2
2
  import { PortalContextProps } from './DPortalContext';
3
3
  import type { AlertTypeIconMap } from '../components/interface';
4
- type CurrencyProps = {
4
+ export type CurrencyProps = {
5
5
  symbol: string;
6
6
  precision: number;
7
7
  separator: string;
@@ -1,4 +1,5 @@
1
+ import { CurrencyProps } from '../contexts';
1
2
  export default function useFormatCurrency(...args: Array<number>): {
2
- format: (value: number) => string;
3
+ format: (value: number, currencyOptions?: CurrencyProps) => string;
3
4
  values: string[];
4
5
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "sideEffects": [
4
4
  "*.css"
5
5
  ],
6
- "version": "1.26.0",
6
+ "version": "1.27.0",
7
7
  "description": "React Dynamic Framework",
8
8
  "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
9
9
  "repository": {
@@ -81,9 +81,9 @@
81
81
  "react-content-loader": "^6.2.1",
82
82
  "react-datepicker": "^4.21.0",
83
83
  "react-dropzone": "^14.2.3",
84
+ "react-hot-toast": "^2.4.1",
84
85
  "react-responsive-pagination": "^2.4.1",
85
- "react-select": "^5.8.0",
86
- "react-toastify": "^10.0.0"
86
+ "react-select": "^5.8.0"
87
87
  },
88
88
  "devDependencies": {
89
89
  "@babel/core": "^7.23.2",
@@ -155,5 +155,5 @@
155
155
  "optional": true
156
156
  }
157
157
  },
158
- "gitHead": "21163ab260bbaf17d9ec5793a45fd24574649114"
158
+ "gitHead": "6d8d838d164ddfddbb407e5bac99965970656a64"
159
159
  }
@@ -2,18 +2,22 @@
2
2
  @mixin df-button-variant-variables(
3
3
  $color-name,
4
4
  $default-color: var(--#{$prefix}#{$color-name}-500),
5
- $hover-color: var(--#{$prefix}#{$color-name}-600),
6
- $focus-color: var(--#{$prefix}#{$color-name}-500),
7
- $active-color: var(--#{$prefix}#{$color-name}-700),
8
5
  $default-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-500)),
6
+ $hover-color: var(--#{$prefix}#{$color-name}-600),
9
7
  $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
8
+ $focus-color: var(--#{$prefix}#{$color-name}-600),
10
9
  $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
10
+ $active-color: var(--#{$prefix}#{$color-name}-700),
11
11
  $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
12
- $disabled-opacity: .65
12
+ $disabled-opacity: $btn-disabled-opacity,
13
+ $box-shadow: $btn-box-shadow,
14
+ $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
15
+ $active-box-shadow: $btn-active-box-shadow,
13
16
  ) {
14
17
  --#{$prefix}btn-#{$color-name}-color: #{$default-text-color};
15
18
  --#{$prefix}btn-#{$color-name}-bg: #{$default-color};
16
19
  --#{$prefix}btn-#{$color-name}-border-color: #{$default-color};
20
+ --#{$prefix}btn-#{$color-name}-box-shadow: #{$box-shadow};
17
21
 
18
22
  --#{$prefix}btn-#{$color-name}-hover-color: #{$hover-text-color};
19
23
  --#{$prefix}btn-#{$color-name}-hover-bg: #{$hover-color};
@@ -22,10 +26,12 @@
22
26
  --#{$prefix}btn-#{$color-name}-focus-color: #{$focus-text-color};
23
27
  --#{$prefix}btn-#{$color-name}-focus-bg: #{$focus-color};
24
28
  --#{$prefix}btn-#{$color-name}-focus-border-color: #{$focus-color};
29
+ --#{$prefix}btn-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
25
30
 
26
31
  --#{$prefix}btn-#{$color-name}-active-color: #{$active-text-color};
27
32
  --#{$prefix}btn-#{$color-name}-active-bg: #{$active-color};
28
33
  --#{$prefix}btn-#{$color-name}-active-border-color: #{$active-color};
34
+ --#{$prefix}btn-#{$color-name}-active-box-shadow: #{$active-box-shadow};
29
35
 
30
36
  --#{$prefix}btn-#{$color-name}-disabled-color: #{$default-text-color};
31
37
  --#{$prefix}btn-#{$color-name}-disabled-bg: #{$default-color};
@@ -38,29 +44,35 @@
38
44
  @mixin df-button-outline-variant-variables(
39
45
  $color-name,
40
46
  $default-color: var(--#{$prefix}#{$color-name}-500),
41
- $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
42
- $hover-text-color: var(--#{$prefix}#{$color-name}-500),
43
- $focus-text-color: var(--#{$prefix}#{$color-name}-500),
44
- $active-text-color: var(--#{$prefix}#{$color-name}-700),
45
- $active-bg-color: var(--#{$prefix}#{$color-name}-100),
46
- $active-border-color: var(--#{$prefix}#{$color-name}-700),
47
- $disabled-opacity: .65
47
+ $hover-bg-color: var(--#{$prefix}#{$color-name}-600),
48
+ $hover-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
49
+ $focus-bg-color: var(--#{$prefix}#{$color-name}-600),
50
+ $focus-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-600)),
51
+ $active-bg-color: var(--#{$prefix}#{$color-name}-700),
52
+ $active-text-color: color-contrast-var(map-get($theme-colors-palettes, #{$color-name}-700)),
53
+ $disabled-opacity: $btn-disabled-opacity,
54
+ $box-shadow: $btn-box-shadow,
55
+ $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
56
+ $active-box-shadow: $btn-active-box-shadow,
48
57
  ) {
49
58
  --#{$prefix}btn-outline-#{$color-name}-color: #{$default-color};
50
59
  --#{$prefix}btn-outline-#{$color-name}-bg: transparent;
51
60
  --#{$prefix}btn-outline-#{$color-name}-border-color: #{$default-color};
61
+ --#{$prefix}btn-outline-#{$color-name}-box-shadow: #{$box-shadow};
52
62
 
53
63
  --#{$prefix}btn-outline-#{$color-name}-hover-color: #{$hover-text-color};
54
64
  --#{$prefix}btn-outline-#{$color-name}-hover-bg: #{$hover-bg-color};
55
- --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$default-color};
65
+ --#{$prefix}btn-outline-#{$color-name}-hover-border-color: #{$hover-bg-color};
56
66
 
57
67
  --#{$prefix}btn-outline-#{$color-name}-focus-color: #{$focus-text-color};
58
- --#{$prefix}btn-outline-#{$color-name}-focus-bg: transparent;
59
- --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$default-color};
68
+ --#{$prefix}btn-outline-#{$color-name}-focus-bg: #{$focus-bg-color};
69
+ --#{$prefix}btn-outline-#{$color-name}-focus-border-color: #{$focus-bg-color};
70
+ --#{$prefix}btn-outline-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
60
71
 
61
72
  --#{$prefix}btn-outline-#{$color-name}-active-color: #{$active-text-color};
62
73
  --#{$prefix}btn-outline-#{$color-name}-active-bg: #{$active-bg-color};
63
- --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-border-color};
74
+ --#{$prefix}btn-outline-#{$color-name}-active-border-color: #{$active-bg-color};
75
+ --#{$prefix}btn-outline-#{$color-name}-active-box-shadow: #{$active-box-shadow};
64
76
 
65
77
  --#{$prefix}btn-outline-#{$color-name}-disabled-color: #{$default-color};
66
78
  --#{$prefix}btn-outline-#{$color-name}-disabled-bg: transparent;
@@ -73,28 +85,33 @@
73
85
  @mixin df-button-link-variant-variables(
74
86
  $color-name,
75
87
  $default-color: var(--#{$prefix}#{$color-name}-500),
76
- $hover-bg-color: var(--#{$prefix}#{$color-name}-100),
77
- $hover-text-color: var(--#{$prefix}#{$color-name}-500),
78
- $focus-text-color: var(--#{$prefix}#{$color-name}-500),
88
+ $hover-text-color: var(--#{$prefix}#{$color-name}-600),
89
+ $focus-text-color: var(--#{$prefix}#{$color-name}-600),
79
90
  $active-text-color: var(--#{$prefix}#{$color-name}-700),
80
- $active-bg-color: var(--#{$prefix}#{$color-name}-100),
81
- $disabled-opacity: .65
91
+ $active-bg-color: var(--#{$prefix}#{$color-name}-200),
92
+ $disabled-opacity: $btn-disabled-opacity,
93
+ $box-shadow: $btn-box-shadow,
94
+ $active-box-shadow: $btn-active-box-shadow,
95
+ $focus-shadow-rgb: var(--#{$prefix}#{$color-name}-500-rgb),
82
96
  ) {
83
97
  --#{$prefix}btn-link-#{$color-name}-bg: transparent;
84
98
  --#{$prefix}btn-link-#{$color-name}-border-color: transparent;
85
99
  --#{$prefix}btn-link-#{$color-name}-color: #{$default-color};
100
+ --#{$prefix}btn-link-#{$color-name}-box-shadow: #{$box-shadow};
86
101
 
87
- --#{$prefix}btn-link-#{$color-name}-hover-bg: #{$hover-bg-color};
102
+ --#{$prefix}btn-link-#{$color-name}-hover-bg: transparent;
88
103
  --#{$prefix}btn-link-#{$color-name}-hover-border-color: transparent;
89
104
  --#{$prefix}btn-link-#{$color-name}-hover-color: #{$hover-text-color};
90
105
 
91
106
  --#{$prefix}btn-link-#{$color-name}-focus-bg: transparent;
92
107
  --#{$prefix}btn-link-#{$color-name}-focus-border-color: transparent;
93
108
  --#{$prefix}btn-link-#{$color-name}-focus-color: #{$focus-text-color};
109
+ --#{$prefix}btn-link-#{$color-name}-focus-shadow-rgb: #{$focus-shadow-rgb};
94
110
 
95
111
  --#{$prefix}btn-link-#{$color-name}-active-bg: #{$active-bg-color};
96
112
  --#{$prefix}btn-link-#{$color-name}-active-border-color: transparent;
97
113
  --#{$prefix}btn-link-#{$color-name}-active-color: #{$active-text-color};
114
+ --#{$prefix}btn-link-#{$color-name}-active-box-shadow: #{$active-box-shadow};
98
115
 
99
116
  --#{$prefix}btn-link-#{$color-name}-disabled-bg: transparent;
100
117
  --#{$prefix}btn-link-#{$color-name}-disabled-border-color: transparent;
@@ -112,6 +129,7 @@
112
129
  --#{$prefix}btn-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-color);
113
130
  --#{$prefix}btn-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-bg);
114
131
  --#{$prefix}btn-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-border-color);
132
+ --#{$prefix}btn-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-box-shadow);
115
133
 
116
134
  --#{$prefix}btn-hover-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-color);
117
135
  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-hover-bg);
@@ -120,10 +138,12 @@
120
138
  --#{$prefix}btn-focus-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-color);
121
139
  --#{$prefix}btn-focus-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-bg);
122
140
  --#{$prefix}btn-focus-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-border-color);
141
+ --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-focus-shadow-rgb);
123
142
 
124
143
  --#{$prefix}btn-active-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-color);
125
144
  --#{$prefix}btn-active-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-bg);
126
145
  --#{$prefix}btn-active-border-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-border-color);
146
+ --#{$prefix}btn-active-box-shadow: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-active-box-shadow);
127
147
 
128
148
  --#{$prefix}btn-disabled-color: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-color);
129
149
  --#{$prefix}btn-disabled-bg: var(--#{$prefix}btn-#{$variant-name}#{$color-name}-disabled-bg);
@@ -16,16 +16,20 @@ $prefix: $variable-prefix !default;
16
16
  @import "box-shadow";
17
17
 
18
18
  // scss-docs-start focus-ring-variables
19
- $focus-ring-opacity: 1 !default;
19
+ $focus-ring-width: .25rem !default;
20
+ $focus-ring-opacity: .25 !default;
21
+ $focus-ring-blur: 0 !default;
20
22
  // custom
23
+ $focus-ring-border-color: var(--#{$prefix}secondary-300-rgb) !default;
21
24
  $focus-ring-color-mapping: "secondary-rgb" !default;
22
25
  $focus-ring-color: var(--#{$prefix}focus-ring-color) !default;
23
26
  // end custom
27
+ $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
24
28
  // scss-docs-end focus-ring-variables
25
29
 
26
30
  $component-active-color: var(--#{$prefix}white) !default;
27
31
  $component-active-bg: var(--#{$prefix}primary) !default;
28
- $component-focus-shadow: 0 0 0 4px rgba(var(--#{$prefix}primary-rgb), .4) !default;
32
+ $component-focus-border-color: var(--#{$prefix}focus-ring-border-color) !default;
29
33
 
30
34
  $transition-fade: opacity .3s linear !default;
31
35
 
@@ -40,7 +44,11 @@ $transition-fade: opacity .3s linear !default;
40
44
  $input-btn-padding-y: $spacer-3 !default;
41
45
  $input-btn-padding-x: $spacer-4 !default;
42
46
 
43
- $input-btn-focus-width: 0 !default;
47
+ $input-btn-focus-width: $focus-ring-width !default;
48
+ $input-btn-focus-color-opacity: $focus-ring-opacity !default;
49
+ $input-btn-focus-color: $focus-ring-color !default;
50
+ $input-btn-focus-blur: $focus-ring-blur !default;
51
+ $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
44
52
  $input-btn-focus-color-opacity: 1 !default;
45
53
  $input-btn-focus-color: rgba(var(--#{$prefix}secondary-rgb), $input-btn-focus-color-opacity) !default;
46
54
  $input-btn-focus-blur: 0 !default;
@@ -3,7 +3,7 @@
3
3
  // Define common padding and border radius sizes and more.
4
4
 
5
5
  // scss-docs-start border-variables
6
- $border-color: var(--#{$prefix}gray-200) !default;
6
+ $border-color: var(--#{$prefix}gray-300) !default;
7
7
  $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
8
8
  // scss-docs-end border-variables
9
9
 
@@ -18,11 +18,9 @@ $btn-font-size-lg: $h6-font-size !default;
18
18
 
19
19
  $btn-border-width: $input-btn-border-width !default;
20
20
 
21
- $btn-box-shadow: none !default;
22
- $btn-focus-width: 0 !default;
23
- $btn-focus-box-shadow: none !default;
24
- $btn-disabled-opacity: 1 !default;
25
- $btn-active-box-shadow: none !default;
21
+ $btn-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
22
+ $btn-disabled-opacity: .65 !default;
23
+ $btn-active-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
26
24
 
27
25
  $btn-border-radius: var(--#{$prefix}border-radius-pill) !default;
28
26
  $btn-border-radius-sm: var(--#{$prefix}border-radius-pill) !default;
@@ -3,16 +3,16 @@
3
3
  // scss-docs-start gray-color-variables
4
4
  $white: #fff !default;
5
5
  $gray-25: #fbfbfc !default;
6
- $gray-50: #f7f8f8 !default;
7
- $gray-100: #eff0f2 !default;
8
- $gray-200: #dee1e5 !default;
9
- $gray-300: #ced3d7 !default;
10
- $gray-400: #bdc4ca !default;
11
- $gray-500: #adb5bd !default;
12
- $gray-600: #8a9197 !default;
13
- $gray-700: #686d71 !default;
14
- $gray-800: #45484c !default;
15
- $gray-900: #232426 !default;
6
+ $gray-50: #f0f0f2 !default;
7
+ $gray-100: #e1e1e6 !default;
8
+ $gray-200: #c4c4cd !default;
9
+ $gray-300: #a7a7b4 !default;
10
+ $gray-400: #8a8a9b !default;
11
+ $gray-500: #6d6d82 !default;
12
+ $gray-600: #575768 !default;
13
+ $gray-700: #41414e !default;
14
+ $gray-800: #2b2b34 !default;
15
+ $gray-900: #15151a !default;
16
16
  $black: #000 !default;
17
17
  // scss-docs-end gray-color-variables
18
18