@cube-dev/ui-kit 0.168.1 → 0.169.0

package/dist/components/fields/color/channels.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 
 //#region src/components/fields/color/channels.ts

package/dist/components/fields/color/color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 
 //#region src/components/fields/color/color.ts

package/dist/components/fields/color/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";
@@ -6,7 +6,7 @@ import { Space } from "../../layout/Space.js";
 import { InfoBadge } from "../../content/InfoBadge/InfoBadge.js";
 import { Flex } from "../../layout/Flex.js";
 import { getValidationMods } from "../validation/resolve-validation-props.js";
-import { _Label } from "../Label.js";
+import { NecessityIndicatorMark, _Label } from "../Label.js";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -105,7 +105,10 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 				placeItems: "center",
 				gap: "0.75x",
 				children: [
-					/* @__PURE__ */ jsx("div", { children: label }),
+					/* @__PURE__ */ jsxs("div", { children: [label, /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+						isRequired: requiredMark ? isRequired : false,
+						necessityIndicator
+					})] }),
 					tooltip ? /* @__PURE__ */ jsx(InfoBadge, { tooltip }) : null,
 					labelSuffix ? /* @__PURE__ */ jsx("div", { children: labelSuffix }) : null
 				]

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

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>{label}</div>\n\n          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACD,KAAK;EACL,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACD,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErB,WAAW;GACT,SAAS;GACT,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACD,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACX;GACF;EAED,WAAW;GACT,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACd;GACF;EACF;CACF,CAAC;AAGA,aAAa,cAAc;AAG7B,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;;;;;AAMF,MAAa,eAAe,WAAW,SAAS,aAC9C,OACA,KACA;CACA,MAAM,EACJ,IACA,gBAAgB,OAChB,OACA,OACA,QACA,YACA,YACA,aACA,oBACA,YACA,YACA,SACA,eACA,aACA,cACA,WACA,WACA,SACA,eAAe,MACf,SACA,UACA,aACA,aACE;CAEJ,MAAM,iBAAiB,QACrB,oBAACA;EACC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ;EACO;EACf,YAAY,eAAe,aAAa;EAC5B;EACQ;EACT;EACF;EACT,cAAY,OAAO,UAAU,WAAW,QAAQ;EAChD,GAAI;YAEJ,qBAAC;GAAK,cAAa;GAAyB,OAAM;cAChD,qBAAC;IAAM,YAAW;IAAS,KAAI;;KAC7B,oBAAC,mBAAK,QAAY;KAEjB,UAAU,oBAAC,aAAmB,UAAW,GAAG;KAE5C,cAAc,oBAAC,mBAAK,cAAkB,GAAG;;KACpC,EAEP,SAAS,oBAACC;IAAK,QAAO;cAAM;KAAa;IACrC;GACD,GACN;CAGJ,MAAM,mCAAmC;AACvC,MAAI,CAAC,YAAa,QAAO;AAEzB,SACE,oBAAC;GAAmB,gBAAa;aAC9B,gBAAgB,mBACf,oBAAC,oBAAM,cAAmB,CAC1B;IACiB;;CAKzB,MAAM,sBACJ,kBAAkB,UAAU,kBAAkB,UAC1C,4BAA4B,GAC5B;CACN,MAAM,sBACJ,kBAAkB,QAAQ,4BAA4B,GAAG;CAE3D,MAAM,OAAO;EACX,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,mBAAmB,CAAC,CAAC;EACrB,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC7C;CAGD,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,mBAAmB,SACrB,WAAW,YAAY,EAAE,QAAQ,CAAC,GAClC;AAEJ,QACE,8CACE,qBAAC;EACM;EACL,IAAI,MAAM;EACJ;EACI;EACV,GAAI;aAEH,kBAAkB,sBACjB,qBAAC;GAAI,gBAAa;cACf,gBACA;IACG,GACJ,MACJ,qBAAC;GAAI,gBAAa;;IACf;IACA;IACA,kBAAkB,CAAC,cAClB,oBAAC;KACC,MAAM;MACJ,GAAG;MAEH,SAAS,kBAAkB,CAAC,CAAC;MAC9B;KACD,QAAQ;KACR,MAAM,kBAAkB,YAAY,UAAU;eAE7C;MACc;;IAEf;GACO,EACd,YACA;EAEL"}
+{"version":3,"file":"FieldWrapper.js","names":["Label","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { InfoBadge } from '../../content/InfoBadge';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label, NecessityIndicatorMark } from '../Label';\nimport { getValidationMods } from '../validation/index';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    isInvalid,\n    isValid,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>\n            {label}\n            {/*\n              `Label` can only append the marker itself when its child is plain\n              text, and the tree below is not — so it is placed here, against\n              the label text, rather than after the full-width `Flex`.\n            */}\n            <NecessityIndicatorMark\n              isRequired={requiredMark ? isRequired : false}\n              necessityIndicator={necessityIndicator}\n            />\n          </div>\n\n          {tooltip ? <InfoBadge tooltip={tooltip} /> : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    ...getValidationMods({ isInvalid, isValid }),\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of the validation state\n                invalid: isErrorMessage || !!isInvalid,\n              }}\n              styles={messageStyles}\n              role={isErrorMessage || isInvalid ? 'alert' : undefined}\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,OAAO;EACP,aAAa;GACX,IAAI;GACJ,aAAa;GACb,aAAa;GACd;EACD,KAAK;EACL,YAAY;GACV,IAAI;GACJ,aAAa;GACd;EACD,cAAc;GACZ,IAAI;GACJ,aAAa;GACd;EACD,qBAAqB;EAErB,WAAW;GACT,SAAS;GACT,OAAO;IACL,IAAI;IACJ,aAAa;IACd;GACD,QAAQ;IACN,IAAI;IACJ,aAAa;IACb,aAAa;IACb,UAAU;IACX;GACF;EAED,WAAW;GACT,SAAS;GACT,MAAM;GACN,KAAK;GACL,YAAY;IACV,IAAI;IACJ,aAAa;IACb,aAAa;IACd;GACF;EACF;CACF,CAAC;AAGA,aAAa,cAAc;AAG7B,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;GACL,IAAI;GACJ,SAAS;GACT,OAAO;GACP,UAAU;GACX;EACD,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,qBAAqB,MAAM;CAC/B,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,WAAW;EACX,YAAY;EACb;CACF,CAAC;;;;;AAMF,MAAa,eAAe,WAAW,SAAS,aAC9C,OACA,KACA;CACA,MAAM,EACJ,IACA,gBAAgB,OAChB,OACA,OACA,QACA,YACA,YACA,aACA,oBACA,YACA,YACA,SACA,eACA,aACA,cACA,WACA,WACA,SACA,eAAe,MACf,SACA,UACA,aACA,aACE;CAEJ,MAAM,iBAAiB,QACrB,oBAACA;EACC,IAAI,OAAO,UAAU,QAAQ;EAC7B,QAAQ;EACO;EACf,YAAY,eAAe,aAAa;EAC5B;EACQ;EACT;EACF;EACT,cAAY,OAAO,UAAU,WAAW,QAAQ;EAChD,GAAI;YAEJ,qBAAC;GAAK,cAAa;GAAyB,OAAM;cAChD,qBAAC;IAAM,YAAW;IAAS,KAAI;;KAC7B,qBAAC,oBACE,OAMD,oBAAC;MACC,YAAY,eAAe,aAAa;MACpB;OACpB,IACE;KAEL,UAAU,oBAAC,aAAmB,UAAW,GAAG;KAE5C,cAAc,oBAAC,mBAAK,cAAkB,GAAG;;KACpC,EAEP,SAAS,oBAACC;IAAK,QAAO;cAAM;KAAa;IACrC;GACD,GACN;CAGJ,MAAM,mCAAmC;AACvC,MAAI,CAAC,YAAa,QAAO;AAEzB,SACE,oBAAC;GAAmB,gBAAa;aAC9B,gBAAgB,mBACf,oBAAC,oBAAM,cAAmB,CAC1B;IACiB;;CAKzB,MAAM,sBACJ,kBAAkB,UAAU,kBAAkB,UAC1C,4BAA4B,GAC5B;CACN,MAAM,sBACJ,kBAAkB,QAAQ,4BAA4B,GAAG;CAE3D,MAAM,OAAO;EACX,aAAa,kBAAkB;EAC/B,aAAa,kBAAkB;EAC/B,mBAAmB,CAAC,CAAC;EACrB,GAAG,kBAAkB;GAAE;GAAW;GAAS,CAAC;EAC7C;CAGD,MAAM,iBAAiB,gBAAgB;CACvC,MAAM,iBAAiB,CAAC,CAAC;CAGzB,MAAM,mBAAmB,SACrB,WAAW,YAAY,EAAE,QAAQ,CAAC,GAClC;AAEJ,QACE,8CACE,qBAAC;EACM;EACL,IAAI,MAAM;EACJ;EACI;EACV,GAAI;aAEH,kBAAkB,sBACjB,qBAAC;GAAI,gBAAa;cACf,gBACA;IACG,GACJ,MACJ,qBAAC;GAAI,gBAAa;;IACf;IACA;IACA,kBAAkB,CAAC,cAClB,oBAAC;KACC,MAAM;MACJ,GAAG;MAEH,SAAS,kBAAkB,CAAC,CAAC;MAC9B;KACD,QAAQ;KACR,MAAM,kBAAkB,YAAY,UAAU;eAE7C;MACc;;IAEf;GACO,EACd,YACA;EAEL"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
 import { useFormProps } from "../Form.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useI18n } from "../../../i18n/useI18n.js";
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useForm } from "./use-form.js";
 import { FormContext, _Form, useFormProps } from "./Form.js";
 import { useField } from "./use-field/use-field.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { resolveValidationProps } from "../../validation/resolve-validation-props.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { applyRules } from "./validation.js";
 import { dotize } from "@tenphi/tasty";
 import { useRef, useState } from "react";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { validate } from "email-validator";
 import validUrl from "valid-url";
 

package/dist/components/form/Label.d.ts

@@ -3,8 +3,35 @@ import { LabelPosition, NecessityIndicator, ValidationProps } from "../../shared
 import "../../shared/index.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/Label.d.ts
+interface CubeNecessityIndicatorProps {
+  /**
+   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`
+   * text. `null` suppresses it — `Label` resolves its own default to that when
+   * `isRequired` was never passed, and forwards the result here.
+   */
+  necessityIndicator?: NecessityIndicator | null;
+  isRequired?: boolean;
+  /**
+   * Whether the indicator contributes to the field's accessible name. Off by
+   * default because a required field already announces `aria-required`, and
+   * repeating it in the name is noise.
+   */
+  includeNecessityIndicatorInAccessibilityName?: boolean;
+}
+/**
+ * The `*` or `(required)` / `(optional)` marker that follows a field label.
+ *
+ * Its own component because two places render it and both need the same
+ * strings: `Label` when it is given plain text, and `FieldWrapper`, which
+ * builds a element tree around the label and therefore has to place the marker
+ * beside the label text itself rather than after the whole tree.
+ *
+ * Renders nothing unless a marker was actually asked for.
+ */
+declare function NecessityIndicatorMark(props: CubeNecessityIndicatorProps): react_jsx_runtime0.JSX.Element | null;
 declare const INLINE_LABEL_STYLES: Styles;
 declare const LABEL_STYLES: Styles;
 interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps {
@@ -18,5 +45,5 @@ interface CubeLabelProps extends BaseProps, ContainerStyleProps, ValidationProps
 }
 declare let _Label: react.ForwardRefExoticComponent<CubeLabelProps & react.RefAttributes<unknown>>;
 //#endregion
-export { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+export { CubeLabelProps, CubeNecessityIndicatorProps, INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label };
 //# sourceMappingURL=Label.d.ts.map

package/dist/components/form/Label.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
@@ -26,6 +26,34 @@ const REQUIRED_ICON = /* @__PURE__ */ jsx("svg", {
 		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"
 	}) }) })
 });
+/**
+* The `*` or `(required)` / `(optional)` marker that follows a field label.
+*
+* Its own component because two places render it and both need the same
+* strings: `Label` when it is given plain text, and `FieldWrapper`, which
+* builds a element tree around the label and therefore has to place the marker
+* beside the label text itself rather than after the whole tree.
+*
+* Renders nothing unless a marker was actually asked for.
+*/
+function NecessityIndicatorMark(props) {
+	const { isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false } = props;
+	const { t } = useI18n();
+	const requiredLabel = t("form.required", "(required)");
+	const separator = " ​";
+	if (necessityIndicator === "icon") {
+		if (!isRequired) return null;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
+			"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
+			children: REQUIRED_ICON
+		})] });
+	}
+	if (necessityIndicator !== "label") return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
+		"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
+		children: isRequired ? requiredLabel : t("form.optional", "(optional)")
+	})] });
+}
 const INLINE_LABEL_STYLES = {
 	preset: "t3",
 	color: {
@@ -60,11 +88,10 @@ function Label(props, ref) {
 	let { as, qa, children, labelPosition = "top", isRequired, necessityIndicator = isRequired != null ? "icon" : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
 	let domRef = useObjectRef(ref);
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
-	let requiredLabel = t("form.required", "(required)");
-	let necessityLabel = isRequired ? requiredLabel : t("form.optional", "(optional)");
-	let icon = /* @__PURE__ */ jsx("span", {
-		"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
-		children: REQUIRED_ICON
+	const mark = /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+		isRequired,
+		necessityIndicator,
+		includeNecessityIndicatorInAccessibilityName
 	});
 	return /* @__PURE__ */ jsx(LabelElement, {
 		...filterBaseProps(otherProps),
@@ -80,20 +107,12 @@ function Label(props, ref) {
 				isValid
 			})
 		},
-		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			children,
-			(necessityIndicator === "label" || necessityIndicator === "icon" && isRequired) && " ​",
-			necessityIndicator === "label" && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? isRequired : void 0,
-				children: necessityLabel
-			}),
-			necessityIndicator === "icon" && isRequired && icon
-		] })
+		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [children, mark] })
 	});
 }
 let _Label = forwardRef(Label);
 _Label.displayName = "Label";
 
 //#endregion
-export { INLINE_LABEL_STYLES, LABEL_STYLES, _Label };
+export { INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label };
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"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\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,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: 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    necessityIndicator = isRequired != null ? 'icon' : null,\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  let requiredLabel = t('form.required', '(required)');\n  let necessityLabel = isRequired\n    ? requiredLabel\n    : t('form.optional', '(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName ? requiredLabel : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\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      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,gBAAgB,EAAE,iBAAiB,aAAa;CACpD,IAAI,iBAAiB,aACjB,gBACA,EAAE,iBAAiB,aAAa;CACpC,IAAI,OACF,oBAAC;EACC,cACE,+CAA+C,gBAAgB;YAGhE;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":[],"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\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. `null` suppresses it — `Label` resolves its own default to that when\n   * `isRequired` was never passed, and forwards the result here.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: 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 * Renders nothing unless a marker was actually asked for.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    // Same default as `Label`'s own prop: passing `isRequired` at all opts into\n    // the asterisk, and `'label'` has to be asked for. Applied here so the two\n    // call sites cannot disagree about what an omitted prop means.\n    necessityIndicator = isRequired != null ? 'icon' : null,\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  if (necessityIndicator === 'icon') {\n    if (!isRequired) return null;\n\n    return (\n      <>\n        {separator}\n        <span\n          aria-label={\n            includeNecessityIndicatorInAccessibilityName\n              ? requiredLabel\n              : undefined\n          }\n        >\n          {REQUIRED_ICON}\n        </span>\n      </>\n    );\n  }\n\n  if (necessityIndicator !== 'label') return null;\n\n  // Hidden from screen readers when the field is required, because\n  // `aria-required` on the input already announces it. When the field is\n  // optional there is nothing else saying so, so that one is announced.\n  return (\n    <>\n      {separator}\n      <span\n        aria-hidden={\n          !includeNecessityIndicatorInAccessibilityName ? isRequired : undefined\n        }\n      >\n        {isRequired ? requiredLabel : t('form.optional', '(optional)')}\n      </span>\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,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: 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    necessityIndicator = isRequired != null ? 'icon' : null,\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      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":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;;;;;;;;;;;AA6BR,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EACJ,YAIA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,UAC7C;CACJ,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,gBAAgB,EAAE,iBAAiB,aAAa;CAItD,MAAM,YAAY;AAElB,KAAI,uBAAuB,QAAQ;AACjC,MAAI,CAAC,WAAY,QAAO;AAExB,SACE,8CACG,WACD,oBAAC;GACC,cACE,+CACI,gBACA;aAGL;IACI,IACN;;AAIP,KAAI,uBAAuB,QAAS,QAAO;AAK3C,QACE,8CACG,WACD,oBAAC;EACC,eACE,CAAC,+CAA+C,aAAa;YAG9D,aAAa,gBAAgB,EAAE,iBAAiB,aAAa;GACzD,IACN;;AAIP,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAeF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,MAAM,OACJ,oBAAC;EACa;EACQ;EAElB;GAEF;AAGJ,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YASA,OAAO,aAAa,WACnB,WAEA,8CACG,UACA,QACA;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/form/index.d.ts

@@ -12,7 +12,7 @@ import { UseFieldParams, useField } from "./Form/use-field/use-field.js";
 import { UseFieldPropsParams, useFieldProps } from "./Form/use-field/use-field-props.js";
 import { Form } from "./Form/index.js";
 import { wrapWithField } from "./wrapper.js";
-import { CubeLabelProps, INLINE_LABEL_STYLES, LABEL_STYLES, _Label } from "./Label.js";
+import { CubeLabelProps, CubeNecessityIndicatorProps, INLINE_LABEL_STYLES, LABEL_STYLES, NecessityIndicatorMark, _Label } from "./Label.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { CubeFieldWrapperProps } from "./FieldWrapper/types.js";
 import "./FieldWrapper/index.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.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/ValidationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationIndicator.js","names":[],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/index';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,kBAAkB,EAChC,WACA,WACuC;AACvC,KAAI,UAAW,QAAO;AACtB,KAAI,QAAS,QAAO;AAEpB,QAAO;;;;;;AAOT,SAAgB,uBAAuB,OAAiC;AACtE,QAAO,CAAC,CAAC,MAAM,aAAa,mBAAmB,MAAM;;;;;;AAOvD,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,cAAc;AAEtB,KAAI,CAAC,uBAAuB,MAAM,CAChC,QAAO;AAGT,QACE,oBAAC;EAAI,gBAAa;YACf,YACC,oBAAC,eAAY,gBAAa,cAAc,GAExC,kBAAkB,MAAM;GAEtB"}
+{"version":3,"file":"ValidationIndicator.js","names":[],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,kBAAkB,EAChC,WACA,WACuC;AACvC,KAAI,UAAW,QAAO;AACtB,KAAI,QAAS,QAAO;AAEpB,QAAO;;;;;;AAOT,SAAgB,uBAAuB,OAAiC;AACtE,QAAO,CAAC,CAAC,MAAM,aAAa,mBAAmB,MAAM;;;;;;AAOvD,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,cAAc;AAEtB,KAAI,CAAC,uBAAuB,MAAM,CAChC,QAAO;AAGT,QACE,oBAAC;EAAI,gBAAa;YACf,YACC,oBAAC,eAAY,gBAAa,cAAc,GAExC,kBAAkB,MAAM;GAEtB"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
 

package/dist/components/form/wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 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.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.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/Board/Board.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/layout/Board/BoardProvider.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { BoardDragActiveContext, BoardRegistryContext } from "./board-context.js";
 import { useBoardRegistry } from "./use-board-registry.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/layout/Board/BoardResponsive.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { getCompactor } from "./grid-core/compactors.js";

package/dist/components/layout/Board/Widget.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useBoardRegistry } from "./board-context.js";

package/dist/components/layout/Board/WidgetHost.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/layout/Board/board-context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/layout/Board/board-context.tsx

package/dist/components/layout/Board/board-store.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/board-store.ts
 /**
 * A tiny external store mapping widget id -> registration.

package/dist/components/layout/Board/grid-core/calculate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/calculate.ts
 /** Calculate the width of a single grid column in pixels. */
 function calcGridColWidth(positionParams) {

package/dist/components/layout/Board/grid-core/collision-modes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/collision-modes.ts
 /** Whether a single grid cell is free of every item in `others`. */
 function cellFree(others, x, y) {

package/dist/components/layout/Board/grid-core/collision.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/collision.ts
 /**
 * Check if two layout items collide (overlap).

package/dist/components/layout/Board/grid-core/compactors.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { collides, getFirstCollision } from "./collision.js";
 import { sortLayoutItemsByColRow, sortLayoutItemsByRowCol } from "./sort.js";
 import { bottom, cloneLayout, cloneLayoutItem, getStatics } from "./layout.js";

package/dist/components/layout/Board/grid-core/constraints.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/constraints.ts
 function clamp(value, min, max) {
 	return Math.max(min, Math.min(max, value));

package/dist/components/layout/Board/grid-core/group-move.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { collides, getFirstCollision } from "./collision.js";
 import { sortLayoutItemsByColRow, sortLayoutItemsByRowCol } from "./sort.js";
 import { bottom, cloneLayout, cloneLayoutItem, getStatics } from "./layout.js";

package/dist/components/layout/Board/grid-core/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { getAllCollisions, getFirstCollision } from "./collision.js";
 import { sortLayoutItems } from "./sort.js";
 

package/dist/components/layout/Board/grid-core/placement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { collides } from "./collision.js";
 
 //#region src/components/layout/Board/grid-core/placement.ts

package/dist/components/layout/Board/grid-core/sort.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 //#region src/components/layout/Board/grid-core/sort.ts
 /**
 * Sort layout items based on the compaction type.

package/dist/components/layout/Board/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { distributeEvenly, placeInFreeSlot } from "./grid-core/placement.js";
 import { getCompactor, horizontalCompactor, noCompactor, verticalCompactor } from "./grid-core/compactors.js";
 import { aspectRatio, boundedX, boundedY, containerBounds, gridBounds, maxSize, minMaxSize, minSize, snapToGrid } from "./grid-core/constraints.js";

package/dist/components/layout/Board/responsive-utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { cloneLayout, correctBounds } from "./grid-core/layout.js";
 
 //#region src/components/layout/Board/responsive-utils.ts

package/dist/components/layout/Board/use-board-layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { cloneLayout } from "./grid-core/layout.js";
 import { useCallback, useEffect, useRef, useState } from "react";

package/dist/components/layout/Board/use-board-registry.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { BoardWidgetStore } from "./board-store.js";
 import { collides } from "./grid-core/collision.js";

package/dist/components/layout/Board/use-board-select-modifier-key.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useIsDarwin } from "../../../utils/react/useIsDarwin.js";
 
 //#region src/components/layout/Board/use-board-select-modifier-key.ts

package/dist/components/layout/Board/use-board-selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/components/layout/Flex.js

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

package/dist/components/layout/Flow.js

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

package/dist/components/layout/Grid.js

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

package/dist/components/layout/Panel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.168.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.169.0 | Cube Dev Team */
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";