@cube-dev/ui-kit 0.193.1 → 0.194.0

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

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { __Radio } from "../RadioGroup/Radio.js";
@@ -195,8 +196,9 @@ function ChannelRow(t0) {
 * of the active one.
 */
 function ColorPanel(props) {
-	const $ = c(39);
+	const $ = c(42);
 	const { color, space, isDisabled, previewFormat, swatches, input, onChange, onSpaceChange } = props;
+	const { t } = useI18n();
 	let t0;
 	if ($[0] !== color) {
 		t0 = toHex(color);
@@ -243,77 +245,84 @@ function ColorPanel(props) {
 		$[13] = t5;
 	} else t5 = $[13];
 	let t6;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = COLOR_SPACES.map(_temp);
-		$[14] = t6;
-	} else t6 = $[14];
+	if ($[14] !== t) {
+		t6 = t("colorPicker.colorSpace", "Color space");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
 	let t7;
-	if ($[15] !== handleSpaceChange || $[16] !== isDisabled || $[17] !== space) {
-		t7 = /* @__PURE__ */ jsx(__Radio.Tabs, {
-			"aria-label": "Color space",
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = COLOR_SPACES.map(_temp);
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== handleSpaceChange || $[18] !== isDisabled || $[19] !== space || $[20] !== t6) {
+		t8 = /* @__PURE__ */ jsx(__Radio.Tabs, {
+			"aria-label": t6,
 			value: space,
 			isDisabled,
 			styles: SPACE_STYLES,
 			onChange: handleSpaceChange,
-			children: t6
+			children: t7
 		});
-		$[15] = handleSpaceChange;
-		$[16] = isDisabled;
-		$[17] = space;
-		$[18] = t7;
-	} else t7 = $[18];
-	const t8 = CHANNELS[space];
-	let t9;
-	if ($[19] !== color || $[20] !== isDisabled || $[21] !== onChange || $[22] !== space || $[23] !== t8) {
-		let t10;
-		if ($[25] !== color || $[26] !== isDisabled || $[27] !== onChange || $[28] !== space) {
-			t10 = (channel) => /* @__PURE__ */ jsx(ChannelRow, {
+		$[17] = handleSpaceChange;
+		$[18] = isDisabled;
+		$[19] = space;
+		$[20] = t6;
+		$[21] = t8;
+	} else t8 = $[21];
+	const t9 = CHANNELS[space];
+	let t10;
+	if ($[22] !== color || $[23] !== isDisabled || $[24] !== onChange || $[25] !== space || $[26] !== t9) {
+		let t11;
+		if ($[28] !== color || $[29] !== isDisabled || $[30] !== onChange || $[31] !== space) {
+			t11 = (channel) => /* @__PURE__ */ jsx(ChannelRow, {
 				channel,
 				color,
 				isDisabled,
 				onChange
 			}, `${space}-${channel.label}`);
-			$[25] = color;
-			$[26] = isDisabled;
-			$[27] = onChange;
-			$[28] = space;
-			$[29] = t10;
-		} else t10 = $[29];
-		t9 = t8.map(t10);
-		$[19] = color;
-		$[20] = isDisabled;
-		$[21] = onChange;
-		$[22] = space;
-		$[23] = t8;
-		$[24] = t9;
-	} else t9 = $[24];
-	let t10;
-	if ($[30] !== t9) {
-		t10 = /* @__PURE__ */ jsx(ChannelsElement, { children: t9 });
-		$[30] = t9;
-		$[31] = t10;
-	} else t10 = $[31];
+			$[28] = color;
+			$[29] = isDisabled;
+			$[30] = onChange;
+			$[31] = space;
+			$[32] = t11;
+		} else t11 = $[32];
+		t10 = t9.map(t11);
+		$[22] = color;
+		$[23] = isDisabled;
+		$[24] = onChange;
+		$[25] = space;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
 	let t11;
-	if ($[32] !== colorTokens || $[33] !== input || $[34] !== swatches || $[35] !== t10 || $[36] !== t5 || $[37] !== t7) {
-		t11 = /* @__PURE__ */ jsxs(PanelElement, {
+	if ($[33] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ChannelsElement, { children: t10 });
+		$[33] = t10;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== colorTokens || $[36] !== input || $[37] !== swatches || $[38] !== t11 || $[39] !== t5 || $[40] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(PanelElement, {
 			style: colorTokens,
 			children: [
 				input,
 				t5,
-				t7,
-				t10,
+				t8,
+				t11,
 				swatches
 			]
 		});
-		$[32] = colorTokens;
-		$[33] = input;
-		$[34] = swatches;
-		$[35] = t10;
-		$[36] = t5;
-		$[37] = t7;
+		$[35] = colorTokens;
+		$[36] = input;
+		$[37] = swatches;
 		$[38] = t11;
-	} else t11 = $[38];
-	return t11;
+		$[39] = t5;
+		$[40] = t8;
+		$[41] = t12;
+	} else t12 = $[41];
+	return t12;
 }
 function _temp(item) {
 	return /* @__PURE__ */ jsx(__Radio, {

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  /** Optional value field rendered above the preview. */\n  input?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n\n  const colorTokens = {\n    '--color-picker-color': toHex(color),\n    '--color-picker-contrast-color': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label=\"Color space\"\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAMiB,eAAehB,MAAM;CACzBiB,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,KAAK;EACLC,SAAS;EACTC,OAAO;EACT;CACD,CAAC;AAEF,MAAMC,iBAAiBxB,MAAM;CAC3BiB,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTM,YAAY;EACZC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACV;CACD,CAAC;AAEF,MAAMC,kBAAkBhC,MAAM,EAC5BkB,QAAQ;CACNC,SAAS;CACTc,aAAa;CACbR,YAAY;CACZJ,KAAK;CACP,EACD,CAAC;AAEF,MAAMa,sBAAsBlC,MAAM,EAChCkB,QAAQ;CACNU,QAAQ;CACRE,OAAO;CACPK,WAAW;CACXZ,OAAO;CACT,EACD,CAAC;AAEF,MAAMa,sBAAsBpC,MAAM,EAChCkB,QAAQ;CACNC,SAAS;CACTM,YAAY;CACd,EACD,CAAC;AAEF,MAAMY,sBAAsBrC,MAAM,EAChCkB,QAAQ;CACNU,QAAQ;CACRE,OAAO;CACPK,WAAW;CACXG,YAAY;CACZf,OAAO;CACT,EACD,CAAC;;;;;;;AAQF,MAAMgB,eAAuB;CAC3Bb,QAAQ;CACRc,KAAK;CACLb,QAAQ;CACRE,MAAM;CACNY,OAAO;CACPV,QAAQ;CACRW,MAAM;CACP;;AAGD,MAAMC,eAAuB,EAC3BZ,QAAQ,yCACT;AAED,MAAMa,eAAe,EAAE,iBAAiB,6BAA6B;AAErE,MAAMC,eAAuB,EAAEtB,OAAO,QAAQ;AAC9C,MAAMuB,aAAqB,EAAEC,UAAU,GAAG;AAuB1C,SAAAW,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAoB,MAAA,EAAAJ,SAAA3B,OAAAoB,YAAAI,aAAAK;CAAyD,IAAAG;AAAA,KAAAF,EAAA,OAAAH,WAAAG,EAAA,OAAA9B,OAAA;AAC/DgC,OAAAL,QAAOM,IAAKjC,MAAM;AAAA8B,IAAA,KAAAH;AAAAG,IAAA,KAAA9B;AAAA8B,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAA9B,MAAAG,MAAYD;CAAmB,IAAAE;AAAA,KAAAJ,EAAA,OAAAH,WAAAG,EAAA,OAAA9B,SAAA8B,EAAA,OAAAN,UAAA;AAEDU,QAAAC,UAAA;AAC5BX,YAASG,QAAOS,MAAOpC,OAAOmC,MAAM,CAAC;;AACtCL,IAAA,KAAAH;AAAAG,IAAA,KAAA9B;AAAA8B,IAAA,KAAAN;AAAAM,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAFD,MAAAO,eAAqBjE,SAAS8D,GAE5B;CAAC,IAAAI;AAAA,KAAAR,EAAA,OAAAH,QAAAY,OAAA;AAICD,OAAA,oBAAC;GAAgC,eAAA;aAC9BX,QAAOY;IACY;AAAAT,IAAA,KAAAH,QAAAY;AAAAT,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAH,WAAAG,EAAA,QAAA9B,OAAA;AAGiCwC,OAAAb,QAAOc,MACxDzC,MACD;AAAA8B,IAAA,KAAAH;AAAAG,IAAA,MAAA9B;AAAA8B,IAAA,MAAAU;OAAAA,MAAAV,EAAA;CAFqB,MAAAY,KAAA,6BAA6BF,GAElD;CAAG,IAAAG;AAAA,KAAAb,EAAA,QAAAY,IAAA;AAHCC,OAAA,EAAA,sBACiBD,IAGvB;AAAAZ,IAAA,MAAAY;AAAAZ,IAAA,MAAAa;OAAAA,MAAAb,EAAA;CAGa,MAAAc,KAAAjB,QAAOkB;CAAM,IAAAC;AAAA,KAAAhB,EAAA,QAAAH,WAAAG,EAAA,QAAA9B,OAAA;AACT8C,OAAAnB,QAAOQ,MAAOnC,MAAM;AAAA8B,IAAA,MAAAH;AAAAG,IAAA,MAAA9B;AAAA8B,IAAA,MAAAgB;OAAAA,MAAAhB,EAAA;CAA7B,MAAAiB,KAAAC,KAAIC,IAAKH,IAAsBb,IAAI;CAAA,IAAAiB;AAAA,KAAApB,EAAA,QAAAH,QAAAsB,OAAAnB,EAAA,QAAAH,QAAAwB,QAAArB,EAAA,QAAAH,QAAAkB,SAAAf,EAAA,QAAAO,gBAAAP,EAAA,QAAAV,cAAAU,EAAA,QAAAG,OAAAH,EAAA,QAAAiB,IAAA;AAF5CG,QAAA,oBAAC;GACa,cAAAN;GACL,OAAAG;GACG,UAAApB,QAAOsB;GACPhB,UAAAA;GACJ,MAAAN,QAAOwB;GACD/B;GACCX,aAAAA;GACAI,aAAAA;GACAC,aAAAA;GACHuB,UAAAA;IACV;AAAAP,IAAA,MAAAH,QAAAsB;AAAAnB,IAAA,MAAAH,QAAAwB;AAAArB,IAAA,MAAAH,QAAAkB;AAAAf,IAAA,MAAAO;AAAAP,IAAA,MAAAV;AAAAU,IAAA,MAAAG;AAAAH,IAAA,MAAAiB;AAAAjB,IAAA,MAAAoB;OAAAA,OAAApB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,QAAAoB,OAAApB,EAAA,QAAAa,IAAA;AAlBJS,QAAA,oBAAC;GACQ,OAAAT;aAMPO;IAYoB;AAAApB,IAAA,MAAAoB;AAAApB,IAAA,MAAAa;AAAAb,IAAA,MAAAsB;OAAAA,OAAAtB,EAAA;CAAA,IAAAuB;AAAA,KAAAvB,EAAA,QAAAH,WAAAG,EAAA,QAAA9B,OAAA;AACAqD,QAAA1B,QAAOtC,QAASW,MAAM;AAAA8B,IAAA,MAAAH;AAAAG,IAAA,MAAA9B;AAAA8B,IAAA,MAAAuB;OAAAA,OAAAvB,EAAA;CAAA,IAAAwB;AAAA,KAAAxB,EAAA,QAAAuB,KAAA;AAA5CC,QAAA,oBAAC,iCAAqBD,MAA6C;AAAAvB,IAAA,MAAAuB;AAAAvB,IAAA,MAAAwB;OAAAA,OAAAxB,EAAA;CAAA,IAAAyB;AAAA,KAAAzB,EAAA,QAAAsB,OAAAtB,EAAA,QAAAwB,OAAAxB,EAAA,QAAAQ,IAAA;AAxBrEiB,QAAA;GACEjB;GAGAc;GAoBAE;MACC;AAAAxB,IAAA,MAAAsB;AAAAtB,IAAA,MAAAwB;AAAAxB,IAAA,MAAAQ;AAAAR,IAAA,MAAAyB;OAAAA,OAAAzB,EAAA;AAAA,QAzBHyB;;;;;;;AAkCJ,SAAOC,WAAAC,OAAA;CAAA,MAAA3B,IAAAC,EAAA,GAAA;CACL,MAAA,EAAA/B,OAAAmB,OAAAC,YAAAC,eAAAC,UAAAC,OAAAC,UAAAC,kBASIgC;CAAM,IAAA5B;AAAA,KAAAC,EAAA,OAAA9B,OAAA;AAGgB6B,OAAA5C,MAAMe,MAAM;AAAA8B,IAAA,KAAA9B;AAAA8B,IAAA,KAAAD;OAAAA,MAAAC,EAAA;CAAA,IAAAE;AAAA,KAAAF,EAAA,OAAA9B,OAAA;AACHgC,OAAAhD,oBAAoBgB,MAAM;AAAA8B,IAAA,KAAA9B;AAAA8B,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAA,IAAAI;AAAA,KAAAJ,EAAA,OAAAD,MAAAC,EAAA,OAAAE,IAAA;AAFzCE,OAAA;GAAA,wBACML;GAAY,iCACHG;GAClC;AAAAF,IAAA,KAAAD;AAAAC,IAAA,KAAAE;AAAAF,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;CAHD,MAAA4B,cAAoBxB;CAGlB,IAAAI;AAAA,KAAAR,EAAA,OAAAL,eAAA;AAEiCa,QAAAH,UAAA;AACjCV,iBAAcU,MAAoB;;AACnCL,IAAA,KAAAL;AAAAK,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAFD,MAAA6B,oBAA0BvF,SAASkE,GAEjC;CAAC,IAAAE;AAAA,KAAAV,EAAA,OAAA9B,SAAA8B,EAAA,QAAAT,eAAA;AAKkBmB,OAAAzD,YAAYiB,OAAOqB,cAAc;AAAAS,IAAA,KAAA9B;AAAA8B,IAAA,MAAAT;AAAAS,IAAA,MAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAY;AAAA,KAAAZ,EAAA,QAAAU,IAAA;AAAlDE,OAAA,oBAAC,4BAAgBF,KAAmD;AAAAV,IAAA,MAAAU;AAAAV,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,QAAA8B,OAAAC,IAAA,4BAAA,EAAA;AAQjElB,OAAAjE,aAAYoF,IAAKC,MAUhB;AAAAjC,IAAA,MAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,QAAA6B,qBAAA7B,EAAA,QAAAV,cAAAU,EAAA,QAAAX,OAAA;AAjBJyB,OAAA,oBAAA,QAAA;GACa,cAAA;GACJzB,OAAAA;GACKC;GACJL,QAAAA;GACE4C,UAAAA;aAEThB;IAWU;AAAAb,IAAA,MAAA6B;AAAA7B,IAAA,MAAAV;AAAAU,IAAA,MAAAX;AAAAW,IAAA,MAAAc;OAAAA,MAAAd,EAAA;CAEV,MAAAgB,KAAAvE,SAAS4C;CAAM,IAAA4B;AAAA,KAAAjB,EAAA,QAAA9B,SAAA8B,EAAA,QAAAV,cAAAU,EAAA,QAAAN,YAAAM,EAAA,QAAAX,SAAAW,EAAA,QAAAgB,IAAA;EAAA,IAAAI;AAAA,MAAApB,EAAA,QAAA9B,SAAA8B,EAAA,QAAAV,cAAAU,EAAA,QAAAN,YAAAM,EAAA,QAAAX,OAAA;AAAK+B,UAAAvB,YACnB,oBAAC;IAEUA;IACF3B;IACKoB;IACFI;MAJL,GAAGL,MAAK,GAAIQ,QAAOY,QAM3B;AAAAT,KAAA,MAAA9B;AAAA8B,KAAA,MAAAV;AAAAU,KAAA,MAAAN;AAAAM,KAAA,MAAAX;AAAAW,KAAA,MAAAoB;QAAAA,OAAApB,EAAA;AARAiB,OAAAD,GAAegB,IAAKZ,IAQnB;AAAApB,IAAA,MAAA9B;AAAA8B,IAAA,MAAAV;AAAAU,IAAA,MAAAN;AAAAM,IAAA,MAAAX;AAAAW,IAAA,MAAAgB;AAAAhB,IAAA,MAAAiB;OAAAA,MAAAjB,EAAA;CAAA,IAAAoB;AAAA,KAAApB,EAAA,QAAAiB,IAAA;AATJG,QAAA,oBAAC,6BACEH,KASe;AAAAjB,IAAA,MAAAiB;AAAAjB,IAAA,MAAAoB;OAAAA,OAAApB,EAAA;CAAA,IAAAsB;AAAA,KAAAtB,EAAA,QAAA4B,eAAA5B,EAAA,QAAAP,SAAAO,EAAA,QAAAR,YAAAQ,EAAA,QAAAoB,OAAApB,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,IAAA;AAhCpBQ,QAAA,qBAAC;GAAoBM,OAAAA;;IAClBnC;IACDmB;IACAE;IAmBAM;IAWC5B;;IACY;AAAAQ,IAAA,MAAA4B;AAAA5B,IAAA,MAAAP;AAAAO,IAAA,MAAAR;AAAAQ,IAAA,MAAAoB;AAAApB,IAAA,MAAAY;AAAAZ,IAAA,MAAAc;AAAAd,IAAA,MAAAsB;OAAAA,OAAAtB,EAAA;AAAA,QAlCfsB;;AAtBG,SAAAW,MAAAC,MAAA;AAAA,QAiCG,oBAAC;EAEQA,OAAAA;EACK,cAAAvF,mBAAmBuF;EACtB,SAAAxF,kBAAkBwF;EACnBhD,QAAAA;YAEPvC,mBAAmBuF;IANfA,KAOC"}
+{"version":3,"file":"ColorPanel.js","names":["Styles","tasty","ReactNode","useEvent","useI18n","Radio","Slider","CHANNELS","COLOR_SPACE_HINTS","COLOR_SPACE_LABELS","COLOR_SPACES","ColorChannel","ColorSpace","ColorFormat","ColorValue","formatColor","getContrastingColor","toHex","PanelElement","qa","styles","display","flow","gap","padding","width","PreviewElement","placeItems","height","radius","preset","fill","color","shadow","ChannelsElement","gridColumns","ChannelLabelElement","textAlign","ChannelTrackElement","ChannelValueElement","whiteSpace","TRACK_STYLES","top","image","Fill","THUMB_STYLES","THUMB_TOKENS","SPACE_STYLES","TAB_STYLES","flexGrow","ColorPanelProps","space","isDisabled","previewFormat","swatches","input","onChange","onSpaceChange","ChannelRowProps","channel","ChannelRow","t0","$","_c","t1","max","t2","value","apply","handleChange","t3","label","t4","stops","t5","t6","t7","title","t8","t9","Math","min","t10","step","t11","t12","t13","t14","ColorPanel","props","t","colorTokens","handleSpaceChange","Symbol","for","map","_temp","item"],"sources":["../../../../src/components/fields/color/ColorPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  /** Optional palette rendered under the channels. */\n  swatches?: ReactNode;\n  /** Optional value field rendered above the preview. */\n  input?: ReactNode;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a\n * switch between the three color concepts, and one gradient slider per channel\n * of the active one.\n */\nexport function ColorPanel(props: ColorPanelProps) {\n  const {\n    color,\n    space,\n    isDisabled,\n    previewFormat,\n    swatches,\n    input,\n    onChange,\n    onSpaceChange,\n  } = props;\n  const { t } = useI18n();\n\n  const colorTokens = {\n    '--color-picker-color': toHex(color),\n    '--color-picker-contrast-color': getContrastingColor(color),\n  };\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      {input}\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label={t('colorPicker.colorSpace', 'Color space')}\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n      {swatches}\n    </PanelElement>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 

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

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

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

@@ -34,6 +34,7 @@ declare const FieldWrapper: react.ForwardRefExoticComponent<ValidationProps & {
   messageStyles?: _tenphi_tasty0.Styles;
   errorMessage?: string | react.ReactNode;
   Component?: react.ReactElement;
+  controlId?: string;
   children?: react.ReactNode;
 } & react.RefAttributes<unknown>>;
 //#endregion

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

@@ -1,15 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";
 import { _Text } from "../../content/Text.js";
-import { Space } from "../../layout/Space.js";
 import { useI18n } from "../../../i18n/useI18n.js";
+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 { NecessityIndicatorMark, _Label } from "../Label.js";
 import { warnAboutLegacyTooltip } from "../legacy-tooltip.js";
+import { getFieldDescriptionId, getFieldMessageId, useFieldTextId } from "./field-description.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
@@ -101,8 +102,8 @@ const LabelSuffixElement = tasty({ styles: {
 * @internal Do not use this component directly.
 */
 const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
-	const $ = c(63);
-	const { as, labelPosition: t0, label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, isInvalid, isValid, requiredMark: t1, labelTooltip, isHidden, labelSuffix, children } = props;
+	const $ = c(71);
+	const { as, labelPosition: t0, label, extra, styles, isRequired, isOptional, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, errorMessage, Component, controlId, isInvalid, isValid, requiredMark: t1, labelTooltip, isHidden, labelSuffix, children } = props;
 	const labelPosition = t0 === void 0 ? "top" : t0;
 	const requiredMark = t1 === void 0 ? true : t1;
 	const { t } = useI18n();
@@ -170,87 +171,109 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 		$[18] = t3;
 	} else t3 = $[18];
 	const labelComponent = t3;
+	const displayMessage = errorMessage || message;
+	const isErrorMessage = !!errorMessage;
+	const isMessageShown = !!displayMessage && !isDisabled;
 	let t4;
-	if ($[19] !== description) {
-		t4 = () => {
+	if ($[19] !== controlId || $[20] !== description) {
+		t4 = controlId && description ? getFieldDescriptionId(controlId) : void 0;
+		$[19] = controlId;
+		$[20] = description;
+		$[21] = t4;
+	} else t4 = $[21];
+	const descriptionId = t4;
+	let t5;
+	if ($[22] !== controlId || $[23] !== isMessageShown) {
+		t5 = controlId && isMessageShown ? getFieldMessageId(controlId) : void 0;
+		$[22] = controlId;
+		$[23] = isMessageShown;
+		$[24] = t5;
+	} else t5 = $[24];
+	const messageId = t5;
+	useFieldTextId(descriptionId);
+	useFieldTextId(messageId);
+	let t6;
+	if ($[25] !== description || $[26] !== descriptionId) {
+		t6 = () => {
 			if (!description) return null;
 			return /* @__PURE__ */ jsx(DescriptionElement, {
+				id: descriptionId,
 				"data-element": "Description",
 				children: wrapNodeIfPlain(description, () => /* @__PURE__ */ jsx("span", { children: description }))
 			});
 		};
-		$[19] = description;
-		$[20] = t4;
-	} else t4 = $[20];
-	const createDescriptionComponent = t4;
-	let t5;
-	if ($[21] !== createDescriptionComponent || $[22] !== labelPosition) {
-		t5 = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
-		$[21] = createDescriptionComponent;
-		$[22] = labelPosition;
-		$[23] = t5;
-	} else t5 = $[23];
-	const descriptionForLabel = t5;
-	let t6;
-	if ($[24] !== createDescriptionComponent || $[25] !== labelPosition) {
-		t6 = labelPosition === "top" ? createDescriptionComponent() : null;
-		$[24] = createDescriptionComponent;
-		$[25] = labelPosition;
-		$[26] = t6;
-	} else t6 = $[26];
-	const descriptionForInput = t6;
-	const t7 = labelPosition === "side";
-	const t8 = labelPosition === "split";
-	const t9 = !!description;
-	let t10;
-	if ($[27] !== isInvalid || $[28] !== isValid) {
-		t10 = getValidationMods({
+		$[25] = description;
+		$[26] = descriptionId;
+		$[27] = t6;
+	} else t6 = $[27];
+	const createDescriptionComponent = t6;
+	let t7;
+	if ($[28] !== createDescriptionComponent || $[29] !== labelPosition) {
+		t7 = labelPosition === "side" || labelPosition === "split" ? createDescriptionComponent() : null;
+		$[28] = createDescriptionComponent;
+		$[29] = labelPosition;
+		$[30] = t7;
+	} else t7 = $[30];
+	const descriptionForLabel = t7;
+	let t8;
+	if ($[31] !== createDescriptionComponent || $[32] !== labelPosition) {
+		t8 = labelPosition === "top" ? createDescriptionComponent() : null;
+		$[31] = createDescriptionComponent;
+		$[32] = labelPosition;
+		$[33] = t8;
+	} else t8 = $[33];
+	const descriptionForInput = t8;
+	const t9 = labelPosition === "side";
+	const t10 = labelPosition === "split";
+	const t11 = !!description;
+	let t12;
+	if ($[34] !== isInvalid || $[35] !== isValid) {
+		t12 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[27] = isInvalid;
-		$[28] = isValid;
-		$[29] = t10;
-	} else t10 = $[29];
-	let t11;
-	if ($[30] !== t10 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
-		t11 = {
-			"has-sider": t7,
-			"has-split": t8,
-			"has-description": t9,
-			...t10
+		$[34] = isInvalid;
+		$[35] = isValid;
+		$[36] = t12;
+	} else t12 = $[36];
+	let t13;
+	if ($[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t9) {
+		t13 = {
+			"has-sider": t9,
+			"has-split": t10,
+			"has-description": t11,
+			...t12
 		};
-		$[30] = t10;
-		$[31] = t7;
-		$[32] = t8;
-		$[33] = t9;
-		$[34] = t11;
-	} else t11 = $[34];
-	const mods = t11;
-	const displayMessage = errorMessage || message;
-	const isErrorMessage = !!errorMessage;
-	let t12;
-	if ($[35] !== fieldProps || $[36] !== styles) {
-		t12 = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
-		$[35] = fieldProps;
-		$[36] = styles;
-		$[37] = t12;
-	} else t12 = $[37];
-	const mergedFieldProps = t12;
-	const t13 = as ?? "div";
+		$[37] = t10;
+		$[38] = t11;
+		$[39] = t12;
+		$[40] = t9;
+		$[41] = t13;
+	} else t13 = $[41];
+	const mods = t13;
 	let t14;
-	if ($[38] !== descriptionForLabel || $[39] !== labelComponent) {
-		t14 = labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
+	if ($[42] !== fieldProps || $[43] !== styles) {
+		t14 = styles ? mergeProps(fieldProps, { styles }) : fieldProps;
+		$[42] = fieldProps;
+		$[43] = styles;
+		$[44] = t14;
+	} else t14 = $[44];
+	const mergedFieldProps = t14;
+	const t15 = as ?? "div";
+	let t16;
+	if ($[45] !== descriptionForLabel || $[46] !== labelComponent) {
+		t16 = labelComponent || descriptionForLabel ? /* @__PURE__ */ jsxs("div", {
 			"data-element": "LabelArea",
 			children: [labelComponent, descriptionForLabel]
 		}) : null;
-		$[38] = descriptionForLabel;
-		$[39] = labelComponent;
-		$[40] = t14;
-	} else t14 = $[40];
-	let t15;
-	if ($[41] !== displayMessage || $[42] !== isDisabled || $[43] !== isErrorMessage || $[44] !== isInvalid || $[45] !== messageStyles || $[46] !== mods) {
-		t15 = displayMessage && !isDisabled && /* @__PURE__ */ jsx(MessageElement, {
+		$[45] = descriptionForLabel;
+		$[46] = labelComponent;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== displayMessage || $[49] !== isErrorMessage || $[50] !== isInvalid || $[51] !== isMessageShown || $[52] !== messageId || $[53] !== messageStyles || $[54] !== mods) {
+		t17 = isMessageShown && /* @__PURE__ */ jsx(MessageElement, {
+			id: messageId,
 			mods: {
 				...mods,
 				invalid: isErrorMessage || !!isInvalid
@@ -259,56 +282,57 @@ const FieldWrapper = forwardRef(function FieldWrapper(props, ref) {
 			role: isErrorMessage || isInvalid ? "alert" : void 0,
 			children: displayMessage
 		});
-		$[41] = displayMessage;
-		$[42] = isDisabled;
-		$[43] = isErrorMessage;
-		$[44] = isInvalid;
-		$[45] = messageStyles;
-		$[46] = mods;
-		$[47] = t15;
-	} else t15 = $[47];
-	let t16;
-	if ($[48] !== Component || $[49] !== descriptionForInput || $[50] !== t15) {
-		t16 = /* @__PURE__ */ jsxs("div", {
+		$[48] = displayMessage;
+		$[49] = isErrorMessage;
+		$[50] = isInvalid;
+		$[51] = isMessageShown;
+		$[52] = messageId;
+		$[53] = messageStyles;
+		$[54] = mods;
+		$[55] = t17;
+	} else t17 = $[55];
+	let t18;
+	if ($[56] !== Component || $[57] !== descriptionForInput || $[58] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
 			"data-element": "InputArea",
 			children: [
 				Component,
 				descriptionForInput,
-				t15
+				t17
 			]
 		});
-		$[48] = Component;
-		$[49] = descriptionForInput;
-		$[50] = t15;
-		$[51] = t16;
-	} else t16 = $[51];
-	let t17;
-	if ($[52] !== isHidden || $[53] !== mergedFieldProps || $[54] !== mods || $[55] !== ref || $[56] !== t13 || $[57] !== t14 || $[58] !== t16) {
-		t17 = /* @__PURE__ */ jsxs(FieldElement, {
+		$[56] = Component;
+		$[57] = descriptionForInput;
+		$[58] = t17;
+		$[59] = t18;
+	} else t18 = $[59];
+	let t19;
+	if ($[60] !== isHidden || $[61] !== mergedFieldProps || $[62] !== mods || $[63] !== ref || $[64] !== t15 || $[65] !== t16 || $[66] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(FieldElement, {
 			ref,
-			as: t13,
+			as: t15,
 			mods,
 			isHidden,
 			...mergedFieldProps,
-			children: [t14, t16]
+			children: [t16, t18]
 		});
-		$[52] = isHidden;
-		$[53] = mergedFieldProps;
-		$[54] = mods;
-		$[55] = ref;
-		$[56] = t13;
-		$[57] = t14;
-		$[58] = t16;
-		$[59] = t17;
-	} else t17 = $[59];
-	let t18;
-	if ($[60] !== children || $[61] !== t17) {
-		t18 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t17, children] });
-		$[60] = children;
-		$[61] = t17;
-		$[62] = t18;
-	} else t18 = $[62];
-	return t18;
+		$[60] = isHidden;
+		$[61] = mergedFieldProps;
+		$[62] = mods;
+		$[63] = ref;
+		$[64] = t15;
+		$[65] = t16;
+		$[66] = t18;
+		$[67] = t19;
+	} else t19 = $[67];
+	let t20;
+	if ($[68] !== children || $[69] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t19, children] });
+		$[68] = children;
+		$[69] = t19;
+		$[70] = t20;
+	} else t20 = $[70];
+	return t20;
 });
 
 //#endregion