@dynamic-framework/ui-react 2.0.0-dev.22 → 2.0.0-dev.24

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

@@ -1,8 +1,9 @@
 import type { BaseProps, ComponentColor } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
 type Props = BaseProps & {
     text?: string;
     soft?: boolean;
-    size?: 'sm' | 'lg';
+    size?: string | ResponsiveProp;
     rounded?: boolean;
     color?: ComponentColor;
     id?: string;
@@ -12,5 +13,5 @@ type Props = BaseProps & {
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
 };
-export default function DBadge({ text, soft, color, id, rounded, className, size, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, dataAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,12 @@
 import { type ButtonHTMLAttributes } from 'react';
-import type { BaseProps, ButtonVariant, ComponentColor, ComponentSize, EndIconProps, StartIconProps } from '../interface';
+import { ResponsiveProp } from '../../hooks/useResponsiveProp';
+import type { BaseProps, ButtonVariant, ComponentColor, EndIconProps, StartIconProps } from '../interface';
 interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, BaseProps, StartIconProps, EndIconProps {
     href?: string;
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     color?: ComponentColor;
-    size?: ComponentSize;
+    size?: string | ResponsiveProp;
     variant?: ButtonVariant;
     text?: string;
     loading?: boolean;

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

@@ -1,6 +1,7 @@
+type CardBrand = 'visa' | 'mastercard';
 type Props = {
     className?: string;
-    brand?: string;
+    brand?: CardBrand;
     isChipVisible?: boolean;
     name?: string;
     number?: string;

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+type Renderable = ReactNode | (() => ReactNode);
+type DDataStateWrapperProps<T> = {
+    isLoading: boolean;
+    isError: boolean;
+    data: T[] | undefined;
+    onRetry?: () => void;
+    renderLoading?: Renderable;
+    renderEmpty?: Renderable;
+    renderError?: Renderable;
+    children: (data: T[]) => ReactNode;
+};
+export default function DDataStateWrapper<T>({ isLoading, isError, data, onRetry, renderLoading, renderEmpty, renderError, children, }: DDataStateWrapperProps<T>): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/types/components/DDataStateWrapper/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+interface EmptyStateProps {
+    message?: string;
+    icon?: string;
+    actionText?: string;
+    onAction?: () => void;
+}
+export declare function EmptyState({ message, icon, actionText, onAction, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/ErrorState.d.ts

@@ -0,0 +1,8 @@
+type ErrorStateProps = {
+    message?: string;
+    onRetry?: () => void;
+    retryMessage?: string;
+    color?: 'danger' | 'warning';
+};
+export declare function ErrorState({ message, onRetry, retryMessage, color, }: ErrorStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DDataStateWrapper/components/LoadingState.d.ts

@@ -0,0 +1,6 @@
+type LoadingStateProps = {
+    ariaLabel?: string;
+    className?: string;
+};
+export declare function LoadingState({ ariaLabel, className }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+import { type PropsWithChildren, type ReactNode, type ErrorInfo } from 'react';
+import { FallbackProps, useErrorBoundary, getErrorMessage } from 'react-error-boundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export type DErrorBoundaryProps = PropsWithChildren<{
+    name?: string;
+    fallback?: (props: FallbackProps) => ReactNode;
+    resetKeys?: unknown[];
+    onReset?: () => void;
+    onError?: (error: unknown, info: ErrorInfo) => void;
+}>;
+export default function DErrorBoundary({ name, fallback, resetKeys, onReset, onError, children, }: DErrorBoundaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DErrorBoundary/components/DefaultErrorBoundary.d.ts

@@ -0,0 +1,6 @@
+import { FallbackProps } from 'react-error-boundary';
+type Props = {
+    resetErrorBoundary: FallbackProps['resetErrorBoundary'];
+};
+export default function DefaultErrorBoundary({ resetErrorBoundary }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+import DErrorBoundary, { type FallbackProps, useErrorBoundary, getErrorMessage } from './DErrorBoundary';
+export { type FallbackProps, useErrorBoundary, getErrorMessage, };
+export default DErrorBoundary;

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

@@ -48,3 +48,5 @@ export { default as DCreditCard } from './DCreditCard';
 export { default as DDropdown } from './DDropdown';
 export { default as DVoucher } from './DVoucher';
 export { default as DOtp } from './DOtp';
+export { default as DErrorBoundary, useErrorBoundary, type FallbackProps, getErrorMessage, } from './DErrorBoundary';
+export { default as DDataStateWrapper } from './DDataStateWrapper';

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "2.0.0-dev.22",
+  "version": "2.0.0-dev.24",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/LICENSE.md",
   "repository": {
@@ -103,24 +103,21 @@
     "jspdf": "^4.0.0",
     "lucide-react": "^0.553.0",
     "react-datepicker": "~8.3.0",
+    "react-error-boundary": "^6.1.0",
     "react-international-phone": "~4.6.0",
     "react-responsive-pagination": "~2.11.3",
     "react-select": "~5.10.2"
   },
   "devDependencies": {
-    "@babel/core": "~7.23.2",
-    "@babel/preset-env": "~7.23.2",
-    "@babel/preset-react": "~7.22.15",
-    "@babel/preset-typescript": "~7.23.2",
     "@commitlint/cli": "~19.3.0",
     "@commitlint/config-conventional": "~19.2.2",
     "@mdx-js/react": "~2.3.0",
     "@popperjs/core": "~2.11.8",
     "@rollup/plugin-node-resolve": "^15.3.0",
-    "@storybook/addon-a11y": "~9.0.17",
-    "@storybook/addon-docs": "~9.0.17",
-    "@storybook/addon-links": "~9.0.17",
-    "@storybook/react-vite": "~9.0.17",
+    "@storybook/addon-a11y": "~10.2.8",
+    "@storybook/addon-docs": "~10.2.8",
+    "@storybook/addon-links": "~10.2.8",
+    "@storybook/react-vite": "~10.2.8",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -134,8 +131,6 @@
     "@vitejs/plugin-react": "~4.7.0",
     "autoprefixer": "~10.4.16",
     "axe-playwright": "~1.2.3",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "~9.1.3",
     "conventional-changelog-conventionalcommits": "~6.1.0",
     "eslint": "~8.52.0",
     "eslint-config-airbnb": "~19.0.4",
@@ -151,7 +146,6 @@
     "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",
@@ -162,9 +156,9 @@
     "recharts": "~3.3.0",
     "remark-gfm": "~4.0.1",
     "rimraf": "~6.1.0",
-    "rollup": "~4.53.1",
+    "rollup": "^4.59.0",
     "sass": "~1.69.4",
-    "storybook": "^9.1.17",
+    "storybook": "^10.2.8",
     "stylelint": "^16.16.0",
     "stylelint-config-twbs-bootstrap": "^16.0.0",
     "ts-jest": "~29.2.3",

package/src/style/abstracts/_utilities-dark.scss

@@ -0,0 +1,72 @@
+@mixin generate-dark-utility($utility) {
+  $values: map-get($utility, values);
+
+  @if type-of($values) == "string" or type-of(nth($values, 1)) != "list" {
+    $values: zip($values, $values);
+  }
+
+  @each $key, $value in $values {
+    $properties: map-get($utility, property);
+
+    @if type-of($properties) == "string" {
+      $properties: append((), $properties);
+    }
+
+    $property-class: if(map-has-key($utility, class), map-get($utility, class), nth($properties, 1));
+    $property-class: if($property-class == null, "", $property-class);
+    $css-variable-name: if(map-has-key($utility, css-variable-name), map-get($utility, css-variable-name), map-get($utility, class));
+    $property-class-modifier: if($key, if($property-class == "", "", "-") + $key, "");
+
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
+
+    @if $value != null {
+      $escaped-prefix: "dark\\:";
+      $selector: ".#{$escaped-prefix}#{$property-class}#{$property-class-modifier}";
+
+      @if $is-css-var {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            --#{$prefix}#{$css-variable-name}: #{$value};
+          }
+        }
+        .dark #{$selector} {
+          --#{$prefix}#{$css-variable-name}: #{$value};
+        }
+      } @else {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            @each $property in $properties {
+              @if $is-local-vars {
+                @each $local-var, $variable in $is-local-vars {
+                  --#{$prefix}#{$local-var}: #{$variable};
+                }
+              }
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
+        .dark #{$selector} {
+          @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $variable in $is-local-vars {
+                --#{$prefix}#{$local-var}: #{$variable};
+              }
+            }
+            #{$property}: $value if($enable-important-utilities, !important, null);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-dark-utilities($utilities-map) {
+  @each $name, $utility in $utilities-map {
+    @if map-has-key($utility, values) and map-has-key($utility, property) {
+      @include generate-dark-utility($utility);
+    }
+  }
+}
+
+@include generate-dark-utilities($utilities);

package/src/style/abstracts/_utilities.scss

@@ -133,7 +133,13 @@ $utilities: map-merge(
       map-get($utilities, "font-size"),
       (
         responsive: true,
-        rfs: false
+        rfs: false,
+        values: map-merge(
+          map-get(map-get($utilities, "font-size"), "values"),
+          (
+            body: var(--#{$prefix}body-font-size)
+          )
+        )
       )
     ),
     "display-font-size": (
@@ -199,13 +205,6 @@ $utilities: map-merge(
         wrap: wrap
       )
     ),
-    "body-font-size": (
-      class: "fs-body",
-      responsive: true,
-      css-var: true,
-      css-variable-name: fs-body-font-size,
-      values: $body-font-sizes
-    ),
     "line-height": (
       property: line-height,
       class: lh,

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

@@ -88,10 +88,6 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
 @import "code";
 
 // custom
-@import "quick-action-button";
-@import "quick-action-select";
-@import "quick-action-check";
-@import "quick-action-switch";
 @import "cursors";
 @import "chips";
 @import "collapse-icon-text";

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

@@ -1,6 +1,6 @@
 // Alerts
 // scss-docs-start alert-variables
-$alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$alert-border-radius: var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
 

package/src/style/abstracts/variables/_input-phone.scss

@@ -36,7 +36,7 @@ $input-phone-dropdown-item-text-color: $input-phone-text-color !default;
 $input-phone-dropdown-item-dial-code-color: var(--#{$prefix}gray-500) !default;
 $input-phone-dropdown-item-height: 28px !default;
 $input-phone-dropdown-item-padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-3) !default;
-$input-phone-dropdown-item-font-size: var(--#{$prefix}fs-body-small) !default;
+$input-phone-dropdown-item-font-size: var(--#{$prefix}font-size-sm) !default;
 $input-phone-dropdown-item-font-weight: var(--#{$prefix}fw-normal) !default;
 
 // Selected / hover items

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

@@ -9,8 +9,8 @@ $tooltip-padding-y: var(--#{$prefix}ref-spacer-2) !default;
 $tooltip-padding-x: var(--#{$prefix}ref-spacer-1) !default;
 
 // custom
-$tooltip-font-size-sm: var(--#{$prefix}fs-body-small) !default;
-$tooltip-font-size-lg: var(--#{$prefix}fs-body-medium) !default;
+$tooltip-font-size-sm: var(--#{$prefix}fs-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-5) !default;
 // end custom
 
 // scss-docs-end tooltip-variables

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

@@ -15,8 +15,6 @@ $font-size-sm: var(--#{$prefix}fs-small) !default;
 $font-size-sm-value: .875em !default;
 // end custom
 
-$font-size-lg: $font-size-base * 1.125 !default;  // 18px
-
 // custom
 $font-weight-lighter-value: lighter !default;
 $font-weight-light-value: 200 !default;
@@ -39,40 +37,6 @@ $line-height-base: 1.5 !default;
 $line-height-sm: 1.25 !default;
 $line-height-lg: 2 !default;
 
-// custom
-$body-large-font-size-value: $font-size-base * 1.5 !default;   // 24px - 21.525px
-$body-medium-font-size-value: $font-size-base * 1.25 !default; // 20px - 20px
-$body-normal-font-size-value: $font-size-base * 1 !default;    // 16px - 16px
-$body-small-font-size-value: $font-size-base * .875 !default;  // 14px - 14px
-$body-tiny-font-size-value: $font-size-base * .8125 !default;  // 13px - 13px
-
-$body-large-font-size: var(--#{$prefix}fs-body-large) !default;
-$body-medium-font-size: var(--#{$prefix}fs-body-medium) !default;
-$body-normal-font-size: var(--#{$prefix}fs-body-normal) !default;
-$body-small-font-size: var(--#{$prefix}fs-body-small) !default;
-$body-tiny-font-size: var(--#{$prefix}fs-body-tiny) !default;
-// end custom
-// scss-docs-end font-variables
-
-// scss-docs-start body-font-sizes
-// custom
-$body-font-sizes-value: (
-  large: $body-large-font-size-value,
-  medium: $body-medium-font-size-value,
-  normal: $body-normal-font-size-value,
-  small: $body-small-font-size-value,
-  tiny: $body-tiny-font-size-value,
-) !default;
-
-$body-font-sizes: (
-  large: $body-large-font-size,
-  medium: $body-medium-font-size,
-  normal: $body-normal-font-size,
-  small: $body-small-font-size,
-  tiny: $body-tiny-font-size,
-) !default;
-// end custom
-// scss-docs-end body-font-sizes
 
 // custom
 $h1-font-size-value: $font-size-base * 3 !default;    // 48px - 30.675px
@@ -169,10 +133,6 @@ $small-font-size-value: $font-size-sm-value !default;
 
 $sub-sup-font-size: .75em !default;
 
-// // fusv-disable
-// $text-muted: var(--#{$prefix}gray-400) !default;
-// // fusv-enable
-
 $blockquote-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $blockquote-footer-color: var(--#{$prefix}gray-600) !default;
 

package/src/style/base/_badge.scss

@@ -3,8 +3,8 @@
   --#{$prefix}badge-icon-size: #{$badge-font-size};
   --#{$prefix}badge-bg: #{$badge-bg};
   --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-body-small);
-  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-body-large);
+  --#{$prefix}badge-sm-font-size: var(--#{$prefix}fs-small);
+  --#{$prefix}badge-lg-font-size: var(--#{$prefix}fs-5);
 
   display: inline-flex;
   gap: var(--#{$prefix}badge-gap);

package/src/style/base/_type.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-no-important */
+
 //
 // Headings
 //
@@ -34,17 +36,12 @@
 // Type display classes
 [class*="display-"] {
   font-family: $display-font-family;
-  font-size: var(--#{$prefix}display-font-size);
+  font-size: var(--#{$prefix}display-font-size) !important;
   font-style: $display-font-style;
   font-weight: $display-font-weight;
   line-height: $display-line-height;
 }
 
-// Body display classes
-[class*="fs-body-"] {
-  font-size: var(--#{$prefix}fs-body-font-size);
-}
-
 //
 // Emphasis
 //

package/src/style/components/_d-credit-card.scss

@@ -14,25 +14,26 @@
   --#{$prefix}d-credit-card-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}d-credit-card-number-size: inherit;
   --#{$prefix}d-credit-card-chip-size: 30px;
-  flex-direction: column;
+  --#{$prefix}d-credit-card-color: var(--#{$prefix}white);
+  --#{$prefix}d-credit-card-logo-size: 22%;
 
+  position: relative;
+  display: flex;
+  flex-direction: column;
   aspect-ratio: var(--#{$prefix}d-credit-card-aspect-ratio);
   padding: var(--#{$prefix}d-credit-card-padding);
+  overflow: hidden;
+  color: var(--#{$prefix}d-credit-card-color);
   background: var(--#{$prefix}d-credit-card-bg);
-  --#{$prefix}d-credit-card-logo-size: 22%;
+  border-radius: var(--#{$prefix}border-radius-lg);
 
-  > * {
-    display: flex;
-    align-items: center;
+  .d-credit-card-details {
+    display: block;
+    margin-top: auto;
   }
 
-  .d-credit-card-details {
-    .name {
-      font-size: var(--#{$prefix}ref-fs-6);
-    }
-    .date {
-      font-size: var(--#{$prefix}ref-fs-6);
-    }
+  .d-credit-card-name {
+    font-size: var(--#{$prefix}ref-fs-6);
   }
 
   .d-credit-card-logo {
@@ -40,7 +41,9 @@
   }
 
   .d-credit-card-chip {
+    padding: var(--#{$prefix}ref-spacer-1);
     background: var(--#{$prefix}d-credit-card-chip-bg);
+    border-radius: var(--#{$prefix}border-radius-sm);
   }
 
   .d-credit-card-chip-image {
@@ -48,6 +51,7 @@
   }
 
   .d-credit-card-number {
+    margin-bottom: var(--#{$prefix}ref-spacer-4);
     font-family: var(--#{$prefix}d-credit-card-font-family-number);
     font-size: var(--#{$prefix}d-credit-card-number-size);
   }
@@ -59,9 +63,15 @@
   }
 
   .d-credit-card-header {
+    display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 45px;
   }
 
+  .d-credit-card-holder-text {
+    display: block;
+    opacity: .5;
+  }
+
 }

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

@@ -24,6 +24,23 @@
   }
 }
 
+// Circle background defaults and opacity variable
+.d-icon-has-circle {
+  --#{$prefix}icon-component-bg-opacity: .1;
+  --#{$prefix}icon-component-bg-color: rgba(var(--#{$prefix}body-color-rgb), var(--#{$prefix}icon-component-bg-opacity));
+}
+
+// Generate color classes for icon color and circle background
+@each $theme, $value in $theme-colors {
+  .d-icon-color-#{$theme} {
+    --#{$prefix}icon-component-color: var(--#{$prefix}#{$theme});
+  }
+
+  .d-icon-color-#{$theme}.d-icon-has-circle {
+    --#{$prefix}icon-component-bg-color: rgba(var(--#{$prefix}#{$theme}-rgb), var(--#{$prefix}icon-component-bg-opacity));
+  }
+}
+
 .d-icon-loading {
   animation: loading-icon var(--#{$prefix}icon-loading-duration) infinite linear;
 }

package/src/style/dynamic-ui-non-root.scss

@@ -12,4 +12,6 @@
 
 @import "abstracts/utilities-hover";
 
+@import "abstracts/utilities-dark";
+
 @import "shame";

package/src/style/dynamic-ui.scss

@@ -14,4 +14,6 @@
 
 @import "abstracts/utilities-hover";
 
+@import "abstracts/utilities-dark";
+
 @import "shame";

package/src/style/helpers/_color-bg.scss

@@ -11,9 +11,7 @@
       background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
     }
   }
-  .hover-bg-#{$color}:hover {
-    background-color: var(--#{$prefix}#{$color}) if($enable-important-utilities, !important, null);
-  }
+
 }
 
 @each $color, $value in $theme-colors {

package/src/style/root/_root.scss

@@ -193,11 +193,6 @@
   @include rfs($small-font-size-value, --#{$prefix}rfs-fs-small);
   --#{$prefix}fs-small: var(--#{$prefix}rfs-fs-small);
 
-  @each $level, $value in $body-font-sizes-value {
-    @include rfs($value, --#{$prefix}rfs-fs-body-#{$level});
-    --#{$prefix}fs-body-#{$level}: var(--#{$prefix}rfs-fs-body-#{$level});
-  }
-
   --#{$prefix}fw-lighter: #{$font-weight-lighter-value};
   --#{$prefix}fw-light: #{$font-weight-light-value};
   --#{$prefix}fw-normal: #{$font-weight-normal-value};

package/src/style/abstracts/variables/_quick-action-button.scss

@@ -1,31 +0,0 @@
-$quick-action-button-gap: var(--#{$prefix}ref-spacer-2) !default;
-$quick-action-button-padding: var(--#{$prefix}ref-spacer-4) !default;
-$quick-action-button-bg: var(--#{$prefix}white) !default;
-$quick-action-button-border: 1px solid var(--#{$prefix}secondary-100) !default;
-$quick-action-button-border-radius: var(--#{$prefix}border-radius) !default;
-$quick-action-button-box-shadow: none !default;
-
-$quick-action-button-line1-font-size: var(--#{$prefix}fs-6) !default;
-$quick-action-button-line1-font-weight: var(--#{$prefix}fw-bold) !default;
-$quick-action-button-line1-color: var(--#{$prefix}body-color) !default;
-
-$quick-action-button-line2-font-size: var(--#{$prefix}fs-small) !default;
-$quick-action-button-line2-font-weight: var(--#{$prefix}fw-normal) !default;
-$quick-action-button-line2-color: var(--#{$prefix}gray-500) !default;
-
-$quick-action-button-representative-image-size: var(--#{$prefix}ref-spacer-9) !default;
-$quick-action-button-representative-image-border-radius: $spacer-2 !default;
-$quick-action-button-representative-icon-size: var(--#{$prefix}ref-spacer-6) !default;
-
-$quick-action-button-action-icon-color: var(--#{$prefix}gray-500) !default;
-$quick-action-button-action-icon-size: var(--#{$prefix}body-font-size) !default;
-
-$quick-action-button-hover-bg: var(--#{$prefix}gray-100) !default;
-$quick-action-button-hover-border-color: var(--#{$prefix}secondary-100) !default;
-$quick-action-button-hover-action-icon-color: var(--#{$prefix}secondary) !default;
-$quick-action-button-hover-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
-
-$quick-action-button-active-bg: var(--#{$prefix}gray-100) !default;
-$quick-action-button-active-border-color: var(--#{$prefix}secondary) !default;
-$quick-action-button-active-action-icon-color: var(--#{$prefix}secondary) !default;
-$quick-action-button-active-box-shadow: var(--#{$prefix}box-shadow-sm) !default;

package/src/style/abstracts/variables/_quick-action-check.scss

@@ -1,22 +0,0 @@
-$quick-action-check-gap: var(--#{$prefix}ref-spacer-4) !default;
-$quick-action-check-padding: var(--#{$prefix}ref-spacer-4) !default;
-$quick-action-check-bg: var(--#{$prefix}white) !default;
-$quick-action-check-border-radius: var(--#{$prefix}border-radius-sm) !default;
-
-$quick-action-check-line1-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line1-font-weight: var(--#{$prefix}fw-bold) !default;
-$quick-action-check-line1-color: var(--#{$prefix}gray-900) !default;
-
-$quick-action-check-line2-font-size: var(--#{$prefix}fs-small) !default;
-$quick-action-check-line2-font-weight: var(--#{$prefix}fw-normal) !default;
-$quick-action-check-line2-color: var(--#{$prefix}gray) !default;
-
-$quick-action-check-line3-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-check-line3-font-weight: var(--#{$prefix}fw-bold) !default;
-$quick-action-check-line3-color: var(--#{$prefix}gray) !default;
-
-$quick-action-check-hover-bg: var(--#{$prefix}gray-100) !default;
-
-$quick-action-check-checked-bg: var(--#{$prefix}white) !default;
-$quick-action-check-checked-color: var(--#{$prefix}body-color) !default;
-

package/src/style/abstracts/variables/_quick-action-select.scss

@@ -1,16 +0,0 @@
-$quick-action-select-padding: var(--#{$prefix}ref-spacer-4) !default;
-$quick-action-select-bg: var(--#{$prefix}gray-100) !default;
-$quick-action-select-border-radius: var(--#{$prefix}border-radius-sm) !default;
-
-$quick-action-select-line1-font-size: var(--#{$prefix}fs-small) !default;
-$quick-action-select-line1-font-weight: var(--#{$prefix}fw-normal) !default;
-$quick-action-select-line1-color: var(--#{$prefix}secondary) !default;
-
-$quick-action-select-line2-font-size: var(--#{$prefix}body-font-size) !default;
-$quick-action-select-line2-font-weight: var(--#{$prefix}fw-bold) !default;
-$quick-action-select-line2-color: var(--#{$prefix}light-text-emphasis) !default;
-
-$quick-action-select-hover-bg: var(--#{$prefix}gray-200) !default;
-
-$quick-action-select-checked-bg: var(--#{$prefix}secondary) !default;
-$quick-action-select-checked-color: var(--#{$prefix}white) !default;