@dynamic-framework/ui-react 1.16.2 → 1.17.0

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

@@ -1,41 +1,36 @@
 // Pagination
 
 // scss-docs-start pagination-variables
-$pagination-padding-y: .375rem !default;
-$pagination-padding-x: .75rem !default;
-$pagination-padding-y-sm: .25rem !default;
-$pagination-padding-x-sm: .5rem !default;
-$pagination-padding-y-lg: .75rem !default;
-$pagination-padding-x-lg: 1.5rem !default;
-
-$pagination-font-size: $font-size-base !default;
+$pagination-padding-y: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-x: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-y-sm: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-x-sm: var(--#{$prefix}ref-spacer-1) !default;
+$pagination-padding-y-lg: var(--#{$prefix}ref-spacer-2) !default;
+$pagination-padding-x-lg: var(--#{$prefix}ref-spacer-2) !default;
+
+// custom
+$pagination-page-item-size: $spacer-8 !default;
+$pagination-page-item-size-lg: $spacer-10 !default;
+$pagination-page-item-size-sm: $spacer-6 !default;
+$pagination-page-border-radius: $pagination-page-item-size !default;
+// end custom
 
 $pagination-color: var(--#{$prefix}gray) !default;
-$pagination-bg: var(--#{$prefix}body-bg) !default;
-$pagination-border-radius: var(--#{$prefix}border-radius) !default;
+$pagination-bg: transparent !default;
 $pagination-border-width: 0 !default;
-$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default;
-$pagination-border-color: var(--#{$prefix}border-color) !default;
-
-$pagination-focus-color: var(--#{$prefix}white) !default;
-$pagination-focus-bg: var(--#{$prefix}secondary) !default;
-$pagination-focus-box-shadow: 0 !default;
-$pagination-focus-outline: 0 !default;
 
 $pagination-hover-color: var(--#{$prefix}secondary) !default;
 $pagination-hover-bg: var(--#{$prefix}secondary-100) !default;
 $pagination-hover-border-color: 0 !default; // Todo in v6: remove this?
 
-$pagination-active-color: $component-active-color !default;
-$pagination-active-bg: $component-active-bg !default;
-$pagination-active-border-color: $component-active-bg !default;
+$pagination-focus-color: #{$pagination-hover-color} !default;
+$pagination-focus-bg: #{$pagination-hover-bg} !default;
+$pagination-focus-box-shadow: 0 !default;
+$pagination-focus-outline: 0 !default;
 
 $pagination-disabled-color: var(--#{$prefix}gray-400) !default;
 $pagination-disabled-bg: var(--#{$prefix}transparent) !default;
-$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
-
-$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
-$pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+$pagination-border-radius-sm: $pagination-page-item-size-sm !default;
+$pagination-border-radius-lg: $pagination-page-item-size-lg !default;
 // scss-docs-end pagination-variables

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

@@ -1,15 +1,12 @@
 // Progress bars
 
 // scss-docs-start progress-variables
-$progress-height: $spacer-3 !default;
 $progress-font-size: var(--#{$prefix}ref-fs-small) !default;
 $progress-bg: var(--#{$prefix}secondary-100) !default;
 $progress-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $progress-box-shadow: none !default;
 $progress-bar-color: var(--#{$prefix}white) !default;
 $progress-bar-bg: var(--#{$prefix}secondary) !default;
-$progress-bar-animation-timing: 1s linear infinite !default;
-$progress-bar-transition: width .6s ease !default;
 
 // custom
 $progress-font-weight: var(--#{$prefix}ref-fw-bold) !default;

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

@@ -1,5 +1,5 @@
 $quick-action-button-gap: var(--#{$prefix}ref-spacer-2) !default;
-$quick-action-button-padding: var(--#{$prefix}ref-spacer-3) !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;
@@ -13,9 +13,9 @@ $quick-action-button-line2-font-size: var(--#{$prefix}ref-fs-small) !default;
 $quick-action-button-line2-font-weight: var(--#{$prefix}ref-fw-normal) !default;
 $quick-action-button-line2-color: var(--#{$prefix}gray-500) !default;
 
-$quick-action-button-representative-image-size: 2.25rem !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: $spacer-4 !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;

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

@@ -1,5 +1,5 @@
-$quick-action-check-gap: var(--#{$prefix}ref-spacer-3) !default;
-$quick-action-check-padding: var(--#{$prefix}ref-spacer-3) !default;
+$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;
 

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

@@ -1,4 +1,4 @@
-$quick-action-select-padding: var(--#{$prefix}ref-spacer-3) !default;
+$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;
 

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

@@ -1,5 +1,5 @@
 $quick-action-switch-gap: var(--#{$prefix}ref-spacer-2) !default;
-$quick-action-switch-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-3) !default;
+$quick-action-switch-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4) !default;
 $quick-action-switch-bg: var(--#{$prefix}white) !default;
 $quick-action-switch-border-radius: var(--#{$prefix}border-radius-sm) !default;
 

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

@@ -6,14 +6,20 @@
 
 // scss-docs-start spacer-variables-maps
 $spacer: 1rem !default;
-$spacer-1: $spacer * .25 !default;  // 4px
-$spacer-2: $spacer * .5, !default;  // 8px
-$spacer-3: $spacer !default;        // 16px
-$spacer-4: $spacer * 1.5 !default;  // 24px
-$spacer-5: $spacer * 2 !default;    // 32px
-$spacer-6: $spacer * 2.5 !default;  // 40px
-$spacer-7: $spacer * 3 !default;    // 48px
-$spacer-8: $spacer * 3.5 !default;  // 56px
+$spacer-1: $spacer * .25 !default;    // 4px
+$spacer-2: $spacer * .5 !default;     // 8px
+$spacer-3: $spacer * .75 !default;    // 12px
+$spacer-4: $spacer !default;          // 16px
+$spacer-5: $spacer * 1.25 !default;   // 20px
+$spacer-6: $spacer * 1.5 !default;    // 24px
+$spacer-7: $spacer * 1.75 !default;   // 28px
+$spacer-8: $spacer * 2 !default;      // 32px
+$spacer-9: $spacer * 2.25 !default;   // 36px
+$spacer-10: $spacer * 2.5 !default;   // 40px
+$spacer-11: $spacer * 2.75 !default;  // 44px
+$spacer-12: $spacer * 3 !default;     // 48px
+$spacer-13: $spacer * 3.25 !default;  // 52px
+$spacer-14: $spacer * 3.5 !default;   // 56px
 $spacers: (
   0: 0,
   1: $spacer-1,
@@ -24,5 +30,11 @@ $spacers: (
   6: $spacer-6,
   7: $spacer-7,
   8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+  13: $spacer-13,
+  14: $spacer-14,
 ) !default;
 // scss-docs-end spacer-variables-maps

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

@@ -3,18 +3,8 @@
 // Customizes the `.table` component with basic values, each used across all table variations.
 
 // scss-docs-start table-variables
-$table-cell-padding-y: .5rem !default;
-$table-cell-padding-x: .5rem !default;
-$table-cell-padding-y-sm: .25rem !default;
-$table-cell-padding-x-sm: .25rem !default;
-
-$table-cell-vertical-align: top !default;
-
 $table-color: var(--#{$prefix}body-color) !default;
 $table-bg: transparent !default;
-$table-accent-bg: transparent !default;
-
-$table-th-font-weight: null !default;
 
 $table-bg-scale: -100% !default;
 
@@ -31,15 +21,7 @@ $table-hover-bg-factor: .075 !default;
 $table-hover-bg: unquote("color-mix(in srgb, var(--#{$prefix}white), var(--#{$prefix}black) #{(100% - $table-bg-scale) * $table-hover-bg-factor})") !default;
 
 $table-border-factor: .1 !default;
-$table-border-width: var(--#{$prefix}border-width) !default;
-$table-border-color: var(--#{$prefix}border-color) !default;
-
-$table-striped-order: odd !default;
-$table-striped-columns-order: even !default;
-
-$table-group-separator-color: currentcolor !default;
 
-$table-caption-color: var(--#{$prefix}secondary-color) !default;
 
 // scss-docs-end table-variables
 

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

@@ -4,9 +4,6 @@
 
 // scss-docs-start font-variables
 $font-family-sans-serif: "Source Sans 3", sans-serif !default;
-$font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base: var(--#{$prefix}font-sans-serif) !default;
-$font-family-code: var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
 // $font-size-base affects the font size of the body text
@@ -24,9 +21,7 @@ $font-weight-bolder: 800 !default;
 
 $font-weight-base: $font-weight-normal !default;
 
-$line-height-base: 1.2 !default;
-$line-height-sm: 1.2 !default;
-$line-height-lg: 1.2 !default;
+$line-height-base: 1.5 !default;
 
 $h1-font-size: $font-size-base * 4 !default;
 $h2-font-size: $font-size-base * 3.5 !default;
@@ -49,11 +44,8 @@ $font-sizes: (
 
 // scss-docs-start headings-variables
 $headings-margin-bottom: 0 !default;
-$headings-font-family: null !default;
-$headings-font-style: null !default;
 $headings-font-weight: $font-weight-bold !default;
 $headings-line-height: 1.2 !default;
-$headings-color: null !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -73,14 +65,11 @@ $display-font-sizes: (
   6: $display6-font-size
 ) !default;
 
-$display-font-family: null !default;
-$display-font-style:  null !default;
 $display-font-weight: $font-weight-base !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
 // scss-docs-start type-variables
-$lead-font-size: $font-size-base * 1.25 !default;
 $lead-font-weight: $font-weight-normal !default;
 
 $small-font-size: $font-size-sm !default;
@@ -91,33 +80,14 @@ $sub-sup-font-size: .75em !default;
 $text-muted: var(--#{$prefix}gray) !default;
 // fusv-enable
 
-$initialism-font-size: $small-font-size !default;
-
-$blockquote-margin-y: var(--#{$prefix}ref-spacer-3) !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $blockquote-footer-color: var(--#{$prefix}gray-600) !default;
-$blockquote-footer-font-size: $small-font-size !default;
 
-$hr-margin-y: var(--#{$prefix}ref-spacer-3) !default;
+$hr-margin-y: var(--#{$prefix}ref-spacer-4) !default;
 $hr-color: inherit !default;
 
-// fusv-disable
-$hr-bg-color: null !default; // Deprecated in v5.2.0
-$hr-height: null !default; // Deprecated in v5.2.0
-// fusv-enable
-
 $hr-border-color: $border-color !default; // Allows for inherited colors
-$hr-border-width: $border-width !default;
 $hr-opacity: 1 !default;
 
-$legend-margin-bottom: .5rem !default;
-$legend-font-size: 1.5rem !default;
-$legend-font-weight: null !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-$list-inline-padding: .5rem !default;
-
-$mark-padding: .1875em !default;
 $mark-bg: var(--#{$prefix}warning-100) !default;
 // scss-docs-end type-variables

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

@@ -34,9 +34,13 @@
 @import "bootstrap/scss/placeholders";
 @import "bootstrap/scss/badge";
 
+@import "body";
 @import "accordion";
 @import "form-switch";
 @import "form-check";
+@import "form-control";
+@import "form-text";
+@import "input-group";
 @import "button";
 @import "progress";
 @import "alert";
@@ -44,3 +48,4 @@
 @import "pagination";
 @import "breadcrumb";
 @import "dropdown";
+@import "label";

package/src/style/base/_body.scss

@@ -0,0 +1,3 @@
+body {
+  -webkit-font-smoothing: antialiased;
+}

package/src/style/base/_collapse.scss

@@ -4,12 +4,12 @@
   --#{$prefix}collapse-border-radius: var(--#{$prefix}ref-spacer-1);
   --#{$prefix}collapse-box-shadow: var(--#{$prefix}box-shadow-sm);
   // Button
-  --#{$prefix}collapse-button-padding-x: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}collapse-button-padding-y: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}collapse-button-gap: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}collapse-button-padding-x: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}collapse-button-padding-y: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}collapse-button-gap: var(--#{$prefix}ref-spacer-4);
   // Body
-  --#{$prefix}collapse-body-padding-x: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}collapse-body-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}collapse-body-padding-x: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}collapse-body-padding-y: var(--#{$prefix}ref-spacer-4);
   // Separator
   --#{$prefix}collapse-separator-display: none;
   --#{$prefix}collapse-separator-height: 1px;

package/src/style/base/_form-control.scss

@@ -0,0 +1,10 @@
+.form-control {
+  --#{$prefix}form-control-text-align: var(--#{$prefix}form-control-component-text-align, "left");
+
+  text-align: var(--#{$prefix}form-control-text-align);
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+}

package/src/style/base/_form-text.scss

@@ -0,0 +1,12 @@
+.form-text {
+  --#{$prefix}form-text-padding: #{$form-text-padding-y} #{$form-text-padding-x};
+  --#{$prefix}form-text-gap: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}form-text-color: #{$form-text-color};
+
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}form-text-gap);
+  align-items: center;
+  padding: var(--#{$prefix}form-text-padding);
+  color: var(--#{$prefix}form-text-color);
+}

package/src/style/base/_input-group.scss

@@ -0,0 +1,114 @@
+// bootstrap reset layer
+.input-group > .form-select,
+.input-group > .form-control {
+  border: 0;
+
+  &:not(:first-child) {
+    padding-left: 0;
+  }
+
+  &:focus {
+    border: 0;
+    box-shadow: none;
+  }
+}
+
+.input-group > .form-select:not(:last-child) {
+  padding-right: $form-select-indicator-padding - $form-select-padding-x;
+  background-position: right 0 center;
+}
+
+.input-group > .form-control:not(:last-child) {
+  padding-right: 0;
+}
+
+.input-group > .form-floating .form-select,
+.input-group > .form-floating .form-control {
+  border: 0;
+
+  &:focus {
+    border: 0;
+    box-shadow: none;
+  }
+}
+
+.input-group > .form-floating:not(:first-child) .form-select,
+.input-group > .form-floating:not(:first-child) .form-control {
+  padding-left: 0;
+}
+
+.input-group > .form-floating:not(:last-child) .form-select {
+  padding-right: $form-select-indicator-padding - $form-select-padding-x;
+  background-position: right 0 center;
+}
+
+.input-group > .form-floating:not(:last-child) .form-control {
+  padding-right: 0;
+}
+// end bootstrap reset layer
+
+.input-group {
+  // input group
+  --#{$prefix}input-border-color: #{$input-border-color};
+  --#{$prefix}input-border-width: #{$input-border-width};
+  --#{$prefix}input-border-radius: #{$input-border-radius};
+
+  // input group focus
+  --#{$prefix}input-focus-border-color: #{$input-focus-border-color};
+  --#{$prefix}input-focus-box-shadow: #{$input-focus-box-shadow};
+
+  // input group disabled
+  --#{$prefix}input-disabled-border-color: #{$input-disabled-border-color};
+  --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
+  --#{$prefix}input-disabled-color: #{$input-disabled-color};
+
+
+  border: var(--#{$prefix}input-border-width) solid var(--#{$prefix}input-border-color);
+  @include border-radius(var(--#{$prefix}input-border-radius), 0);
+
+  &:focus-within {
+    border-color: var(--#{$prefix}input-focus-border-color);
+    box-shadow: var(--#{$prefix}input-focus-box-shadow);
+  }
+
+  // validation states
+  @each $state, $data in $form-validation-states {
+    $border-color: map-get($data, "border-color");
+    $tooltip-bg-color: map-get($data, "tooltip-bg-color");
+    $box-shadow: map-get($data, "focus-box-shadow");
+
+    &:has(.form-control.is-#{$state}) {
+      border-color: $border-color;
+      box-shadow: $box-shadow;
+
+      ~ .form-text {
+        color: $border-color;
+      }
+
+      .input-group-validation-icon {
+        --#{$prefix}icon-color: #{$tooltip-bg-color};
+      }
+    }
+  }
+
+  // disabled state
+  &:has(.form-select:disabled),
+  &:has(.form-control:disabled) {
+    border-color: var(--#{$prefix}input-disabled-border-color);
+
+    // input addons disabled
+    .input-group-text {
+      color: var(--#{$prefix}input-disabled-color);
+      background: var(--#{$prefix}input-disabled-bg);
+    }
+
+    // icon disabled
+    .d-icon {
+      --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
+    }
+  }
+
+  button:disabled .d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}input-disabled-color);
+  }
+}

package/src/style/base/_label.scss

@@ -0,0 +1,15 @@
+.label,
+label {
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--#{$prefix}ref-spacer-1);
+  align-items: center;
+  padding: var(--#{$prefix}label-padding-y) var(--#{$prefix}label-padding-x);
+  font-size: var(--#{$prefix}label-font-size);
+  font-weight: var(--#{$prefix}label-font-weight);
+  color: var(--#{$prefix}label-color);
+
+  .d-icon {
+    --#{$prefix}icon-color: var(--#{$prefix}focus-ring-color);
+  }
+}

package/src/style/base/_pagination.scss

@@ -1,89 +1,12 @@
 .pagination {
-  // Page link
-  --#{$prefix}pagination-page-item-size: 2.125rem;
-  --#{$prefix}pagination-page-link-bg: transparent;
-  --#{$prefix}pagination-page-border-radius: var(--#{$prefix}border-radius);
-  // Arrow
-  --#{$prefix}pagination-arrow-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}pagination-arrow-padding-y: var(--#{$prefix}ref-spacer-1);
-  --#{$prefix}pagination-arrow-padding-x: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}pagination-arrow-border-radius: var(--#{$prefix}border-radius);
-  --#{$prefix}pagination-arrow-color: var(--#{$prefix}secondary);
-  // Arrow :focus
-  --#{$prefix}pagination-focus-arrow-bg: var(--#{$prefix}secondary-100);
-  // Arrow previous
-  --#{$prefix}pagination-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
-  --#{$prefix}pagination-disabled-arrow-prev-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/></svg>');
-  // Arrow next
-  --#{$prefix}pagination-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%234848b7" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
-  --#{$prefix}pagination-disabled-arrow-next-icon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23a1a1b5" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
+  --#{$prefix}pagination-page-item-size: #{$pagination-page-item-size};
+  --#{$prefix}pagination-border-radius: #{$pagination-page-border-radius};
+
   margin: 0;
 
   .page-item {
     min-width: var(--#{$prefix}pagination-page-item-size);
     min-height: var(--#{$prefix}pagination-page-item-size);
-
-    &:not(.active, :hover) .page-link {
-      background-color: var(--#{$prefix}pagination-page-link-bg);
-    }
-  }
-
-  .arrow .page-link {
-    min-width: fit-content;
-    padding: var(--#{$prefix}pagination-arrow-padding-y) var(--#{$prefix}pagination-arrow-padding-x);
-    font-size: var(--#{$prefix}pagination-arrow-font-size);
-    border-radius: var(--#{$prefix}pagination-arrow-border-radius);
-
-    &:focus {
-      background-color: var(--#{$prefix}pagination-focus-arrow-bg);
-    }
-
-    &::after,
-    &::before {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-repeat: no-repeat;
-      background-size: var(--#{$prefix}pagination-arrow-font-size);
-    }
-  }
-
-  .arrow:is(.arrow-prev, .arrow-next):not(.disabled) .page-link {
-    color: var(--#{$prefix}pagination-arrow-color);
-  }
-
-  // Arrow prev
-  .arrow.arrow-prev .page-link::before {
-    min-width: var(--#{$prefix}pagination-arrow-font-size);
-    min-height: var(--#{$prefix}pagination-arrow-font-size);
-    margin-right: var(--#{$prefix}ref-spacer-1);
-    content: "";
-    background-image: var(--#{$prefix}pagination-arrow-prev-icon-bg-image);
-    background-position: center left;
-  }
-
-  // Arrow next
-  .arrow.arrow-next .page-link::after {
-    width: var(--#{$prefix}pagination-arrow-font-size);
-    height: var(--#{$prefix}pagination-arrow-font-size);
-    margin-left: var(--#{$prefix}ref-spacer-1);
-    content: "";
-    background-image: var(--#{$prefix}pagination-arrow-next-icon-bg-image);
-    background-position: center right;
-  }
-
-  // Hide default icon
-  .arrow:is(.arrow-next, .arrow-prev).no-label .page-link > span {
-    display: none;
-  }
-
-  .arrow-prev.disabled .page-link::before {
-    background-image: var(--#{$prefix}pagination-disabled-arrow-prev-icon-bg-image);
-  }
-
-  .arrow-next.disabled .page-link::after {
-    background-image: var(--#{$prefix}pagination-disabled-arrow-next-icon-bg-image);
   }
 
   .page-link {
@@ -92,7 +15,14 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding: 0;
-    border-radius: var(--#{$prefix}pagination-page-border-radius);
+    border-radius: var(--#{$prefix}pagination-border-radius);
   }
 }
+
+.pagination-lg {
+  --#{$prefix}pagination-page-item-size: #{$pagination-page-item-size-lg};
+}
+
+.pagination-sm {
+  --#{$prefix}pagination-page-item-size: #{$pagination-page-item-size-sm};
+}

package/src/style/base/_tables.scss

@@ -21,7 +21,7 @@
   --#{$prefix}table-hover-bg: #{$table-hover-bg};
 
   width: 100%;
-  margin-bottom: var(--#{$prefix}ref-spacer-3);
+  margin-bottom: var(--#{$prefix}ref-spacer-4);
   vertical-align: $table-cell-vertical-align;
   border-color: var(--#{$prefix}table-border-color);
 

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

@@ -1,8 +1,6 @@
 @import "react-toastify/scss/main";
 
 @import "d-icon";
-@import "d-input";
-@import "d-input-select";
 @import "d-input-pin";
 @import "d-quick-action-button";
 @import "d-quick-action-select";

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

@@ -1,8 +1,8 @@
 .d-card-account {
   // Card
   --#{$prefix}card-border-width: 0;
-  --#{$prefix}card-spacer-y: var(--#{$prefix}ref-spacer-3);
-  --#{$prefix}card-spacer-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}card-spacer-y: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}card-spacer-x: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}card-color: var(--#{$prefix}body-color);
   // Card body
   --#{$prefix}card-body-gap: #{$spacer};

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

@@ -2,9 +2,9 @@
 
 .d-carousel {
   // Arrows
-  --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-4) * -1);
   // Pagination
-  --#{$prefix}carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-3) * -1);
+  --#{$prefix}carousel-pagination-bottom: calc(var(--#{$prefix}ref-spacer-4) * -1);
   --#{$prefix}carousel-pagination-page-bg: var(--#{$prefix}secondary-100);
   --#{$prefix}carousel-pagination-active-page-bg: var(--#{$prefix}secondary);
   // :focus