@cube-dev/ui-kit 0.199.1 → 0.200.0

package/dist/components/form/Form/backend.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/components/form/Form/backend.ts
 /**
 * Nominal branding for the two Form backends (modernization plan §5.1).

package/dist/components/form/Form/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useFormControllerContext } from "./modern/context.js";
 import { useForm } from "./use-form.js";
 import { Form as _Form, FormContext, FormScopeMask, useFormProps } from "./Form.js";

package/dist/components/form/Form/modern/actions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";

package/dist/components/form/Form/modern/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/form/Form/modern/context.ts
 const ModernControllerContext = createContext(null);

package/dist/components/form/Form/modern/controller.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController } from "../backend.js";
 import { createFormField } from "./field.js";
 import { createFormStore } from "./store.js";

package/dist/components/form/Form/modern/field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { getFieldKey, hasPath, normalizePath, readPath } from "./values.js";
 import { getControllerInternals } from "./controller.js";
 //#region src/components/form/Form/modern/field-binding.ts

package/dist/components/form/Form/modern/field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { normalizePath } from "./values.js";
 //#region src/components/form/Form/modern/field.ts
 function createFormField(form, path, options = {}) {

package/dist/components/form/Form/modern/react.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { ModernControllerContext } from "./context.js";
 import { getFieldKey, normalizePath, readPath } from "./values.js";

package/dist/components/form/Form/modern/store.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { FORM_BACKEND } from "../backend.js";
 import { createValueSnapshotter, defineValue, formValueEqual, freezeContainer, getFieldKey, hasPath, isPlainObject, normalizePath, pathValueChanged, readPath, readonlySet, sameMembers, writePath } from "./values.js";
 import { rulesSignature, runRules } from "./validation.js";

package/dist/components/form/Form/modern/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { applyRule } from "../validation.js";
 //#region src/components/form/Form/modern/validation.ts
 /** Compare constraints and function source; captures still need deps/rulesKey. */

package/dist/components/form/Form/modern/values.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/components/form/Form/modern/values.ts
 const ownedContainers = /* @__PURE__ */ new WeakSet();
 function freezeContainer(value) {

package/dist/components/form/Form/reset-unbound-controls.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/components/form/Form/reset-unbound-controls.ts
 /**
 * Both form roots cancel a native reset, because the browser would put a bound

package/dist/components/form/Form/use-field/use-field-binding.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { isModernFormController } from "../backend.js";

package/dist/components/form/Form/use-field/use-field-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { warn } from "../../../../utils/warnings.js";

package/dist/components/form/Form/use-field/use-field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../../utils/react/useLayoutEffect.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";

package/dist/components/form/Form/use-form.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { FORM_BACKEND, isModernFormController, modernBackendUnavailableError } from "./backend.js";
 import { applyRules } from "./validation.js";
 import { dotizeConvert } from "../../../utils/dotize.js";

package/dist/components/form/Form/validation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 //#region src/components/form/Form/validation.ts

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -9,18 +9,21 @@ import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 //#region src/components/form/Label.tsx
-const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
+const RequiredIconElement = tasty({
+	as: "svg",
+	element: "RequiredIcon",
+	styles: {
+		width: ".8em",
+		height: ".8em",
+		transform: "rotate(-5deg)"
+	}
+});
+const REQUIRED_ICON = /* @__PURE__ */ jsx(RequiredIconElement, {
 	xmlns: "http://www.w3.org/2000/svg",
 	version: "1.1",
 	x: "0px",
 	y: "0px",
 	viewBox: "0 0 100 125",
-	style: {
-		enableBackground: "new 0 0 100 100",
-		width: ".8em",
-		height: ".8em",
-		transform: "rotate(-5deg)"
-	},
 	children: /* @__PURE__ */ jsx("switch", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("polygon", {
 		fill: "currentColor",
 		points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57"

package/dist/components/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","Styles","tasty","forwardRef","useI18n","useProviderProps","LabelPosition","NecessityIndicator","ValidationProps","extractStyles","getValidationMods","REQUIRED_ICON","enableBackground","width","height","transform","NecessityLabelElement","as","qa","styles","preset","color","fontWeight","CubeNecessityIndicatorProps","necessityIndicator","isRequired","isOptional","includeNecessityIndicatorInAccessibilityName","NecessityIndicatorMark","props","$","_c","t0","t1","undefined","t","t2","requiredLabel","t3","separator","role","t4","INLINE_LABEL_STYLES","invalid","const","LABEL_STYLES","display","side","split","LabelElement","CubeLabelProps","labelPosition","htmlFor","for","size","Label","ref","children","isDisabled","isInvalid","isValid","labelFor","otherProps","domRef","mark","T0","t5","t6","t7","t8","disabled","t9","t10","_Label","displayName","_c"],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\n/**\n * The `(required)` / `(optional)` note. Deliberately quieter than the label it\n * follows: it is an aside about the field, not part of its name.\n *\n * `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`\n * and `message`, so the note joins the established secondary text rather than\n * inventing a size of its own. The weight is dropped back to 400 — `t4` carries\n * 500, the same weight as the label — because that contrast is what makes the\n * note read as an aside at a glance.\n */\nconst NecessityLabelElement = tasty({\n  as: 'span',\n  qa: 'NecessityLabel',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    fontWeight: 400,\n  },\n});\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. Defaults to `'icon'`, which has no optional form and so only ever\n   * marks a required field. `null` suppresses the indicator entirely.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  /**\n   * Marks the label as required. Only an `isRequired` authored on the input,\n   * the label or the `Form` reaches this — a `required` validation rule drives\n   * validation and `aria-required` without decorating the label.\n   */\n  isRequired?: boolean;\n  /**\n   * Marks the label as optional. Purely presentational, and ignored when the\n   * field is required.\n   */\n  isOptional?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Both marks are opt-in: nothing renders unless the call site passed\n * `isRequired` or `isOptional`.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    isOptional,\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  // Anything that is not one of the two shapes means \"no indicator\" — `null`,\n  // and also any stray falsy value a caller might still be passing.\n  if (necessityIndicator !== 'icon' && necessityIndicator !== 'label') {\n    return null;\n  }\n\n  if (isRequired) {\n    if (necessityIndicator === 'icon') {\n      return (\n        <>\n          {separator}\n          {/*\n            An image named \"(required)\" when it belongs in the name, hidden\n            otherwise — never a bare `<svg>`, which a screen reader announces\n            as an unnamed graphic.\n          */}\n          <span\n            {...(includeNecessityIndicatorInAccessibilityName\n              ? { role: 'img', 'aria-label': requiredLabel }\n              : { 'aria-hidden': true })}\n          >\n            {REQUIRED_ICON}\n          </span>\n        </>\n      );\n    }\n\n    // Hidden from screen readers by default, because `aria-required` on the\n    // input already announces it and repeating it in the name is noise.\n    return (\n      <>\n        {separator}\n        <NecessityLabelElement\n          aria-hidden={\n            !includeNecessityIndicatorInAccessibilityName ? true : undefined\n          }\n        >\n          {requiredLabel}\n        </NecessityLabelElement>\n      </>\n    );\n  }\n\n  // There is no icon form of \"optional\", so the note is rendered whichever\n  // indicator was asked for. Nothing else tells a screen reader the field is\n  // optional, so this one stays in the accessible name.\n  if (!isOptional) return null;\n\n  return (\n    <>\n      {separator}\n      <NecessityLabelElement>\n        {t('form.optional', '(optional)')}\n      </NecessityLabelElement>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps, ContainerStyleProps, ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  isOptional?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    isOptional,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      isOptional={isOptional}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":"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"}
+{"version":3,"file":"Label.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","Styles","tasty","forwardRef","useI18n","useProviderProps","LabelPosition","NecessityIndicator","ValidationProps","extractStyles","getValidationMods","RequiredIconElement","as","element","styles","width","height","transform","REQUIRED_ICON","NecessityLabelElement","qa","preset","color","fontWeight","CubeNecessityIndicatorProps","necessityIndicator","isRequired","isOptional","includeNecessityIndicatorInAccessibilityName","NecessityIndicatorMark","props","$","_c","t0","t1","undefined","t","t2","requiredLabel","t3","separator","role","t4","INLINE_LABEL_STYLES","invalid","const","LABEL_STYLES","display","side","split","LabelElement","CubeLabelProps","labelPosition","htmlFor","for","size","Label","ref","children","isDisabled","isInvalid","isValid","labelFor","otherProps","domRef","mark","T0","t5","t6","t7","t8","disabled","t9","t10","_Label","displayName","_c"],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst RequiredIconElement = tasty({\n  as: 'svg',\n  element: 'RequiredIcon',\n  styles: {\n    width: '.8em',\n    height: '.8em',\n    transform: 'rotate(-5deg)',\n  },\n});\n\nconst REQUIRED_ICON = (\n  <RequiredIconElement\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </RequiredIconElement>\n);\n\n/**\n * The `(required)` / `(optional)` note. Deliberately quieter than the label it\n * follows: it is an aside about the field, not part of its name.\n *\n * `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`\n * and `message`, so the note joins the established secondary text rather than\n * inventing a size of its own. The weight is dropped back to 400 — `t4` carries\n * 500, the same weight as the label — because that contrast is what makes the\n * note read as an aside at a glance.\n */\nconst NecessityLabelElement = tasty({\n  as: 'span',\n  qa: 'NecessityLabel',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    fontWeight: 400,\n  },\n});\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. Defaults to `'icon'`, which has no optional form and so only ever\n   * marks a required field. `null` suppresses the indicator entirely.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  /**\n   * Marks the label as required. Only an `isRequired` authored on the input,\n   * the label or the `Form` reaches this — a `required` validation rule drives\n   * validation and `aria-required` without decorating the label.\n   */\n  isRequired?: boolean;\n  /**\n   * Marks the label as optional. Purely presentational, and ignored when the\n   * field is required.\n   */\n  isOptional?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Both marks are opt-in: nothing renders unless the call site passed\n * `isRequired` or `isOptional`.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    isOptional,\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  // Anything that is not one of the two shapes means \"no indicator\" — `null`,\n  // and also any stray falsy value a caller might still be passing.\n  if (necessityIndicator !== 'icon' && necessityIndicator !== 'label') {\n    return null;\n  }\n\n  if (isRequired) {\n    if (necessityIndicator === 'icon') {\n      return (\n        <>\n          {separator}\n          {/*\n            An image named \"(required)\" when it belongs in the name, hidden\n            otherwise — never a bare `<svg>`, which a screen reader announces\n            as an unnamed graphic.\n          */}\n          <span\n            {...(includeNecessityIndicatorInAccessibilityName\n              ? { role: 'img', 'aria-label': requiredLabel }\n              : { 'aria-hidden': true })}\n          >\n            {REQUIRED_ICON}\n          </span>\n        </>\n      );\n    }\n\n    // Hidden from screen readers by default, because `aria-required` on the\n    // input already announces it and repeating it in the name is noise.\n    return (\n      <>\n        {separator}\n        <NecessityLabelElement\n          aria-hidden={\n            !includeNecessityIndicatorInAccessibilityName ? true : undefined\n          }\n        >\n          {requiredLabel}\n        </NecessityLabelElement>\n      </>\n    );\n  }\n\n  // There is no icon form of \"optional\", so the note is rendered whichever\n  // indicator was asked for. Nothing else tells a screen reader the field is\n  // optional, so this one stays in the accessible name.\n  if (!isOptional) return null;\n\n  return (\n    <>\n      {separator}\n      <NecessityLabelElement>\n        {t('form.optional', '(optional)')}\n      </NecessityLabelElement>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps, ContainerStyleProps, ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  isOptional?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    isOptional,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      isOptional={isOptional}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":"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"}

package/dist/components/form/field-chrome.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { warn } from "../../utils/warnings.js";
 //#region src/components/form/field-chrome.ts
 /** Empty slot values suppress content; numeric zero is still text. */

package/dist/components/form/legacy-tooltip.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { warn } from "../../utils/warnings.js";
 //#region src/components/form/legacy-tooltip.ts
 let hasWarnedAboutLegacyTooltip = false;

package/dist/components/form/validation/ValidationIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { hasValidationState } from "./resolve-validation-props.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";

package/dist/components/form/validation/resolve-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/use-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
 import { c } from "react/compiler-runtime";

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { hasFieldContent, warnAboutForceField } from "./field-chrome.js";
 import { warnAboutLegacyTooltip } from "./legacy-tooltip.js";

package/dist/components/helpers/DisplayTransition/DisplayTransition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/helpers/DisplayTransition/DisplayTransition.tsx

package/dist/components/helpers/IconSwitch/IconSwitch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { DisplayTransition } from "../DisplayTransition/DisplayTransition.js";
 import { tasty } from "@tenphi/tasty";
 import { isValidElement, useCallback, useLayoutEffect, useRef, useState } from "react";

package/dist/components/layout/Flex.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Flow.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Grid.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";

package/dist/components/layout/Panel.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { c } from "react/compiler-runtime";
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
@@ -73,6 +74,13 @@ const STYLES = [
 	"color",
 	"preset"
 ];
+const OUTER_STYLE_PROPS = [
+	...OUTER_STYLES,
+	...BASE_STYLES,
+	...BLOCK_STYLES,
+	...COLOR_STYLES,
+	...DIMENSION_STYLES
+];
 function Panel(props, ref) {
 	const $ = c(32);
 	let children;
@@ -88,43 +96,10 @@ function Panel(props, ref) {
 	let style;
 	let styles;
 	if ($[0] !== props) {
-		const { qa: t0, mods: t1, isStretched: t2, isFloating: t3, isCard: t4, isFlex: t5, styles: t6, innerStyles: t7, children: t8, extra: t9, style: t10, ...t11 } = props;
-		qa = t0;
-		mods = t1;
-		isStretched = t2;
-		isFloating = t3;
-		isCard = t4;
-		isFlex = t5;
-		children = t8;
-		extra = t9;
-		style = t10;
-		otherProps = t11;
-		styles = t6;
-		innerStyles = t7;
-		STYLES.forEach((style_0) => {
-			if (props[style_0]) {
-				innerStyles = {
-					...innerStyles,
-					[style_0]: props[style_0]
-				};
-				delete otherProps[style_0];
-			}
-		});
-		[
-			...OUTER_STYLES,
-			...BASE_STYLES,
-			...BLOCK_STYLES,
-			...COLOR_STYLES,
-			...DIMENSION_STYLES
-		].forEach((style_1) => {
-			if (style_1 in otherProps) {
-				styles = {
-					...styles,
-					[style_1]: otherProps[style_1]
-				};
-				delete otherProps[style_1];
-			}
-		});
+		({qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps} = props);
+		innerStyles = extractStyles(otherProps, STYLES, innerStyles, void 0, STYLES.filter((style_0) => otherProps[style_0] === void 0));
+		styles = extractStyles(otherProps, OUTER_STYLE_PROPS, styles, void 0, STYLES);
+		for (const style_1 of [...STYLES, ...OUTER_STYLE_PROPS]) delete otherProps[style_1];
 		$[0] = props;
 		$[1] = children;
 		$[2] = extra;

package/dist/components/layout/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","DIMENSION_STYLES","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","PanelElement","as","qa","styles","position","inset","stretched","display","radius","card","border","flexGrow","placeSelf","PanelInnerElement","flex","top","left","right","bottom","overflow","scrollbar","gridColumns","gridRows","flow","placeContent","styleProps","CubePanelProps","isStretched","isCard","isFloating","innerStyles","placeItems","gap","isFlex","children","extra","STYLES","const","Panel","props","ref","$","_c","mods","otherProps","style","t0","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","forEach","style_0","style_1","floating","appliedMods","_Panel","displayName","_c"],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  DIMENSION_STYLES,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode } from 'react';\n\nconst PanelElement = tasty({\n  as: 'section',\n  qa: 'Panel',\n  styles: {\n    position: {\n      '': 'relative',\n      'stretched | floating': 'absolute',\n    },\n    inset: {\n      '': 'initial',\n      stretched: true,\n    },\n    display: 'block',\n    radius: {\n      '': '0',\n      card: '1r',\n    },\n    border: {\n      '': '0',\n      card: '1bw',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n  },\n});\n\nconst PanelInnerElement = tasty({\n  styles: {\n    position: 'absolute',\n    display: {\n      '': 'grid',\n      flex: 'flex',\n    },\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflow: 'auto',\n    scrollbar: 'thin #dark.2',\n    gridColumns: 'minmax(100%, 100%)',\n    gridRows: {\n      '': 'initial',\n      stretched: 'minmax(0, 1fr)',\n    },\n    radius: {\n      '': '0',\n      card: '(1r - 1bw)',\n    },\n    flow: 'row',\n    placeContent: 'start stretch',\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubePanelProps\n  extends\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    BaseProps {\n  isStretched?: boolean;\n  isCard?: boolean;\n  isFloating?: boolean;\n  styles?: Styles;\n  innerStyles?: Styles;\n  placeContent?: Styles['placeContent'];\n  placeItems?: Styles['placeItems'];\n  gridColumns?: Styles['gridTemplateColumns'];\n  gridRows?: Styles['gridTemplateRows'];\n  flow?: Styles['flow'];\n  gap?: Styles['gap'];\n  isFlex?: boolean;\n  children?: ReactNode;\n  extra?: ReactNode;\n}\n\nconst STYLES = [\n  'placeContent',\n  'placeItems',\n  'gridColumns',\n  'gridRows',\n  'flow',\n  'gap',\n  'padding',\n  'overflow',\n  'fill',\n  'color',\n  'preset',\n] as const;\n\nfunction Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    qa,\n    mods,\n    isStretched,\n    isFloating,\n    isCard,\n    isFlex,\n    styles,\n    innerStyles,\n    children,\n    extra,\n    style,\n    ...otherProps\n  } = props;\n\n  STYLES.forEach((style) => {\n    if (props[style]) {\n      innerStyles = { ...innerStyles, [style]: props[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  [\n    ...OUTER_STYLES,\n    ...BASE_STYLES,\n    ...BLOCK_STYLES,\n    ...COLOR_STYLES,\n    ...DIMENSION_STYLES,\n  ].forEach((style) => {\n    if (style in otherProps) {\n      styles = { ...styles, [style]: otherProps[style] };\n\n      delete otherProps[style];\n    }\n  });\n\n  const appliedMods = {\n    floating: isFloating,\n    stretched: isStretched,\n    card: isCard,\n    flex: isFlex,\n    ...mods,\n  };\n\n  return (\n    <PanelElement\n      ref={ref}\n      qa={qa}\n      mods={appliedMods}\n      styles={styles}\n      style={style}\n      // The loops above moved the style props into `styles` and\n      // `innerStyles`, but the type still lists them, and the `color` style\n      // prop collides with the HTML attribute of the same name.\n      {...(otherProps as BaseProps)}\n    >\n      <PanelInnerElement mods={appliedMods} styles={innerStyles}>\n        {children}\n      </PanelInnerElement>\n      {extra}\n    </PanelElement>\n  );\n}\n\nconst _Panel = forwardRef(Panel);\n\n_Panel.displayName = 'Panel';\n\nexport { _Panel as Panel };\n"],"mappings":"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"}
+{"version":3,"file":"Panel.js","names":["BASE_STYLES","BaseProps","BaseStyleProps","BLOCK_STYLES","BlockStyleProps","COLOR_STYLES","ColorStyleProps","DIMENSION_STYLES","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","extractStyles","PanelElement","as","qa","styles","position","inset","stretched","display","radius","card","border","flexGrow","placeSelf","PanelInnerElement","flex","top","left","right","bottom","overflow","scrollbar","gridColumns","gridRows","flow","placeContent","styleProps","CubePanelProps","isStretched","isCard","isFloating","innerStyles","placeItems","gap","isFlex","children","extra","STYLES","const","OUTER_STYLE_PROPS","Panel","props","ref","$","_c","mods","otherProps","style","undefined","filter","style_0","style_1","t0","floating","appliedMods","t1","t2","t3","_Panel","displayName","_c"],"sources":["../../../src/components/layout/Panel.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  DIMENSION_STYLES,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, ReactNode } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst PanelElement = tasty({\n  as: 'section',\n  qa: 'Panel',\n  styles: {\n    position: {\n      '': 'relative',\n      'stretched | floating': 'absolute',\n    },\n    inset: {\n      '': 'initial',\n      stretched: true,\n    },\n    display: 'block',\n    radius: {\n      '': '0',\n      card: '1r',\n    },\n    border: {\n      '': '0',\n      card: '1bw',\n    },\n    flexGrow: 1,\n    placeSelf: 'stretch',\n  },\n});\n\nconst PanelInnerElement = tasty({\n  styles: {\n    position: 'absolute',\n    display: {\n      '': 'grid',\n      flex: 'flex',\n    },\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflow: 'auto',\n    scrollbar: 'thin #dark.2',\n    gridColumns: 'minmax(100%, 100%)',\n    gridRows: {\n      '': 'initial',\n      stretched: 'minmax(0, 1fr)',\n    },\n    radius: {\n      '': '0',\n      card: '(1r - 1bw)',\n    },\n    flow: 'row',\n    placeContent: 'start stretch',\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubePanelProps\n  extends\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    BaseProps {\n  isStretched?: boolean;\n  isCard?: boolean;\n  isFloating?: boolean;\n  styles?: Styles;\n  innerStyles?: Styles;\n  placeContent?: Styles['placeContent'];\n  placeItems?: Styles['placeItems'];\n  gridColumns?: Styles['gridTemplateColumns'];\n  gridRows?: Styles['gridTemplateRows'];\n  flow?: Styles['flow'];\n  gap?: Styles['gap'];\n  isFlex?: boolean;\n  children?: ReactNode;\n  extra?: ReactNode;\n}\n\nconst STYLES = [\n  'placeContent',\n  'placeItems',\n  'gridColumns',\n  'gridRows',\n  'flow',\n  'gap',\n  'padding',\n  'overflow',\n  'fill',\n  'color',\n  'preset',\n] as const;\n\nconst OUTER_STYLE_PROPS = [\n  ...OUTER_STYLES,\n  ...BASE_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n  ...DIMENSION_STYLES,\n];\n\nfunction Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {\n  let {\n    qa,\n    mods,\n    isStretched,\n    isFloating,\n    isCard,\n    isFlex,\n    styles,\n    innerStyles,\n    children,\n    extra,\n    style,\n    ...otherProps\n  } = props;\n\n  // The inner style props go to the inner element; the remaining style props\n  // go to the outer one. An inner prop left `undefined` keeps `innerStyles`.\n  innerStyles = extractStyles(\n    otherProps,\n    STYLES,\n    innerStyles,\n    undefined,\n    STYLES.filter((style) => otherProps[style] === undefined),\n  );\n  styles = extractStyles(\n    otherProps,\n    OUTER_STYLE_PROPS,\n    styles,\n    undefined,\n    STYLES,\n  );\n\n  for (const style of [...STYLES, ...OUTER_STYLE_PROPS]) {\n    delete otherProps[style];\n  }\n\n  const appliedMods = {\n    floating: isFloating,\n    stretched: isStretched,\n    card: isCard,\n    flex: isFlex,\n    ...mods,\n  };\n\n  return (\n    <PanelElement\n      ref={ref}\n      qa={qa}\n      mods={appliedMods}\n      styles={styles}\n      // oxlint-disable-next-line tasty/no-style-prop -- forwards the consumer's public `style` prop\n      style={style}\n      // The style props were moved into `styles` and `innerStyles`, but the\n      // type still lists them, and the `color` style prop collides with the\n      // HTML attribute of the same name.\n      {...(otherProps as BaseProps)}\n    >\n      <PanelInnerElement mods={appliedMods} styles={innerStyles}>\n        {children}\n      </PanelInnerElement>\n      {extra}\n    </PanelElement>\n  );\n}\n\nconst _Panel = forwardRef(Panel);\n\n_Panel.displayName = 'Panel';\n\nexport { _Panel as Panel };\n"],"mappings":"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"}

package/dist/components/layout/Prefix.js

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.199.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.200.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/Prefix.tsx
@@ -24,7 +24,7 @@ const PrefixElement = tasty({
 	}
 });
 const Prefix = forwardRef(function Prefix(allProps, outerRef) {
-	const $ = c(18);
+	const $ = c(16);
 	const { onWidthChange, outerGap: t0, children, ...props } = allProps;
 	const outerGap = t0 === void 0 ? "1bw" : t0;
 	const styles = extractStyles(props, CONTAINER_STYLES);
@@ -55,34 +55,28 @@ const Prefix = forwardRef(function Prefix(allProps, outerRef) {
 	const t3 = filterBaseProps(props, { eventProps: true });
 	let t4;
 	if ($[7] !== outerGap) {
-		t4 = parseStyle(outerGap);
+		t4 = { "$prefix-gap": outerGap };
 		$[7] = outerGap;
 		$[8] = t4;
 	} else t4 = $[8];
 	let t5;
-	if ($[9] !== t4.output) {
-		t5 = { "--prefix-gap": t4.output };
-		$[9] = t4.output;
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== T0 || $[12] !== children || $[13] !== ref || $[14] !== styles || $[15] !== t3 || $[16] !== t5) {
-		t6 = /* @__PURE__ */ jsx(T0, {
+	if ($[9] !== T0 || $[10] !== children || $[11] !== ref || $[12] !== styles || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
 			...t3,
 			ref,
 			styles,
-			style: t5,
+			tokens: t4,
 			children
 		});
-		$[11] = T0;
-		$[12] = children;
-		$[13] = ref;
-		$[14] = styles;
-		$[15] = t3;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
-	return t6;
+		$[9] = T0;
+		$[10] = children;
+		$[11] = ref;
+		$[12] = styles;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
 });
 //#endregion
 export { Prefix };

package/dist/components/layout/Prefix.js.map

@@ -1 +1 @@
-{"version":3,"file":"Prefix.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","parseStyle","tasty","CSSProperties","forwardRef","useCombinedRefs","useLayoutEffect","extractStyles","PrefixElement","element","styles","position","display","placeContent","placeItems","flow","gap","left","top","bottom","color","height","CubePrefixProps","onWidthChange","Function","outerGap","Prefix","HTMLDivElement","allProps","outerRef","$","_c","t0","children","props","undefined","ref","t1","current","offsetWidth","t2","T0","t3","eventProps","t4","t5","output","t6","_c"],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAaA,MAAMW,gBAAgBN,MAAM;CAC1BO,SAAS;CACTC,QAAQ;EACNC,UAAU;EACVC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC,MAAM;EACNC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,QAAQ;CACV;AACF,CAAC;AAOD,MAAaK,SAAStB,WACpB,SAAAsB,OAAAE,UAAAC,UAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACE,MAAA,EAAAR,eAAAE,UAAAO,IAAAC,UAAA,GAAAC,UAA8DN;CAAzC,MAAAH,WAAAO,OAAAG,KAAAA,IAAA,QAAAH;CAErB,MAAAtB,SAAeH,cAAc2B,OAAOpC,gBAAgB;CACpD,MAAAsC,MAAY/B,gBAAgBwB,QAAQ;CAAE,IAAAQ;CAAA,IAAAP,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;EAEtBC,WAAA;GACd,IAAID,KAAGE,WAAHf,eACFA,cAAca,IAAGE,QAAQC,WAAY;EACtC;EACFT,EAAA,KAAAP;EAAAO,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAG,YAAAH,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;EAAEI,KAAA;GAACP;GAAUG;GAAKb;EAAa;EAACO,EAAA,KAAAG;EAAAH,EAAA,KAAAP;EAAAO,EAAA,KAAAM;EAAAN,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAJjCxB,kBAAgB+B,IAIbG,EAA8B;CAG9B,MAAAC,KAAAjC;CACK,MAAAkC,KAAA1C,gBAAgBkC,OAAO,EAAAS,YAAc,KAAK,CAAC;CAAC,IAAAC;CAAA,IAAAd,EAAA,OAAAL,UAAA;EAK9BmB,KAAA3C,WAAWwB,QAAQ;EAACK,EAAA,KAAAL;EAAAK,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAc,GAAAE,QAAA;EAF/BD,KAAA,EAAA,gBAEWD,GAAoBE,OACtC;EAAChB,EAAA,KAAAc,GAAAE;EAAAhB,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAW,MAAAX,EAAA,QAAAG,YAAAH,EAAA,QAAAM,OAAAN,EAAA,QAAApB,UAAAoB,EAAA,QAAAY,MAAAZ,EAAA,QAAAe,IAAA;EAPHE,KAAA,oBAAC,IAAD;GAAc,GACRL;GACCN;GACG1B;GACD,OAAAmC;GAKNZ;EATW,CAAA;EAUEH,EAAA,MAAAW;EAAAX,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAApB;EAAAoB,EAAA,MAAAY;EAAAZ,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAVhBiB;AAUgB,CAGtB"}
+{"version":3,"file":"Prefix.js","names":["BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","tasty","CSSProperties","forwardRef","useCombinedRefs","useLayoutEffect","extractStyles","PrefixElement","element","styles","position","display","placeContent","placeItems","flow","gap","left","top","bottom","color","height","CubePrefixProps","onWidthChange","Function","outerGap","Prefix","HTMLDivElement","allProps","outerRef","$","_c","t0","children","props","undefined","ref","t1","current","offsetWidth","t2","T0","t3","eventProps","t4","t5","_c"],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        tokens={{ '$prefix-gap': outerGap }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAYA,MAAMU,gBAAgBN,MAAM;CAC1BO,SAAS;CACTC,QAAQ;EACNC,UAAU;EACVC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC,MAAM;EACNC,KAAK;EACLC,MAAM;EACNC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,QAAQ;CACV;AACF,CAAC;AAOD,MAAaK,SAAStB,WACpB,SAAAsB,OAAAE,UAAAC,UAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACE,MAAA,EAAAR,eAAAE,UAAAO,IAAAC,UAAA,GAAAC,UAA8DN;CAAzC,MAAAH,WAAAO,OAAAG,KAAAA,IAAA,QAAAH;CAErB,MAAAtB,SAAeH,cAAc2B,OAAOnC,gBAAgB;CACpD,MAAAqC,MAAY/B,gBAAgBwB,QAAQ;CAAE,IAAAQ;CAAA,IAAAP,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;EAEtBC,WAAA;GACd,IAAID,KAAGE,WAAHf,eACFA,cAAca,IAAGE,QAAQC,WAAY;EACtC;EACFT,EAAA,KAAAP;EAAAO,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAG,YAAAH,EAAA,OAAAP,iBAAAO,EAAA,OAAAM,KAAA;EAAEI,KAAA;GAACP;GAAUG;GAAKb;EAAa;EAACO,EAAA,KAAAG;EAAAH,EAAA,KAAAP;EAAAO,EAAA,KAAAM;EAAAN,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAJjCxB,kBAAgB+B,IAIbG,EAA8B;CAG9B,MAAAC,KAAAjC;CACK,MAAAkC,KAAAzC,gBAAgBiC,OAAO,EAAAS,YAAc,KAAK,CAAC;CAAC,IAAAC;CAAA,IAAAd,EAAA,OAAAL,UAAA;EAGxCmB,KAAA,EAAA,eAAiBnB,SAAS;EAACK,EAAA,KAAAL;EAAAK,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAW,MAAAX,EAAA,QAAAG,YAAAH,EAAA,QAAAM,OAAAN,EAAA,QAAApB,UAAAoB,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,IAAA;EAJrCC,KAAA,oBAAC,IAAD;GAAc,GACRH;GACCN;GACG1B;GACA,QAAAkC;GAEPX;EANW,CAAA;EAOEH,EAAA,KAAAW;EAAAX,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAApB;EAAAoB,EAAA,MAAAY;EAAAZ,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAPhBe;AAOgB,CAGtB"}