@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/feedBack/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from \"@floating-ui/react\";\nimport { Placement, resolvePlacement } from \"../../../utils/floating\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  className?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  message: React.ReactNode;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /** hover (default): show on pointer enter; click: toggle; manual: use open only. */\n  trigger?: TooltipTrigger;\n  openDelay?: number;\n  closeDelay?: number;\n}\n\ninterface TooltipPopupProps {\n  reference: HTMLElement;\n  placement: Placement;\n  offset: TooltipProps[\"offset\"];\n  className?: string;\n  children: React.ReactNode;\n}\n\n// Floating UI's hooks run layout effects, so they live here and mount only while\n// the tooltip shows: a closed tooltip runs none, on the server included. (Floating\n// UI picks useLayoutEffect when its module loads in a DOM, so a server render in\n// a DOM test environment warned for every closed tooltip.)\nfunction TooltipPopup({ reference, placement, offset, className, children }: TooltipPopupProps) {\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference },\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offsetMiddleware({ mainAxis: offset?.offsetY ?? 0, crossAxis: offset?.offsetX ?? 0 }),\n      // A fixed placement turns to the other side, and slides along it, when the\n      // viewport has no room for it.\n      ...(resolved.autoMiddleware ? [resolved.autoMiddleware] : [flip(), shift({ padding: 8 })]),\n    ],\n  });\n  return (\n    <div ref={refs.setFloating} className={cn(\"smwb-tooltip\", className)} style={floatingStyles}>\n      {children}\n    </div>\n  );\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, PropsWithChildren<TooltipProps>>(function Tooltip(\n  {\n    className,\n    children,\n    placement = \"top\",\n    offset = { offsetX: 0, offsetY: 0 },\n    message,\n    open: openProp,\n    trigger = \"hover\",\n    openDelay = 0,\n    closeDelay = 0,\n  },\n  ref\n) {\n  const [reference, setReference] = useState<HTMLDivElement | null>(null);\n  const [hoverOpen, setHoverOpen] = useState(false);\n  const [clickOpen, setClickOpen] = useState(false);\n  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const clearTimers = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    if (closeTimerRef.current !== null) {\n      clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => () => clearTimers(), [clearTimers]);\n\n  const scheduleOpen = useCallback(() => {\n    clearTimers();\n    if (openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimerRef.current = setTimeout(() => setHoverOpen(true), openDelay);\n  }, [clearTimers, openDelay]);\n\n  const scheduleClose = useCallback(() => {\n    clearTimers();\n    if (closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimerRef.current = setTimeout(() => setHoverOpen(false), closeDelay);\n  }, [clearTimers, closeDelay]);\n\n  const isVisible = trigger === \"manual\" ? openProp === true : trigger === \"click\" ? clickOpen : hoverOpen;\n\n  const onPointerEnter = trigger === \"hover\" ? scheduleOpen : undefined;\n  const onPointerLeave = trigger === \"hover\" ? scheduleClose : undefined;\n  const onClick =\n    trigger === \"click\"\n      ? () => {\n          setClickOpen((prev) => !prev);\n        }\n      : undefined;\n\n  return (\n    <div className=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={ref}>\n      <div\n        className=\"smwb-tooltip__ref\"\n        ref={setReference}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n      {isVisible && reference ? (\n        <TooltipPopup reference={reference} placement={placement} offset={offset} className={className}>\n          {message}\n        </TooltipPopup>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["TooltipPopup","reference","placement","offset","className","children","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","offsetMiddleware","flip","shift","jsx","cn","Tooltip","forwardRef","message","openProp","trigger","openDelay","closeDelay","ref","setReference","useState","hoverOpen","setHoverOpen","clickOpen","setClickOpen","openTimerRef","useRef","closeTimerRef","clearTimers","useCallback","useEffect","scheduleOpen","scheduleClose","prev"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from \"@floating-ui/react\";\nimport { Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useDismissOnEscape } from \"../../../hooks/useDismissOnEscape\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  className?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  /** What the tip says: text or markup. */\n  message: React.ReactNode;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /**\n   * What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus\n   * in it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),\n   * not the focus a mouse press gives a button. `click`: a click on the target shows or hides\n   * it. `manual`: `open` alone. Escape hides a `hover` or `click` tooltip.\n   */\n  trigger?: TooltipTrigger;\n  /** Milliseconds from the pointer entering the target, or keyboard focus moving into it, until a hover tooltip shows. */\n  openDelay?: number;\n  /** Milliseconds from the pointer and keyboard focus both leaving the target until a hover tooltip hides. */\n  closeDelay?: number;\n}\n\ninterface TooltipPopupProps {\n  reference: HTMLElement;\n  placement: Placement;\n  offset: TooltipProps[\"offset\"];\n  className?: string;\n  children: React.ReactNode;\n}\n\n// Floating UI's hooks run layout effects, so they live here and mount only while\n// the tooltip shows: a closed tooltip runs none, on the server included. (Floating\n// UI picks useLayoutEffect when its module loads in a DOM, so a server render in\n// a DOM test environment warned for every closed tooltip.)\nfunction TooltipPopup({ reference, placement, offset, className, children }: TooltipPopupProps) {\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    elements: { reference },\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      offsetMiddleware({ mainAxis: offset?.offsetY ?? 0, crossAxis: offset?.offsetX ?? 0 }),\n      // A fixed placement turns to the other side, and slides along it, when the\n      // viewport has no room for it.\n      ...(resolved.autoMiddleware ? [resolved.autoMiddleware] : [flip(), shift({ padding: 8 })]),\n    ],\n  });\n  return (\n    <div ref={refs.setFloating} className={cn(\"smwb-tooltip\", className)} style={floatingStyles}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Whether focus on `element` draws a focus ring (`:focus-visible`): focus from the keyboard,\n * not the focus a mouse press gives a button. An engine without the selector counts any focus.\n */\nfunction hasFocusRing(element: Element): boolean {\n  try {\n    return element.matches(\":focus-visible\");\n  } catch {\n    return true;\n  }\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, PropsWithChildren<TooltipProps>>(function Tooltip(\n  {\n    className,\n    children,\n    placement = \"top\",\n    offset = { offsetX: 0, offsetY: 0 },\n    message,\n    open: openProp,\n    trigger = \"hover\",\n    openDelay = 0,\n    closeDelay = 0,\n  },\n  ref\n) {\n  const [reference, setReference] = useState<HTMLDivElement | null>(null);\n  const [hoverOpen, setHoverOpen] = useState(false);\n  const [clickOpen, setClickOpen] = useState(false);\n  const openTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  // The pointer over the target and keyboard focus in it each keep a hover tooltip shown.\n  const pointerInsideRef = useRef(false);\n  const focusInsideRef = useRef(false);\n\n  const clearTimers = useCallback(() => {\n    if (openTimerRef.current !== null) {\n      clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    if (closeTimerRef.current !== null) {\n      clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => () => clearTimers(), [clearTimers]);\n\n  const scheduleOpen = useCallback(() => {\n    clearTimers();\n    if (openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimerRef.current = setTimeout(() => setHoverOpen(true), openDelay);\n  }, [clearTimers, openDelay]);\n\n  const scheduleClose = useCallback(() => {\n    clearTimers();\n    if (closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimerRef.current = setTimeout(() => setHoverOpen(false), closeDelay);\n  }, [clearTimers, closeDelay]);\n\n  // Escape hides a tooltip shown on hover or focus wherever focus is (WCAG 1.4.13), and the\n  // window, panel, Modal or Sheet around it stays open until the next press. Focus left in\n  // the target no longer keeps it: the pointer alone shows and hides it until focus moves.\n  useDismissOnEscape(trigger === \"hover\" && hoverOpen, () => {\n    clearTimers();\n    focusInsideRef.current = false;\n    setHoverOpen(false);\n  });\n  // A click tooltip hides on Escape the same way.\n  useDismissOnEscape(trigger === \"click\" && clickOpen, () => setClickOpen(false));\n\n  const isVisible = trigger === \"manual\" ? openProp === true : trigger === \"click\" ? clickOpen : hoverOpen;\n\n  const onPointerEnter = () => {\n    pointerInsideRef.current = true;\n    if (trigger === \"hover\") scheduleOpen();\n  };\n  const onPointerLeave = () => {\n    pointerInsideRef.current = false;\n    if (trigger === \"hover\" && !focusInsideRef.current) scheduleClose();\n  };\n  // Focus without a focus ring doesn't count: the focus a mouse press gives a button would\n  // keep the tooltip shown after the pointer leaves.\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    // Focus in a portal the target renders (a menu, a picker panel) reaches here through the\n    // React tree, but it is not in the target.\n    if (!event.currentTarget.contains(event.target)) return;\n    focusInsideRef.current = hasFocusRing(event.target);\n    if (trigger === \"hover\" && focusInsideRef.current) scheduleOpen();\n  };\n  const onBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    // Focus moving to another control in the target keeps the tooltip.\n    if (event.currentTarget.contains(event.relatedTarget)) return;\n    focusInsideRef.current = false;\n    if (trigger === \"hover\" && !pointerInsideRef.current) scheduleClose();\n  };\n  const onClick =\n    trigger === \"click\"\n      ? () => {\n          setClickOpen((prev) => !prev);\n        }\n      : undefined;\n\n  return (\n    <div className=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={ref}>\n      <div\n        className=\"smwb-tooltip__ref\"\n        ref={setReference}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onClick={onClick}\n      >\n        {children}\n      </div>\n      {isVisible && reference ? (\n        <TooltipPopup reference={reference} placement={placement} offset={offset} className={className}>\n          {message}\n        </TooltipPopup>\n      ) : null}\n    </div>\n  );\n});\n\nexport default Tooltip;\n"],"names":["TooltipPopup","reference","placement","offset","className","children","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","offsetMiddleware","flip","shift","jsx","cn","hasFocusRing","element","Tooltip","forwardRef","message","openProp","trigger","openDelay","closeDelay","ref","setReference","useState","hoverOpen","setHoverOpen","clickOpen","setClickOpen","openTimerRef","useRef","closeTimerRef","pointerInsideRef","focusInsideRef","clearTimers","useCallback","useEffect","scheduleOpen","scheduleClose","useDismissOnEscape","event","prev"],"mappings":"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"}

package/dist/components/inputs/button/button.d.ts

@@ -53,6 +53,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      * Отключить риппл-эффект.
      */
     disableRipple?: boolean;
+    /** Test id of the root; `button`, or `button-link` for a link, unless given. */
+    "data-testid"?: string;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & {
     children?: React.ReactNode | undefined;

package/dist/components/inputs/button/button.js

@@ -1,84 +1,88 @@
-import { jsx as h, jsxs as y } from "react/jsx-runtime";
+import { jsx as N, jsxs as $ } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/button/button.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import x from "react";
-import v from "clsx";
-import { Ripple as z } from "../../base/ripple/ripple.js";
-import { Icon as C } from "../../base/icon/icon.js";
-const H = x.forwardRef(
-  function(N, s) {
+import g from "react";
+import W from "clsx";
+import { Ripple as q } from "../../base/ripple/ripple.js";
+import { Icon as v } from "../../base/icon/icon.js";
+const Q = g.forwardRef(
+  function(j, c) {
+    var y;
     const {
-      label: e,
-      variant: $ = "contained",
-      icon: t,
-      iconProps: g = {},
-      href: l,
-      className: j,
-      disabled: o,
-      children: a,
-      onMouseDown: n,
-      fullWidth: k,
-      rippleCenter: B,
-      disableRipple: D,
-      size: E = "medium",
-      colorTheme: _ = "primary",
-      color: r,
+      label: o,
+      variant: k = "contained",
+      icon: e,
+      iconProps: B = {},
+      href: a,
+      className: D,
+      disabled: r,
+      children: p,
+      onMouseDown: i,
+      // The button sets this on its root too; its own handler calls the caller's first.
+      onPointerDown: s,
+      fullWidth: E,
+      rippleCenter: _,
+      disableRipple: z,
+      size: C = "medium",
+      colorTheme: M = "primary",
+      color: l,
+      "data-testid": t,
       ...m
-    } = N, c = r != null ? r : _, p = x.useRef(null), d = (i) => {
-      n == null || n(i);
-    }, b = (i) => {
-      var R;
-      o || (R = p.current) == null || R.onRipple(i);
-    }, f = v(
+    } = j, b = l != null ? l : M, f = g.useRef(null), u = (n) => {
+      i == null || i(n);
+    }, d = (n) => {
+      var x;
+      s == null || s(n), r || (x = f.current) == null || x.onRipple(n);
+    }, w = W(
       "smwb-button",
-      `smwb-${$}`,
-      `smwb-${E}`,
-      c === "primary" ? "smwb-primary" : `smwb-button_color-${c}`,
-      j,
+      `smwb-${k}`,
+      `smwb-${C}`,
+      b === "primary" ? "smwb-primary" : `smwb-button_color-${b}`,
+      D,
       {
-        "smwb-disabled": o,
-        "smwb-full-width": k
+        "smwb-disabled": r,
+        "smwb-full-width": E
       }
-    ), u = !D && /* @__PURE__ */ h(z, { actionRef: p, center: B }), w = typeof t == "string" ? /* @__PURE__ */ h(C, { ...g, name: t }) : t;
-    return l ? /* @__PURE__ */ y(
+    ), R = !z && /* @__PURE__ */ N(q, { actionRef: f, center: _ }), h = typeof e == "string" ? /* @__PURE__ */ N(v, { ...B, name: e }) : e;
+    return a ? /* @__PURE__ */ $(
       "a",
       {
-        "data-testid": "button-link",
-        ref: s,
-        className: f,
-        href: l,
+        "data-testid": t != null ? t : "button-link",
+        ref: c,
+        className: w,
+        href: a,
         target: "_blank",
-        rel: "noreferrer",
-        onMouseDown: d,
-        onPointerDown: b,
+        onMouseDown: u,
+        onPointerDown: d,
         ...m,
+        rel: (y = m.rel) != null ? y : "noreferrer",
         children: [
-          t && w,
-          e || a,
-          u
+          e && h,
+          o || p,
+          R
         ]
       }
-    ) : /* @__PURE__ */ y(
+    ) : /* @__PURE__ */ $(
       "button",
       {
-        "data-testid": "button",
-        ref: s,
-        className: f,
-        onMouseDown: d,
-        onPointerDown: b,
-        disabled: !!o,
+        "data-testid": t != null ? t : "button",
+        ref: c,
+        className: w,
+        onMouseDown: u,
+        onPointerDown: d,
+        disabled: !!r,
         ...m,
         children: [
-          t && w,
-          e || a,
-          u
+          e && h,
+          o || p,
+          R
         ]
       }
     );
   }
 );
 export {
-  H as Button,
-  H as default
+  Q as Button,
+  Q as default
 };
 //# sourceMappingURL=button.js.map

package/dist/components/inputs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент может рендериться как <a>.\n   */\n  href?: string;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      return (\n        <a\n          data-testid=\"button-link\"\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target=\"_blank\"\n          rel=\"noreferrer\"\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid=\"button\"\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","className","disabled","children","onMouseDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","jsxs"],"mappings":";;;;;;;AA0EO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA,MACb,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,GAAGC;AAAA,IAAA,IACDjB,GACEkB,IAAQF,KAAA,OAAAA,IAAaD,GACrBI,IAAYpB,EAAM,OAAyB,IAAI,GAE/CqB,IAAc,CAACC,MAAmE;AACtF,MAAAX,KAAA,QAAAA,EAAkBW;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAKb,MACHe,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQtB,CAAO;AAAA,MACf,QAAQW,CAAI;AAAA,MACZI,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEX;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBG;AAAA,MAAA;AAAA,IACrB,GAGIe,IAAgB,CAACb,KAAiB,gBAAAc,EAACC,KAAO,WAAWT,GAAW,QAAQP,GAAc,GACtFiB,IAAc,OAAOzB,KAAS,WAAW,gBAAAuB,EAACG,KAAM,GAAGzB,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,WAAIE,IAEA,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAA9B;AAAA,QACA,WAAWuB;AAAA,QACX,MAAAlB;AAAA,QACA,QAAO;AAAA,QACP,KAAI;AAAA,QACJ,aAAAc;AAAA,QACA,eAAAE;AAAA,QACC,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAb,KAAQyB;AAAA,UACR3B,KAAgBO;AAAA,UAChBiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,KAAA9B;AAAA,QACA,WAAWuB;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAACd;AAAA,QACX,GAAGS;AAAA,QAEH,UAAA;AAAA,UAAAb,KAAQyB;AAAA,UACR3B,KAAgBO;AAAA,UAChBiB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Icon, IconProps } from \"../../base/icon\";\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /**\n   * Текст на кнопке.\n   */\n  label?: string;\n\n  /**\n   * Вариант стилизации кнопки.\n   */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n\n  /**\n   * Размер кнопки.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n\n  /**\n   * Иконка, которая может быть ReactNode (например, <Icon/>) или строкой (url, base64, и т.д.).\n   */\n  icon?: React.ReactNode | string;\n\n  /**\n   * Пропсы для иконки (исключая 'name', если в IconProps оно обязательно).\n   */\n  iconProps?: Omit<IconProps, \"name\">;\n\n  /**\n   * @deprecated используйте `color`. Оставлено для обратной совместимости.\n   */\n  colorTheme?: \"primary\";\n\n  /**\n   * Семантический цвет кнопки. Резолвится через токены `--smui-*Color*`.\n   */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\n  /**\n   * Ссылка. Если задана, компонент может рендериться как <a>.\n   */\n  href?: string;\n\n  /**\n   * Отключённое состояние.\n   */\n  disabled?: boolean;\n\n  /**\n   * Тип кнопки.\n   */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /**\n   * Растягивать кнопку по всей ширине контейнера.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Позиция риппл-эффекта по центру.\n   */\n  rippleCenter?: boolean;\n\n  /**\n   * Отключить риппл-эффект.\n   */\n  disableRipple?: boolean;\n\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, PropsWithChildren<ButtonProps>>(\n  function Button(props, ref) {\n    const {\n      label,\n      variant = \"contained\",\n      icon,\n      iconProps = {},\n      href,\n      className,\n      disabled,\n      children,\n      onMouseDown: onMouseDownProp,\n      // The button sets this on its root too; its own handler calls the caller's first.\n      onPointerDown: onPointerDownProp,\n      fullWidth,\n      rippleCenter,\n      disableRipple,\n\n      size = \"medium\",\n      colorTheme = \"primary\",\n      color: colorProp,\n      \"data-testid\": dataTestId,\n      ...rest\n    } = props;\n    const color = colorProp ?? colorTheme;\n    const rippleRef = React.useRef<RippleActionsRef>(null);\n\n    const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onMouseDownProp?.(event);\n    };\n\n    // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n    const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      onPointerDownProp?.(event);\n      if (!disabled) {\n        rippleRef.current?.onRipple(event);\n      }\n    };\n\n    const classes = cn(\n      \"smwb-button\",\n      `smwb-${variant}`,\n      `smwb-${size}`,\n      color === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color}`,\n      className,\n      {\n        \"smwb-disabled\": disabled,\n        \"smwb-full-width\": fullWidth,\n      }\n    );\n\n    const rippleElement = !disableRipple && <Ripple actionRef={rippleRef} center={rippleCenter} />;\n    const iconElement = typeof icon === \"string\" ? <Icon {...iconProps} name={icon} /> : icon;\n\n    if (href) {\n      return (\n        <a\n          data-testid={dataTestId ?? \"button-link\"}\n          ref={ref as React.LegacyRef<HTMLAnchorElement>}\n          className={classes}\n          href={href}\n          target=\"_blank\"\n          onMouseDown={onMouseDown}\n          onPointerDown={onPointerDown}\n          {...rest}\n          // A default: the caller's rel wins, and an explicit undefined keeps it.\n          rel={rest.rel ?? \"noreferrer\"}\n        >\n          {icon && iconElement}\n          {label ? label : children}\n          {rippleElement}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        data-testid={dataTestId ?? \"button\"}\n        ref={ref as React.LegacyRef<HTMLButtonElement>}\n        className={classes}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        disabled={!!disabled}\n        {...rest}\n      >\n        {icon && iconElement}\n        {label ? label : children}\n        {rippleElement}\n      </button>\n    );\n  }\n);\nexport default Button;\n"],"names":["Button","React","props","ref","label","variant","icon","iconProps","href","className","disabled","children","onMouseDownProp","onPointerDownProp","fullWidth","rippleCenter","disableRipple","size","colorTheme","colorProp","dataTestId","rest","color","rippleRef","onMouseDown","event","onPointerDown","_a","classes","cn","rippleElement","jsx","Ripple","iconElement","Icon","jsxs"],"mappings":";;;;;;;AA6EO,MAAMA,IAASC,EAAM;AAAA,EAC1B,SAAgBC,GAAOC,GAAK;;AAC1B,UAAM;AAAA,MACJ,OAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,MAAAC;AAAA,MACA,WAAAC,IAAY,CAAA;AAAA,MACZ,MAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,aAAaC;AAAA;AAAA,MAEb,eAAeC;AAAA,MACf,WAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,MAEA,MAAAC,IAAO;AAAA,MACP,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,eAAeC;AAAA,MACf,GAAGC;AAAA,IAAA,IACDnB,GACEoB,IAAQH,KAAA,OAAAA,IAAaD,GACrBK,IAAYtB,EAAM,OAAyB,IAAI,GAE/CuB,IAAc,CAACC,MAAmE;AACtF,MAAAb,KAAA,QAAAA,EAAkBa;AAAA,IACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,MAAAZ,KAAA,QAAAA,EAAoBY,IACff,MACHiB,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,IAEhC,GAEMG,IAAUC;AAAA,MACd;AAAA,MACA,QAAQxB,CAAO;AAAA,MACf,QAAQY,CAAI;AAAA,MACZK,MAAU,YAAY,iBAAiB,qBAAqBA,CAAK;AAAA,MACjEb;AAAA,MACA;AAAA,QACE,iBAAiBC;AAAA,QACjB,mBAAmBI;AAAA,MAAA;AAAA,IACrB,GAGIgB,IAAgB,CAACd,KAAiB,gBAAAe,EAACC,KAAO,WAAWT,GAAW,QAAQR,GAAc,GACtFkB,IAAc,OAAO3B,KAAS,WAAW,gBAAAyB,EAACG,KAAM,GAAG3B,GAAW,MAAMD,EAAA,CAAM,IAAKA;AAErF,WAAIE,IAEA,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaf,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAjB;AAAA,QACA,WAAWyB;AAAA,QACX,MAAApB;AAAA,QACA,QAAO;AAAA,QACP,aAAAgB;AAAA,QACA,eAAAE;AAAA,QACC,GAAGL;AAAA,QAEJ,MAAKM,IAAAN,EAAK,QAAL,OAAAM,IAAY;AAAA,QAEhB,UAAA;AAAA,UAAArB,KAAQ2B;AAAA,UACR7B,KAAgBO;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAaf,KAAA,OAAAA,IAAc;AAAA,QAC3B,KAAAjB;AAAA,QACA,WAAWyB;AAAA,QACX,aAAAJ;AAAA,QACA,eAAAE;AAAA,QACA,UAAU,CAAC,CAAChB;AAAA,QACX,GAAGW;AAAA,QAEH,UAAA;AAAA,UAAAf,KAAQ2B;AAAA,UACR7B,KAAgBO;AAAA,UAChBmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/components/inputs/buttonGroups/buttonGroup.d.ts

@@ -9,6 +9,8 @@ export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     colorTheme?: "primary";
     /** Semantic color propagated to child buttons. */
     color?: "primary" | "secondary" | "error" | "success" | "warning" | "info";
+    /** Test id of the root `<div>`; `button-group` unless given. */
+    "data-testid"?: string;
 }
 export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/dist/components/inputs/buttonGroups/buttonGroup.js

@@ -1,54 +1,58 @@
-import { jsx as N } from "react/jsx-runtime";
+import { jsx as x } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/buttonGroup/buttonGroup.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
 import r from "react";
-import T from "clsx";
-const $ = r.forwardRef(function(u, c) {
+import b from "clsx";
+const j = r.forwardRef(function(h, w) {
+  var n;
   const {
-    className: f,
-    children: b,
-    variant: t = "contained",
-    size: h = "medium",
-    orientation: e = "horizontal",
-    colorTheme: w = "primary",
-    color: g,
-    fullWidth: l = !1,
-    disabled: s = !1,
-    ...v
-  } = u;
-  return /* @__PURE__ */ N(
+    className: g,
+    children: v,
+    variant: e = "contained",
+    size: z = "medium",
+    orientation: s = "horizontal",
+    colorTheme: N = "primary",
+    color: T,
+    fullWidth: a = !1,
+    disabled: l = !1,
+    "data-testid": W = "button-group",
+    ...i
+  } = h;
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: c,
-      className: T(
+      ref: w,
+      className: b(
         "smwb-button-group",
-        f,
+        g,
+        `smwb-${s}`,
         `smwb-${e}`,
-        `smwb-${t}`,
-        l && "smwb-full-width",
-        s
+        a && "smwb-full-width",
+        l
       ),
-      role: "group",
-      "data-testid": "button-group",
-      ...v,
-      children: r.Children.map(b, (z) => {
-        var i, a, n, p, m, d;
-        const o = z;
+      "data-testid": W,
+      ...i,
+      role: (n = i.role) != null ? n : "group",
+      children: r.Children.map(v, (t) => {
+        var p, m, d, u, c, f;
+        if (!r.isValidElement(t))
+          return t;
+        const o = t;
         return r.cloneElement(o, {
-          className: "smwb-button-group__grouped",
-          fullWidth: e === "vertical" || ((i = o.props.fullWidth) != null ? i : l),
-          variant: (a = o.props.variant) != null ? a : t,
-          size: (n = o.props.size) != null ? n : h,
-          disabled: (p = o.props.disabled) != null ? p : s,
-          colorTheme: (m = o.props.colorTheme) != null ? m : w,
-          color: (d = o.props.color) != null ? d : g
+          className: b("smwb-button-group__grouped", o.props.className),
+          fullWidth: (p = o.props.fullWidth) != null ? p : s === "vertical" || a,
+          variant: (m = o.props.variant) != null ? m : e,
+          size: (d = o.props.size) != null ? d : z,
+          disabled: (u = o.props.disabled) != null ? u : l,
+          colorTheme: (c = o.props.colorTheme) != null ? c : N,
+          color: (f = o.props.color) != null ? f : T
         });
       })
     }
   );
 });
 export {
-  $ as ButtonGroup,
-  $ as default
+  j as ButtonGroup,
+  j as default
 };
 //# sourceMappingURL=buttonGroup.js.map

package/dist/components/inputs/buttonGroups/buttonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.js","sources":["../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { ButtonProps } from \"../button\";\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n}\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const {\n    className,\n    children,\n    variant = \"contained\",\n    size = \"medium\",\n    orientation = \"horizontal\",\n    colorTheme = \"primary\",\n    color,\n    fullWidth = false,\n    disabled = false,\n    ...rest\n  } = props;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"smwb-button-group\",\n        className,\n        `smwb-${orientation}`,\n        `smwb-${variant}`,\n        fullWidth && \"smwb-full-width\",\n        disabled\n      )}\n      role=\"group\"\n      data-testid=\"button-group\"\n      {...rest}\n    >\n      {React.Children.map(children, (child) => {\n        const element = child as React.ReactElement<ButtonProps>;\n\n        return React.cloneElement(element, {\n          className: \"smwb-button-group__grouped\",\n          fullWidth: orientation === \"vertical\" || (element.props.fullWidth ?? fullWidth),\n          variant: element.props.variant ?? variant,\n          size: element.props.size ?? size,\n          disabled: element.props.disabled ?? disabled,\n          colorTheme: element.props.colorTheme ?? colorTheme,\n          color: element.props.color ?? color,\n        });\n      })}\n    </div>\n  );\n});\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","React","props","ref","className","children","variant","size","orientation","colorTheme","color","fullWidth","disabled","rest","jsx","cn","child","element","_a","_b","_c","_d","_e","_f"],"mappings":";;;;;AAkBO,MAAMA,IAAcC,EAAM,WAAW,SAC1CC,GACAC,GACA;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDX;AAEJ,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAX;AAAA,MACA,WAAWY;AAAA,QACT;AAAA,QACAX;AAAA,QACA,QAAQI,CAAW;AAAA,QACnB,QAAQF,CAAO;AAAA,QACfK,KAAa;AAAA,QACbC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACL,eAAY;AAAA,MACX,GAAGC;AAAA,MAEH,UAAAZ,EAAM,SAAS,IAAII,GAAU,CAACW,MAAU;;AACvC,cAAMC,IAAUD;AAEhB,eAAOf,EAAM,aAAagB,GAAS;AAAA,UACjC,WAAW;AAAA,UACX,WAAWT,MAAgB,gBAAeU,IAAAD,EAAQ,MAAM,cAAd,OAAAC,IAA2BP;AAAA,UACrE,UAASQ,IAAAF,EAAQ,MAAM,YAAd,OAAAE,IAAyBb;AAAA,UAClC,OAAMc,IAAAH,EAAQ,MAAM,SAAd,OAAAG,IAAsBb;AAAA,UAC5B,WAAUc,IAAAJ,EAAQ,MAAM,aAAd,OAAAI,IAA0BT;AAAA,UACpC,aAAYU,IAAAL,EAAQ,MAAM,eAAd,OAAAK,IAA4Bb;AAAA,UACxC,QAAOc,IAAAN,EAAQ,MAAM,UAAd,OAAAM,IAAuBb;AAAA,QAAA,CAC/B;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"buttonGroup.js","sources":["../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { ButtonProps } from \"../button\";\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Test id of the root `<div>`; `button-group` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const {\n    className,\n    children,\n    variant = \"contained\",\n    size = \"medium\",\n    orientation = \"horizontal\",\n    colorTheme = \"primary\",\n    color,\n    fullWidth = false,\n    disabled = false,\n    \"data-testid\": dataTestId = \"button-group\",\n    ...rest\n  } = props;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"smwb-button-group\",\n        className,\n        `smwb-${orientation}`,\n        `smwb-${variant}`,\n        fullWidth && \"smwb-full-width\",\n        disabled\n      )}\n      data-testid={dataTestId}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"group\"}\n    >\n      {React.Children.map(children, (child) => {\n        // A child left out, such as `{show && <Button />}`, is null here: nothing to group.\n        if (!React.isValidElement(child)) {\n          return child;\n        }\n        const element = child as React.ReactElement<ButtonProps>;\n\n        // The group's props are defaults: a button's own win, and its own class\n        // adds to the group's.\n        return React.cloneElement(element, {\n          className: cn(\"smwb-button-group__grouped\", element.props.className),\n          fullWidth: element.props.fullWidth ?? (orientation === \"vertical\" || fullWidth),\n          variant: element.props.variant ?? variant,\n          size: element.props.size ?? size,\n          disabled: element.props.disabled ?? disabled,\n          colorTheme: element.props.colorTheme ?? colorTheme,\n          color: element.props.color ?? color,\n        });\n      })}\n    </div>\n  );\n});\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","React","props","ref","className","children","variant","size","orientation","colorTheme","color","fullWidth","disabled","dataTestId","rest","jsx","cn","_a","child","element","_b","_c","_d","_e","_f"],"mappings":";;;;;AAoBO,MAAMA,IAAcC,EAAM,WAAW,SAC1CC,GACAC,GACA;;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,IACDZ;AAEJ,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWa;AAAA,QACT;AAAA,QACAZ;AAAA,QACA,QAAQI,CAAW;AAAA,QACnB,QAAQF,CAAO;AAAA,QACfK,KAAa;AAAA,QACbC;AAAA,MAAA;AAAA,MAEF,eAAaC;AAAA,MACZ,GAAGC;AAAA,MAEJ,OAAMG,IAAAH,EAAK,SAAL,OAAAG,IAAa;AAAA,MAElB,UAAAhB,EAAM,SAAS,IAAII,GAAU,CAACa,MAAU;;AAEvC,YAAI,CAACjB,EAAM,eAAeiB,CAAK;AAC7B,iBAAOA;AAET,cAAMC,IAAUD;AAIhB,eAAOjB,EAAM,aAAakB,GAAS;AAAA,UACjC,WAAWH,EAAG,8BAA8BG,EAAQ,MAAM,SAAS;AAAA,UACnE,YAAWF,IAAAE,EAAQ,MAAM,cAAd,OAAAF,IAA4BT,MAAgB,cAAcG;AAAA,UACrE,UAASS,IAAAD,EAAQ,MAAM,YAAd,OAAAC,IAAyBd;AAAA,UAClC,OAAMe,IAAAF,EAAQ,MAAM,SAAd,OAAAE,IAAsBd;AAAA,UAC5B,WAAUe,IAAAH,EAAQ,MAAM,aAAd,OAAAG,IAA0BV;AAAA,UACpC,aAAYW,IAAAJ,EAAQ,MAAM,eAAd,OAAAI,IAA4Bd;AAAA,UACxC,QAAOe,IAAAL,EAAQ,MAAM,UAAd,OAAAK,IAAuBd;AAAA,QAAA,CAC/B;AAAA,MACH,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/inputs/checkbox/checkbox.d.ts

@@ -4,10 +4,20 @@ export type SelectionControlColor = "primary" | "secondary" | "error" | "success
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     label?: string;
     disabled?: boolean;
+    /**
+     * Keeps the checkbox as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.
+     * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).
+     */
     readOnly?: boolean;
     required?: boolean;
     name?: string;
     id?: string;
+    /**
+     * Shows the checkbox as partly checked, as for a "select all" over a partial selection: drawn with a dash and
+     * announced as "mixed" by screen readers, whatever `checked` is. A click does not clear it: the click toggles
+     * `checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns
+     * false.
+     */
     indeterminate?: boolean;
     className?: string;
     size?: SelectionControlSize;

package/dist/components/inputs/checkbox/checkbox.js

@@ -1,75 +1,100 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { jsx as c, jsxs as z } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/checkbox/checkbox.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                           */
-import v from "react";
-import b from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-import { useId as y } from "../../../hooks/useId.js";
-import { TextFieldWrapper as z } from "../textField/textFieldWrapper.js";
-const O = v.forwardRef(function(o, h) {
+import x from "react";
+import u from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+import { cancelToggle as F, forgetCancelledToggle as I } from "../../../utils/readOnlyToggle.js";
+import { useHelperText as j } from "../../../hooks/useHelperText.js";
+import { useId as q } from "../../../hooks/useId.js";
+import { useForkRef as $ } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as D } from "../../../hooks/useSafeLayoutEffect.js";
+import { TextFieldWrapper as E } from "../textField/textFieldWrapper.js";
+const V = x.forwardRef(function(e, _) {
   const {
-    label: s,
-    disabled: r,
-    readOnly: c,
-    required: t,
+    label: n,
+    disabled: o,
+    readOnly: i,
+    required: s,
     name: p,
-    id: x,
+    id: y,
     indeterminate: a,
-    className: w,
-    size: k = "medium",
-    color: _ = "primary",
-    onChange: i,
-    helperText: f,
-    error: n,
-    ...u
-  } = o, l = y(x), N = (m) => {
-    if (c) {
-      m.preventDefault();
+    className: g,
+    size: N = "medium",
+    color: C = "primary",
+    onChange: t,
+    helperText: l,
+    error: d,
+    "aria-describedby": T,
+    ...b
+  } = e, h = q(y), f = j(l, { describedBy: T }), m = x.useRef(null), B = $(_, m);
+  D(() => {
+    m.current && (m.current.indeterminate = !!a);
+  });
+  const R = (r) => {
+    if (r.target.indeterminate = !!a, i) {
+      I(r, e.checked);
       return;
     }
-    i == null || i(m, m.target.checked, o);
+    t == null || t(r, r.target.checked, e);
+  }, v = (r) => {
+    var k;
+    (k = e.onClick) == null || k.call(e, r), i && F(r, e.checked);
   };
-  return /* @__PURE__ */ e(z, { helperText: f, disabled: r, error: n, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g(
-    "label",
+  return /* @__PURE__ */ c(
+    E,
     {
-      htmlFor: l,
-      className: b(
-        "smwb-checkbox__wrapper",
-        `smwb-checkbox_size-${k}`,
-        `smwb-checkbox_color-${_}`,
-        w,
+      helperText: l,
+      helperTextId: f.id,
+      disabled: o,
+      error: d,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ z(
+        "label",
         {
-          "smwb-disabled": r,
-          "smwb-readonly": c,
-          "smwb-indeterminate": a
+          htmlFor: h,
+          className: u(
+            "smwb-checkbox__wrapper",
+            `smwb-checkbox_size-${N}`,
+            `smwb-checkbox_color-${C}`,
+            g,
+            {
+              "smwb-disabled": o,
+              "smwb-readonly": i,
+              "smwb-indeterminate": a
+            }
+          ),
+          children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                type: "checkbox",
+                id: h,
+                name: p,
+                className: "smwb-checkbox__input",
+                disabled: o,
+                readOnly: i,
+                required: s,
+                "aria-invalid": d || void 0,
+                "aria-required": s || void 0,
+                "aria-describedby": f.describedBy,
+                ref: B,
+                ...b,
+                "aria-readonly": i || b["aria-readonly"],
+                onChange: R,
+                onClick: v
+              }
+            ),
+            /* @__PURE__ */ c("span", { className: u("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ c(w, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ c(w, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
+            n && /* @__PURE__ */ c("span", { className: "smwb-checkbox__label", children: n })
+          ]
         }
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            id: l,
-            name: p,
-            className: "smwb-checkbox__input",
-            disabled: r,
-            readOnly: c,
-            required: t,
-            "aria-invalid": n || void 0,
-            "aria-required": t || void 0,
-            ref: h,
-            ...u,
-            onChange: N
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: b("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ e(d, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ e(d, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
-        s && /* @__PURE__ */ e("span", { className: "smwb-checkbox__label", children: s })
-      ]
+      )
     }
-  ) });
+  );
 });
 export {
-  O as Checkbox,
-  O as default
+  V as Checkbox,
+  V as default
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/components/inputs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\n    helperText,\n    error,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          ref={ref}\n          {...args}\n          onChange={handleChange}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;;AA4BO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAK;AACtG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACEgB,IAAKC,EAAMV,CAAM,GAEjBW,IAAe,CAACC,MAA2C;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAP,KAAA,QAAAA,EAAWO,GAAGA,EAAE,OAAO,SAASnB;AAAA,EAClC;AAEA,2BACGoB,GAAA,EAAiB,YAAAP,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM;AAAA,QACT;AAAA,QACA,sBAAsBZ,CAAI;AAAA,QAC1B,uBAAuBC,CAAK;AAAA,QAC5BF;AAAA,QACA;AAAA,UACE,iBAAiBN;AAAA,UACjB,iBAAiBC;AAAA,UACjB,sBAAsBI;AAAA,QAAA;AAAA,MACxB;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAAP;AAAA,YACA,MAAAV;AAAA,YACA,WAAU;AAAA,YACV,UAAAH;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,gBAAcS,KAAS;AAAA,YACvB,iBAAeT,KAAY;AAAA,YAC3B,KAAAJ;AAAA,YACC,GAAGc;AAAA,YACJ,UAAUG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAK,EAAC,QAAA,EAAK,WAAWD,EAAG,sBAAsB,EAAE,sBAAsBd,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAe,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,QACCtB,KAAS,gBAAAqB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAArB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5D;AAEJ,CAAC;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { cancelToggle, forgetCancelledToggle } from \"../../../utils/readOnlyToggle\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useHelperText } from \"../../../hooks/useHelperText\";\nimport { useId } from \"../../../hooks/useId\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the checkbox as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  /**\n   * Shows the checkbox as partly checked, as for a \"select all\" over a partial selection: drawn with a dash and\n   * announced as \"mixed\" by screen readers, whatever `checked` is. A click does not clear it: the click toggles\n   * `checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns\n   * false.\n   */\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, forwardedRef) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\n    helperText,\n    error,\n    \"aria-describedby\": ariaDescribedBy,\n    ...args\n  } = props;\n  const id = useId(idProp);\n  const helper = useHelperText(helperText, { describedBy: ariaDescribedBy });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const ref = useForkRef(forwardedRef, inputRef);\n  // `indeterminate` is a DOM property with no attribute, so no markup carries it:\n  // set it on the input after every render.\n  useSafeLayoutEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = Boolean(indeterminate);\n  });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // A click clears the input's indeterminate property; the prop still decides it.\n    e.target.indeterminate = Boolean(indeterminate);\n    if (readOnly) {\n      forgetCancelledToggle(e, props.checked);\n      return;\n    }\n    onChange?.(e, e.target.checked, props);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    props.onClick?.(e);\n    if (readOnly) cancelToggle(e, props.checked);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helperText}\n      helperTextId={helper.id}\n      disabled={disabled}\n      error={error}\n      className=\"smwb-text-field-checkbox\"\n    >\n      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={helper.describedBy}\n          ref={ref}\n          {...args}\n          aria-readonly={readOnly || args[\"aria-readonly\"]}\n          onChange={handleChange}\n          onClick={handleClick}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","forwardedRef","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","ariaDescribedBy","args","id","useId","helper","useHelperText","inputRef","ref","useForkRef","useSafeLayoutEffect","handleChange","e","forgetCancelledToggle","handleClick","_a","cancelToggle","jsx","TextFieldWrapper","jsxs","cn","Icon"],"mappings":";;;;;;;;;;;;AA0CO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAc;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB,GACEiB,IAAKC,EAAMX,CAAM,GACjBY,IAASC,EAAcP,GAAY,EAAE,aAAaE,GAAiB,GAEnEM,IAAWtB,EAAM,OAAyB,IAAI,GAC9CuB,IAAMC,EAAWtB,GAAcoB,CAAQ;AAG7C,EAAAG,EAAoB,MAAM;AACxB,IAAIH,EAAS,YAASA,EAAS,QAAQ,gBAAgB,EAAQb;AAAA,EACjE,CAAC;AAED,QAAMiB,IAAe,CAACC,MAA2C;AAG/D,QADAA,EAAE,OAAO,gBAAgB,EAAQlB,GAC7BJ,GAAU;AACZ,MAAAuB,EAAsBD,GAAG1B,EAAM,OAAO;AACtC;AAAA,IACF;AACA,IAAAY,KAAA,QAAAA,EAAWc,GAAGA,EAAE,OAAO,SAAS1B;AAAA,EAClC,GAEM4B,IAAc,CAACF,MAA0C;;AAC7D,KAAAG,IAAA7B,EAAM,YAAN,QAAA6B,EAAA,KAAA7B,GAAgB0B,IACZtB,KAAU0B,EAAaJ,GAAG1B,EAAM,OAAO;AAAA,EAC7C;AAEA,SACE,gBAAA+B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAnB;AAAA,MACA,cAAcM,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAW;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAShB;AAAA,UACT,WAAWiB;AAAA,YACT;AAAA,YACA,sBAAsBxB,CAAI;AAAA,YAC1B,uBAAuBC,CAAK;AAAA,YAC5BF;AAAA,YACA;AAAA,cACE,iBAAiBN;AAAA,cACjB,iBAAiBC;AAAA,cACjB,sBAAsBI;AAAA,YAAA;AAAA,UACxB;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAuB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAAd;AAAA,gBACA,MAAAX;AAAA,gBACA,WAAU;AAAA,gBACV,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,UAAAC;AAAA,gBACA,gBAAcS,KAAS;AAAA,gBACvB,iBAAeT,KAAY;AAAA,gBAC3B,oBAAkBc,EAAO;AAAA,gBACzB,KAAAG;AAAA,gBACC,GAAGN;AAAA,gBACJ,iBAAeZ,KAAYY,EAAK,eAAe;AAAA,gBAC/C,UAAUS;AAAA,gBACV,SAASG;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX,gBAAAG,EAAC,QAAA,EAAK,WAAWG,EAAG,sBAAsB,EAAE,sBAAsB1B,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAuB,EAACI,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,YACCjC,KAAS,gBAAA6B,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA7B,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN,CAAC;"}