@daisforge/ui 1.21.0 → 1.22.0

package/components/TourWidget/index.mjs

@@ -1,186 +1,258 @@
-import { jsx as a, jsxs as c, Fragment as P } from "react/jsx-runtime";
-import { s as N } from "../../chunks/utils-u1KJ37g3.mjs";
-import { useContext as U, createContext as j, forwardRef as h, useId as Z } from "react";
-import { T as $ } from "../../chunks/AnalyticalWidget-BtyWKJuu.mjs";
-import { onDarkSurfaceTransparentTertiary as X, onDarkTextPrimary as W, onDarkTextSecondary as V, onDarkSurfaceSolidCardBrightness as q } from "@salutejs/sdds-themes/tokens/sdds_finai";
-import s, { css as b } from "styled-components";
-const d = "TourWidget__", e = {
-  root: `${d}root`,
-  horizontal: `${d}horizontal`,
-  vertical: `${d}vertical`,
-  header: `${d}header`,
-  headerTitle: `${d}header-title`,
-  headerDescription: `${d}header-description`,
-  content: `${d}content`,
-  footer: `${d}footer`,
-  gradient: `${d}gradient`,
-  shapeGradient: `${d}shape-gradient`,
-  bullets: `${d}bullets`,
-  bulletsTrack: `${d}bullets-track`,
-  bullet: `${d}bullet`,
-  bulletActive: `${d}bullet-active`,
-  bulletEdge: `${d}bullet-edge`
-}, _ = j({}), J = _.Provider, k = () => U(_), n = {
-  verticalGreen: "56 255 62",
-  horizontalGreen: "56 255 136",
-  cyanSolid: "0 224 255",
-  verticalBlue: "16 194 219",
-  horizontalBlue: "16 138 219",
-  verticalSlateBlue: "110 135 219",
-  horizontalSlateBlue: "90 117 207",
-  cyan: "0, 224, 255",
-  blue: "25, 154, 240",
-  periwinkle: "153, 176, 254",
-  green: "#56ff71",
-  greenTransparent: "rgba(86, 255, 113, 0)"
-}, y = {
-  vertical: `linear-gradient(
-    -45.68deg,
-    rgb(${n.verticalGreen}) 16.982%,
-    rgb(${n.cyanSolid}) 16.982%,
-    rgb(${n.verticalBlue}) 44.903%,
-    rgb(${n.verticalSlateBlue}) 69.826%
-  )`,
-  horizontal: `linear-gradient(
-    -45.68deg,
-    rgb(${n.horizontalGreen}) 16.982%,
-    rgb(${n.cyanSolid}) 16.982%,
-    rgb(${n.horizontalBlue}) 44.903%,
-    rgb(${n.horizontalSlateBlue}) 69.826%
-  )`,
-  fallback: `linear-gradient(
-    90deg,
-    rgba(${n.periwinkle}, 0.56) 0%,
-    rgba(${n.blue}, 0.76) 50%,
-    rgba(${n.cyan}, 0.84) 100%
-  )`,
-  oval: `linear-gradient(
-    180deg,
-    ${n.green} 0%,
-    ${n.greenTransparent} 100%
-  )`
-}, p = {
+import { jsx as d, jsxs as u, Fragment as q } from "react/jsx-runtime";
+import { s as F } from "../../chunks/utils-u1KJ37g3.mjs";
+import { useContext as J, createContext as K, forwardRef as p, useId as Q, useState as Y, useEffect as tt } from "react";
+import { T as N } from "../../chunks/AnalyticalWidget-BtyWKJuu.mjs";
+import { onDarkSurfaceSolidCardBrightness as et, onLightSurfaceSolidPrimary as z, surfaceTransparentTertiary as at, textPrimary as S, outlineAccentGradient as rt } from "@salutejs/sdds-themes/tokens/sdds_finai";
+import s, { css as x } from "styled-components";
+const n = "TourWidget__", a = {
+  root: `${n}root`,
+  horizontal: `${n}horizontal`,
+  vertical: `${n}vertical`,
+  header: `${n}header`,
+  headerTitle: `${n}header-title`,
+  headerDescription: `${n}header-description`,
+  content: `${n}content`,
+  footer: `${n}footer`,
+  gradient: `${n}gradient`,
+  shapeGradient: `${n}shape-gradient`,
+  bullets: `${n}bullets`,
+  bulletsTrack: `${n}bullets-track`,
+  bullet: `${n}bullet`,
+  bulletActive: `${n}bullet-active`,
+  bulletEdge: `${n}bullet-edge`
+}, _ = K({}), it = _.Provider, $ = () => J(_), t = {
+  background: "--tour-widget-background",
+  borderRadius: "--tour-widget-border-radius",
+  bulletActiveBackground: "--tour-widget-bullet-active-background",
+  bulletBackground: "--tour-widget-bullet-background",
+  bulletsOffset: "--tour-widget-bullets-offset",
+  bulletsWidth: "--tour-widget-bullets-width",
+  contentBorderRadius: "--tour-widget-content-border-radius",
+  gradientBackground: "--tour-widget-gradient-background",
+  gradientBlur: "--tour-widget-gradient-blur",
+  gradientFrameBottom: "--tour-widget-gradient-frame-bottom",
+  gradientFrameFade: "--tour-widget-gradient-frame-fade",
+  gradientFrameHeight: "--tour-widget-gradient-frame-height",
+  gradientFrameLeft: "--tour-widget-gradient-frame-left",
+  gradientFrameRight: "--tour-widget-gradient-frame-right",
+  gradientHeight: "--tour-widget-gradient-height",
+  gradientLeft: "--tour-widget-gradient-left",
+  gradientOpacity: "--tour-widget-gradient-opacity",
+  gradientTop: "--tour-widget-gradient-top",
+  gradientWidth: "--tour-widget-gradient-width",
+  inlineOvalDisplay: "--tour-widget-inline-oval-display",
+  minWidth: "--tour-widget-min-width",
+  ovalBackground: "--tour-widget-oval-background",
+  ovalBlur: "--tour-widget-oval-blur",
+  ovalBorderRadius: "--tour-widget-oval-border-radius",
+  ovalFrameDisplay: "--tour-widget-oval-frame-display",
+  ovalFrameHeight: "--tour-widget-oval-frame-height",
+  ovalHeight: "--tour-widget-oval-height",
+  ovalLeft: "--tour-widget-oval-left",
+  ovalOpacity: "--tour-widget-oval-opacity",
+  ovalTop: "--tour-widget-oval-top",
+  ovalWidth: "--tour-widget-oval-width",
+  shapeGradientMaskMiddle: "--tour-widget-shape-gradient-mask-middle",
+  shapeGradientMaskStart: "--tour-widget-shape-gradient-mask-start",
+  shapeGradientOpacity: "--tour-widget-shape-gradient-opacity",
+  shapeGradientPathOpacity: "--tour-widget-shape-gradient-path-opacity",
+  themeBackground: "--tour-widget-theme-background",
+  themeGradientHorizontal: "--tour-widget-theme-gradient-horizontal",
+  themeGradientHorizontalBlur: "--tour-widget-theme-gradient-horizontal-blur",
+  themeGradientOpacity: "--tour-widget-theme-gradient-opacity",
+  themeGradientVertical: "--tour-widget-theme-gradient-vertical",
+  themeGradientVerticalBlur: "--tour-widget-theme-gradient-vertical-blur",
+  themeOvalBackground: "--tour-widget-theme-oval-background",
+  themeOvalHorizontalBlur: "--tour-widget-theme-oval-horizontal-blur",
+  themeOvalHorizontalOpacity: "--tour-widget-theme-oval-horizontal-opacity",
+  themeOvalVerticalBlur: "--tour-widget-theme-oval-vertical-blur",
+  themeOvalVerticalOpacity: "--tour-widget-theme-oval-vertical-opacity",
+  themeShapeEnd: "--tour-widget-theme-shape-end",
+  themeShapeMiddle: "--tour-widget-theme-shape-middle",
+  themeShapeOpacity: "--tour-widget-theme-shape-opacity",
+  themeShapeStart: "--tour-widget-theme-shape-start"
+}, W = `linear-gradient(
+  270deg,
+  #00dfff 33.759%,
+  #51b7fb 63.268%,
+  #bbb0fc 84.246%
+)`, H = `linear-gradient(
+  180deg,
+  #56ff71 0%,
+  rgba(86, 255, 113, 0) 100%
+)`, v = {
+  light: {
+    [t.themeBackground]: z,
+    [t.themeGradientVertical]: W,
+    [t.themeGradientHorizontal]: W,
+    [t.themeGradientOpacity]: "0.53",
+    [t.themeGradientVerticalBlur]: "45px",
+    [t.themeGradientHorizontalBlur]: "45px",
+    [t.themeOvalBackground]: H,
+    [t.themeOvalVerticalOpacity]: "0.42",
+    [t.themeOvalHorizontalOpacity]: "0.42",
+    [t.themeOvalVerticalBlur]: "48px",
+    [t.themeOvalHorizontalBlur]: "48px",
+    [t.themeShapeOpacity]: "0.32",
+    [t.themeShapeStart]: "#bbb0fc",
+    [t.themeShapeMiddle]: "#00dfff",
+    [t.themeShapeEnd]: "#56ff71"
+  },
+  dark: {
+    [t.themeBackground]: et,
+    [t.themeGradientVertical]: `linear-gradient(
+      -45.68deg,
+      rgb(56 255 62) 16.982%,
+      rgb(0 224 255) 16.982%,
+      rgb(16 194 219) 44.903%,
+      rgb(110 135 219) 69.826%
+    )`,
+    [t.themeGradientHorizontal]: `linear-gradient(
+      -45.68deg,
+      rgb(56 255 136) 16.982%,
+      rgb(0 224 255) 16.982%,
+      rgb(16 138 219) 44.903%,
+      rgb(90 117 207) 69.826%
+    )`,
+    [t.themeGradientOpacity]: "1",
+    [t.themeGradientVerticalBlur]: "34px",
+    [t.themeGradientHorizontalBlur]: "46px",
+    [t.themeOvalBackground]: H,
+    [t.themeOvalVerticalOpacity]: "1",
+    [t.themeOvalHorizontalOpacity]: "0.82",
+    [t.themeOvalVerticalBlur]: "37px",
+    [t.themeOvalHorizontalBlur]: "86px",
+    [t.themeShapeOpacity]: "0.84",
+    [t.themeShapeStart]: "#6e87db",
+    [t.themeShapeMiddle]: "#00e0ff",
+    [t.themeShapeEnd]: "#56ff88"
+  }
+}, w = v.light, c = {
   radius: "14px",
   contentRadius: "6px",
-  cardBg: () => q,
-  titleColor: () => W,
-  descriptionColor: () => V
-}, K = b(["--tour-widget-gradient-frame-height:42%;--tour-widget-gradient-frame-left:0;--tour-widget-gradient-frame-right:0;--tour-widget-gradient-frame-bottom:0;--tour-widget-gradient-frame-fade:60%;--tour-widget-gradient-background:", ";--tour-widget-gradient-width:115%;--tour-widget-gradient-height:100%;--tour-widget-gradient-left:-15%;--tour-widget-gradient-top:80%;--tour-widget-gradient-blur:34px;--tour-widget-gradient-opacity:1;--tour-widget-oval-width:50%;--tour-widget-oval-height:90%;--tour-widget-oval-left:90%;--tour-widget-oval-top:70%;--tour-widget-oval-blur:37px;--tour-widget-oval-opacity:1;"], y.vertical), Q = b(["--tour-widget-gradient-frame-height:42%;--tour-widget-gradient-frame-left:0;--tour-widget-gradient-frame-right:0;--tour-widget-gradient-frame-bottom:0;--tour-widget-gradient-frame-fade:78%;--tour-widget-gradient-background:", ";--tour-widget-gradient-width:115%;--tour-widget-gradient-height:100%;--tour-widget-gradient-left:-10%;--tour-widget-gradient-top:60%;--tour-widget-gradient-blur:46px;--tour-widget-gradient-opacity:1;--tour-widget-oval-width:40%;--tour-widget-oval-height:126%;--tour-widget-oval-left:78%;--tour-widget-oval-top:34%;--tour-widget-oval-blur:86px;--tour-widget-oval-opacity:0.82;"], y.horizontal), Y = b(["", " display:flex;flex-direction:column;& .", "{padding:10px 10px 0 10px;}& .", "{padding-top:24px;padding-inline:10px;}& .", "{padding:24px 10px 10px;}"], K, e.content, e.header, e.footer), tt = b(["", " display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) max-content;align-items:stretch;& .", "{grid-column:1 / span 1;grid-row:1 / span 1;padding:10px 10px 0;}& .", "{grid-column:1 / span 1;grid-row:3 / span 1;align-self:end;margin-top:0;padding:24px 10px 10px;}&:has(> .", "){grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;}&:has(> .", ") .", "{grid-column:1;grid-row:1 / 4;padding:10px 0 10px 10px;}&:has(> .", ") .", "{grid-column:2;grid-row:1;padding:10px 10px 0 0;}&:has(> .", ") .", "{grid-column:2;grid-row:3;padding:0 10px 10px 0;}"], Q, e.header, e.footer, e.content, e.content, e.content, e.content, e.header, e.content, e.footer), et = ({
-  $orientation: t
-}) => t === "vertical" ? Y : tt, rt = s.div.attrs({
-  className: e.root
+  cardBg: () => `var(${t.themeBackground}, ${z})`,
+  titleColor: () => S,
+  descriptionColor: () => S
+}, ot = x(["", ":20%;", ":0;", ":0;", ":0;", ":60%;", ":var( ", ",", " );", ":115%;", ":100%;", ":-15%;", ":60%;", ":var( ", ",45px );", ":var( ", ",0.53 );", ":none;", ":block;", ":32%;", ":50%;", ":84%;", ":94%;", ":45%;", ":100%;", ":78%;", ":35%;", ":var(", ",48px);", ":var( ", ",0.42 );"], t.gradientFrameHeight, t.gradientFrameLeft, t.gradientFrameRight, t.gradientFrameBottom, t.gradientFrameFade, t.gradientBackground, t.themeGradientVertical, w[t.themeGradientVertical], t.gradientWidth, t.gradientHeight, t.gradientLeft, t.gradientTop, t.gradientBlur, t.themeGradientVerticalBlur, t.gradientOpacity, t.themeGradientOpacity, t.inlineOvalDisplay, t.ovalFrameDisplay, t.ovalFrameHeight, t.ovalBorderRadius, t.shapeGradientMaskStart, t.shapeGradientMaskMiddle, t.ovalWidth, t.ovalHeight, t.ovalLeft, t.ovalTop, t.ovalBlur, t.themeOvalVerticalBlur, t.ovalOpacity, t.themeOvalVerticalOpacity), dt = x(["", ":30%;", ":0;", ":0;", ":0;", ":78%;", ":var( ", ",", " );", ":115%;", ":100%;", ":-10%;", ":55%;", ":var( ", ",45px );", ":var( ", ",0.53 );", ":none;", ":block;", ":42%;", ":50%;", ":76%;", ":88%;", ":30%;", ":120%;", ":84%;", ":20%;", ":var(", ",48px);", ":var( ", ",0.42 );"], t.gradientFrameHeight, t.gradientFrameLeft, t.gradientFrameRight, t.gradientFrameBottom, t.gradientFrameFade, t.gradientBackground, t.themeGradientHorizontal, w[t.themeGradientHorizontal], t.gradientWidth, t.gradientHeight, t.gradientLeft, t.gradientTop, t.gradientBlur, t.themeGradientHorizontalBlur, t.gradientOpacity, t.themeGradientOpacity, t.inlineOvalDisplay, t.ovalFrameDisplay, t.ovalFrameHeight, t.ovalBorderRadius, t.shapeGradientMaskStart, t.shapeGradientMaskMiddle, t.ovalWidth, t.ovalHeight, t.ovalLeft, t.ovalTop, t.ovalBlur, t.themeOvalHorizontalBlur, t.ovalOpacity, t.themeOvalHorizontalOpacity), nt = x(["", " display:flex;flex-direction:column;& .", "{padding:12px 12px 0;}& .", "{padding-top:24px;padding-inline:12px;}& .", "{padding:24px 12px 12px;}"], ot, a.content, a.header, a.footer), lt = x(["", " display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) max-content;align-items:stretch;& .", "{grid-column:1 / span 1;grid-row:1 / span 1;padding:12px 12px 0;}& .", "{grid-column:1 / span 1;grid-row:3 / span 1;align-self:end;margin-top:0;padding:24px 12px 12px;}&:has(> .", "){grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;}&:has(> .", ") .", "{grid-column:1;grid-row:1 / 4;padding:12px 0 12px 12px;}&:has(> .", ") .", "{grid-column:2;grid-row:1;padding:12px 12px 0 0;}&:has(> .", ") .", "{grid-column:2;grid-row:3;padding:0 12px 12px 0;}"], dt, a.header, a.footer, a.content, a.content, a.content, a.content, a.header, a.content, a.footer), st = ({
+  $orientation: e
+}) => e === "vertical" ? nt : lt, gt = s.div.attrs({
+  className: a.root
 }).withConfig({
   displayName: "TourWidgetstyled__StyledContainer"
-})(["position:relative;isolation:isolate;overflow:hidden;min-width:var(--tour-widget-min-width,auto);width:fit-content;color:", ";background:var(--tour-widget-background,", ");border-radius:var(--tour-widget-border-radius,", ");& >:not(.", "):not(.", "){position:relative;z-index:1;}", " ", ""], p.titleColor, p.cardBg, p.radius, e.gradient, e.shapeGradient, et, ({
-  $css: t
-}) => t), it = s.svg.attrs({
-  className: e.shapeGradient,
+})(["position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-width:var(", ",auto);width:fit-content;color:", ";border:4px solid transparent;background:linear-gradient( var(", ",", "),var(", ",", ") ) padding-box,", " border-box;border-radius:var(", ",", ");& >:not(.", "):not(.", "){position:relative;z-index:1;}", " ", " ", ""], t.minWidth, c.titleColor, t.background, c.cardBg, t.background, c.cardBg, rt, t.borderRadius, c.radius, a.gradient, a.shapeGradient, ({
+  $isDark: e
+}) => v[e ? "dark" : "light"], st, ({
+  $css: e
+}) => e), ct = s.svg.attrs({
+  className: a.shapeGradient,
   focusable: "false",
   preserveAspectRatio: "none"
 }).withConfig({
   displayName: "TourWidgetstyled__StyledShapeGradient"
-})(["position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:var(--tour-widget-shape-gradient-opacity,0.84);-webkit-mask-image:linear-gradient( to bottom,transparent 42%,rgba(0,0,0,0.55) 58%,#000 100% );mask-image:linear-gradient( to bottom,transparent 42%,rgba(0,0,0,0.55) 58%,#000 100% );& path{opacity:var(--tour-widget-shape-gradient-path-opacity,0.86);}"]), at = s.div.attrs({
-  className: e.gradient
+})(["position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;clip-path:inset( 0 round max(0px,calc(var(", ",", ") - 4px)) );opacity:var( ", ",var(", ",0.32) );-webkit-mask-image:linear-gradient( to bottom,transparent var(", ",42%),rgba(0,0,0,0.55) var(", ",58%),#000 100% );mask-image:linear-gradient( to bottom,transparent var(", ",42%),rgba(0,0,0,0.55) var(", ",58%),#000 100% );& path{opacity:var(", ",0.86);}"], t.borderRadius, c.radius, t.shapeGradientOpacity, t.themeShapeOpacity, t.shapeGradientMaskStart, t.shapeGradientMaskMiddle, t.shapeGradientMaskStart, t.shapeGradientMaskMiddle, t.shapeGradientPathOpacity), M = s.div.attrs({
+  className: a.gradient
 }).withConfig({
   displayName: "TourWidgetstyled__StyledGradient"
-})(["position:absolute;z-index:0;left:var(--tour-widget-gradient-frame-left,0);right:var(--tour-widget-gradient-frame-right,0);bottom:var(--tour-widget-gradient-frame-bottom,0);height:var(--tour-widget-gradient-frame-height,36%);overflow:hidden;border-radius:inherit;pointer-events:none;mask-image:linear-gradient( to bottom,transparent 0%,#000 var(--tour-widget-gradient-frame-fade,24%),#000 100% );&::before,&::after{content:'';position:absolute;pointer-events:none;}&::before{width:var(--tour-widget-gradient-width);height:var(--tour-widget-gradient-height);left:var(--tour-widget-gradient-left);top:var(--tour-widget-gradient-top);background:var( --tour-widget-gradient-background,", " );filter:blur(var(--tour-widget-gradient-blur,69px));opacity:var(--tour-widget-gradient-opacity,1);}&::after{width:var(--tour-widget-oval-width);height:var(--tour-widget-oval-height);left:var(--tour-widget-oval-left);top:var(--tour-widget-oval-top);background:var( --tour-widget-oval-background,", " );filter:blur(var(--tour-widget-oval-blur,127px));opacity:var(--tour-widget-oval-opacity,1);}"], y.fallback, y.oval), ot = s.div.attrs({
-  className: e.header
+})(["position:absolute;z-index:0;left:var(", ",0);right:var(", ",0);bottom:var(", ",0);height:var(", ",36%);overflow:hidden;border-radius:max(0px,calc(var(", ",", ") - 4px));pointer-events:none;mask-image:linear-gradient( to bottom,transparent 0%,#000 var(", ",24%),#000 100% );&::before,&::after{content:'';position:absolute;pointer-events:none;}&::before{width:var(", ");height:var(", ");left:var(", ");top:var(", ");background:var( ", ",", " );filter:blur(var(", ",69px));opacity:var(", ",1);}&::after{display:var(", ",block);width:var(", ");height:var(", ");left:var(", ");top:var(", ");border-radius:var(", ",0);background:var( ", ",var( ", ",", " ) );filter:blur(var(", ",127px));opacity:var(", ",1);}"], t.gradientFrameLeft, t.gradientFrameRight, t.gradientFrameBottom, t.gradientFrameHeight, t.borderRadius, c.radius, t.gradientFrameFade, t.gradientWidth, t.gradientHeight, t.gradientLeft, t.gradientTop, t.gradientBackground, w[t.themeGradientHorizontal], t.gradientBlur, t.gradientOpacity, t.inlineOvalDisplay, t.ovalWidth, t.ovalHeight, t.ovalLeft, t.ovalTop, t.ovalBorderRadius, t.ovalBackground, t.themeOvalBackground, w[t.themeOvalBackground], t.ovalBlur, t.ovalOpacity), ht = s(M).withConfig({
+  displayName: "TourWidgetstyled__StyledOvalGradient"
+})(["display:var(", ",none);height:var(", ",0%);mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 100%);&::before{display:none;}&::after{display:block;}"], t.ovalFrameDisplay, t.ovalFrameHeight), ut = s.div.attrs({
+  className: a.header
 }).withConfig({
   displayName: "TourWidgetstyled__StyledHeader"
 })(["min-width:0;display:flex;flex-direction:column;row-gap:4px;", ""], ({
-  $css: t
-}) => t), dt = s($).attrs({
-  className: e.headerTitle
+  $css: e
+}) => e), pt = s(N).attrs({
+  className: a.headerTitle
 }).withConfig({
   displayName: "TourWidgetstyled__StyledHeaderTitle"
-})(["min-width:0;color:", ";white-space:pre-line;"], p.titleColor), nt = s($).attrs({
-  className: e.headerDescription
+})(["min-width:0;color:", ";white-space:pre-line;"], c.titleColor), mt = s(N).attrs({
+  className: a.headerDescription
 }).withConfig({
   displayName: "TourWidgetstyled__StyledHeaderDescription"
-})(["min-width:0;color:", ";white-space:pre-line;"], p.descriptionColor), lt = s.div.attrs({
-  className: e.content
+})(["min-width:0;color:", ";white-space:pre-line;"], c.descriptionColor), vt = s.div.attrs({
+  className: a.content
 }).withConfig({
   displayName: "TourWidgetstyled__StyledContent"
-})(["& img,& picture,& video,& canvas,& svg{display:block;object-fit:cover;border-radius:var(--tour-widget-content-border-radius,", ");}", ""], p.contentRadius, ({
-  $css: t
-}) => t), st = s.div.attrs({
-  className: e.footer
+})(["& img,& picture,& video,& canvas,& svg{display:block;object-fit:cover;border-radius:var(", ",", ");}", ""], t.contentBorderRadius, c.contentRadius, ({
+  $css: e
+}) => e), yt = s.div.attrs({
+  className: a.footer
 }).withConfig({
   displayName: "TourWidgetstyled__StyledFooter"
 })(["min-width:0;", ""], ({
-  $css: t
-}) => t), gt = s.div.attrs({
-  className: e.bullets
+  $css: e
+}) => e), ft = s.div.attrs({
+  className: a.bullets
 }).withConfig({
   displayName: "TourWidgetstyled__StyledBullets"
-})(["display:inline-block;width:var(--tour-widget-bullets-width,auto);min-width:0;overflow:hidden;", ""], ({
-  $css: t
-}) => t), ut = s.div.attrs({
-  className: e.bulletsTrack
+})(["display:inline-block;width:var(", ",auto);min-width:0;overflow:hidden;", ""], t.bulletsWidth, ({
+  $css: e
+}) => e), bt = s.div.attrs({
+  className: a.bulletsTrack
 }).withConfig({
   displayName: "TourWidgetstyled__StyledBulletsTrack"
-})(["display:flex;align-items:center;gap:8px;transform:translateX(var(--tour-widget-bullets-offset,0px));transition:transform 300ms ease;will-change:transform;"]), ct = s.span.attrs({
-  className: e.bullet
+})(["display:flex;align-items:center;gap:8px;transform:translateX(var(", ",0px));transition:transform 300ms ease;will-change:transform;"], t.bulletsOffset), wt = s.span.attrs({
+  className: a.bullet
 }).withConfig({
   displayName: "TourWidgetstyled__StyledBullet"
-})(["display:block;flex:0 0 8px;width:8px;height:8px;border-radius:100%;background:var( --tour-widget-bullet-background,", " );transform:scale(1);transform-origin:center;transition:background-color 300ms ease,opacity 300ms ease,transform 300ms ease;&.", "{background:var( --tour-widget-bullet-active-background,", " );}&.", "{transform:scale(0.75);}", ""], X, e.bulletActive, W, e.bulletEdge, ({
-  $css: t
-}) => t), S = h(({
-  index: t,
-  active: i,
+})(["display:block;flex:0 0 8px;width:8px;height:8px;border-radius:100%;background:var(", ",", ");transform:scale(1);transform-origin:center;transition:background-color 300ms ease,opacity 300ms ease,transform 300ms ease;&.", "{background:var(", ",", ");}&.", "{transform:scale(0.75);}", ""], t.bulletBackground, at, a.bulletActive, t.bulletActiveBackground, S, a.bulletEdge, ({
+  $css: e
+}) => e), T = p(({
+  index: e,
+  active: r,
   className: o,
   "aria-label": g,
-  ...r
-}, u) => {
+  ...i
+}, h) => {
   const {
     activeStepIndex: l
-  } = k(), f = i ?? (typeof t == "number" && l === t);
-  return /* @__PURE__ */ a(ct, { ref: u, className: N(f && e.bulletActive, o), "aria-current": f ? "step" : void 0, "aria-label": g ?? (typeof t == "number" ? `Шаг ${t + 1}` : void 0), ...r });
+  } = $(), y = r ?? (typeof e == "number" && l === e);
+  return /* @__PURE__ */ d(wt, { ref: h, className: F(y && a.bulletActive, o), "aria-current": y ? "step" : void 0, "aria-label": g ?? (typeof e == "number" ? `Шаг ${e + 1}` : void 0), ...i });
 });
-S.displayName = "TourWidget.Bullet";
-const v = 7, G = 8, O = 8, pt = G + O, B = (t, i, o) => Math.min(Math.max(t, i), o), ht = (t) => Number.isFinite(t) ? Math.max(0, Math.floor(t)) : 0, mt = (t) => t > 0 ? t * G + (t - 1) * O : 0, z = h(({
-  count: t,
-  style: i,
+T.displayName = "TourWidget.Bullet";
+const b = 7, L = 8, E = 8, xt = L + E, C = (e, r, o) => Math.min(Math.max(e, r), o), Bt = (e) => Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0, Ot = (e) => e > 0 ? e * L + (e - 1) * E : 0, D = p(({
+  count: e,
+  style: r,
   "aria-label": o,
   ...g
-}, r) => {
+}, i) => {
   const {
-    activeStepIndex: u = 0
-  } = k(), l = ht(t), f = Number.isFinite(u) ? Math.floor(u) : 0, x = l > 0 ? B(f, 0, l - 1) : 0, T = Math.min(l, v), D = Math.max(0, l - T), w = l > v ? B(x - Math.floor(v / 2), 0, D) : 0, C = w + T - 1, H = w > 0, M = C < l - 1, R = {
-    ...i,
-    "--tour-widget-bullets-offset": `-${w * pt}px`,
-    "--tour-widget-bullets-width": `${mt(T)}px`
+    activeStepIndex: h = 0
+  } = $(), l = Bt(e), y = Number.isFinite(h) ? Math.floor(h) : 0, B = l > 0 ? C(y, 0, l - 1) : 0, O = Math.min(l, b), P = Math.max(0, l - O), f = l > b ? C(B - Math.floor(b / 2), 0, P) : 0, G = f + O - 1, U = f > 0, j = G < l - 1, Z = {
+    ...r,
+    [t.bulletsOffset]: `-${f * xt}px`,
+    [t.bulletsWidth]: `${Ot(O)}px`
   };
-  return /* @__PURE__ */ a(gt, { ref: r, "aria-label": o ?? (l > 0 ? `Шаг ${x + 1} из ${l}` : void 0), style: R, ...g, children: /* @__PURE__ */ a(ut, { children: Array.from({
+  return /* @__PURE__ */ d(ft, { ref: i, "aria-label": o ?? (l > 0 ? `Шаг ${B + 1} из ${l}` : void 0), style: Z, ...g, children: /* @__PURE__ */ d(bt, { children: Array.from({
     length: l
-  }, (bt, m) => {
-    const F = l > v && (m === w && H || m === C && M);
-    return /* @__PURE__ */ a(S, { index: m, active: m === x, className: F ? e.bulletEdge : void 0 }, m);
+  }, (Ht, m) => {
+    const X = l > b && (m === f && U || m === G && j);
+    return /* @__PURE__ */ d(T, { index: m, active: m === B, className: X ? a.bulletEdge : void 0 }, m);
   }) }) });
 });
-z.displayName = "TourWidget.Bullets";
-const E = h(({
-  children: t,
-  ...i
-}, o) => /* @__PURE__ */ a(lt, { ref: o, ...i, children: t }));
-E.displayName = "TourWidget.Content";
-const L = h(({
-  children: t,
-  ...i
-}, o) => /* @__PURE__ */ a(st, { ref: o, ...i, children: t }));
-L.displayName = "TourWidget.Footer";
-const I = h(({
-  title: t,
-  description: i,
+D.displayName = "TourWidget.Bullets";
+const R = p(({
+  children: e,
+  ...r
+}, o) => /* @__PURE__ */ d(vt, { ref: o, ...r, children: e }));
+R.displayName = "TourWidget.Content";
+const V = p(({
+  children: e,
+  ...r
+}, o) => /* @__PURE__ */ d(yt, { ref: o, ...r, children: e }));
+V.displayName = "TourWidget.Footer";
+const A = p(({
+  title: e,
+  description: r,
   children: o,
   ...g
-}, r) => /* @__PURE__ */ c(ot, { ref: r, ...g, children: [
-  t != null && /* @__PURE__ */ a(dt, { variant: "H3", bold: !0, children: t }),
-  i != null && /* @__PURE__ */ a(nt, { variant: "TextM", children: i }),
+}, i) => /* @__PURE__ */ u(ut, { ref: i, ...g, children: [
+  e != null && /* @__PURE__ */ d(pt, { variant: "H3", bold: !0, children: e }),
+  r != null && /* @__PURE__ */ d(mt, { variant: "TextM", children: r }),
   o
 ] }));
-I.displayName = "TourWidget.Header";
-const ft = {
+A.displayName = "TourWidget.Header";
+const kt = {
   vertical: {
     viewBox: "0 0 286 480",
     gradient: {
@@ -223,54 +295,72 @@ const ft = {
     },
     path: "M0 172 C 88 228 330 252 720 206 L720 262 L0 262 Z"
   }
-}, A = ({
-  orientation: t
+}, I = ({
+  orientation: e
 }) => {
-  const i = Z().replace(/[^a-zA-Z0-9_-]/g, ""), o = `tour-widget-tail-gradient-${i}`, g = `tour-widget-tail-blur-${i}`, r = ft[t];
-  return /* @__PURE__ */ c(P, { children: [
-    /* @__PURE__ */ c(it, { "aria-hidden": !0, viewBox: r.viewBox, children: [
-      /* @__PURE__ */ c("defs", { children: [
-        /* @__PURE__ */ c("linearGradient", { id: o, x1: r.gradient.x1, y1: r.gradient.y1, x2: r.gradient.x2, y2: r.gradient.y2, gradientUnits: "userSpaceOnUse", children: [
-          /* @__PURE__ */ a("stop", { offset: "0", stopColor: "#6e87db", stopOpacity: r.gradient.startOpacity }),
-          /* @__PURE__ */ a("stop", { offset: r.gradient.middleOffset, stopColor: "#00e0ff", stopOpacity: r.gradient.middleOpacity }),
-          /* @__PURE__ */ a("stop", { offset: "1", stopColor: "#56ff88", stopOpacity: r.gradient.endOpacity })
+  const r = Q().replace(/[^a-zA-Z0-9_-]/g, ""), o = `tour-widget-tail-gradient-${r}`, g = `tour-widget-tail-blur-${r}`, i = kt[e];
+  return /* @__PURE__ */ u(q, { children: [
+    /* @__PURE__ */ u(ct, { "aria-hidden": !0, viewBox: i.viewBox, children: [
+      /* @__PURE__ */ u("defs", { children: [
+        /* @__PURE__ */ u("linearGradient", { id: o, x1: i.gradient.x1, y1: i.gradient.y1, x2: i.gradient.x2, y2: i.gradient.y2, gradientUnits: "userSpaceOnUse", children: [
+          /* @__PURE__ */ d("stop", { offset: "0", stopColor: `var(${t.themeShapeStart}, ${v.light[t.themeShapeStart]})`, stopOpacity: i.gradient.startOpacity }),
+          /* @__PURE__ */ d("stop", { offset: i.gradient.middleOffset, stopColor: `var(${t.themeShapeMiddle}, ${v.light[t.themeShapeMiddle]})`, stopOpacity: i.gradient.middleOpacity }),
+          /* @__PURE__ */ d("stop", { offset: "1", stopColor: `var(${t.themeShapeEnd}, ${v.light[t.themeShapeEnd]})`, stopOpacity: i.gradient.endOpacity })
         ] }),
-        /* @__PURE__ */ a("filter", { id: g, x: r.filter.x, y: r.filter.y, width: r.filter.width, height: r.filter.height, children: /* @__PURE__ */ a("feGaussianBlur", { stdDeviation: r.filter.blur }) })
+        /* @__PURE__ */ d("filter", { id: g, x: i.filter.x, y: i.filter.y, width: i.filter.width, height: i.filter.height, children: /* @__PURE__ */ d("feGaussianBlur", { stdDeviation: i.filter.blur }) })
       ] }),
-      /* @__PURE__ */ a("path", { d: r.path, fill: `url(#${o})`, filter: `url(#${g})` })
+      /* @__PURE__ */ d("path", { d: i.path, fill: `url(#${o})`, filter: `url(#${g})` })
     ] }),
-    /* @__PURE__ */ a(at, { "aria-hidden": !0 })
+    /* @__PURE__ */ d(M, { "aria-hidden": !0 }),
+    /* @__PURE__ */ d(ht, { "aria-hidden": !0 })
   ] });
 };
-A.displayName = "TourWidget.Gradient";
-const wt = {
-  horizontal: e.horizontal,
-  vertical: e.vertical
-}, vt = h(({
-  children: t,
-  orientation: i = "vertical",
+I.displayName = "TourWidget.Gradient";
+const k = () => {
+  var e;
+  return !!((e = document.documentElement.getAttribute("data-theme")) != null && e.toLowerCase().includes("dark"));
+}, St = () => {
+  const [e, r] = Y(k);
+  return tt(() => {
+    r(k());
+    const o = new MutationObserver(() => r(k()));
+    return o.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["data-theme"]
+    }), () => o.disconnect();
+  }, []), e;
+}, Tt = {
+  horizontal: a.horizontal,
+  vertical: a.vertical
+}, Gt = p(({
+  children: e,
+  orientation: r = "vertical",
   activeStepIndex: o,
   className: g,
-  ...r
-}, u) => /* @__PURE__ */ a(J, { value: {
-  activeStepIndex: o
-}, children: /* @__PURE__ */ c(rt, { ref: u, $orientation: i, className: N(wt[i], g), ...r, children: [
-  /* @__PURE__ */ a(A, { orientation: i }),
-  t
-] }) })), yt = Object.assign(vt, {
-  Header: I,
-  Content: E,
-  Footer: L,
-  Bullet: S,
-  Bullets: z
+  ...i
+}, h) => {
+  const l = St();
+  return /* @__PURE__ */ d(it, { value: {
+    activeStepIndex: o
+  }, children: /* @__PURE__ */ u(gt, { ref: h, $orientation: r, $isDark: l, className: F(Tt[r], g), ...i, children: [
+    /* @__PURE__ */ d(I, { orientation: r }),
+    e
+  ] }) });
+}), Wt = Object.assign(Gt, {
+  Header: A,
+  Content: R,
+  Footer: V,
+  Bullet: T,
+  Bullets: D
 });
-yt.displayName = "TourWidget";
+Wt.displayName = "TourWidget";
 export {
-  yt as TourWidget,
-  S as TourWidgetBullet,
-  z as TourWidgetBullets,
-  E as TourWidgetContent,
-  L as TourWidgetFooter,
-  I as TourWidgetHeader,
-  e as tourWidgetClassNames
+  Wt as TourWidget,
+  T as TourWidgetBullet,
+  D as TourWidgetBullets,
+  R as TourWidgetContent,
+  V as TourWidgetFooter,
+  A as TourWidgetHeader,
+  a as tourWidgetClassNames,
+  t as tourWidgetTokens
 };

package/formComponents/FormCombobox/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),P=require("../../chunks/Table-CdaMPDkg.cjs"),T=require("react-hook-form"),x=require("../utils/index.cjs"),l=({name:d,options:i,label:f,helperText:y="",items:g,onChange:r,onBlur:e,placeholder:v,disabled:C,view:a,required:F,multiple:S=!1,...m})=>{const c={...i,required:x.getPriorityRequired({options:i,ruleName:"required"})?i==null?void 0:i.required:F},s=x.useChangedFormContext(c),{control:j,rules:A,remOptions:O}=s;return b.jsx(T.Controller,{control:j,name:d,...O,render:({field:{name:w,onBlur:q,...u},fieldState:{error:t}})=>{const n=S?!0:Array.isArray(u.value);return b.jsx(P.StyledCombobox,{...u,multiple:n,disabled:C,helperText:(t==null?void 0:t.message)||y,items:g,label:f,placeholder:v,required:!!c.required||void 0,requiredPlacement:"right",hasRequiredIndicator:!!c.required||void 0,size:"s",view:t!=null&&t.type?"negative":a??"default",onChange:o=>{u.onChange(o),r==null||r(o,s),(m.closeAfterSelect??!n)&&(q(),e==null||e(void 0))},onBlur:o=>{q(),e==null||e(o)},...m})},rules:A})};exports.FormCombobox=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),P=require("../../chunks/Table-vv1HTrxe.cjs"),T=require("react-hook-form"),x=require("../utils/index.cjs"),l=({name:d,options:i,label:f,helperText:y="",items:g,onChange:r,onBlur:e,placeholder:v,disabled:C,view:a,required:F,multiple:S=!1,...m})=>{const c={...i,required:x.getPriorityRequired({options:i,ruleName:"required"})?i==null?void 0:i.required:F},s=x.useChangedFormContext(c),{control:j,rules:A,remOptions:O}=s;return b.jsx(T.Controller,{control:j,name:d,...O,render:({field:{name:w,onBlur:q,...u},fieldState:{error:t}})=>{const n=S?!0:Array.isArray(u.value);return b.jsx(P.StyledCombobox,{...u,multiple:n,disabled:C,helperText:(t==null?void 0:t.message)||y,items:g,label:f,placeholder:v,required:!!c.required||void 0,requiredPlacement:"right",hasRequiredIndicator:!!c.required||void 0,size:"s",view:t!=null&&t.type?"negative":a??"default",onChange:o=>{u.onChange(o),r==null||r(o,s),(m.closeAfterSelect??!n)&&(q(),e==null||e(void 0))},onBlur:o=>{q(),e==null||e(o)},...m})},rules:A})};exports.FormCombobox=l;

package/formComponents/FormCombobox/index.mjs

@@ -1,5 +1,5 @@
 import { jsx as x } from "react/jsx-runtime";
-import { S as F } from "../../chunks/Table-DYSssxRS.mjs";
+import { S as F } from "../../chunks/Table-tUWuA3Ri.mjs";
 import { Controller as N } from "react-hook-form";
 import { getPriorityRequired as O, useChangedFormContext as P } from "../utils/index.mjs";
 const _ = ({

package/formComponents/FormSwitch/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),F=require("react-hook-form"),S=require("../utils/index.cjs"),k=require("../../chunks/FiltersActions-CVtgAJnC.cjs"),x=({label:n,name:t,options:u,onChange:e,...m})=>{const r=S.useChangedFormContext(u),{control:l,rules:d,remOptions:a,formState:{defaultValues:o}}=r;return i.jsx(F.Controller,{control:l,name:t,...a,render:({field:{name:g,value:f,...c}})=>i.jsx(k.Switch,{...c,defaultChecked:o&&o[t],checked:f,label:n,size:"s",onChange:s=>{c.onChange(s.target.checked),e==null||e(s.target.checked,r)},...m}),rules:d})};exports.FormSwitch=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),F=require("react-hook-form"),S=require("../utils/index.cjs"),k=require("../../chunks/FiltersActions-Bg5wvHFG.cjs"),x=({label:n,name:t,options:u,onChange:e,...m})=>{const r=S.useChangedFormContext(u),{control:l,rules:d,remOptions:a,formState:{defaultValues:o}}=r;return i.jsx(F.Controller,{control:l,name:t,...a,render:({field:{name:g,value:f,...c}})=>i.jsx(k.Switch,{...c,defaultChecked:o&&o[t],checked:f,label:n,size:"s",onChange:s=>{c.onChange(s.target.checked),e==null||e(s.target.checked,r)},...m}),rules:d})};exports.FormSwitch=x;

package/formComponents/FormSwitch/index.mjs

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import { Controller as k } from "react-hook-form";
 import { useChangedFormContext as l } from "../utils/index.mjs";
-import { S as x } from "../../chunks/FiltersActions-CDZSO0MM.mjs";
+import { S as x } from "../../chunks/FiltersActions-BJ5gD6Nx.mjs";
 const F = ({
   label: f,
   name: r,