@stenajs-webui/core 20.6.5 → 20.6.7

package/dist/index.es.js

@@ -1,37 +1,35 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._separatorLine_nzfcz_1{display:flex;border:0;margin:0;flex:none}._visuallyHidden_1gevf_1{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._text_1iisw_1{--swui-text-color: var(--swui-text-primary-color);--swui-text-color-caption: var(--lhds-color-ui-600);--swui-text-color-overline: var(--lhds-color-ui-600);--swui-text-font-family: var(--swui-font-primary);--swui-text-font-weight: var(--swui-font-weight-text);--current-color: var(--swui-text-color);--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium);--current-font-weight: var(--swui-text-font-weight);--current-letter-spacing: var(--swui-text-letter-spacing);font-size:var(--current-font-size);line-height:var(--current-line-height);color:var(--current-color);letter-spacing:var(--current-letter-spacing);font-family:var(--swui-text-font-family);font-weight:var(--current-font-weight)}._text_1iisw_1._bold_1iisw_27{--current-font-weight: var(--swui-font-weight-text-bold)}._text_1iisw_1._caption_1iisw_31{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small);--current-color: var(--swui-text-color-caption);--current-letter-spacing: 0;font-style:italic}._text_1iisw_1._overline_1iisw_39{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller);--current-color: var(--swui-text-color-overline);--current-font-weight: var(--swui-font-weight-text-bold);--current-letter-spacing: .1rem;text-transform:uppercase}._text_1iisw_1._large_1iisw_48{--current-font-size: var(--swui-font-size-large);--current-line-height: var(--swui-line-height-large)}._text_1iisw_1._medium_1iisw_53{--current-font-size: var(--swui-font-size-medium);--current-line-height: var(--swui-line-height-medium)}._text_1iisw_1._small_1iisw_58{--current-font-size: var(--swui-font-size-small);--current-line-height: var(--swui-line-height-small)}._text_1iisw_1._smaller_1iisw_63{--current-font-size: var(--swui-font-size-smaller);--current-line-height: var(--swui-line-height-smaller)}._heading_1cnsg_1{font-size:2rem;color:var(--swui-text-primary-color);letter-spacing:0;margin:0;line-height:var(--swui-line-height);font-family:var(--swui-font-primary);font-weight:var(--swui-font-weight-text-bold)}._heading_1cnsg_1._h1_1cnsg_10{font-size:2.8rem}._heading_1cnsg_1._h2_1cnsg_14{font-size:2.4rem}._heading_1cnsg_1._h3_1cnsg_18{font-size:2rem}._heading_1cnsg_1._h4_1cnsg_22{font-size:1.8rem}._heading_1cnsg_1._h5_1cnsg_26{font-size:1.6rem}._heading_1cnsg_1._h6_1cnsg_30{font-size:1.4rem}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { cssColor as R } from "@stenajs-webui/theme";
-import { jsx as i, Fragment as I } from "react/jsx-runtime";
-import { forwardRef as h, useState as g, useCallback as p, useLayoutEffect as H, useRef as v, useEffect as l, useMemo as z } from "react";
-import y from "@emotion/styled";
-import F from "@emotion/is-prop-valid";
-import { system as N, background as P, border as V, borderRight as A, borderLeft as G, borderTop as j, borderBottom as U, borderColor as q, borderRadius as W, borderStyle as B, borderWidth as K, boxShadow as J, flexbox as Q, overflow as X, position as Y, layout as Z, zIndex as ee, left as te, right as ne, top as re, bottom as se } from "styled-system";
-import oe from "lodash/pickBy";
-import O from "classnames";
-import * as ce from "react-dom";
-import ue from "lodash/debounce";
-const ie = "_separatorLine_nzfcz_1", ae = {
-  separatorLine: ie
-}, et = h(
+import { cssColor as A } from "@stenajs-webui/theme";
+import { jsx as a, Fragment as S } from "react/jsx-runtime";
+import { forwardRef as h, useState as f, useCallback as m, useLayoutEffect as P, useRef as v, useEffect as d, useMemo as D } from "react";
+import _ from "@emotion/styled";
+import { system as H, background as z, border as F, borderRight as N, borderLeft as U, borderTop as V, borderBottom as q, borderColor as j, borderRadius as B, borderStyle as W, borderWidth as X, boxShadow as G, flexbox as Y, overflow as K, position as Z, layout as J, zIndex as Q, left as ee, right as te, top as re, bottom as ue } from "styled-system";
+import { memoize as ne, pickBy as oe, debounce as se } from "lodash-es";
+import R from "classnames";
+import * as ie from "react-dom";
+const ae = "_separatorLine_nzfcz_1", ce = {
+  separatorLine: ae
+}, rt = h(
   ({
-    color: e = R("--lhds-color-ui-300"),
+    color: e = A("--lhds-color-ui-300"),
     size: t = "100%",
-    width: n = "1px",
-    vertical: r = !1
-  }, s) => /* @__PURE__ */ i(
+    width: r = "1px",
+    vertical: u = !1
+  }, n) => /* @__PURE__ */ a(
     "hr",
     {
-      className: ae.separatorLine,
+      className: ce.separatorLine,
       "aria-hidden": !0,
       color: e,
       style: {
         backgroundColor: e,
-        height: r ? t || "100%" : n || "1px",
-        width: r ? n || "1px" : t || "100%"
+        height: u ? t || "100%" : r || "1px",
+        width: u ? r || "1px" : t || "100%"
       },
-      ref: s
+      ref: n
     }
   )
-), de = y.button`
+), le = _.button`
   display: inline-block;
   user-select: none;
   border: 0;
@@ -54,51 +52,543 @@ const ie = "_separatorLine_nzfcz_1", ae = {
   ${({ width: e }) => e ? `width: ${e};` : ""}
   ${({ height: e }) => e ? `height: ${e};` : ""}
   ${({ borderRadius: e }) => e ? `border-radius: ${e};` : ""}
-`, tt = h(
+`, ut = h(
   ({
     disableFocusHighlight: e,
     onClick: t,
-    onDblClick: n,
-    tooltip: r,
-    disableOpacityOnClick: s,
+    onDblClick: r,
+    tooltip: u,
+    disableOpacityOnClick: n,
     disablePointer: o,
-    opacityOnHover: c,
-    disabled: a,
-    children: u,
-    background: d = "transparent",
-    hoverBackground: m,
-    focusBackground: f,
-    type: D = "button",
-    ...L
-  }, k) => /* @__PURE__ */ i(
-    de,
+    opacityOnHover: s,
+    disabled: c,
+    children: i,
+    background: l = "transparent",
+    hoverBackground: p,
+    focusBackground: g,
+    type: M = "button",
+    ...O
+  }, L) => /* @__PURE__ */ a(
+    le,
     {
-      opacityOnHover: c,
-      title: r,
-      disabled: a,
-      disableOpacityOnClick: s,
+      opacityOnHover: s,
+      title: u,
+      disabled: c,
+      disableOpacityOnClick: n,
       onClick: t,
-      onDoubleClick: n,
+      onDoubleClick: r,
       disableFocusHighlight: e,
-      pointer: !!(t || n) && !o,
-      ref: k,
-      background: d,
-      hoverBackground: m,
-      focusBackground: f,
-      type: D,
-      ...L,
-      children: u
+      pointer: !!(t || r) && !o,
+      ref: L,
+      background: l,
+      hoverBackground: p,
+      focusBackground: g,
+      type: M,
+      ...O,
+      children: i
     }
   )
-), $ = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, le = (e) => {
+), x = (e) => e == null ? 0 : typeof e == "boolean" ? e ? 1 : 0 : e, de = (e) => {
   if (e !== 0)
     return `calc(${e} * var(--swui-metrics-space))`;
-}, S = (e) => le($(e)), me = {
+}, E = (e) => de(x(e)), pe = {
+  // react props
+  // https://github.com/facebook/react/blob/5495a7f24aef85ba6937truetrue1ce962673ca9f5fde6/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
+  children: !0,
+  dangerouslySetInnerHTML: !0,
+  key: !0,
+  ref: !0,
+  autoFocus: !0,
+  defaultValue: !0,
+  defaultChecked: !0,
+  innerHTML: !0,
+  suppressContentEditableWarning: !0,
+  suppressHydrationWarning: !0,
+  // deprecated react prop
+  valueLink: !0,
+  // https://github.com/facebook/react/blob/d7157651f7b72d9888ctrue123e191f9b88cd8f41e9/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+  /**
+   * Standard Properties
+   */
+  abbr: !0,
+  accept: !0,
+  acceptCharset: !0,
+  accessKey: !0,
+  action: !0,
+  allow: !0,
+  allowUserMedia: !0,
+  allowPaymentRequest: !0,
+  allowFullScreen: !0,
+  allowTransparency: !0,
+  alt: !0,
+  // specifies target context for links with `preload` type
+  // as: true,
+  async: !0,
+  autoComplete: !0,
+  // autoFocus is polyfilled/normalized by AutoFocusUtils
+  // autoFocus: true,
+  autoPlay: !0,
+  capture: !0,
+  cellPadding: !0,
+  cellSpacing: !0,
+  // keygen prop
+  challenge: !0,
+  charSet: !0,
+  checked: !0,
+  cite: !0,
+  classID: !0,
+  className: !0,
+  cols: !0,
+  colSpan: !0,
+  content: !0,
+  contentEditable: !0,
+  contextMenu: !0,
+  controls: !0,
+  controlsList: !0,
+  coords: !0,
+  crossOrigin: !0,
+  data: !0,
+  // For `<object />` acts as `src`.
+  dateTime: !0,
+  decoding: !0,
+  default: !0,
+  defer: !0,
+  dir: !0,
+  disabled: !0,
+  disablePictureInPicture: !0,
+  disableRemotePlayback: !0,
+  download: !0,
+  draggable: !0,
+  encType: !0,
+  enterKeyHint: !0,
+  form: !0,
+  formAction: !0,
+  formEncType: !0,
+  formMethod: !0,
+  formNoValidate: !0,
+  formTarget: !0,
+  frameBorder: !0,
+  headers: !0,
+  height: !0,
+  hidden: !0,
+  high: !0,
+  href: !0,
+  hrefLang: !0,
+  htmlFor: !0,
+  httpEquiv: !0,
+  id: !0,
+  inputMode: !0,
+  integrity: !0,
+  is: !0,
+  keyParams: !0,
+  keyType: !0,
+  kind: !0,
+  label: !0,
+  lang: !0,
+  list: !0,
+  loading: !0,
+  loop: !0,
+  low: !0,
+  // manifest: true,
+  marginHeight: !0,
+  marginWidth: !0,
+  max: !0,
+  maxLength: !0,
+  media: !0,
+  mediaGroup: !0,
+  method: !0,
+  min: !0,
+  minLength: !0,
+  // Caution; `option.selected` is not updated if `select.multiple` is
+  // disabled with `removeAttribute`.
+  multiple: !0,
+  muted: !0,
+  name: !0,
+  nonce: !0,
+  noValidate: !0,
+  open: !0,
+  optimum: !0,
+  pattern: !0,
+  placeholder: !0,
+  playsInline: !0,
+  poster: !0,
+  preload: !0,
+  profile: !0,
+  radioGroup: !0,
+  readOnly: !0,
+  referrerPolicy: !0,
+  rel: !0,
+  required: !0,
+  reversed: !0,
+  role: !0,
+  rows: !0,
+  rowSpan: !0,
+  sandbox: !0,
+  scope: !0,
+  scoped: !0,
+  scrolling: !0,
+  seamless: !0,
+  selected: !0,
+  shape: !0,
+  size: !0,
+  sizes: !0,
+  // support for projecting regular DOM Elements via V1 named slots ( shadow dom )
+  slot: !0,
+  span: !0,
+  spellCheck: !0,
+  src: !0,
+  srcDoc: !0,
+  srcLang: !0,
+  srcSet: !0,
+  start: !0,
+  step: !0,
+  style: !0,
+  summary: !0,
+  tabIndex: !0,
+  target: !0,
+  title: !0,
+  translate: !0,
+  // Setting .type throws on non-<input> tags
+  type: !0,
+  useMap: !0,
+  value: !0,
+  width: !0,
+  wmode: !0,
+  wrap: !0,
+  /**
+   * RDFa Properties
+   */
+  about: !0,
+  datatype: !0,
+  inlist: !0,
+  prefix: !0,
+  // property is also supported for OpenGraph in meta tags.
+  property: !0,
+  resource: !0,
+  typeof: !0,
+  vocab: !0,
+  /**
+   * Non-standard Properties
+   */
+  // autoCapitalize and autoCorrect are supported in Mobile Safari for
+  // keyboard hints.
+  autoCapitalize: !0,
+  autoCorrect: !0,
+  // autoSave allows WebKit/Blink to persist values of input fields on page reloads
+  autoSave: !0,
+  // color is for Safari mask-icon link
+  color: !0,
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#incremental_This_API_has_not_been_standardized
+  incremental: !0,
+  // used in amp html for indicating the fallback behavior
+  // https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/
+  fallback: !0,
+  // https://html.spec.whatwg.org/multipage/interaction.html#inert
+  inert: !0,
+  // itemProp, itemScope, itemType are for
+  // Microdata support. See http://schema.org/docs/gs.html
+  itemProp: !0,
+  itemScope: !0,
+  itemType: !0,
+  // itemID and itemRef are for Microdata support as well but
+  // only specified in the WHATWG spec document. See
+  // https://html.spec.whatwg.org/multipage/microdata.html#microdata-dom-api
+  itemID: !0,
+  itemRef: !0,
+  // used in amp html for eventing purposes
+  // https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes/
+  on: !0,
+  // used in amp html for indicating that the option is selectable
+  // https://amp.dev/documentation/components/amp-selector/
+  option: !0,
+  // results show looking glass icon and recent searches on input
+  // search fields in WebKit/Blink
+  results: !0,
+  // IE-only attribute that specifies security restrictions on an iframe
+  // as an alternative to the sandbox attribute on IE<1true
+  security: !0,
+  // IE-only attribute that controls focus behavior
+  unselectable: !0,
+  //
+  // SVG properties: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+  // The following "onX" events have been omitted:
+  //
+  //  onabort
+  //  onactivate
+  //  onbegin
+  //  onclick
+  //  onend
+  //  onerror
+  //  onfocusin
+  //  onfocusout
+  //  onload
+  //  onmousedown
+  //  onmousemove
+  //  onmouseout
+  //  onmouseover
+  //  onmouseup
+  //  onrepeat
+  //  onresize
+  //  onscroll
+  //  onunload
+  accentHeight: !0,
+  accumulate: !0,
+  additive: !0,
+  alignmentBaseline: !0,
+  allowReorder: !0,
+  alphabetic: !0,
+  amplitude: !0,
+  arabicForm: !0,
+  ascent: !0,
+  attributeName: !0,
+  attributeType: !0,
+  autoReverse: !0,
+  azimuth: !0,
+  baseFrequency: !0,
+  baselineShift: !0,
+  baseProfile: !0,
+  bbox: !0,
+  begin: !0,
+  bias: !0,
+  by: !0,
+  calcMode: !0,
+  capHeight: !0,
+  clip: !0,
+  clipPathUnits: !0,
+  clipPath: !0,
+  clipRule: !0,
+  colorInterpolation: !0,
+  colorInterpolationFilters: !0,
+  colorProfile: !0,
+  colorRendering: !0,
+  contentScriptType: !0,
+  contentStyleType: !0,
+  cursor: !0,
+  cx: !0,
+  cy: !0,
+  d: !0,
+  decelerate: !0,
+  descent: !0,
+  diffuseConstant: !0,
+  direction: !0,
+  display: !0,
+  divisor: !0,
+  dominantBaseline: !0,
+  dur: !0,
+  dx: !0,
+  dy: !0,
+  edgeMode: !0,
+  elevation: !0,
+  enableBackground: !0,
+  end: !0,
+  exponent: !0,
+  externalResourcesRequired: !0,
+  fill: !0,
+  fillOpacity: !0,
+  fillRule: !0,
+  filter: !0,
+  filterRes: !0,
+  filterUnits: !0,
+  floodColor: !0,
+  floodOpacity: !0,
+  focusable: !0,
+  fontFamily: !0,
+  fontSize: !0,
+  fontSizeAdjust: !0,
+  fontStretch: !0,
+  fontStyle: !0,
+  fontVariant: !0,
+  fontWeight: !0,
+  format: !0,
+  from: !0,
+  fr: !0,
+  // valid SVG element but React will ask for removal
+  fx: !0,
+  fy: !0,
+  g1: !0,
+  g2: !0,
+  glyphName: !0,
+  glyphOrientationHorizontal: !0,
+  glyphOrientationVertical: !0,
+  glyphRef: !0,
+  gradientTransform: !0,
+  gradientUnits: !0,
+  hanging: !0,
+  horizAdvX: !0,
+  horizOriginX: !0,
+  ideographic: !0,
+  imageRendering: !0,
+  in: !0,
+  in2: !0,
+  intercept: !0,
+  k: !0,
+  k1: !0,
+  k2: !0,
+  k3: !0,
+  k4: !0,
+  kernelMatrix: !0,
+  kernelUnitLength: !0,
+  kerning: !0,
+  keyPoints: !0,
+  keySplines: !0,
+  keyTimes: !0,
+  lengthAdjust: !0,
+  letterSpacing: !0,
+  lightingColor: !0,
+  limitingConeAngle: !0,
+  local: !0,
+  markerEnd: !0,
+  markerMid: !0,
+  markerStart: !0,
+  markerHeight: !0,
+  markerUnits: !0,
+  markerWidth: !0,
+  mask: !0,
+  maskContentUnits: !0,
+  maskUnits: !0,
+  mathematical: !0,
+  mode: !0,
+  numOctaves: !0,
+  offset: !0,
+  opacity: !0,
+  operator: !0,
+  order: !0,
+  orient: !0,
+  orientation: !0,
+  origin: !0,
+  overflow: !0,
+  overlinePosition: !0,
+  overlineThickness: !0,
+  panose1: !0,
+  paintOrder: !0,
+  pathLength: !0,
+  patternContentUnits: !0,
+  patternTransform: !0,
+  patternUnits: !0,
+  pointerEvents: !0,
+  points: !0,
+  pointsAtX: !0,
+  pointsAtY: !0,
+  pointsAtZ: !0,
+  preserveAlpha: !0,
+  preserveAspectRatio: !0,
+  primitiveUnits: !0,
+  r: !0,
+  radius: !0,
+  refX: !0,
+  refY: !0,
+  renderingIntent: !0,
+  repeatCount: !0,
+  repeatDur: !0,
+  requiredExtensions: !0,
+  requiredFeatures: !0,
+  restart: !0,
+  result: !0,
+  rotate: !0,
+  rx: !0,
+  ry: !0,
+  scale: !0,
+  seed: !0,
+  shapeRendering: !0,
+  slope: !0,
+  spacing: !0,
+  specularConstant: !0,
+  specularExponent: !0,
+  speed: !0,
+  spreadMethod: !0,
+  startOffset: !0,
+  stdDeviation: !0,
+  stemh: !0,
+  stemv: !0,
+  stitchTiles: !0,
+  stopColor: !0,
+  stopOpacity: !0,
+  strikethroughPosition: !0,
+  strikethroughThickness: !0,
+  string: !0,
+  stroke: !0,
+  strokeDasharray: !0,
+  strokeDashoffset: !0,
+  strokeLinecap: !0,
+  strokeLinejoin: !0,
+  strokeMiterlimit: !0,
+  strokeOpacity: !0,
+  strokeWidth: !0,
+  surfaceScale: !0,
+  systemLanguage: !0,
+  tableValues: !0,
+  targetX: !0,
+  targetY: !0,
+  textAnchor: !0,
+  textDecoration: !0,
+  textRendering: !0,
+  textLength: !0,
+  to: !0,
+  transform: !0,
+  u1: !0,
+  u2: !0,
+  underlinePosition: !0,
+  underlineThickness: !0,
+  unicode: !0,
+  unicodeBidi: !0,
+  unicodeRange: !0,
+  unitsPerEm: !0,
+  vAlphabetic: !0,
+  vHanging: !0,
+  vIdeographic: !0,
+  vMathematical: !0,
+  values: !0,
+  vectorEffect: !0,
+  version: !0,
+  vertAdvY: !0,
+  vertOriginX: !0,
+  vertOriginY: !0,
+  viewBox: !0,
+  viewTarget: !0,
+  visibility: !0,
+  widths: !0,
+  wordSpacing: !0,
+  writingMode: !0,
+  x: !0,
+  xHeight: !0,
+  x1: !0,
+  x2: !0,
+  xChannelSelector: !0,
+  xlinkActuate: !0,
+  xlinkArcrole: !0,
+  xlinkHref: !0,
+  xlinkRole: !0,
+  xlinkShow: !0,
+  xlinkTitle: !0,
+  xlinkType: !0,
+  xmlBase: !0,
+  xmlns: !0,
+  xmlnsXlink: !0,
+  xmlLang: !0,
+  xmlSpace: !0,
+  y: !0,
+  y1: !0,
+  y2: !0,
+  yChannelSelector: !0,
+  z: !0,
+  zoomAndPan: !0,
+  // For preact. We have this code here even though Emotion doesn't support
+  // Preact, since @emotion/is-prop-valid is used by some libraries outside of
+  // the context of Emotion.
+  for: !0,
+  class: !0,
+  autofocus: !0
+}, me = `/^((${Object.keys(pe).join(
+  "|"
+)})|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/`, he = new RegExp(me), ge = ne(
+  (e) => he.test(e) || e.charCodeAt(0) === 111 && e.charCodeAt(1) === 110 && e.charCodeAt(2) < 91
+  /* Z+1 */
+), fe = {
   box: "var(--swui-shadow-box)",
   popover: "var(--swui-shadow-popover)",
   modal: "var(--swui-shadow-modal)",
   bottom: "var(--swui-shadow-bottom)"
-}, pe = [
+}, ve = [
   "spacing",
   "indent",
   "gap",
@@ -106,7 +596,7 @@ const ie = "_separatorLine_nzfcz_1", ae = {
   "height",
   "overflow",
   "display"
-], he = (e) => pe.includes(e), fe = N({
+], ye = (e) => ve.includes(e), be = H({
   row: {
     property: "flexDirection",
     transform: (e) => e ? "row" : "column"
@@ -114,32 +604,32 @@ const ie = "_separatorLine_nzfcz_1", ae = {
   indent: {
     // @ts-ignore
     property: "--current-indent",
-    transform: $
+    transform: x
   },
   spacing: {
     // @ts-ignore
     property: "--current-spacing",
-    transform: $
+    transform: x
   },
   gap: {
     // @ts-ignore
     property: "--current-gap",
-    transform: $
+    transform: x
   },
   columnGap: {
     property: "columnGap",
-    transform: S
+    transform: E
   },
   rowGap: {
     property: "rowGap",
-    transform: S
+    transform: E
   },
   shadow: {
     property: "boxShadow",
-    transform: (e) => me[e] ?? e
+    transform: (e) => fe[e] ?? e
   }
-}), b = y("div", {
-  shouldForwardProp: (e) => typeof e == "string" ? he(e) ? !1 : F(e) : !1
+}), b = _("div", {
+  shouldForwardProp: (e) => typeof e == "string" ? ye(e) ? !1 : ge(e) : !1
 })`
   --current-spacing: 0;
   --current-indent: 0;
@@ -147,27 +637,27 @@ const ie = "_separatorLine_nzfcz_1", ae = {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  ${fe};
-  ${P};
-  ${V};
-  ${A};
-  ${G};
-  ${j};
+  ${be};
+  ${z};
+  ${F};
+  ${N};
   ${U};
+  ${V};
   ${q};
-  ${W};
+  ${j};
   ${B};
-  ${K};
-  ${J};
-  ${Q};
+  ${W};
   ${X};
+  ${G};
   ${Y};
+  ${K};
   ${Z};
+  ${J};
+  ${Q};
   ${ee};
   ${te};
-  ${ne};
   ${re};
-  ${se};
+  ${ue};
 
   gap: calc(var(--current-gap) * var(--swui-metrics-space));
 
@@ -188,325 +678,325 @@ const ie = "_separatorLine_nzfcz_1", ae = {
     ${({ focusWithinBackground: e }) => e ? `background: ${e};` : ""}
     ${({ focusWithinBorder: e }) => e ? `border: ${e};` : ""}
   }
-`, nt = h(function(t, n) {
-  return /* @__PURE__ */ i(b, { ref: n, ...t });
-}), ge = (e) => {
-  const { x: t, y: n, width: r, height: s, bottom: o, top: c, left: a, right: u } = e.getBoundingClientRect();
+`, nt = h(function(t, r) {
+  return /* @__PURE__ */ a(b, { ref: r, ...t });
+}), we = (e) => {
+  const { x: t, y: r, width: u, height: n, bottom: o, top: s, left: c, right: i } = e.getBoundingClientRect();
   return {
-    width: r,
-    height: s,
-    top: c,
-    left: a,
+    width: u,
+    height: n,
+    top: s,
+    left: c,
     x: t,
-    y: n,
-    right: u,
+    y: r,
+    right: i,
     bottom: o
   };
-}, ve = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, we = (e, t) => {
-  const [n, r] = g(), s = p(() => {
+}, xe = (e, t) => e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height && e.bottom === t.bottom && e.top === t.top && e.left === t.left && e.right === t.right, ke = (e, t) => {
+  const [r, u] = f(), n = m(() => {
     window.requestAnimationFrame(() => {
       if (e.current) {
-        const o = ge(e.current);
-        (!n || !ve(n, o)) && t && t(o), r(o);
+        const o = we(e.current);
+        (!r || !xe(r, o)) && t && t(o), u(o);
       }
     });
-  }, [e, n, r, t]);
-  return H(() => {
-    s();
-  }, [s]), {
-    dimensions: n
+  }, [e, r, u, t]);
+  return P(() => {
+    n();
+  }, [n]), {
+    dimensions: r
   };
-}, rt = h(
-  function({ onResize: t, ...n }, r) {
-    const s = v(null);
-    return we(r ?? s, t), /* @__PURE__ */ i(b, { ...n, ref: r });
+}, ot = h(
+  function({ onResize: t, ...r }, u) {
+    const n = v(null);
+    return ke(u ?? n, t), /* @__PURE__ */ a(b, { ...r, ref: u });
   }
-), st = h(function(t, n) {
-  return /* @__PURE__ */ i(b, { row: !0, ref: n, ...t });
-}), ot = h(function({ num: t = 1, ...n }, r) {
-  return /* @__PURE__ */ i(b, { indent: t, ref: r, ...n });
-}), ct = h(
-  function({ num: t = 1, ...n }, r) {
-    return /* @__PURE__ */ i(b, { spacing: t, ref: r, ...n });
+), st = h(function(t, r) {
+  return /* @__PURE__ */ a(b, { row: !0, ref: r, ...t });
+}), it = h(function({ num: t = 1, ...r }, u) {
+  return /* @__PURE__ */ a(b, { indent: t, ref: u, ...r });
+}), at = h(
+  function({ num: t = 1, ...r }, u) {
+    return /* @__PURE__ */ a(b, { spacing: t, ref: u, ...r });
   }
-), be = y.div`
+), _e = _.div`
   --current-size: 1;
   flex: none;
   width: calc(var(--current-size) * var(--swui-metrics-space));
   height: calc(var(--current-size) * var(--swui-metrics-space));
-`, ut = ({
+`, ct = ({
   half: e = !1,
   horizontal: t = !1,
-  num: n = 1,
-  vertical: r = !1
+  num: r = 1,
+  vertical: u = !1
 }) => {
-  const s = n * (e ? 0.5 : 1);
-  return /* @__PURE__ */ i(
-    be,
+  const n = r * (e ? 0.5 : 1);
+  return /* @__PURE__ */ a(
+    _e,
     {
       style: {
-        "--current-size": s,
+        "--current-size": n,
         height: t ? 1 : void 0,
-        width: r ? 1 : void 0
+        width: u ? 1 : void 0
       }
     }
   );
-}, it = ({ children: e, nest: t, render: n }) => t ? /* @__PURE__ */ i(I, { children: n(e) }) : /* @__PURE__ */ i(I, { children: e }), _e = "_visuallyHidden_1gevf_1", $e = {
-  visuallyHidden: _e
-}, xe = (e) => oe(e, ye), ye = (e, t) => Ee(t), Ee = (e) => e.startsWith("data-") || e.startsWith("aria-"), at = ({
+}, lt = ({ children: e, nest: t, render: r }) => t ? /* @__PURE__ */ a(S, { children: r(e) }) : /* @__PURE__ */ a(S, { children: e }), $e = "_visuallyHidden_1gevf_1", Se = {
+  visuallyHidden: $e
+}, Ee = (e) => oe(e, Te), Te = (e, t) => Ce(t), Ce = (e) => e.startsWith("data-") || e.startsWith("aria-"), dt = ({
   children: e,
   ...t
-}) => /* @__PURE__ */ i("span", { className: $e.visuallyHidden, ...xe(t), children: e }), Ie = "_text_1iisw_1", Se = "_standard_1iisw_24", Ce = "_bold_1iisw_27", Te = "_caption_1iisw_31", Me = "_overline_1iisw_39", Oe = "_large_1iisw_48", De = "_medium_1iisw_53", Le = "_small_1iisw_58", ke = "_smaller_1iisw_63", x = {
+}) => /* @__PURE__ */ a("span", { className: Se.visuallyHidden, ...Ee(t), children: e }), Ie = "_text_1iisw_1", Re = "_standard_1iisw_24", Me = "_bold_1iisw_27", Oe = "_caption_1iisw_31", Le = "_overline_1iisw_39", Ae = "_large_1iisw_48", Pe = "_medium_1iisw_53", De = "_small_1iisw_58", He = "_smaller_1iisw_63", k = {
   text: Ie,
-  standard: Se,
-  bold: Ce,
-  caption: Te,
-  overline: Me,
-  large: Oe,
-  medium: De,
-  small: Le,
-  smaller: ke
-}, _ = h(
+  standard: Re,
+  bold: Me,
+  caption: Oe,
+  overline: Le,
+  large: Ae,
+  medium: Pe,
+  small: De,
+  smaller: He
+}, w = h(
   ({
     children: e,
     variant: t = "standard",
-    size: n = "medium",
-    className: r,
-    color: s,
+    size: r = "medium",
+    className: u,
+    color: n,
     userSelect: o,
-    whiteSpace: c,
-    wordBreak: a,
-    textAlign: u,
-    style: d,
-    ...m
-  }, f) => /* @__PURE__ */ i(
+    whiteSpace: s,
+    wordBreak: c,
+    textAlign: i,
+    style: l,
+    ...p
+  }, g) => /* @__PURE__ */ a(
     "span",
     {
-      className: O(x.text, x[t], x[n], r),
-      ref: f,
+      className: R(k.text, k[t], k[r], u),
+      ref: g,
       style: {
-        color: s,
+        color: n,
         userSelect: o,
-        whiteSpace: c,
-        wordBreak: a,
-        textAlign: u,
-        ...d
+        whiteSpace: s,
+        wordBreak: c,
+        textAlign: i,
+        ...l
       },
-      ...m,
+      ...p,
       children: e
     }
   )
-), dt = _, lt = (e) => /* @__PURE__ */ i(_, { size: "small", ...e }), mt = (e) => /* @__PURE__ */ i(_, { size: "smaller", ...e }), pt = (e) => /* @__PURE__ */ i(_, { size: "medium", ...e }), ht = (e) => /* @__PURE__ */ i(_, { size: "large", ...e }), Re = "_heading_1cnsg_1", He = "_h1_1cnsg_10", ze = "_h2_1cnsg_14", Fe = "_h3_1cnsg_18", Ne = "_h4_1cnsg_22", Pe = "_h5_1cnsg_26", Ve = "_h6_1cnsg_30", C = {
-  heading: Re,
-  h1: He,
-  h2: ze,
-  h3: Fe,
-  h4: Ne,
-  h5: Pe,
-  h6: Ve
-}, Ae = h(
+), pt = w, mt = (e) => /* @__PURE__ */ a(w, { size: "small", ...e }), ht = (e) => /* @__PURE__ */ a(w, { size: "smaller", ...e }), gt = (e) => /* @__PURE__ */ a(w, { size: "medium", ...e }), ft = (e) => /* @__PURE__ */ a(w, { size: "large", ...e }), ze = "_heading_1cnsg_1", Fe = "_h1_1cnsg_10", Ne = "_h2_1cnsg_14", Ue = "_h3_1cnsg_18", Ve = "_h4_1cnsg_22", qe = "_h5_1cnsg_26", je = "_h6_1cnsg_30", T = {
+  heading: ze,
+  h1: Fe,
+  h2: Ne,
+  h3: Ue,
+  h4: Ve,
+  h5: qe,
+  h6: je
+}, Be = h(
   ({
     variant: e = "h3",
     className: t,
-    color: n,
-    whiteSpace: r,
-    wordBreak: s,
+    color: r,
+    whiteSpace: u,
+    wordBreak: n,
     style: o,
-    children: c,
-    as: a,
-    ...u
-  }, d) => /* @__PURE__ */ i(
-    a ?? e,
+    children: s,
+    as: c,
+    ...i
+  }, l) => /* @__PURE__ */ a(
+    c ?? e,
     {
-      className: O(C.heading, C[e], t),
-      style: { color: n, whiteSpace: r, wordBreak: s, ...o },
-      ref: d,
-      ...u,
-      children: c
+      className: R(T.heading, T[e], t),
+      style: { color: r, whiteSpace: u, wordBreak: n, ...o },
+      ref: l,
+      ...i,
+      children: s
     }
   )
-), ft = (e) => /* @__PURE__ */ i(Ae, { variant: "h2", ...e }), Ge = (e, t) => e === t, gt = (e, t, n = Ge) => {
-  const r = p(
-    (u) => {
-      e.some((d) => n(d, u)) || t([...e, u]);
+), vt = (e) => /* @__PURE__ */ a(Be, { variant: "h2", ...e }), We = (e, t) => e === t, yt = (e, t, r = We) => {
+  const u = m(
+    (i) => {
+      e.some((l) => r(l, i)) || t([...e, i]);
     },
-    [e, t, n]
-  ), s = p(
-    (u) => {
+    [e, t, r]
+  ), n = m(
+    (i) => {
       t(
-        u.reduce((d, m) => d.some((f) => n(f, m)) ? d : [...d, m], e)
+        i.reduce((l, p) => l.some((g) => r(g, p)) ? l : [...l, p], e)
       );
     },
-    [e, t, n]
-  ), o = p(
-    (u) => {
-      const d = e.findIndex((m) => n(m, u));
-      d >= 0 && t(e.filter((m, f) => f !== d));
+    [e, t, r]
+  ), o = m(
+    (i) => {
+      const l = e.findIndex((p) => r(p, i));
+      l >= 0 && t(e.filter((p, g) => g !== l));
     },
-    [e, t, n]
-  ), c = p(
-    (u) => {
-      t(e.filter((d) => !u.some((m) => n(m, d))));
+    [e, t, r]
+  ), s = m(
+    (i) => {
+      t(e.filter((l) => !i.some((p) => r(p, l))));
     },
-    [e, t, n]
-  ), a = p(
-    (u) => {
-      e.some((m) => n(m, u)) ? o(u) : r(u);
+    [e, t, r]
+  ), c = m(
+    (i) => {
+      e.some((p) => r(p, i)) ? o(i) : u(i);
     },
-    [e, r, o, n]
+    [e, u, o, r]
   );
   return {
-    add: r,
-    addMultiple: s,
+    add: u,
+    addMultiple: n,
     remove: o,
-    removeMultiple: c,
-    toggle: a
+    removeMultiple: s,
+    toggle: c
   };
-}, E = (e) => {
-  const [t, n] = g(e), r = p(() => {
-    n(!0);
-  }, [n]), s = p(() => {
-    n(!1);
-  }, [n]), o = p(() => {
-    n((c) => !c);
-  }, [n]);
-  return [t, r, s, o];
-}, vt = (e, t) => {
-  const [n, r] = g(e);
-  return l(() => {
-    const s = setTimeout(() => {
-      r(e);
+}, $ = (e) => {
+  const [t, r] = f(e), u = m(() => {
+    r(!0);
+  }, [r]), n = m(() => {
+    r(!1);
+  }, [r]), o = m(() => {
+    r((s) => !s);
+  }, [r]);
+  return [t, u, n, o];
+}, bt = (e, t) => {
+  const [r, u] = f(e);
+  return d(() => {
+    const n = setTimeout(() => {
+      u(e);
     }, t);
     return () => {
-      clearTimeout(s);
+      clearTimeout(n);
     };
-  }, [e, t]), n;
+  }, [e, t]), r;
 }, wt = (e, t) => {
-  const [n, r] = g(e);
-  return l(() => {
-    e && r(!0);
-    const s = setTimeout(() => {
-      e || r(e);
+  const [r, u] = f(e);
+  return d(() => {
+    e && u(!0);
+    const n = setTimeout(() => {
+      e || u(e);
     }, t);
     return () => {
-      clearTimeout(s);
+      clearTimeout(n);
     };
-  }, [e, t]), n;
+  }, [e, t]), r;
 };
-let je = 0;
-const T = (e) => `webui-${e ? e + "-" : ""}${++je}`, bt = (e) => {
-  const [t, n] = g(() => T(e));
-  return l(() => n(T(e)), [e]), t;
-}, w = (e, t, n) => {
-  const r = v();
-  l(() => {
-    r.current = n;
-  }, [n]), l(() => {
+let Xe = 0;
+const C = (e) => `webui-${e ? e + "-" : ""}${++Xe}`, xt = (e) => {
+  const [t, r] = f(() => C(e));
+  return d(() => r(C(e)), [e]), t;
+}, y = (e, t, r) => {
+  const u = v();
+  d(() => {
+    u.current = r;
+  }, [r]), d(() => {
     if (!(e.current && e.current.addEventListener))
       return;
-    const o = (a) => {
-      if (r.current)
-        return r.current(a);
+    const o = (c) => {
+      if (u.current)
+        return u.current(c);
     };
     if (!e.current)
       return;
-    const c = e.current;
-    return c.addEventListener(t, o), () => {
-      c && c.removeEventListener(t, o);
+    const s = e.current;
+    return s.addEventListener(t, o), () => {
+      s && s.removeEventListener(t, o);
     };
   }, [t, e]);
-}, _t = (e) => {
-  const [t, n, r] = E(!1);
-  l(() => {
-    document.activeElement === ce.findDOMNode(e.current) ? n() : r();
-  }, [e, r, n]), w(e, "focus", n), w(e, "blur", r);
-  const s = p(() => {
+}, kt = (e) => {
+  const [t, r, u] = $(!1);
+  d(() => {
+    document.activeElement === ie.findDOMNode(e.current) ? r() : u();
+  }, [e, u, r]), y(e, "focus", r), y(e, "blur", u);
+  const n = m(() => {
     e.current && e.current.focus();
-  }, [e]), o = p(() => {
+  }, [e]), o = m(() => {
     e.current && e.current.blur();
   }, [e]);
-  return { isInFocus: t, focus: s, blur: o };
+  return { isInFocus: t, focus: n, blur: o };
+}, _t = (e) => {
+  const [t, r, u] = $(!1);
+  return y(e, "mouseover", r), y(e, "mouseout", u), t;
 }, $t = (e) => {
-  const [t, n, r] = E(!1);
-  return w(e, "mouseover", n), w(e, "mouseout", r), t;
-}, xt = (e) => {
-  const [t, n, r] = E(!1);
-  return w(e, "mouseenter", n), w(e, "mouseleave", r), t;
-}, yt = (e, t) => {
-  const n = v(() => {
+  const [t, r, u] = $(!1);
+  return y(e, "mouseenter", r), y(e, "mouseleave", u), t;
+}, St = (e, t) => {
+  const r = v(() => {
   });
-  l(() => {
-    n.current = t;
-  }, [t]), l(() => {
-    const r = (s) => {
-      e.filter((c) => c.current).every((c) => c.current && !c.current.contains(s.target)) && n.current(s);
+  d(() => {
+    r.current = t;
+  }, [t]), d(() => {
+    const u = (n) => {
+      e.filter((s) => s.current).every((s) => s.current && !s.current.contains(n.target)) && r.current(n);
     };
-    return document.addEventListener("mousedown", r), document.addEventListener("touchstart", r), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("touchstart", r);
+    return document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), () => {
+      document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u);
     };
   }, [...e]);
-}, Et = (e, t, n) => {
-  const r = v(() => {
+}, Et = (e, t, r) => {
+  const u = v(() => {
   });
-  l(() => {
-    r.current = t;
-  }, [t]), l(() => {
-    const s = (o) => {
-      !e.current || e.current.contains(o.target) || r.current(o);
+  d(() => {
+    u.current = t;
+  }, [t]), d(() => {
+    const n = (o) => {
+      !e.current || e.current.contains(o.target) || u.current(o);
     };
-    return document.addEventListener("mousedown", s, n), document.addEventListener("touchstart", s, n), () => {
-      document.removeEventListener("mousedown", s, n), document.removeEventListener("touchstart", s, n);
+    return document.addEventListener("mousedown", n, r), document.addEventListener("touchstart", n, r), () => {
+      document.removeEventListener("mousedown", n, r), document.removeEventListener("touchstart", n, r);
     };
-  }, [e, n]);
-}, M = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], It = (e, t) => {
-  const n = v(() => {
+  }, [e, r]);
+}, I = ["mousemove", "mousedown", "keydown", "touchstart", "scroll"], Tt = (e, t) => {
+  const r = v(() => {
   });
-  l(() => {
-    n.current = e;
-  }, [e]), l(() => {
-    const r = ue(n.current, t);
-    return M.forEach((s) => window.addEventListener(s, r)), () => {
-      M.forEach(
-        (s) => window.removeEventListener(s, r)
+  d(() => {
+    r.current = e;
+  }, [e]), d(() => {
+    const u = se(r.current, t);
+    return I.forEach((n) => window.addEventListener(n, u)), () => {
+      I.forEach(
+        (n) => window.removeEventListener(n, u)
       );
     };
   }, [t]);
-}, St = (e, t) => {
-  const [n, r] = g(!1), { rootMargin: s, root: o, threshold: c } = t || {}, a = z(() => new IntersectionObserver(
-    ([u]) => r(u.isIntersecting),
+}, Ct = (e, t) => {
+  const [r, u] = f(!1), { rootMargin: n, root: o, threshold: s } = t || {}, c = D(() => new IntersectionObserver(
+    ([i]) => u(i.isIntersecting),
     {
-      rootMargin: s,
+      rootMargin: n,
       root: o,
-      threshold: c
+      threshold: s
     }
-  ), [r, s, o, c]);
-  return l(() => (e.current && a.observe(e.current), () => {
-    a.disconnect();
-  }), [a, e]), n;
-}, Ct = (e) => {
+  ), [u, n, o, s]);
+  return d(() => (e.current && c.observe(e.current), () => {
+    c.disconnect();
+  }), [c, e]), r;
+}, It = (e) => {
   const t = v(null);
-  return l(() => {
+  return d(() => {
     e && (typeof e == "function" ? e(t.current) : e.current = t.current);
   }), t;
-}, Tt = (e, t, n = !0) => {
-  const [r, s] = g(e), o = v(), c = p(
-    (a, u = t) => {
-      s(a), n && clearTimeout(o.current), o.current = setTimeout(() => s(e), u);
+}, Rt = (e, t, r = !0) => {
+  const [u, n] = f(e), o = v(), s = m(
+    (c, i = t) => {
+      n(c), r && clearTimeout(o.current), o.current = setTimeout(() => n(e), i);
     },
-    [t, n, e]
+    [t, r, e]
   );
-  return l(() => () => {
+  return d(() => () => {
     clearTimeout(o.current);
-  }, []), [r, c];
+  }, []), [u, s];
 }, Mt = (e) => {
   throw new Error(`Switch unhandled case: ${e}`);
-}, Ot = (e, t) => t, Dt = (e) => Object.keys(e).filter((t) => e[t]), Lt = (e) => {
+}, Ot = (e, t) => t, Lt = (e) => Object.keys(e).filter((t) => e[t]), At = (e) => {
   try {
     const t = parseFloat(e);
     return isNaN(t) || t == null ? void 0 : t;
   } catch {
   }
-}, kt = (e) => {
+}, Pt = (e) => {
   try {
     const t = parseInt(e, 10);
     return isNaN(t) || t == null ? void 0 : t;
@@ -515,47 +1005,47 @@ const T = (e) => `webui-${e ? e + "-" : ""}${++je}`, bt = (e) => {
 };
 export {
   b as Box,
-  tt as Clickable,
+  ut as Clickable,
   nt as Column,
-  ft as HeaderText,
-  Ae as Heading,
-  ot as Indent,
-  ht as LargeText,
-  it as Nest,
-  rt as ResizeAwareBox,
+  vt as HeaderText,
+  Be as Heading,
+  it as Indent,
+  ft as LargeText,
+  lt as Nest,
+  ot as ResizeAwareBox,
   st as Row,
-  at as ScreenReaderOnlyText,
-  et as SeparatorLine,
-  lt as SmallText,
-  mt as SmallerText,
-  ut as Space,
-  ct as Spacing,
-  pt as StandardText,
-  _ as Text,
-  dt as Txt,
-  $ as booleanOrNumberToNumber,
+  dt as ScreenReaderOnlyText,
+  rt as SeparatorLine,
+  mt as SmallText,
+  ht as SmallerText,
+  ct as Space,
+  at as Spacing,
+  gt as StandardText,
+  w as Text,
+  pt as Txt,
+  x as booleanOrNumberToNumber,
   Ot as exhaustSwitchCase,
   Mt as exhaustSwitchCaseElseThrow,
-  xe as getDataProps,
-  ge as getDimensionObject,
-  Lt as parseFloatElseUndefined,
-  kt as parseIntElseUndefined,
-  Dt as truthyKeysAsList,
-  gt as useArraySet,
-  E as useBoolean,
-  vt as useDebounce,
+  Ee as getDataProps,
+  we as getDimensionObject,
+  At as parseFloatElseUndefined,
+  Pt as parseIntElseUndefined,
+  Lt as truthyKeysAsList,
+  yt as useArraySet,
+  $ as useBoolean,
+  bt as useDebounce,
   wt as useDelayedFalse,
-  bt as useDomId,
-  we as useElementDimensions,
-  _t as useElementFocus,
-  w as useEventListener,
-  Ct as useForwardedRef,
-  xt as useMouseIsEntered,
-  $t as useMouseIsOver,
-  yt as useMultiOnClickOutside,
+  xt as useDomId,
+  ke as useElementDimensions,
+  kt as useElementFocus,
+  y as useEventListener,
+  It as useForwardedRef,
+  $t as useMouseIsEntered,
+  _t as useMouseIsOver,
+  St as useMultiOnClickOutside,
   Et as useOnClickOutside,
-  It as useOnNoMouseMovement,
-  St as useOnScreen,
-  Tt as useTimeoutState
+  Tt as useOnNoMouseMovement,
+  Ct as useOnScreen,
+  Rt as useTimeoutState
 };
 //# sourceMappingURL=index.es.js.map