@itcase/ui 1.8.110 → 1.8.112

package/dist/components/Tile.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_C76te22j.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_Cstv1LFr.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
@@ -23,7 +23,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 
 var tileAppearanceShape = {
     circular: {

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_C76te22j.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_Cstv1LFr.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -22,5 +22,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BnUIX0QT.js';
-import '../Text_es_CtCwsa3V.js';
+import '../Link_es_XiqbdwLp.js';
+import '../Text_es_CwV9rjFD.js';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_C76te22j.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_Cstv1LFr.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -22,5 +22,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_BnUIX0QT.js';
-import '../Text_es_CtCwsa3V.js';
+import '../Link_es_XiqbdwLp.js';
+import '../Text_es_CwV9rjFD.js';

package/dist/components/Warning.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_C76te22j.js';
-import { T as Text } from '../Text_es_CtCwsa3V.js';
+import { I as Icon } from '../Icon_es_Cstv1LFr.js';
+import { T as Text } from '../Text_es_CwV9rjFD.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
@@ -12,7 +12,7 @@ import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_BnUIX0QT.js';
+import '../Link_es_XiqbdwLp.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';

package/dist/css/components/Checkbox/Checkbox.css

@@ -41,14 +41,7 @@
       display: flex;
       flex: 1;
       z-index: 1;
-      &_shape {
-        &_rounded {
-          border-radius: 4px;
-        }
-        &_circular {
-          border-radius: 50%;
-        }
-      }
+      transition: var(--checkbox-item-transition);
     }
     ^&__state-checkmark {
       width: 5px;
@@ -116,43 +109,465 @@
     }
   }
 }
-.checkbox {
-  &_shape {
-    &_rounded {
-      border-radius: 4px;
-      position: relative;
-      overflow: hidden;
+.checkbox_fill {
+  &_active {
+    &_hover {
+      &_none {
+        background-color: transparent;
+      }
+      @each $type in accent, primary, secondary, surface, error, warning,
+        success, danger, info, disabled {
+        @each $color in primary, secondary, tertiary, quaternary {
+          /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+          &_$(type) {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-$(color));
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-$(color)-hover);
+                  }
+                }
+                &-active {
+                  &:hover {
+                    & .checkbox__state {
+                      background: var(
+                        --color-$(type)-fill-$(color)-active-hover
+                      );
+                    }
+                  }
+                }
+              }
+              &-active {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-$(color)-active);
+                  }
+                }
+              }
+            }
+            &-hover {
+              &-$(color) {
+                &:hover {
+                  & .checkbox__state {
+                    background: var(--color-$(type)-fill-hover-$(color));
+                  }
+                }
+              }
+            }
+          }
+
+          /* } */
+        }
+      }
+      @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
+        orange, clementine, apricot, papaya, kumquat, light-orange, peach,
+        flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
+        mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
+        dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
+        ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
+        lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
+        northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
+        antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
+        coastal-gray, white, black, alto, athens-gray, sonic-silver {
+        &_$(palette) {
+          &:hover {
+            & .checkbox__state {
+              background: var(--color-palette-$(palette));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_active {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-$(color) {
+            & .checkbox__state {
+              background: var(--color-$(type)-fill-$(color));
+            }
+          }
+          &-$(color)-active {
+            & .checkbox__state {
+              background: var(--color-$(type)-fill-active-$(color));
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .checkbox__state {
+          background: var(--color-palette-$(palette));
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_hover {
+    &_none {
+      background-color: transparent;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+        &_$(type) {
+          &-$(color) {
+            &:hover {
+              & .checkbox__state {
+                background: var(--color-$(type)-fill-$(color));
+              }
+            }
+            &-hover {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-$(color)-hover);
+                }
+              }
+            }
+          }
+          &-hover {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  background: var(--color-$(type)-fill-hover-$(color));
+                }
+              }
+            }
+          }
+        }
+
+        /* } */
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox__state {
+            background: var(--color-palette-$(palette));
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_fill {
+  &_none {
+    background-color: transparent;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
+      &_$(type) {
+        &-$(color) {
+          & .checkbox__state {
+            background: var(--color-$(type)-fill-$(color));
+          }
+          /* &$(alpha) {
+              background: var(--color-$(type)-$(color)-$(alpha));
+            } */
+        }
+      }
+      /* } */
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .checkbox__state {
+        background: var(--color-palette-$(palette));
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .checkbox__state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox__state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_active {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              & .checkbox__state {
+                border-width: 1px;
+                border-color: var(--color-$(type)-border-$(color));
+                border-style: solid;
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        & .checkbox__state {
+          border-width: 1px;
+          border-color: var(--color-palette-$(palette));
+          border-style: solid;
+        }
+      }
+    }
+  }
+}
+.checkboxborder-color {
+  &_hover {
+    &_none {
+      border-width: 1px;
+      border-color: transparent;
+      border-style: solid;
+    }
+    @each $type in accent, primary, secondary, surface, error, warning, success,
+      danger, info, disabled {
+      @each $color in primary, secondary, tertiary, quaternary {
+        &_$(type) {
+          &-border {
+            &-$(color) {
+              &:hover {
+                & .checkbox_state {
+                  border-width: 1px;
+                  border-color: var(--color-$(type)-border-$(color));
+                  border-style: solid;
+                }
+              }
+              &-hover {
+                &:hover {
+                  & .checkbox_state {
+                    border-width: 1px;
+                    border-color: var(--color-$(type)-border-$(color));
+                    border-style: solid;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
+      clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
+      rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
+      canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
+      surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
+      denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
+      lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
+      storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
+      alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
+      gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
+      alto, athens-gray, sonic-silver {
+      &_$(palette) {
+        &:hover {
+          & .checkbox_state {
+            border-width: 1px;
+            border-color: var(--color-palette-$(palette));
+            border-style: solid;
+          }
+        }
+        &-hover {
+          &:hover {
+            & .checkbox_state {
+              border-width: 1px;
+              border-color: var(--color-palette-$(palette));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.checkbox_border-color {
+  &_none {
+    border-width: 1px;
+    border-color: transparent;
+    border-style: solid;
+  }
+  @each $type in accent, primary, secondary, surface, error, warning, success,
+    danger, info, disabled {
+    @each $color in primary, secondary, tertiary, quaternary {
+      &_$(type) {
+        &-border {
+          &-$(color) {
+            & .checkbox__state {
+              border-width: 1px;
+              border-color: var(--color-$(type)-border-$(color));
+              border-style: solid;
+            }
+          }
+        }
+      }
+    }
+  }
+  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
+    pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
+    pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
+    pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
+    deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
+    delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
+    pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
+    dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
+    stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
+    sonic-silver {
+    &_$(palette) {
+      & .checkbox__state {
+        border-width: 1px;
+        border-color: var(--color-palette-$(palette));
+        border-style: solid;
+      }
     }
   }
 }
 :root {
   --checkbox-column-gap: 12px;
   --checkbox-row-gap: 4px;
-  --checkbox-success-border: var(--color-success-border-secondary);
-  --checkbox-error-border: var(--color-error-border-secondary);
-  --checkbox-focus-border: var(--color-surface-border-quaternary);
+
+  --checkbox-item-transition: all 0.3s ease 0s;
 
   --checkbox-area-xl-width: 24px;
   --checkbox-area-xl-height: 24px;
-  --checkbox-xl-width: 16px;
-  --checkbox-xl-height: 16px;
+  --checkbox-xl-width: 22px;
+  --checkbox-xl-height: 22px;
   --checkbox-xl-gap: 0 2px;
 
   --checkbox-area-l-width: 20px;
   --checkbox-area-l-height: 20px;
-  --checkbox-l-width: 16px;
-  --checkbox-l-height: 16px;
+  --checkbox-l-width: 18px;
+  --checkbox-l-height: 18px;
   --checkbox-l-gap: 0 2px;
 
   --checkbox-area-m-width: 16px;
   --checkbox-area-m-height: 16px;
-  --checkbox-m-width: 12px;
-  --checkbox-m-height: 12px;
+  --checkbox-m-width: 14px;
+  --checkbox-m-height: 14px;
   --checkbox-m-gap: 0 2px;
 
   --checkbox-area-s-width: 14px;
   --checkbox-area-s-height: 14px;
-  --checkbox-s-width: 10px;
-  --checkbox-s-height: 10px;
+  --checkbox-s-width: 12px;
+  --checkbox-s-height: 12px;
   --checkbox-s-gap: 0 2px;
 }

package/dist/css/components/Choice/Choice.css

@@ -2,7 +2,6 @@
   margin: 2px 0;
   position: relative;
   display: flex;
-
   /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
@@ -23,6 +22,7 @@
     width: 100%;
     text-align: center;
     position: relative;
+    justify-content: center;
     display: flex;
     align-items: center;
     z-index: 3;
@@ -47,6 +47,11 @@
       &_$(size) {
         min-height: var(--choice-item-$(size)-min-height);
         padding: var(--choice-item-$(size)-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-$(size)-width);
+          height: var(--choice-item-icon-$(size)-height);
+          padding: 0;
+        }
         ^^&-label {
           gap: var(--choice-item-$(size)-gap);
         }
@@ -156,12 +161,18 @@
   --choice-item-l-padding: 0px 12px;
   --choice-item-l-min-height: 44px;
   --choice-item-l-gap: 8px;
+  --choice-item-icon-l-width: 44px;
+  --choice-item-icon-l-height: 44px;
 
   --choice-item-m-padding: 0px 12px;
   --choice-item-m-min-height: 36px;
   --choice-item-m-gap: 8px;
+  --choice-item-icon-m-width: 36px;
+  --choice-item-icon-m-height: 36px;
 
   --choice-item-s-padding: 0px 6px;
   --choice-item-s-min-height: 24px;
   --choice-item-s-gap: 8px;
+  --choice-item-icon-s-width: 24px;
+  --choice-item-icon-s-height: 24px;
 }

package/dist/css/components/Choice/css/__item/choice__item.css

@@ -2,7 +2,6 @@
   margin: 2px 0;
   position: relative;
   display: flex;
-
   /*
   &:not(:last-child) {
     border-right: var(--chioce-item-border-right);
@@ -23,6 +22,7 @@
     width: 100%;
     text-align: center;
     position: relative;
+    justify-content: center;
     display: flex;
     align-items: center;
     z-index: 3;

package/dist/css/components/Choice/css/__item/choice__item_size.css

@@ -4,6 +4,11 @@
       &_$(size) {
         min-height: var(--choice-item-$(size)-min-height);
         padding: var(--choice-item-$(size)-padding);
+        &^^&_icon {
+          width: var(--choice-item-icon-$(size)-width);
+          height: var(--choice-item-icon-$(size)-height);
+          padding: 0;
+        }
         ^^&-label {
           gap: var(--choice-item-$(size)-gap);
         }