@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.10

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

@@ -1,31 +1,6 @@
 import type { ResponsivePaginationProps } from 'react-responsive-pagination';
 import { DataAttributes } from '../interface';
-export type Props = Omit<ResponsivePaginationProps, 'current'> & {
-    current?: ResponsivePaginationProps['current'];
-    /**
-     * @deprecated its use is changing, use extraClassName instead, originally
-     *  we set className prop to extraClassName from react-responsive-pagination API.
-     *
-     *  now we are trying to expose the entire API of react-responsive-pagination and
-     *  to ensure backward compatibility we are setting the className prop to
-     *  extraClassName from react-responsive-pagination only if extraClassName is not present.
-     */
-    className?: ResponsivePaginationProps['extraClassName'];
-    /**
-     * @deprecated use current instead, react-responsive-pagination API.
-     */
-    page?: ResponsivePaginationProps['current'];
-    /**
-     * @deprecated use renderNav instead, react-responsive-pagination API.
-     */
-    showArrows?: ResponsivePaginationProps['renderNav'];
+export type Props = ResponsivePaginationProps & {
     dataAttributes?: DataAttributes;
 };
-export type ConditionalProps = Props | (Props & {
-    current: number;
-    page?: undefined;
-}) | (Props & {
-    page: number;
-    current?: undefined;
-});
-export default function DPaginator({ className, page, current, showArrows, navClassName, ...props }: ConditionalProps): import("react/jsx-runtime").JSX.Element;
+export default function DPaginator({ navClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import type { BaseProps } from '../interface';
+export type ValidationMessages = {
+    number: string;
+    lowercaseLetter: string;
+    uppercaseLetter: string;
+    especialChar: string;
+    notMatch?: string;
+};
+export type ValidationCheck = 'uppercase' | 'lowercase' | 'number' | 'specialChar';
+type Props = BaseProps & {
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    validationMessages?: ValidationMessages;
+    enabledChecks?: ValidationCheck[];
+    onChange?: (value: string) => void;
+};
+export default function DPasswordStrengthMeter({ id, label, placeholder, value, name, disabled, invalid, validationMessages, enabledChecks, className, style, dataAttributes, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckItem.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    password: string;
+    regex: RegExp;
+    text: string;
+};
+export default function PasswordCheckItem({ password, regex, text, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordCheckList.d.ts

@@ -0,0 +1,14 @@
+import type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+type Props = {
+    password: string;
+    validationMessages: ValidationMessages;
+    enabledChecks: ValidationCheck[];
+};
+export declare const CHECK_REGEX: {
+    uppercase: RegExp;
+    lowercase: RegExp;
+    number: RegExp;
+    specialChar: RegExp;
+};
+export default function PasswordChecksList({ password, validationMessages, enabledChecks, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DPasswordStrengthMeter/PasswordStrength.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    strength: number;
+    total: number;
+};
+export default function PasswordStrengthBar({ strength, total }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DPasswordStrengthMeter from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
+export default DPasswordStrengthMeter;

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

@@ -5,6 +5,7 @@ type Props = BaseProps & {
     maxValue?: number;
     hideCurrentValue?: boolean;
     enableStripedAnimation?: boolean;
+    height?: string | number;
 };
-export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DProgress({ className, style, currentValue, minValue, maxValue, hideCurrentValue, enableStripedAnimation, height, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,8 +10,8 @@ import DSelectOptionEmoji from './components/DSelectOptionEmoji';
 import DSelectSingleValueEmoji from './components/DSelectSingleValueEmoji';
 import DSelectSingleValueEmojiText from './components/DSelectSingleValueEmojiText';
 import DSelectPlaceholder from './components/DSelectPlaceholder';
-import type { BaseProps, EndIconProps, FamilyIconProps, LabelIconProps, StartIconProps } from '../interface';
-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'> & {
+import type { BaseProps, EndIconProps, FamilyIconProps, StartIconProps } from '../interface';
+type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = BaseProps & FamilyIconProps & StartIconProps & EndIconProps & Omit<SelectProps<Option, IsMulti, Group>, 'isDisabled' | 'isClearable' | 'isLoading' | 'isRtl' | 'isSearchable' | 'isMulti'> & {
     label?: string;
     hint?: string;
     invalid?: boolean;
@@ -27,7 +27,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = B
     searchable?: SelectProps<Option, IsMulti, Group>['isSearchable'];
     multi?: SelectProps<Option, IsMulti, Group>['isMulti'];
 };
-declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, 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, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
+declare function DSelect<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id: idProp, className, style, label, hint, iconFamilyClass, iconFamilyPrefix, iconStart, iconStartFamilyClass, iconStartFamilyPrefix, iconStartAriaLabel, iconStartTabIndex, iconEnd, iconEndFamilyClass, iconEndFamilyPrefix, iconEndAriaLabel, iconEndTabIndex, invalid, valid, menuWithMaxContent, disabled, clearable, loading, floatingLabel, rtl, searchable, multi, components, defaultValue, placeholder, onIconStartClick, onIconEndClick, dataAttributes, ...props }: Props<Option, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof DSelect & {
     OptionCheck: typeof DSelectOptionCheck;
     OptionIcon: typeof DSelectOptionIcon;

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

@@ -2,11 +2,11 @@ import type { PropsWithChildren } from 'react';
 import DTabContent from './components/DTabContent';
 import type { BaseProps } from '../interface';
 export type DTabOption = {
-    label: string;
+    label: string | React.ReactNode;
     tab: string;
     disabled?: boolean;
 };
-export type TabVariant = 'tabs' | 'pills' | 'underline';
+export type TabVariant = 'tabs' | 'pills' | 'underline' | 'toggle-button-group';
 type Props = BaseProps & PropsWithChildren<{
     classNameTab?: string;
     onChange?: (option: DTabOption) => void;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { BaseProps } from '../interface';
+export type DTimelineItem = {
+    title: string;
+    description?: string;
+    time?: string;
+    icon?: string;
+    status?: 'success' | 'warning' | 'danger' | 'info';
+    children?: React.ReactNode;
+};
+type Props = BaseProps & {
+    items: DTimelineItem[];
+};
+export default function DTimeline({ className, style, dataAttributes, items, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import DTimeline from './DTimeline';
+export default DTimeline;

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

@@ -1,12 +1,12 @@
 import { Renderable, Toast, ValueFunction } from 'react-hot-toast';
+import { ComponentStateColor } from '../interface';
 type ToastData = {
     title: string;
     description?: string;
     timestamp?: string;
     icon?: string;
     closeIcon?: string;
-    theme?: string;
-    soft?: boolean;
+    color?: ComponentStateColor;
 };
 type Props = Partial<Pick<Toast, 'id' | 'duration' | 'position'>>;
 export default function useDToast(): {

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

@@ -9,9 +9,8 @@ export type Props = BaseProps & PropsWithChildren<{
     withFocus?: boolean;
     withClick?: boolean;
     open?: boolean;
-    theme?: string;
     size?: ComponentSize;
     placement?: Placement;
     Component: ReactNode;
 }>;
-export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, theme, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DTooltip({ className, childrenClassName, style, offSet, padding, withFocus, withClick, withHover, open, placement, size, Component, children, }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type Props = PropsWithChildren<{
+    amount?: string;
+    amountDetails?: ReactNode;
+    icon?: string;
+    color?: string;
+    message: string;
+    title: string;
+    downloadText?: string;
+    shareText?: string;
+    onError?: (err: Error) => Promise<void> | void;
+}>;
+export default function DVoucher({ amount, amountDetails, icon, color, title, onError, message, downloadText, shareText, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DVoucher/hooks/useScreenshot.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshot(): {
+    clipRef: import("react").RefObject<HTMLDivElement | null>;
+    takeBlob: (type?: string) => Promise<Blob>;
+};

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshotDownload(): {
+    download: () => Promise<void>;
+    downloadRef: import("react").RefObject<HTMLDivElement | null>;
+};

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function useScreenshotWebShare(): {
+    share: () => Promise<void>;
+    shareRef: import("react").RefObject<HTMLDivElement | null>;
+};

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

@@ -0,0 +1,2 @@
+import DVoucher from './DVoucher';
+export default DVoucher;

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

@@ -1,3 +1 @@
 export declare const PREFIX_BS = "bs-";
-export declare const ICON_FAMILY_CLASS = "bi";
-export declare const ICON_FAMILY_PREFIX = "bi-";

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

@@ -1,6 +1,7 @@
 export { default as DAlert } from './DAlert';
 export { default as DAvatar } from './DAvatar';
 export { default as DBadge } from './DBadge';
+export { default as DBox } from './DBox';
 export { default as DBoxFile } from './DBoxFile';
 export { default as DButton } from './DButton';
 export { default as DButtonIcon } from './DButtonIcon';
@@ -11,14 +12,15 @@ export { default as DCollapse } from './DCollapse';
 export { default as DCurrencyText } from './DCurrencyText';
 export { default as DDatePicker } from './DDatePicker';
 export { default as DIcon } from './DIcon';
+export { default as DLayout, DLayoutPane, } from './DLayout';
 export { default as DIconBase } from './DIconBase';
 export { default as DInput } from './DInput';
 export { default as DInputMask } from './DInputMask';
 export { default as DInputCounter } from './DInputCounter';
-export { default as DInputCurrencyBase } from './DInputCurrencyBase';
 export { default as DInputCurrency } from './DInputCurrency';
-export { default as DInputSearch } from './DInputSearch';
 export { default as DInputPassword } from './DInputPassword';
+export { default as DPasswordStrengthMeter } from './DPasswordStrengthMeter';
+export type { ValidationMessages, ValidationCheck } from './DPasswordStrengthMeter';
 export { default as DInputCheck } from './DInputCheck';
 export { default as DInputPin } from './DInputPin';
 export { default as DInputSelect } from './DInputSelect';
@@ -26,25 +28,22 @@ export type { DInputSelectDefaultOption, DInputSelectProps } from './DInputSelec
 export { default as DInputSwitch } from './DInputSwitch';
 export { default as DInputRange } from './DInputRange';
 export { default as DSelect } from './DSelect';
-export { default as DList, DListItem, } from './DList';
 export { default as DListGroup, DListGroupItem, } from './DListGroup';
 export { default as DModal, DModalHeader, DModalBody, DModalFooter, } from './DModal';
 export { default as DOffcanvas, DOffcanvasHeader, DOffcanvasBody, DOffcanvasFooter, } from './DOffcanvas';
 export { default as DPaginator } from './DPaginator';
 export { default as DPopover } from './DPopover';
 export { default as DProgress } from './DProgress';
-export { default as DQuickActionButton } from './DQuickActionButton';
-export { default as DQuickActionCheck } from './DQuickActionCheck';
-export { default as DQuickActionSelect } from './DQuickActionSelect';
-export { default as DQuickActionSwitch } from './DQuickActionSwitch';
-export { default as DSkeleton } from './DSkeleton';
 export { default as DStepper } from './DStepper';
 export { default as DStepperDesktop } from './DStepperDesktop';
 export { default as DStepperMobile } from './DStepperMobile';
 export { default as DTooltip } from './DTooltip';
+export { default as DTimeline } from './DTimeline';
 export { default as DTabs, useTabContext, DTabContent, } from './DTabs';
 export type { DTabOption } from './DTabs';
 export { default as DToast } from './DToast';
 export { default as DToastContainer, useDToast, } from './DToastContainer';
-export { default as DTableHead } from './DTableHead';
 export { default as DInputPhone } from './DInputPhone';
+export { default as DCreditCard } from './DCreditCard';
+export { default as DDropdown } from './DDropdown';
+export { default as DVoucher } from './DVoucher';

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

@@ -24,12 +24,6 @@ export type FamilyIconProps = {
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
 };
-export type LabelIconProps = {
-    labelIcon?: string;
-    labelIconFamilyClass?: string;
-    labelIconFamilyPrefix?: string;
-    labelIconMaterialStyle?: boolean;
-};
 export type StartIconProps = {
     iconStart?: string;
     iconStartDisabled?: boolean;
@@ -48,9 +42,10 @@ export type EndIconProps = {
     iconEndTabIndex?: number;
     iconEndMaterialStyle?: boolean;
 };
-export type AlertTheme = 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+export type ComponentColor = string;
+export type ComponentStateColor = 'success' | 'danger' | 'warning' | 'info';
 export type AlertThemeIconMap = {
-    [state in AlertTheme]: string;
+    [state in ComponentStateColor]: string;
 };
 export type ButtonVariant = 'outline' | 'link';
 export type ButtonType = 'submit' | 'reset' | 'button';

package/dist/types/hooks/useResponsiveProp.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A mapping of breakpoint names to values for responsive properties.
+ *
+ * This type allows you to specify a value for one or more
+ * breakpoints ('xs', 'sm', 'md', 'lg', 'xl', 'xxl').
+ * When used with `useResponsiveProp`, the value for
+ * the highest matching breakpoint will be selected.
+ *
+ * Usage example:
+ * ```ts
+ * const prop: ResponsiveProp = { xs: "small", md: "medium", xl: "large" };
+ * ```
+ */
+export type ResponsiveProp = Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', string>>;
+/**
+ * React hook to resolve a responsive property value based on the current viewport breakpoint.
+ *
+ * Given a `ResponsiveProp` object, this hook returns the value for the highest matching breakpoint.
+ * If multiple breakpoints match, the value for the largest (highest) breakpoint is used.
+ * If no breakpoints match, `undefined` is returned.
+ *
+ * @param useListener - Whether to listen for breakpoint changes (default: false).
+ * @returns An object with a `responsivePropValue` function that takes a
+ * `ResponsiveProp` and returns the resolved value.
+ *
+ * Usage example:
+ * ```ts
+ * const { responsivePropValue } = useResponsiveProp();
+ * const value = responsivePropValue({ xs: "A", md: "B", xl: "C" });
+ * // value will be "C" if xl breakpoint is active, "B" if md is active, etc.
+ * ```
+ */
+export declare function useResponsiveProp(useListener?: boolean): {
+    responsivePropValue: (prop: ResponsiveProp) => string | undefined;
+};

package/jest/setup.js

@@ -1,8 +1,6 @@
 /* eslint-disable react/prop-types */
 const React = require('react');
 
-jest.mock('react-content-loader', () => jest.fn());
-
 jest.mock('react-responsive-pagination', () => {
   function MockPagination(props) {
     const {

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.1",
+  "version": "2.0.0-dev.10",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -49,9 +49,13 @@
     "build:react:watch": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.mjs",
     "build:scss": "node scripts/build-scss.js",
     "build:scss:watch": "npx nodemon --watch src --ext scss --exec 'npm run build:scss'",
-    "cp": "npm run cp:bootstrap && npm run cp:popper && npm run cp:bootstrap-icons",
+    "dev:ts": "tsc -p tsconfig.build.json",
+    "dev:rollup": "rollup -c rollup.config.mjs",
+    "dev:scss": "node scripts/build-scss.js",
+    "build:once": "npm run dev:ts && npm run dev:rollup && sleep 0.5 && npm run dev:scss && yalc push",
+    "watch:ds": "npx nodemon --watch src --ext ts,tsx,scss --delay 1000ms --exec \"npm run build:once\"",
+    "cp": "npm run cp:bootstrap && npm run cp:popper",
     "cp:bootstrap": "scripts/cp-boostrap.sh",
-    "cp:bootstrap-icons": "scripts/cp-boostrap-icons.sh",
     "cp:popper": "scripts/cp-popper.sh",
     "clean": "rimraf dist-transpiled && rimraf dist",
     "compile": "tsc -p . && rollup -c rollup.config.mjs",
@@ -70,7 +74,8 @@
     "publish:cdn-dev": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/dev/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged",
     "prepare": "husky",
-    "commitlint": "commitlint --edit"
+    "commitlint": "commitlint --edit",
+    "verify": "node scripts/verify.js"
   },
   "engines": {
     "node": ">=22.0.0"
@@ -84,22 +89,23 @@
     "jest/"
   ],
   "dependencies": {
-    "@floating-ui/react": "~0.26.1",
-    "@react-input/mask": "~1.0.20",
+    "@floating-ui/react": "~0.27.16",
+    "@react-input/mask": "~2.0.4",
     "@splidejs/react-splide": "~0.7.12",
     "@splidejs/splide": "~4.1.4",
-    "bootstrap": "~5.3.3",
-    "classnames": "~2.3.2",
+    "bootstrap": "~5.3.8",
+    "classnames": "~2.5.1",
     "currency.js": "~2.0.4",
-    "date-fns": "~2.30.0",
-    "file-selector": "^2.1.2",
-    "google-libphonenumber": "^3.2.40",
-    "i18next": "~23.6.0",
-    "react-content-loader": "~6.2.1",
+    "date-fns": "~4.1.0",
+    "file-selector": "~2.1.2",
+    "google-libphonenumber": "~3.2.43",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.3",
+    "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
-    "react-international-phone": "~4.5.0",
-    "react-responsive-pagination": "^2.9.0",
-    "react-select": "^5.8.3"
+    "react-international-phone": "~4.6.0",
+    "react-responsive-pagination": "~2.11.3",
+    "react-select": "~5.10.2"
   },
   "devDependencies": {
     "@babel/core": "~7.23.2",
@@ -120,9 +126,9 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/google-libphonenumber": "~7.4.30",
     "@types/jest": "~29.5.12",
-    "@types/node": "~18.15.3",
-    "@types/react": "~19.1.8",
-    "@types/react-dom": "~19.1.6",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "~6.9.0",
     "@typescript-eslint/parser": "~6.9.0",
     "@vitejs/plugin-react": "~4.7.0",
@@ -130,7 +136,6 @@
     "axe-playwright": "~1.2.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "~9.1.3",
-    "bootstrap-icons": "~1.13.1",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -139,23 +144,25 @@
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-react": "~7.33.2",
     "eslint-plugin-react-hooks": "~4.6.0",
-    "formik": "~2.4.6",
-    "glob": "~10.3.10",
+    "formik": "~2.4.8",
+    "framer-motion": "^12.23.24",
+    "glob": "^11.1.0",
     "husky": "~9.1.7",
+    "i18next": "~25.6.1",
     "jest": "~29.7.0",
     "jest-axe": "~8.0.0",
     "jest-cli": "~29.7.0",
     "jest-environment-jsdom": "~29.7.0",
     "lint-staged": "^15.2.10",
     "postcss-cli": "~10.1.0",
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0",
+    "react": "~19.2.1",
+    "react-dom": "~19.2.1",
+    "react-hot-toast": "~2.6.0",
+    "react-i18next": "~16.2.4",
+    "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
-    "rimraf": "~6.0.1",
-    "rollup": "^4.27.4",
+    "rimraf": "~6.1.0",
+    "rollup": "~4.53.1",
     "sass": "~1.69.4",
     "storybook": "~9.0.17",
     "stylelint": "^16.16.0",
@@ -163,19 +170,15 @@
     "ts-jest": "~29.2.3",
     "tslib": "~2.6.2",
     "typescript": "~5.2.2",
-    "vite": "~6.3.5",
+    "vite": "^6.4.1",
     "yup": "^1.6.1"
   },
   "peerDependencies": {
-    "react": "~19.1.0",
-    "react-dom": "~19.1.0",
-    "react-hot-toast": "~2.5.2",
-    "react-i18next": "~13.3.1",
-    "recharts": "~3.1.0"
-  },
-  "peerDependenciesMeta": {
-    "recharts": {
-      "optional": true
-    }
+    "framer-motion": ">=12 <13",
+    "i18next": ">=25 <26",
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "react-hot-toast": ">=2 <3",
+    "react-i18next": ">=16 <17"
   }
 }

package/src/style/_shame.scss

@@ -1,5 +1,46 @@
-// keep empty.
+/* stylelint-disable declaration-no-important */
 
 .flex-1 {
   flex: 1;
 }
+
+.text-muted {
+  --#{$prefix}text-muted: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}text-muted) !important;
+}
+
+.form-text {
+  --#{$prefix}form-text: var(--#{$prefix}gray-400);
+  color: var(--#{$prefix}form-text) !important;
+}
+
+.spinner-border {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+th {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
+@media (min-width: 1200px) {
+  legend {
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+}
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+) !default;
+
+@each $size, $width in $container-max-widths {
+  .max-w-#{$size} {
+    max-width: $width;
+  }
+}