@sberbusiness/triplex-next 1.6.1 → 1.8.0

package/components/DateRange/DateRange.js

@@ -3,25 +3,25 @@ import { c as i, k as c } from "../../chunks/vendor-D3hUOusX.js";
 import { CaretleftStrokeSrvIcon20 as D, MinusStrokeSrvIcon20 as M, CaretrightStrokeSrvIcon20 as Y } from "@sberbusiness/icons-next";
 import { dateFormatYYYYMMDD as r } from "../../consts/DateConst.js";
 import { EDateRangeShiftUnit as h } from "./enums.js";
-const C = "dateRange__d51ca2e0", E = "dateRangeButton__e4fd89d7", F = "separator__08df03ef", d = {
+const C = "dateRange__42b10f55", E = "dateRangeButton__0efd6b49", F = "separator__37454164", d = {
   dateRange: C,
   dateRangeButton: E,
   separator: F
 }, j = ({
   children: y,
-  className: p,
-  value: R,
+  className: R,
+  value: f,
   onChange: o,
   shiftAmount: n = 1,
   shiftUnit: s = h.MONTH,
-  hideNavigation: f,
+  hideNavigation: p,
   renderPickerFrom: g,
   renderPickerTo: k,
   renderButtonForward: u,
   renderButtonBack: S,
-  ...x
+  ...b
 }) => {
-  const [t, a] = R, b = i(d.dateRange, p), B = (e) => {
+  const [t, a] = f, x = i(d.dateRange, R), B = (e) => {
     !e || !a || e <= a ? o([e, a]) : o([e, ""]);
   }, I = (e) => {
     !e || !t || e >= t ? o([t, e]) : o(["", e]);
@@ -42,8 +42,8 @@ const C = "dateRange__d51ca2e0", E = "dateRangeButton__e4fd89d7", F = "separator
       l.add(n, s).format(r)
     ]);
   };
-  return /* @__PURE__ */ v("div", { className: b, ...x, children: [
-    !f && S({
+  return /* @__PURE__ */ v("div", { className: x, ...b, children: [
+    !p && S({
       children: /* @__PURE__ */ m(D, { paletteIndex: 5 }),
       className: i(d.dateRangeButton, { disabled: !(t && a) }),
       disabled: !(t && a),
@@ -58,7 +58,7 @@ const C = "dateRange__d51ca2e0", E = "dateRangeButton__e4fd89d7", F = "separator
       onChange: I,
       value: a
     }),
-    !f && u({
+    !p && u({
       children: /* @__PURE__ */ m(Y, { paletteIndex: 5 }),
       className: i(d.dateRangeButton, { disabled: !(t && a) }),
       disabled: !(t && a),

package/components/DesignTokens/DesignTokenUtils.js

@@ -7,7 +7,7 @@ import { m as T } from "../../chunks/vendor-D3hUOusX.js";
 const n = {
   getCSSVariableByTokenGroup: (t, s) => {
     const e = Object.keys(t)[0], r = "triplex-next";
-    let o = "1.6.1";
+    let o = "1.8.0";
     return o = o.replace(/\./g, "-"), Object.keys(t[e]).map(
       (m) => `--${r}-${e}-${m}-${o}: ${n.getTokenValue(
         t[e][m],

package/components/DesignTokens/DesignTokensComponents.js

@@ -13,14 +13,14 @@ import { Radio_Tokens as a } from "./components/Radio.js";
 import { Typography_Tokens as k } from "./components/Typography.js";
 import { Tooltip_Tokens as I } from "./components/Tooltip.js";
 import { AlertContext_Tokens as f } from "./components/AlertContext.js";
-import { AlertProcess_Tokens as H } from "./components/AlertProcess.js";
-import { Divider_Tokens as l } from "./components/Divider.js";
+import { AlertProcess_Tokens as l } from "./components/AlertProcess.js";
+import { Divider_Tokens as H } from "./components/Divider.js";
 import { Dropdown_Tokens as G } from "./components/Dropdown.js";
 import { DropdownList_Tokens as _ } from "./components/DropdownList.js";
 import { DropdownMobile_Tokens as d } from "./components/DropdownMobile.js";
 import { DropdownMobileList_Tokens as S } from "./components/DropdownMobileList.js";
-import { Overlay_Tokens as c } from "./components/Overlay.js";
-import { ListItem_Tokens as g } from "./components/ListItem.js";
+import { Overlay_Tokens as g } from "./components/Overlay.js";
+import { ListItem_Tokens as c } from "./components/ListItem.js";
 import { ListItemControlsButton_Tokens as C } from "./components/ListItemControlsButton.js";
 import { ListMaster_Tokens as M } from "./components/ListMaster.js";
 import { Marker_Tokens as u } from "./components/Marker.js";
@@ -36,34 +36,35 @@ import { Stepper_Tokens as P } from "./components/Stepper.js";
 import { HeaderPage_Tokens as v } from "./components/HeaderPage.js";
 import { FooterPage_Tokens as A } from "./components/FooterPage.js";
 import { Island_Tokens as O } from "./components/Island.js";
-import { IslandAccordion_Tokens as N } from "./components/IslandAccordion.js";
+import { IslandAccordion_Tokens as W } from "./components/IslandAccordion.js";
+import { IslandWidget_Tokens as N } from "./components/IslandWidget.js";
 import { TableBasic_Tokens as R } from "./components/TableBasic.js";
 import { Chip_Tokens as U } from "./components/Chip.js";
-import { LightBox_Tokens as W } from "./components/LightBox.js";
-import { Tag_Tokens as Z } from "./components/Tag.js";
-import { Notification_Tokens as E } from "./components/Notification.js";
-import { SMSInput_Tokens as V } from "./components/SMSInput.js";
-import { StatusTracker_Tokens as j } from "./components/StatusTracker.js";
-import { Step_Tokens as q } from "./components/Step.js";
-import { ModalWindow_Tokens as z } from "./components/ModalWindow.js";
-import { TopOverlay_Tokens as J } from "./components/TopOverlay.js";
-import { SmallInput_Tokens as K } from "./components/SmallInput.js";
-import { Slider_Tokens as Q } from "./components/Slider.js";
-const Ko = {
+import { LightBox_Tokens as Z } from "./components/LightBox.js";
+import { Tag_Tokens as E } from "./components/Tag.js";
+import { Notification_Tokens as V } from "./components/Notification.js";
+import { SMSInput_Tokens as j } from "./components/SMSInput.js";
+import { StatusTracker_Tokens as q } from "./components/StatusTracker.js";
+import { Step_Tokens as z } from "./components/Step.js";
+import { ModalWindow_Tokens as J } from "./components/ModalWindow.js";
+import { TopOverlay_Tokens as K } from "./components/TopOverlay.js";
+import { SmallInput_Tokens as Q } from "./components/SmallInput.js";
+import { Slider_Tokens as X } from "./components/Slider.js";
+const Xo = {
   AlertContext: r(
     o.LIGHT,
     f
   ),
   AlertProcess: r(
     o.LIGHT,
-    H
+    l
   ),
   Button: r(o.LIGHT, e),
   Calendar: r(o.LIGHT, t),
   Card: r(o.LIGHT, x),
   Checkbox: r(o.LIGHT, m),
   Chip: r(o.LIGHT, U),
-  Divider: r(o.LIGHT, l),
+  Divider: r(o.LIGHT, H),
   Dropdown: r(o.LIGHT, G),
   DropdownList: r(
     o.LIGHT,
@@ -88,11 +89,15 @@ const Ko = {
   ),
   Island: r(o.LIGHT, O),
   IslandAccordion: r(
+    o.LIGHT,
+    W
+  ),
+  IslandWidget: r(
     o.LIGHT,
     N
   ),
   Link: r(o.LIGHT, n),
-  ListItem: r(o.LIGHT, g),
+  ListItem: r(o.LIGHT, c),
   ListItemControlsButton: r(
     o.LIGHT,
     C
@@ -115,7 +120,7 @@ const Ko = {
     o.LIGHT,
     D
   ),
-  Overlay: r(o.LIGHT, c),
+  Overlay: r(o.LIGHT, g),
   Pagination: r(
     o.LIGHT,
     w
@@ -130,16 +135,16 @@ const Ko = {
     F
   ),
   Skeleton: r(o.LIGHT, y),
-  SMSInput: r(o.LIGHT, V),
-  Slider: r(o.LIGHT, Q),
-  Step: r(o.LIGHT, q),
+  SMSInput: r(o.LIGHT, j),
+  Slider: r(o.LIGHT, X),
+  Step: r(o.LIGHT, z),
   Stepper: r(o.LIGHT, P),
   TableBasic: r(
     o.LIGHT,
     R
   ),
   Tabs: r(o.LIGHT, i),
-  Tag: r(o.LIGHT, Z),
+  Tag: r(o.LIGHT, E),
   TabsLine: r(o.LIGHT, s),
   Tooltip: r(o.LIGHT, I),
   Typography: r(
@@ -150,29 +155,29 @@ const Ko = {
     o.LIGHT,
     h
   ),
-  LightBox: r(o.LIGHT, W),
+  LightBox: r(o.LIGHT, Z),
   Notification: r(
     o.LIGHT,
-    E
+    V
   ),
   StatusTracker: r(
     o.LIGHT,
-    j
+    q
   ),
   ModalWindow: r(
     o.LIGHT,
-    z
+    J
   ),
   TopOverlay: r(
     o.LIGHT,
-    J
+    K
   ),
   SmallInput: r(
     o.LIGHT,
-    K
+    Q
   )
 };
 export {
-  Ko as DesignTokensComponents
+  Xo as DesignTokensComponents
 };
 //# sourceMappingURL=DesignTokensComponents.js.map

package/components/DesignTokens/DesignTokensComponentsThemeDark.js

@@ -13,20 +13,20 @@ import { LoaderScreen_Tokens as k } from "./components/LoaderScreen.js";
 import { Radio_Tokens as D } from "./components/Radio.js";
 import { Typography_Tokens as A } from "./components/Typography.js";
 import { Tooltip_Tokens as f } from "./components/Tooltip.js";
-import { AlertContext_Tokens as R } from "./components/AlertContext.js";
-import { AlertProcess_Tokens as l } from "./components/AlertProcess.js";
+import { AlertContext_Tokens as l } from "./components/AlertContext.js";
+import { AlertProcess_Tokens as R } from "./components/AlertProcess.js";
 import { Dropdown_Tokens as K } from "./components/Dropdown.js";
 import { DropdownList_Tokens as _ } from "./components/DropdownList.js";
 import { DropdownMobile_Tokens as d } from "./components/DropdownMobile.js";
 import { DropdownMobileList_Tokens as S } from "./components/DropdownMobileList.js";
-import { Overlay_Tokens as L } from "./components/Overlay.js";
-import { ListItem_Tokens as c } from "./components/ListItem.js";
-import { ListItemControlsButton_Tokens as g } from "./components/ListItemControlsButton.js";
+import { Overlay_Tokens as g } from "./components/Overlay.js";
+import { ListItem_Tokens as L } from "./components/ListItem.js";
+import { ListItemControlsButton_Tokens as c } from "./components/ListItemControlsButton.js";
 import { ListMaster_Tokens as C } from "./components/ListMaster.js";
 import { Marker_Tokens as M } from "./components/Marker.js";
 import { MarkerStatus_Tokens as u } from "./components/MarkerStatus.js";
-import { MultiselectField_Tokens as b } from "./components/MultiselectField.js";
-import { UploadZone_Tokens as I } from "./components/UploadZone.js";
+import { MultiselectField_Tokens as I } from "./components/MultiselectField.js";
+import { UploadZone_Tokens as b } from "./components/UploadZone.js";
 import { Pagination_Tokens as h } from "./components/Pagination.js";
 import { Card_Tokens as w } from "./components/Card.js";
 import { Skeleton_Tokens as x } from "./components/Skeleton.js";
@@ -36,27 +36,28 @@ import { Stepper_Tokens as F } from "./components/Stepper.js";
 import { HeaderPage_Tokens as P } from "./components/HeaderPage.js";
 import { FooterPage_Tokens as v } from "./components/FooterPage.js";
 import { Island_Tokens as O } from "./components/Island.js";
-import { IslandAccordion_Tokens as N } from "./components/IslandAccordion.js";
+import { IslandAccordion_Tokens as W } from "./components/IslandAccordion.js";
+import { IslandWidget_Tokens as N } from "./components/IslandWidget.js";
 import { TableBasic_Tokens as H } from "./components/TableBasic.js";
 import { Chip_Tokens as U } from "./components/Chip.js";
-import { LightBox_Tokens as W } from "./components/LightBox.js";
-import { Tag_Tokens as Z } from "./components/Tag.js";
-import { Notification_Tokens as E } from "./components/Notification.js";
-import { SMSInput_Tokens as G } from "./components/SMSInput.js";
-import { StatusTracker_Tokens as V } from "./components/StatusTracker.js";
-import { Step_Tokens as j } from "./components/Step.js";
-import { ModalWindow_Tokens as q } from "./components/ModalWindow.js";
-import { TopOverlay_Tokens as z } from "./components/TopOverlay.js";
-import { SmallInput_Tokens as J } from "./components/SmallInput.js";
-import { Slider_Tokens as Q } from "./components/Slider.js";
-const Jo = {
+import { LightBox_Tokens as Z } from "./components/LightBox.js";
+import { Tag_Tokens as E } from "./components/Tag.js";
+import { Notification_Tokens as G } from "./components/Notification.js";
+import { SMSInput_Tokens as V } from "./components/SMSInput.js";
+import { StatusTracker_Tokens as j } from "./components/StatusTracker.js";
+import { Step_Tokens as q } from "./components/Step.js";
+import { ModalWindow_Tokens as z } from "./components/ModalWindow.js";
+import { TopOverlay_Tokens as J } from "./components/TopOverlay.js";
+import { SmallInput_Tokens as Q } from "./components/SmallInput.js";
+import { Slider_Tokens as X } from "./components/Slider.js";
+const Xo = {
   AlertContext: r(
     o.DARK,
-    R
+    l
   ),
   AlertProcess: r(
     o.DARK,
-    l
+    R
   ),
   Button: r(o.DARK, t),
   Calendar: r(o.DARK, m),
@@ -88,14 +89,18 @@ const Jo = {
   ),
   Island: r(o.DARK, O),
   IslandAccordion: r(
+    o.DARK,
+    W
+  ),
+  IslandWidget: r(
     o.DARK,
     N
   ),
   Link: r(o.DARK, s),
-  ListItem: r(o.DARK, c),
+  ListItem: r(o.DARK, L),
   ListItemControlsButton: r(
     o.DARK,
-    g
+    c
   ),
   ListMaster: r(
     o.DARK,
@@ -113,9 +118,9 @@ const Jo = {
   ),
   MultiselectField: r(
     o.DARK,
-    b
+    I
   ),
-  Overlay: r(o.DARK, L),
+  Overlay: r(o.DARK, g),
   Pagination: r(
     o.DARK,
     h
@@ -130,16 +135,16 @@ const Jo = {
     B
   ),
   Skeleton: r(o.DARK, x),
-  SMSInput: r(o.DARK, G),
-  Slider: r(o.DARK, Q),
-  Step: r(o.DARK, j),
+  SMSInput: r(o.DARK, V),
+  Slider: r(o.DARK, X),
+  Step: r(o.DARK, q),
   Stepper: r(o.DARK, F),
   TableBasic: r(
     o.DARK,
     H
   ),
   Tabs: r(o.DARK, p),
-  Tag: r(o.DARK, Z),
+  Tag: r(o.DARK, E),
   TabsLine: r(o.DARK, T),
   Tooltip: r(o.DARK, f),
   Typography: r(
@@ -148,31 +153,31 @@ const Jo = {
   ),
   UploadZone: r(
     o.DARK,
-    I
+    b
   ),
-  LightBox: r(o.DARK, W),
+  LightBox: r(o.DARK, Z),
   Notification: r(
     o.DARK,
-    E
+    G
   ),
   StatusTracker: r(
     o.DARK,
-    V
+    j
   ),
   ModalWindow: r(
     o.DARK,
-    q
+    z
   ),
   TopOverlay: r(
     o.DARK,
-    z
+    J
   ),
   SmallInput: r(
     o.DARK,
-    J
+    Q
   )
 };
 export {
-  Jo as DesignTokensComponentsThemeDark
+  Xo as DesignTokensComponentsThemeDark
 };
 //# sourceMappingURL=DesignTokensComponentsThemeDark.js.map

package/components/DesignTokens/components/DropdownMobile.js

@@ -5,7 +5,7 @@ const r = [
   "Footer_Background",
   "Header_Background"
 ], o = {
-  Backdrop: [{ ref: "ColorDarkNeutralAlpha.40" }, { ref: "ColorDarkNeutralAlpha.40" }],
+  Backdrop: [{ ref: "ColorDarkNeutralAlpha.40" }, { ref: "ColorDarkNeutralAlpha.20" }],
   // var(--triplex-next-DropdownMobile-Backdrop)
   Border_Color: [{ ref: "ColorNeutral.20" }, { ref: "ColorDarkNeutral.80" }],
   // var(--triplex-next-DropdownMobile-Border_Color)

package/components/DesignTokens/components/Island.js

@@ -10,11 +10,11 @@ const e = [
   // var(--triplex-next-Island-Type1_Background)
   Type2_Background: [{ ref: "ColorNeutralAlpha.70" }, { ref: "ColorDarkNeutralAlpha.50" }],
   // var(--triplex-next-Island-Type2_Background)
-  Type3_Background: [{ ref: "ColorNeutral.90" }, { ref: "ColorDarkNeutral.30" }],
+  Type3_Background: [{ ref: "ColorNeutral.90" }, { ref: "ColorDarkNeutral.10" }],
   // var(--triplex-next-Island-Type3_Background)
   Type1_Shadow: [{ value: "none" }, { value: "none" }],
   // var(--triplex-next-Island-Type1_Shadow)
-  Type2_Shadow: [{ value: "0 0 0 1px #FFFFFF inset" }, { value: "0 0 0 1px #19BDB0 inset" }],
+  Type2_Shadow: [{ value: "0 0 0 1px #FFFFFF inset" }, { value: "0 0 0 1px #4f4f52 inset" }],
   // var(--triplex-next-Island-Type2_Shadow)
   Type3_Shadow: [{ value: "none" }, { value: "none" }]
   // var(--triplex-next-Island-Type3_Shadow)

package/components/DesignTokens/components/IslandWidget.js

@@ -0,0 +1,14 @@
+const o = ["ExtraFooter_Background", "ExtraFooter_Shadow"], r = {
+  ExtraFooter_Background: [{ ref: "ColorNeutral.100" }, { ref: "ColorDarkNeutral.40" }],
+  // var(--triplex-next-IslandWidget-ExtraFooter_Background)
+  ExtraFooter_Shadow: [
+    { value: "0 8px 7px -6px rgba(31, 31, 34, 0.08)" },
+    { value: "0 8px 7px -6px rgba(0, 0, 0, 0.35)" }
+  ]
+  // var(--triplex-next-IslandWidget-ExtraFooter_Shadow)
+};
+export {
+  r as IslandWidget_Tokens,
+  o as designTokensComponentsIslandWidgetKeys
+};
+//# sourceMappingURL=IslandWidget.js.map

package/components/DesignTokens/components/ModalWindow.js

@@ -1,7 +1,7 @@
 const o = ["Background", "Backdrop_Background"], r = {
-  Background: [{ ref: "ColorNeutral.60" }, { ref: "ColorDarkNeutral.20" }],
+  Background: [{ ref: "ColorNeutral.70" }, { ref: "ColorDarkNeutral.20" }],
   // var(--triplex-next-ModalWindow-Background)
-  Backdrop_Background: [{ ref: "ColorDarkNeutralAlpha.30" }, { ref: "ColorDarkNeutralAlpha.90" }]
+  Backdrop_Background: [{ value: "rgba(79, 79, 82, .5)" }, { value: "rgba(0, 0, 0, .5)" }]
   // var(--triplex-next-ModalWindow-Backdrop_Background)
 };
 export {

package/components/DesignTokens/components/Tabs.js

@@ -46,7 +46,7 @@ const r = [
   // var(--triplex-next-Tabs-Type2_Tab_Color_Hover)
   Tab_BorderColor_Default: [{ value: "transparent" }, { value: "transparent" }],
   // var(--triplex-next-Tabs-Tab_BorderColor_Default)
-  Tab_BorderColor_Focus: [{ value: "0 0 0 1px #FFD169 inset" }, { value: "0 0 0 1px #FFD169 inset" }]
+  Tab_BorderColor_Focus: [{ value: "#FFD169" }, { value: "#FFD169" }]
   // var(--triplex-next-Tabs-Tab_BorderColor_Focus)
 };
 export {

package/components/DesignTokens/components/TabsLine.js

@@ -4,7 +4,6 @@ const o = [
   "Color_Active",
   "Color_Default",
   "Color_Hover",
-  "Notification_Color",
   "Separator_Color",
   "Shadow_Focus"
 ], r = {
@@ -18,8 +17,6 @@ const o = [
   // var(--triplex-next-TabsLine-Color_Default)
   Color_Hover: [{ ref: "ColorDarkNeutralAlpha.0" }, { ref: "ColorNeutralAlpha.0" }],
   // var(--triplex-next-TabsLine-Color_Hover)
-  Notification_Color: [{ ref: "ColorWarning.70" }, { ref: "ColorWarning.70" }],
-  // var(--triplex-next-TabsLine-Notification_Color)
   Separator_Color: [{ ref: "ColorNeutral.20" }, { ref: "ColorDarkNeutral.80" }],
   // var(--triplex-next-TabsLine-Separator_Color)
   Shadow_Focus: [{ value: "0 0 0 1px #FFDD64 inset" }, { value: "0 0 0 1px #FFDD64 inset" }]