@snack-uikit/chips 0.28.12 → 0.28.14-preview-95e30571.0

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/styles.module.css

@@ -21,8 +21,6 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .choiceChip .spinner{
   display:inline-flex;
@@ -39,13 +37,6 @@
   align-items:center;
   min-width:0;
 }
-.choiceChip[data-size=xs]{
-  height:var(--size-chips-xs, 24px);
-  padding-left:var(--space-chips-container-padding-xs, 3px);
-  padding-right:var(--space-chips-container-padding-xs, 3px);
-  border-radius:var(--radius-chips-xs, 12px);
-  border-width:var(--border-width-chips-single, 1px);
-}
 .choiceChip[data-size=xs] .label{
   font-family:var(--light-label-s-font-family, SB Sans Interface);
   font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
   padding-right:var(--space-chips-label-layout-padding-xs, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=s]{
-  height:var(--size-chips-s, 32px);
-  padding-left:var(--space-chips-container-padding-s, 3px);
-  padding-right:var(--space-chips-container-padding-s, 3px);
-  border-radius:var(--radius-chips-s, 16px);
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
   padding-right:var(--space-chips-label-layout-padding-s, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=m]{
-  height:var(--size-chips-m, 40px);
-  padding-left:var(--space-chips-container-padding-m, 7px);
-  padding-right:var(--space-chips-container-padding-m, 7px);
-  border-radius:var(--radius-chips-m, 20px);
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
   padding-right:var(--space-chips-label-layout-padding-m, 8px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=l]{
-  height:var(--size-chips-l, 48px);
-  padding-left:var(--space-chips-container-padding-l, 11px);
-  padding-right:var(--space-chips-container-padding-l, 11px);
-  border-radius:var(--radius-chips-l, 24px);
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
   padding-right:var(--space-chips-label-layout-padding-l, 12px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
 .choiceChip .label,
 .choiceChip .value{
   color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
 }
 .choiceChip[data-loading]{
   cursor:progress;
-  background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-decor-activated, #b6bac7);
 }
 .choiceChip[data-loading] true .spinner{
   display:flex;
   align-items:center;
   justify-content:center;
 }
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+}
 .choiceChip[data-loading] .label,
 .choiceChip[data-loading] .value{
   color:var(--sys-neutral-text-support, #6d707f);
@@ -251,8 +255,6 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .choiceChip .spinner{
   display:inline-flex;
@@ -269,13 +271,6 @@
   align-items:center;
   min-width:0;
 }
-.choiceChip[data-size=xs]{
-  height:var(--size-chips-xs, 24px);
-  padding-left:var(--space-chips-container-padding-xs, 3px);
-  padding-right:var(--space-chips-container-padding-xs, 3px);
-  border-radius:var(--radius-chips-xs, 12px);
-  border-width:var(--border-width-chips-single, 1px);
-}
 .choiceChip[data-size=xs] .label{
   font-family:var(--light-label-s-font-family, SB Sans Interface);
   font-weight:var(--light-label-s-font-weight, Regular);
@@ -289,11 +284,11 @@
   padding-right:var(--space-chips-label-layout-padding-xs, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=s]{
-  height:var(--size-chips-s, 32px);
-  padding-left:var(--space-chips-container-padding-s, 3px);
-  padding-right:var(--space-chips-container-padding-s, 3px);
-  border-radius:var(--radius-chips-s, 16px);
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=s] .label{
@@ -309,11 +304,11 @@
   padding-right:var(--space-chips-label-layout-padding-s, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=m]{
-  height:var(--size-chips-m, 40px);
-  padding-left:var(--space-chips-container-padding-m, 7px);
-  padding-right:var(--space-chips-container-padding-m, 7px);
-  border-radius:var(--radius-chips-m, 20px);
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=m] .label{
@@ -329,11 +324,11 @@
   padding-right:var(--space-chips-label-layout-padding-m, 8px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=l]{
-  height:var(--size-chips-l, 48px);
-  padding-left:var(--space-chips-container-padding-l, 11px);
-  padding-right:var(--space-chips-container-padding-l, 11px);
-  border-radius:var(--radius-chips-l, 24px);
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=l] .label{
@@ -349,6 +344,17 @@
   padding-right:var(--space-chips-label-layout-padding-l, 12px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
 .choiceChip .label,
 .choiceChip .value{
   color:var(--sys-neutral-text-support, #6d707f);
@@ -416,8 +422,6 @@
 }
 .choiceChip[data-loading]{
   cursor:progress;
-  background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-decor-activated, #b6bac7);
 }
 .choiceChip[data-loading]:not([data-label]) .value{
   opacity:var(--opacity-a0, 0);
@@ -427,6 +431,10 @@
   align-items:center;
   justify-content:center;
 }
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+}
 .choiceChip[data-loading] .label,
 .choiceChip[data-loading] .value{
   color:var(--sys-neutral-text-support, #6d707f);

package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.d.ts

@@ -14,7 +14,7 @@ export type ChipChoiceDateProps = ChipChoiceCommonProps & {
     onChange?(value: Date): void;
     /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
     valueRender?(value?: Date): ReactNode;
-    mode?: Exclude<CalendarProps['mode'], 'range'>;
+    mode?: Exclude<CalendarProps['mode'], 'date-range' | 'month-range' | 'year-range'>;
     /** Колбек свойств для управления ячейками календаря */
     buildCalendarCellProps?: CalendarProps['buildCellProps'];
 } & (ChipChoiceDateWithSeconds | {

package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -67,7 +67,7 @@ function ChipChoiceDateRange(_a) {
   });
   return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
     content: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
-      mode: 'range',
+      mode: 'date-range',
       size: constants_2.CALENDAR_SIZE_MAP[size],
       value: selectedValue,
       onChangeValue: value => {

package/dist/cjs/components/ChipChoice/styles.module.css

@@ -21,8 +21,6 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .choiceChip .spinner{
   display:inline-flex;
@@ -39,13 +37,6 @@
   align-items:center;
   min-width:0;
 }
-.choiceChip[data-size=xs]{
-  height:var(--size-chips-xs, 24px);
-  padding-left:var(--space-chips-container-padding-xs, 3px);
-  padding-right:var(--space-chips-container-padding-xs, 3px);
-  border-radius:var(--radius-chips-xs, 12px);
-  border-width:var(--border-width-chips-single, 1px);
-}
 .choiceChip[data-size=xs] .label{
   font-family:var(--light-label-s-font-family, SB Sans Interface);
   font-weight:var(--light-label-s-font-weight, Regular);
@@ -59,11 +50,11 @@
   padding-right:var(--space-chips-label-layout-padding-xs, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=s]{
-  height:var(--size-chips-s, 32px);
-  padding-left:var(--space-chips-container-padding-s, 3px);
-  padding-right:var(--space-chips-container-padding-s, 3px);
-  border-radius:var(--radius-chips-s, 16px);
+.choiceChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=s] .label{
@@ -79,11 +70,11 @@
   padding-right:var(--space-chips-label-layout-padding-s, 4px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=m]{
-  height:var(--size-chips-m, 40px);
-  padding-left:var(--space-chips-container-padding-m, 7px);
-  padding-right:var(--space-chips-container-padding-m, 7px);
-  border-radius:var(--radius-chips-m, 20px);
+.choiceChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=m] .label{
@@ -99,11 +90,11 @@
   padding-right:var(--space-chips-label-layout-padding-m, 8px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
-.choiceChip[data-size=l]{
-  height:var(--size-chips-l, 48px);
-  padding-left:var(--space-chips-container-padding-l, 11px);
-  padding-right:var(--space-chips-container-padding-l, 11px);
-  border-radius:var(--radius-chips-l, 24px);
+.choiceChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .choiceChip[data-size=l] .label{
@@ -119,6 +110,17 @@
   padding-right:var(--space-chips-label-layout-padding-l, 12px);
   gap:var(--space-chips-label-layout-gap, 2px);
 }
+.choiceChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.choiceChip{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
 .choiceChip .label,
 .choiceChip .value{
   color:var(--sys-neutral-text-support, #6d707f);
@@ -186,14 +188,16 @@
 }
 .choiceChip[data-loading]{
   cursor:progress;
-  background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-decor-activated, #b6bac7);
 }
 .choiceChip[data-loading] true .spinner{
   display:flex;
   align-items:center;
   justify-content:center;
 }
+.choiceChip[data-loading]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
+}
 .choiceChip[data-loading] .label,
 .choiceChip[data-loading] .value{
   color:var(--sys-neutral-text-support, #6d707f);

package/dist/cjs/components/ChipToggle/styles.module.css

@@ -15,14 +15,16 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
+}
+.toggleChipContent .spinner{
+  display:inline-flex;
+}
+.toggleChipContent{
   justify-content:center;
   color:var(--sys-neutral-text-support, #6d707f);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
-.toggleChipContent .spinner{
-  display:inline-flex;
-}
 
 .toggleChipInput{
   pointer-events:none;
@@ -44,15 +46,6 @@
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }
 
-.toggleChip{
-  position:relative;
-  min-width:0;
-  margin:0;
-  padding:0;
-  border:none;
-  outline:0;
-  outline-offset:0;
-}
 .toggleChip .icon{
   display:inline-flex;
 }
@@ -141,6 +134,15 @@
   border-radius:var(--radius-chips-l, 24px);
   border-width:var(--border-width-chips-single, 1px);
 }
+.toggleChip{
+  position:relative;
+  min-width:0;
+  margin:0;
+  padding:0;
+  border:none;
+  outline:0;
+  outline-offset:0;
+}
 .toggleChip .icon{
   color:var(--sys-neutral-text-support, #6d707f);
 }

package/dist/esm/components/ChipAssist/styles.module.css

@@ -15,10 +15,6 @@
   border-style:solid;
   outline:0;
   outline-offset:0;
-  justify-content:center;
-  color:var(--sys-neutral-text-support, #6d707f);
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .assistChip .spinner{
   display:inline-flex;
@@ -35,13 +31,6 @@
   align-items:center;
   min-width:0;
 }
-.assistChip[data-size=xs]{
-  height:var(--size-chips-xs, 24px);
-  padding-left:var(--space-chips-container-padding-xs, 3px);
-  padding-right:var(--space-chips-container-padding-xs, 3px);
-  border-radius:var(--radius-chips-xs, 12px);
-  border-width:var(--border-width-chips-single, 1px);
-}
 .assistChip[data-size=xs] .label{
   font-family:var(--sans-label-s-font-family, SB Sans Interface);
   font-weight:var(--sans-label-s-font-weight, Semibold);
@@ -54,11 +43,11 @@
   padding-left:var(--space-chips-label-layout-padding-xs, 4px);
   padding-right:var(--space-chips-label-layout-padding-xs, 4px);
 }
-.assistChip[data-size=s]{
-  height:var(--size-chips-s, 32px);
-  padding-left:var(--space-chips-container-padding-s, 3px);
-  padding-right:var(--space-chips-container-padding-s, 3px);
-  border-radius:var(--radius-chips-s, 16px);
+.assistChip[data-size=xs]{
+  height:var(--size-chips-xs, 24px);
+  padding-left:var(--space-chips-container-padding-xs, 3px);
+  padding-right:var(--space-chips-container-padding-xs, 3px);
+  border-radius:var(--radius-chips-xs, 12px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .assistChip[data-size=s] .label{
@@ -73,11 +62,11 @@
   padding-left:var(--space-chips-label-layout-padding-s, 4px);
   padding-right:var(--space-chips-label-layout-padding-s, 4px);
 }
-.assistChip[data-size=m]{
-  height:var(--size-chips-m, 40px);
-  padding-left:var(--space-chips-container-padding-m, 7px);
-  padding-right:var(--space-chips-container-padding-m, 7px);
-  border-radius:var(--radius-chips-m, 20px);
+.assistChip[data-size=s]{
+  height:var(--size-chips-s, 32px);
+  padding-left:var(--space-chips-container-padding-s, 3px);
+  padding-right:var(--space-chips-container-padding-s, 3px);
+  border-radius:var(--radius-chips-s, 16px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .assistChip[data-size=m] .label{
@@ -92,11 +81,11 @@
   padding-left:var(--space-chips-label-layout-padding-m, 8px);
   padding-right:var(--space-chips-label-layout-padding-m, 8px);
 }
-.assistChip[data-size=l]{
-  height:var(--size-chips-l, 48px);
-  padding-left:var(--space-chips-container-padding-l, 11px);
-  padding-right:var(--space-chips-container-padding-l, 11px);
-  border-radius:var(--radius-chips-l, 24px);
+.assistChip[data-size=m]{
+  height:var(--size-chips-m, 40px);
+  padding-left:var(--space-chips-container-padding-m, 7px);
+  padding-right:var(--space-chips-container-padding-m, 7px);
+  border-radius:var(--radius-chips-m, 20px);
   border-width:var(--border-width-chips-single, 1px);
 }
 .assistChip[data-size=l] .label{
@@ -111,6 +100,19 @@
   padding-left:var(--space-chips-label-layout-padding-l, 12px);
   padding-right:var(--space-chips-label-layout-padding-l, 12px);
 }
+.assistChip[data-size=l]{
+  height:var(--size-chips-l, 48px);
+  padding-left:var(--space-chips-container-padding-l, 11px);
+  padding-right:var(--space-chips-container-padding-l, 11px);
+  border-radius:var(--radius-chips-l, 24px);
+  border-width:var(--border-width-chips-single, 1px);
+}
+.assistChip{
+  justify-content:center;
+  color:var(--sys-neutral-text-support, #6d707f);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+}
 .assistChip .icon{
   color:var(--sys-neutral-text-light, #8b8e9b);
 }
@@ -142,9 +144,6 @@
 }
 .assistChip[data-loading]{
   cursor:progress;
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-decor-activated, #b6bac7);
 }
 .assistChip[data-loading][data-variant=label-only] .label{
   opacity:var(--opacity-a0, 0);
@@ -158,4 +157,9 @@
   display:flex;
   align-items:center;
   justify-content:center;
+}
+.assistChip[data-loading]{
+  color:var(--sys-neutral-text-main, #41424e);
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-activated, #b6bac7);
 }