@wix/patterns-fields 1.72.0 → 1.74.0

package/dist/cjs/components/color-view/color-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_useTranslations","_hex","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","safeColorLib","value","ColorLib","undefined","ColorInput","exports","forwardRef","colorValue","onChange","onFocus","onBlur","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","isFocused","setIsFocused","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","normalizeHex","onInputFocus","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","toUpperCase","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillButton","onClick","onMouseDown","preventDefault","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\nimport { useTranslations } from '../../hooks/use-translations';\nimport { normalizeHex, omitHash } from './hex';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {!colorValue && (isFocused || showPicker) ? (\n                  <FillButton\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}\n                  />\n                ) : (\n                  <FillPreview fill={colorValue} onClick={onPreviewClick} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAMA,IAAAC,aAAA,GAAAD,OAAA;AAOA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,IAAA,GAAAL,OAAA;AAA+C,IAAAM,YAAA;AAAA,SAAAP,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAI/C,MAAMkB,YAAY,GAAIC,KAAa,IAAgC;EACjE,IAAI;IACF,OAAO,IAAAC,cAAQ,EAACD,KAAK,CAAC;EACxB,CAAC,CAAC,MAAM;IACN,OAAOE,SAAS;EAClB;AACF,CAAC;AAQM,MAAMC,UAAU,GAAAC,OAAA,CAAAD,UAAA,gBAAG,IAAAE,iBAAU,EAClC,CAAC;EAAEL,KAAK,EAAEM,UAAU;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAE9B;EAAE,CAAC,GAAG,IAAA+B,gCAAe,EAAC,CAAC;EAC/B,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAC1CT,UAAU,GAAG,IAAAU,aAAQ,EAACV,UAAU,CAAC,GAAG,EACtC,CAAC;EACD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAH,eAAQ,EAAC,KAAK,CAAC;EACnD,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAL,eAAQ,EAAC,KAAK,CAAC;EACjD,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAP,eAAQ,EAC5CT,UAAU,GAAGP,YAAY,CAACO,UAAU,CAAC,GAAGJ,SAC1C,CAAC;EAED,MAAMqB,aAAa,GAAG,IAAAC,kBAAW,EAC9B5C,CAAsC,IAAK;IAC1C,MAAM6C,GAAG,GAAG7C,CAAC,CAAC8C,MAAM,CAAC1B,KAAK;IAC1Bc,aAAa,CAACW,GAAG,CAAC;IAElB,MAAME,GAAG,GAAG,IAAAC,iBAAY,EAACH,GAAG,CAAC;IAC7B,IAAIE,GAAG,EAAE;MACPpB,QAAQ,YAARA,QAAQ,CAAGoB,GAAG,CAAC;MACfL,cAAc,CAACvB,YAAY,CAAC4B,GAAG,CAAC,CAAC;IACnC;EACF,CAAC,EACD,CAACpB,QAAQ,CACX,CAAC;EAED,MAAMsB,YAAY,GAAG,IAAAL,kBAAW,EAC7B5C,CAAqC,IAAK;IACzCwC,YAAY,CAAC,IAAI,CAAC;IAClBZ,OAAO,YAAPA,OAAO,CAAG5B,CAAC,CAAC;EACd,CAAC,EACD,CAAC4B,OAAO,CACV,CAAC;EAED,MAAMsB,WAAW,GAAG,IAAAN,kBAAW,EAC5B5C,CAAqC,IAAK;IACzC,MAAM+C,GAAG,GAAG,IAAAC,iBAAY,EAACf,UAAU,CAAC;IACpC,IAAIc,GAAG,EAAE;MACPpB,QAAQ,YAARA,QAAQ,CAAGoB,GAAG,CAAC;MACfb,aAAa,CAAC,IAAAE,aAAQ,EAACW,GAAG,CAAC,CAAC;IAC9B,CAAC,MAAM,IAAIrB,UAAU,EAAE;MACrBQ,aAAa,CAAC,IAAAE,aAAQ,EAACV,UAAU,CAAC,CAAC;IACrC,CAAC,MAAM;MACLQ,aAAa,CAAC,EAAE,CAAC;IACnB;IACAM,YAAY,CAAC,KAAK,CAAC;IACnBX,MAAM,YAANA,MAAM,CAAG7B,CAAC,CAAC;EACb,CAAC,EACD,CAAC2B,QAAQ,EAAEE,MAAM,EAAEI,UAAU,EAAEP,UAAU,CAC3C,CAAC;EAED,MAAMyB,eAAe,GAAG,IAAAP,kBAAW,EAChCQ,cAAyC,IAAK;IAAA,IAAAC,mBAAA;IAC7C,MAAMN,GAAG,GACP,OAAOK,cAAc,KAAK,QAAQ,GAC9BA,cAAc,GACdA,cAAc,aAAAC,mBAAA,GAAdD,cAAc,CAAEL,GAAG,CAAC,CAAC,qBAArBM,mBAAA,CAAuBC,WAAW,CAAC,CAAC;IAC1C,IAAIP,GAAG,EAAE;MACPpB,QAAQ,YAARA,QAAQ,CAAGoB,GAAG,CAAC;MACfb,aAAa,CAAC,IAAAE,aAAQ,EAACW,GAAG,CAAC,CAAC;MAC5BL,cAAc,CAACvB,YAAY,CAAC4B,GAAG,CAAC,CAAC;IACnC;IACAT,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC,EACD,CAACX,QAAQ,CACX,CAAC;EAED,MAAM4B,cAAc,GAAG,IAAAX,kBAAW,EAAC,MAAM;IACvCF,cAAc,CAAChB,UAAU,GAAGP,YAAY,CAACO,UAAU,CAAC,GAAGJ,SAAS,CAAC;IACjEgB,aAAa,CAAC,KAAK,CAAC;EACtB,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,MAAM8B,cAAc,GAAG,IAAAZ,kBAAW,EAAC,MAAM;IACvCN,aAAa,CAAEmB,IAAI,IAAK,CAACA,IAAI,CAAC;EAChC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACElE,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAAiE,KAAK,MAAAC,SAAA,CAAAlD,OAAA,MACAoB,KAAK;IACTC,GAAG,EAAEA,GAAI;IACTX,KAAK,EAAEa,UAAW;IAClBN,QAAQ,EAAEgB,aAAc;IACxBf,OAAO,EAAEqB,YAAa;IACtBpB,MAAM,EAAEqB,WAAY;IACpBW,MAAM,eAAEtE,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAAiE,KAAK,CAACG,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,GAAC,GAAc,CAAE;IACrCC,MAAM,eACJ7E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAAiE,KAAK,CAACG,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACV5E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAA2E,OAAO;MACNC,KAAK,EAAEjC,UAAW;MAClBkC,cAAc,EAAEA,CAAA,KAAMjC,aAAa,CAAC,KAAK,CAAE;MAC3CkC,OAAO;MACPC,IAAI;MACJC,KAAK,EAAE,KAAM;MACbC,SAAS,EAAC,YAAY;MACtBC,QAAQ,EAAC,cAAc;MACvBC,MAAM,EAAE;QAAEC,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAE,CAAE;MACvBC,MAAM,EAAE,IAAK;MAAAjB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAEb5E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAA2E,OAAO,CAACY,OAAO;MAAAlB,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,GACb,CAACzC,UAAU,KAAKa,SAAS,IAAIF,UAAU,CAAC,gBACvC9C,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAAwF,UAAU;MACTC,OAAO,EAAE3B,cAAe;MACxB4B,WAAW,EAAGpF,CAAC,IAAKA,CAAC,CAACqF,cAAc,CAAC,CAAE;MACvCC,cAAc,EAAErF,CAAC,CAAC,wCAAwC,CAAE;MAAA8D,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,CAC7D,CAAC,gBAEF5E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAA6F,WAAW;MAACC,IAAI,EAAE9D,UAAW;MAACyD,OAAO,EAAE3B,cAAe;MAAAO,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAE5C,CAAC,eAClB5E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAA2E,OAAO,CAACoB,OAAO;MAAA1B,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACd5E,MAAA,CAAAmB,OAAA,CAAAgD,aAAA,CAAChE,aAAA,CAAAgG,WAAW;MACVtE,KAAK,EAAEqB,WAAyC;MAChDd,QAAQ,EACJgE,CAA4B,IAC5BjD,cAAc,CACZiD,CACF,CACH;MACDC,SAAS,EAAEzC,eAAgB;MAC3B0C,QAAQ,EAAEtC,cAAe;MACzBuC,aAAa;MACbC,UAAU;MAAAhC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAlE,YAAA;QAAAmE,UAAA;QAAAC,YAAA;MAAA;IAAA,CACX,CACc,CACV,CACE,CACd;IAAAJ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlE,YAAA;MAAAmE,UAAA;MAAAC,YAAA;IAAA;EAAA,EACF,CAAC;AAEN,CACF,CAAC;AAED5C,UAAU,CAACyE,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_useTranslations","_hex","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","safeColorLib","value","ColorLib","undefined","ColorInput","exports","forwardRef","colorValue","onChange","onFocus","onBlur","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","isFocused","setIsFocused","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","normalizeHex","onInputFocus","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","toUpperCase","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillButton","onClick","onMouseDown","preventDefault","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\nimport { useTranslations } from '../../hooks/use-translations';\nimport { normalizeHex, omitHash } from './hex';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {/* Both swatches keep the mousedown default from moving focus.\n                    Without it the press focuses the swatch, and the re-render\n                    that follows the click detaches it — WDS Popover then reads\n                    the click as landing outside itself and closes again, so the\n                    picker only opened on a later click. For the same reason the\n                    branch must not depend on `showPicker`: the swatch has to\n                    survive its own click. */}\n                {!colorValue && isFocused ? (\n                  <FillButton\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}\n                  />\n                ) : (\n                  <FillPreview\n                    fill={colorValue}\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                  />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/color-view/color-view.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "colorview1092527435";
+var _namespace_ = "colorview3482796446";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "colorview1092527435__root",
-  "view": "colorview1092527435__view",
-  "fillPreview": "colorview1092527435__fillPreview"
+  "root": "colorview3482796446__root",
+  "view": "colorview3482796446__view",
+  "fillPreview": "colorview3482796446__fillPreview"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/color-view/color-view.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview1092527435\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview1092527435__root\",\"view\":\"colorview1092527435__view\",\"fillPreview\":\"colorview1092527435__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview3482796446\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview3482796446__root\",\"view\":\"colorview3482796446__view\",\"fillPreview\":\"colorview3482796446__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/color-view/form-color.driver.js

@@ -12,8 +12,14 @@ function FormColorDriver(base, body, field) {
     ...(0, _baseDriver.baseUniDriverFactory)(base),
     getLabel: () => (0, _baseDriver.getFormFieldLabelText)(formField),
     getValue: () => input.getValue(),
-    getFillButton: () => (0, _unidriver.FillButtonUniDriver)(base, body),
-    getFillPreview: () => (0, _unidriver.FillPreviewUniDriver)(base, body),
+    // The WDS drivers scope their queries to `base`, but `exists()` comes from
+    // the shared base factory and only reports on `base` itself — which here is
+    // the whole field, so it is true either way. Query the swatch directly.
+    hasFillButton: () => base.$('[data-hook="fillbutton"]').exists(),
+    hasFillPreview: () => base.$('[data-hook="fill-preview-button"]').exists(),
+    clickFillButton: () => (0, _unidriver.FillButtonUniDriver)(base, body).click(),
+    clickFillPreview: () => (0, _unidriver.FillPreviewUniDriver)(base, body).click(),
+    isPickerOpen: () => body.$('[data-hook="color-picker-hsb"]').exists(),
     isRequired: () => formField.isRequired(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage()

package/dist/cjs/components/color-view/form-color.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unidriver","require","_baseDriver","FormColorDriver","base","body","field","formField","FormFieldUniDriver","inputBase","$","id","input","InputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","getValue","getFillButton","FillButtonUniDriver","getFillPreview","FillPreviewUniDriver","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage"],"sources":["../../../../src/components/color-view/form-color.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FillButtonUniDriver,\n  FillPreviewUniDriver,\n  FormFieldUniDriver,\n  InputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormColorDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const inputBase = base.$(`[data-hook=\"color-${field.id}\"]`);\n  const input = InputUniDriver(inputBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    getValue: () => input.getValue(),\n    getFillButton: () => FillButtonUniDriver(base, body),\n    getFillPreview: () => FillPreviewUniDriver(base, body),\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAOA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,eAAeA,CAC7BC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,SAAS,GAAGL,IAAI,CAACM,CAAC,CAAC,qBAAqBJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAC3D,MAAMC,KAAK,GAAG,IAAAC,yBAAc,EAACJ,SAAS,EAAEJ,IAAI,CAAC;EAE7C,OAAO;IACL,GAAG,IAAAS,gCAAoB,EAACV,IAAI,CAAC;IAC7BW,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACT,SAAS,CAAC;IAChDU,QAAQ,EAAEA,CAAA,KAAML,KAAK,CAACK,QAAQ,CAAC,CAAC;IAChCC,aAAa,EAAEA,CAAA,KAAM,IAAAC,8BAAmB,EAACf,IAAI,EAAEC,IAAI,CAAC;IACpDe,cAAc,EAAEA,CAAA,KAAM,IAAAC,+BAAoB,EAACjB,IAAI,EAAEC,IAAI,CAAC;IACtDiB,UAAU,EAAEA,CAAA,KAAMf,SAAS,CAACe,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMhB,SAAS,CAACiB,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMlB,SAAS,CAACmB,gBAAgB,CAAC;EACpD,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_unidriver","require","_baseDriver","FormColorDriver","base","body","field","formField","FormFieldUniDriver","inputBase","$","id","input","InputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","getValue","hasFillButton","exists","hasFillPreview","clickFillButton","FillButtonUniDriver","click","clickFillPreview","FillPreviewUniDriver","isPickerOpen","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage"],"sources":["../../../../src/components/color-view/form-color.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FillButtonUniDriver,\n  FillPreviewUniDriver,\n  FormFieldUniDriver,\n  InputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormColorDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const inputBase = base.$(`[data-hook=\"color-${field.id}\"]`);\n  const input = InputUniDriver(inputBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    getValue: () => input.getValue(),\n    // The WDS drivers scope their queries to `base`, but `exists()` comes from\n    // the shared base factory and only reports on `base` itself — which here is\n    // the whole field, so it is true either way. Query the swatch directly.\n    hasFillButton: () => base.$('[data-hook=\"fillbutton\"]').exists(),\n    hasFillPreview: () => base.$('[data-hook=\"fill-preview-button\"]').exists(),\n    clickFillButton: () => FillButtonUniDriver(base, body).click(),\n    clickFillPreview: () => FillPreviewUniDriver(base, body).click(),\n    isPickerOpen: () => body.$('[data-hook=\"color-picker-hsb\"]').exists(),\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAOA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,eAAeA,CAC7BC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,SAAS,GAAGL,IAAI,CAACM,CAAC,CAAC,qBAAqBJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAC3D,MAAMC,KAAK,GAAG,IAAAC,yBAAc,EAACJ,SAAS,EAAEJ,IAAI,CAAC;EAE7C,OAAO;IACL,GAAG,IAAAS,gCAAoB,EAACV,IAAI,CAAC;IAC7BW,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACT,SAAS,CAAC;IAChDU,QAAQ,EAAEA,CAAA,KAAML,KAAK,CAACK,QAAQ,CAAC,CAAC;IAChC;IACA;IACA;IACAC,aAAa,EAAEA,CAAA,KAAMd,IAAI,CAACM,CAAC,CAAC,0BAA0B,CAAC,CAACS,MAAM,CAAC,CAAC;IAChEC,cAAc,EAAEA,CAAA,KAAMhB,IAAI,CAACM,CAAC,CAAC,mCAAmC,CAAC,CAACS,MAAM,CAAC,CAAC;IAC1EE,eAAe,EAAEA,CAAA,KAAM,IAAAC,8BAAmB,EAAClB,IAAI,EAAEC,IAAI,CAAC,CAACkB,KAAK,CAAC,CAAC;IAC9DC,gBAAgB,EAAEA,CAAA,KAAM,IAAAC,+BAAoB,EAACrB,IAAI,EAAEC,IAAI,CAAC,CAACkB,KAAK,CAAC,CAAC;IAChEG,YAAY,EAAEA,CAAA,KAAMrB,IAAI,CAACK,CAAC,CAAC,gCAAgC,CAAC,CAACS,MAAM,CAAC,CAAC;IACrEQ,UAAU,EAAEA,CAAA,KAAMpB,SAAS,CAACoB,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMrB,SAAS,CAACsB,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMvB,SAAS,CAACwB,gBAAgB,CAAC;EACpD,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/datetime-input/form-date-time.driver.js

@@ -25,7 +25,10 @@ function FormDateTimeDriver(base, body, field) {
     // @ts-expect-error
     timeInput.hasStatus('error'),
     getTimeErrorMessage: () => timeInput.getStatusMessage(),
-    isRequired: () => formField.isRequired()
+    isRequired: () => formField.isRequired(),
+    // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only
+    // element in this field carrying that attribute.
+    getInputsGap: () => base.$('[data-gap]').attr('data-gap')
   };
 }
 //# sourceMappingURL=form-date-time.driver.js.map

package/dist/cjs/components/datetime-input/form-date-time.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unidriver","require","_baseDriver","FormDateTimeDriver","base","body","field","formField","FormFieldUniDriver","dateBase","$","id","timeBase","datePicker","DatePickerUniDriver","timeInput","TimeInputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","dateExists","exists","timeExists","enterDateText","text","inputDriver","enterText","blurDate","blur","dateHasError","hasStatus","getDateErrorMessage","getStatusMessage","timeHasError","getTimeErrorMessage","isRequired"],"sources":["../../../../src/components/datetime-input/form-date-time.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  DatePickerUniDriver,\n  FormFieldUniDriver,\n  TimeInputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormDateTimeDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const dateBase = base.$(`[data-hook=\"datetime-date-${field.id}\"]`);\n  const timeBase = base.$(`[data-hook=\"datetime-time-${field.id}\"]`);\n  const datePicker = DatePickerUniDriver(dateBase, body);\n  const timeInput = TimeInputUniDriver(timeBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    dateExists: () => dateBase.exists(),\n    timeExists: () => timeBase.exists(),\n    enterDateText: (text: string) => datePicker.inputDriver.enterText(text),\n    blurDate: () => datePicker.inputDriver.blur(),\n    dateHasError: () => datePicker.inputDriver.hasStatus('error'),\n    getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),\n    timeHasError: () =>\n      // WDS TimeInput.uni.driver.d.ts types `hasStatus` as no-arg, but the\n      // runtime forwards `status` to Input.hasStatus. See TimeInput.uni.driver.js:43.\n      // @ts-expect-error\n      timeInput.hasStatus('error'),\n    getTimeErrorMessage: () => timeInput.getStatusMessage(),\n    isRequired: () => formField.isRequired(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,kBAAkBA,CAChCC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,QAAQ,GAAGL,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAMC,QAAQ,GAAGR,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAME,UAAU,GAAG,IAAAC,8BAAmB,EAACL,QAAQ,EAAEJ,IAAI,CAAC;EACtD,MAAMU,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,QAAQ,EAAEP,IAAI,CAAC;EAEpD,OAAO;IACL,GAAG,IAAAY,gCAAoB,EAACb,IAAI,CAAC;IAC7Bc,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACZ,SAAS,CAAC;IAChDa,UAAU,EAAEA,CAAA,KAAMX,QAAQ,CAACY,MAAM,CAAC,CAAC;IACnCC,UAAU,EAAEA,CAAA,KAAMV,QAAQ,CAACS,MAAM,CAAC,CAAC;IACnCE,aAAa,EAAGC,IAAY,IAAKX,UAAU,CAACY,WAAW,CAACC,SAAS,CAACF,IAAI,CAAC;IACvEG,QAAQ,EAAEA,CAAA,KAAMd,UAAU,CAACY,WAAW,CAACG,IAAI,CAAC,CAAC;IAC7CC,YAAY,EAAEA,CAAA,KAAMhB,UAAU,CAACY,WAAW,CAACK,SAAS,CAAC,OAAO,CAAC;IAC7DC,mBAAmB,EAAEA,CAAA,KAAMlB,UAAU,CAACY,WAAW,CAACO,gBAAgB,CAAC,CAAC;IACpEC,YAAY,EAAEA,CAAA;IACZ;IACA;IACA;IACAlB,SAAS,CAACe,SAAS,CAAC,OAAO,CAAC;IAC9BI,mBAAmB,EAAEA,CAAA,KAAMnB,SAAS,CAACiB,gBAAgB,CAAC,CAAC;IACvDG,UAAU,EAAEA,CAAA,KAAM5B,SAAS,CAAC4B,UAAU,CAAC;EACzC,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_unidriver","require","_baseDriver","FormDateTimeDriver","base","body","field","formField","FormFieldUniDriver","dateBase","$","id","timeBase","datePicker","DatePickerUniDriver","timeInput","TimeInputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","dateExists","exists","timeExists","enterDateText","text","inputDriver","enterText","blurDate","blur","dateHasError","hasStatus","getDateErrorMessage","getStatusMessage","timeHasError","getTimeErrorMessage","isRequired","getInputsGap","attr"],"sources":["../../../../src/components/datetime-input/form-date-time.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  DatePickerUniDriver,\n  FormFieldUniDriver,\n  TimeInputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormDateTimeDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const dateBase = base.$(`[data-hook=\"datetime-date-${field.id}\"]`);\n  const timeBase = base.$(`[data-hook=\"datetime-time-${field.id}\"]`);\n  const datePicker = DatePickerUniDriver(dateBase, body);\n  const timeInput = TimeInputUniDriver(timeBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    dateExists: () => dateBase.exists(),\n    timeExists: () => timeBase.exists(),\n    enterDateText: (text: string) => datePicker.inputDriver.enterText(text),\n    blurDate: () => datePicker.inputDriver.blur(),\n    dateHasError: () => datePicker.inputDriver.hasStatus('error'),\n    getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),\n    timeHasError: () =>\n      // WDS TimeInput.uni.driver.d.ts types `hasStatus` as no-arg, but the\n      // runtime forwards `status` to Input.hasStatus. See TimeInput.uni.driver.js:43.\n      // @ts-expect-error\n      timeInput.hasStatus('error'),\n    getTimeErrorMessage: () => timeInput.getStatusMessage(),\n    isRequired: () => formField.isRequired(),\n    // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only\n    // element in this field carrying that attribute.\n    getInputsGap: () => base.$('[data-gap]').attr('data-gap'),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,kBAAkBA,CAChCC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,QAAQ,GAAGL,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAMC,QAAQ,GAAGR,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAME,UAAU,GAAG,IAAAC,8BAAmB,EAACL,QAAQ,EAAEJ,IAAI,CAAC;EACtD,MAAMU,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,QAAQ,EAAEP,IAAI,CAAC;EAEpD,OAAO;IACL,GAAG,IAAAY,gCAAoB,EAACb,IAAI,CAAC;IAC7Bc,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACZ,SAAS,CAAC;IAChDa,UAAU,EAAEA,CAAA,KAAMX,QAAQ,CAACY,MAAM,CAAC,CAAC;IACnCC,UAAU,EAAEA,CAAA,KAAMV,QAAQ,CAACS,MAAM,CAAC,CAAC;IACnCE,aAAa,EAAGC,IAAY,IAAKX,UAAU,CAACY,WAAW,CAACC,SAAS,CAACF,IAAI,CAAC;IACvEG,QAAQ,EAAEA,CAAA,KAAMd,UAAU,CAACY,WAAW,CAACG,IAAI,CAAC,CAAC;IAC7CC,YAAY,EAAEA,CAAA,KAAMhB,UAAU,CAACY,WAAW,CAACK,SAAS,CAAC,OAAO,CAAC;IAC7DC,mBAAmB,EAAEA,CAAA,KAAMlB,UAAU,CAACY,WAAW,CAACO,gBAAgB,CAAC,CAAC;IACpEC,YAAY,EAAEA,CAAA;IACZ;IACA;IACA;IACAlB,SAAS,CAACe,SAAS,CAAC,OAAO,CAAC;IAC9BI,mBAAmB,EAAEA,CAAA,KAAMnB,SAAS,CAACiB,gBAAgB,CAAC,CAAC;IACvDG,UAAU,EAAEA,CAAA,KAAM5B,SAAS,CAAC4B,UAAU,CAAC,CAAC;IACxC;IACA;IACAC,YAAY,EAAEA,CAAA,KAAMhC,IAAI,CAACM,CAAC,CAAC,YAAY,CAAC,CAAC2B,IAAI,CAAC,UAAU;EAC1D,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/datetime-input/form-date-time.js

@@ -74,6 +74,7 @@ const _FormDateTime = props => {
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    gap: "12px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,

package/dist/cjs/components/datetime-input/form-date-time.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_react2","_form","_hooks","_string","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_FormDateTime","props","_field$validation2","_controller$fieldStat","_controller$fieldStat2","field","dataHook","inputRef","formControl","data","translate","useWixPatternsContainer","tFields","useTranslations","controller","useController","name","id","control","defaultValue","rules","validate","v","_field$validation","validation","required","isEmpty","date","useMemo","value","undefined","d","Date","isNaN","getTime","dateStatusMessage","setDateStatusMessage","useState","timeStatusMessage","setTimeStatusMessage","ref","useRef","dateRef","timeRef","dateValue","setDateValue","getDate","timeValue","setTimeValue","useEffect","current","focus","invalid","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","Layout","Cell","span","DatePicker","internalRef","_internalRef$state","inputEl","state","width","placeholderText","onChange","onValidate","validationType","newValue","format","dateWithNewDate","_value","setFullYear","getFullYear","setMonth","getMonth","setDate","toISOString","_field$validation3","dateFormat","status","fieldState","error","statusMessage","message","TimeInput","placeholder","invalidMessage","onInvalid","dateWithNewTime","setHours","getHours","setMinutes","getMinutes","setSeconds","getSeconds","setMilliseconds","getMilliseconds","_field$validation4","FormDateTime","exports","observer"],"sources":["../../../../src/components/datetime-input/form-date-time.tsx"],"sourcesContent":["import React, { useRef, useMemo, useState, useEffect } from 'react';\nimport {\n  Cell,\n  DatePicker,\n  FormField,\n  Layout,\n  TimeInput,\n} from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps, BaseInputRef } from '../../types/base-input';\nimport { useTranslations } from '../../hooks';\nimport { isEmpty } from '../../validations/string';\n\nexport interface FormDateTimeProps extends BaseInputProps<string | null> {}\n\nconst _FormDateTime = (props: FormDateTimeProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t } = useWixPatternsContainer();\n  const { t: tFields } = useTranslations();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (v) => {\n        if (field?.validation?.required && isEmpty(v)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const date = useMemo(() => {\n    if (!controller.field.value) {\n      return undefined;\n    }\n    const d = new Date(controller.field.value);\n    return isNaN(d.getTime()) ? undefined : d;\n  }, [controller.field.value]);\n\n  const [dateStatusMessage, setDateStatusMessage] = useState('');\n  const [timeStatusMessage, setTimeStatusMessage] = useState('');\n\n  const ref = useRef<BaseInputRef>({});\n  const dateRef = useRef<BaseInputRef>({});\n  const timeRef = useRef<BaseInputRef>({});\n  const [dateValue, setDateValue] = useState<number | string | undefined>(\n    date?.getDate(),\n  );\n  const [timeValue, setTimeValue] = useState<number | string | undefined>(\n    date?.getTime(),\n  );\n\n  useEffect(() => {\n    ref.current.focus = () => {\n      if (dateRef.current.invalid) {\n        return dateRef.current.focus?.();\n      }\n\n      return timeRef.current.focus?.();\n    };\n\n    inputRef?.(ref.current);\n  }, [inputRef]);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <Layout>\n        <Cell span={6}>\n          <DatePicker\n            ref={(internalRef) => {\n              const inputEl =\n                // TODO: PR to WSR needed to expose as public API\n                // @ts-expect-error internal API\n                internalRef?.state?.inputRef as HTMLElement | undefined;\n              dateRef.current.focus = () => inputEl?.focus?.();\n              // Hand the date input to react-hook-form so shouldFocusError can\n              // scroll to and focus this field when it blocks save (the\n              // composite date/time inputs have no single ref to pass directly).\n              controller.field.ref(inputEl ?? null);\n            }}\n            width=\"100%\"\n            placeholderText={tFields('CMS.formDate.placeholder')}\n            value={date}\n            onChange={() => {}}\n            // onChange is triggered only when you have valid, non-empty value.\n            // and onValidate is triggered on every change so we use onValidate\n            onValidate={({ validationType, value: newValue, format }) => {\n              if (validationType === 'valid') {\n                const dateWithNewDate = date\n                  ? new Date(date)\n                  : new Date(newValue);\n                const _value = new Date(newValue);\n                dateWithNewDate.setFullYear(_value.getFullYear());\n                dateWithNewDate.setMonth(_value.getMonth());\n                dateWithNewDate.setDate(_value.getDate());\n                controller.field.onChange(dateWithNewDate.toISOString());\n                setDateValue(new Date(newValue).getDate());\n                setDateStatusMessage('');\n                dateRef.current.invalid = false;\n              } else if (validationType === 'formatError' && newValue === '') {\n                if (field.validation?.required) {\n                  setDateStatusMessage(\n                    t('cairo.fieldValidation.requiredField'),\n                  );\n                  dateRef.current.invalid = true;\n                } else {\n                  setDateStatusMessage('');\n                  dateRef.current.invalid = false;\n                }\n                setDateValue(newValue);\n                if (!timeValue) {\n                  controller.field.onChange(null);\n                }\n              } else {\n                setDateStatusMessage(\n                  t('cairo.customFields.fieldType.date.invalid.value', {\n                    dateFormat: format ?? '',\n                  }),\n                );\n                dateRef.current.invalid = true;\n              }\n\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            status={\n              controller.fieldState.error || dateStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={\n              controller.fieldState.error?.message || dateStatusMessage\n            }\n            dataHook={`datetime-date-${field.id}`}\n          />\n        </Cell>\n        <Cell span={6}>\n          <TimeInput\n            ref={(internalRef) => {\n              timeRef.current.focus = () => internalRef?.focus();\n            }}\n            dataHook={`datetime-time-${field.id}`}\n            placeholder={tFields('CMS.formTime.placeholder')}\n            invalidMessage={tFields('CMS.formTime.invalidMessage')}\n            value={date ?? null}\n            status={\n              controller.fieldState.error || timeStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={\n              controller.fieldState.error?.message || timeStatusMessage\n            }\n            onInvalid={() => {\n              timeRef.current.invalid = true;\n              setTimeStatusMessage(\n                t('cairo.customFields.fieldType.dateAndTime.invalid.value'),\n              );\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            onChange={({ date: newValue }) => {\n              timeRef.current.invalid = false;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n\n              if (newValue) {\n                const dateWithNewTime = date ? new Date(date) : newValue;\n                dateWithNewTime.setHours(newValue.getHours());\n                dateWithNewTime.setMinutes(newValue.getMinutes());\n                dateWithNewTime.setSeconds(newValue.getSeconds());\n                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());\n                controller.field.onChange(dateWithNewTime.toISOString());\n                setTimeStatusMessage('');\n                setDateStatusMessage('');\n              } else {\n                if (!newValue) {\n                  setTimeValue('');\n                  if (field.validation?.required) {\n                    setTimeStatusMessage(\n                      t('cairo.fieldValidation.requiredField'),\n                    );\n                    timeRef.current.invalid = true;\n                  } else {\n                    setTimeStatusMessage('');\n                    timeRef.current.invalid = false;\n                  }\n                  if (!ref.current.invalid) {\n                    if (!dateValue) {\n                      controller.field.onChange(null);\n                    }\n                  }\n                }\n              }\n            }}\n          />\n        </Cell>\n      </Layout>\n    </FormField>\n  );\n};\n\nexport const FormDateTime = observer(_FormDateTime);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_react2","_form","_hooks","_string","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_FormDateTime","props","_field$validation2","_controller$fieldStat","_controller$fieldStat2","field","dataHook","inputRef","formControl","data","translate","useWixPatternsContainer","tFields","useTranslations","controller","useController","name","id","control","defaultValue","rules","validate","v","_field$validation","validation","required","isEmpty","date","useMemo","value","undefined","d","Date","isNaN","getTime","dateStatusMessage","setDateStatusMessage","useState","timeStatusMessage","setTimeStatusMessage","ref","useRef","dateRef","timeRef","dateValue","setDateValue","getDate","timeValue","setTimeValue","useEffect","current","focus","invalid","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","Layout","gap","Cell","span","DatePicker","internalRef","_internalRef$state","inputEl","state","width","placeholderText","onChange","onValidate","validationType","newValue","format","dateWithNewDate","_value","setFullYear","getFullYear","setMonth","getMonth","setDate","toISOString","_field$validation3","dateFormat","status","fieldState","error","statusMessage","message","TimeInput","placeholder","invalidMessage","onInvalid","dateWithNewTime","setHours","getHours","setMinutes","getMinutes","setSeconds","getSeconds","setMilliseconds","getMilliseconds","_field$validation4","FormDateTime","exports","observer"],"sources":["../../../../src/components/datetime-input/form-date-time.tsx"],"sourcesContent":["import React, { useRef, useMemo, useState, useEffect } from 'react';\nimport {\n  Cell,\n  DatePicker,\n  FormField,\n  Layout,\n  TimeInput,\n} from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps, BaseInputRef } from '../../types/base-input';\nimport { useTranslations } from '../../hooks';\nimport { isEmpty } from '../../validations/string';\n\nexport interface FormDateTimeProps extends BaseInputProps<string | null> {}\n\nconst _FormDateTime = (props: FormDateTimeProps) => {\n  const { field, dataHook, inputRef, formControl, data } = props;\n  const { translate: t } = useWixPatternsContainer();\n  const { t: tFields } = useTranslations();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (v) => {\n        if (field?.validation?.required && isEmpty(v)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const date = useMemo(() => {\n    if (!controller.field.value) {\n      return undefined;\n    }\n    const d = new Date(controller.field.value);\n    return isNaN(d.getTime()) ? undefined : d;\n  }, [controller.field.value]);\n\n  const [dateStatusMessage, setDateStatusMessage] = useState('');\n  const [timeStatusMessage, setTimeStatusMessage] = useState('');\n\n  const ref = useRef<BaseInputRef>({});\n  const dateRef = useRef<BaseInputRef>({});\n  const timeRef = useRef<BaseInputRef>({});\n  const [dateValue, setDateValue] = useState<number | string | undefined>(\n    date?.getDate(),\n  );\n  const [timeValue, setTimeValue] = useState<number | string | undefined>(\n    date?.getTime(),\n  );\n\n  useEffect(() => {\n    ref.current.focus = () => {\n      if (dateRef.current.invalid) {\n        return dateRef.current.focus?.();\n      }\n\n      return timeRef.current.focus?.();\n    };\n\n    inputRef?.(ref.current);\n  }, [inputRef]);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <Layout gap=\"12px\">\n        <Cell span={6}>\n          <DatePicker\n            ref={(internalRef) => {\n              const inputEl =\n                // TODO: PR to WSR needed to expose as public API\n                // @ts-expect-error internal API\n                internalRef?.state?.inputRef as HTMLElement | undefined;\n              dateRef.current.focus = () => inputEl?.focus?.();\n              // Hand the date input to react-hook-form so shouldFocusError can\n              // scroll to and focus this field when it blocks save (the\n              // composite date/time inputs have no single ref to pass directly).\n              controller.field.ref(inputEl ?? null);\n            }}\n            width=\"100%\"\n            placeholderText={tFields('CMS.formDate.placeholder')}\n            value={date}\n            onChange={() => {}}\n            // onChange is triggered only when you have valid, non-empty value.\n            // and onValidate is triggered on every change so we use onValidate\n            onValidate={({ validationType, value: newValue, format }) => {\n              if (validationType === 'valid') {\n                const dateWithNewDate = date\n                  ? new Date(date)\n                  : new Date(newValue);\n                const _value = new Date(newValue);\n                dateWithNewDate.setFullYear(_value.getFullYear());\n                dateWithNewDate.setMonth(_value.getMonth());\n                dateWithNewDate.setDate(_value.getDate());\n                controller.field.onChange(dateWithNewDate.toISOString());\n                setDateValue(new Date(newValue).getDate());\n                setDateStatusMessage('');\n                dateRef.current.invalid = false;\n              } else if (validationType === 'formatError' && newValue === '') {\n                if (field.validation?.required) {\n                  setDateStatusMessage(\n                    t('cairo.fieldValidation.requiredField'),\n                  );\n                  dateRef.current.invalid = true;\n                } else {\n                  setDateStatusMessage('');\n                  dateRef.current.invalid = false;\n                }\n                setDateValue(newValue);\n                if (!timeValue) {\n                  controller.field.onChange(null);\n                }\n              } else {\n                setDateStatusMessage(\n                  t('cairo.customFields.fieldType.date.invalid.value', {\n                    dateFormat: format ?? '',\n                  }),\n                );\n                dateRef.current.invalid = true;\n              }\n\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            status={\n              controller.fieldState.error || dateStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={\n              controller.fieldState.error?.message || dateStatusMessage\n            }\n            dataHook={`datetime-date-${field.id}`}\n          />\n        </Cell>\n        <Cell span={6}>\n          <TimeInput\n            ref={(internalRef) => {\n              timeRef.current.focus = () => internalRef?.focus();\n            }}\n            dataHook={`datetime-time-${field.id}`}\n            placeholder={tFields('CMS.formTime.placeholder')}\n            invalidMessage={tFields('CMS.formTime.invalidMessage')}\n            value={date ?? null}\n            status={\n              controller.fieldState.error || timeStatusMessage\n                ? 'error'\n                : undefined\n            }\n            statusMessage={\n              controller.fieldState.error?.message || timeStatusMessage\n            }\n            onInvalid={() => {\n              timeRef.current.invalid = true;\n              setTimeStatusMessage(\n                t('cairo.customFields.fieldType.dateAndTime.invalid.value'),\n              );\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            onChange={({ date: newValue }) => {\n              timeRef.current.invalid = false;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n\n              if (newValue) {\n                const dateWithNewTime = date ? new Date(date) : newValue;\n                dateWithNewTime.setHours(newValue.getHours());\n                dateWithNewTime.setMinutes(newValue.getMinutes());\n                dateWithNewTime.setSeconds(newValue.getSeconds());\n                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());\n                controller.field.onChange(dateWithNewTime.toISOString());\n                setTimeStatusMessage('');\n                setDateStatusMessage('');\n              } else {\n                if (!newValue) {\n                  setTimeValue('');\n                  if (field.validation?.required) {\n                    setTimeStatusMessage(\n                      t('cairo.fieldValidation.requiredField'),\n                    );\n                    timeRef.current.invalid = true;\n                  } else {\n                    setTimeStatusMessage('');\n                    timeRef.current.invalid = false;\n                  }\n                  if (!ref.current.invalid) {\n                    if (!dateValue) {\n                      controller.field.onChange(null);\n                    }\n                  }\n                }\n              }\n            }}\n          />\n        </Cell>\n      </Layout>\n    </FormField>\n  );\n};\n\nexport const FormDateTime = observer(_FormDateTime);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/delete-dialog/delete-dialog.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "deletedialog557815988";
+var _namespace_ = "deletedialog1207540592";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "deletedialog557815988__root",
-  "layout": "deletedialog557815988__layout"
+  "root": "deletedialog1207540592__root",
+  "layout": "deletedialog1207540592__layout"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/delete-dialog/delete-dialog.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/delete-dialog/delete-dialog.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"deletedialog557815988\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"deletedialog557815988__root\",\"layout\":\"deletedialog557815988__layout\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAC7F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/delete-dialog/delete-dialog.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"deletedialog1207540592\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"deletedialog1207540592__root\",\"layout\":\"deletedialog1207540592__layout\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,QAAQ,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/document/form-document-field.js

@@ -20,14 +20,15 @@ const FormDocumentField = ({
   autoFocus,
   readOnly,
   invalid,
-  dataHook
+  dataHook,
+  inputRef: forwardedRef
 }) => {
   const {
     t
   } = (0, _hooks.useTranslations)();
   const onChange = (0, _hooks.useWithCallback)(onChangeDocument, onInput);
   const onClear = (0, _hooks.useWithCallback)(onClearDocument, onInput);
-  const inputRef = (0, _react.useRef)(null);
+  const [inputRef, setInputRef] = (0, _hooks.useMergedRef)(forwardedRef);
   const viewRef = (0, _react.useRef)(null);
   const {
     callMedia,
@@ -53,7 +54,7 @@ const FormDocumentField = ({
   });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !data ? /*#__PURE__*/_react.default.createElement(_formDocumentInput.FormDocumentInput, {
     dataHook: dataHook,
-    ref: inputRef,
+    ref: setInputRef,
     theme: "dashes",
     disabled: readOnly,
     loading: loading,
@@ -66,7 +67,7 @@ const FormDocumentField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 56,
       columnNumber: 9
     }
   }) : /*#__PURE__*/_react.default.createElement(_documentControl.DocumentControl, {
@@ -86,7 +87,7 @@ const FormDocumentField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 70,
       columnNumber: 9
     }
   }), /*#__PURE__*/_react.default.createElement(_mediaControl.PasteURLForm, {
@@ -98,7 +99,7 @@ const FormDocumentField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 85,
+      lineNumber: 86,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/document/form-document-field.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_mediaUtils","_hooks","_mediaControl","_documentControl","_formDocumentFieldStCss","exports","documentClasses","classes","_formDocumentInput","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormDocumentField","data","onChange","onChangeDocument","onClear","onClearDocument","onInput","autoFocus","readOnly","invalid","dataHook","useTranslations","useWithCallback","inputRef","useRef","viewRef","callMedia","loading","downloadMedia","useMediaControl","mediaType","MEDIA_TYPES","ALL_MEDIA","value","isOpen","title","onOpen","onClose","onSave","usePasteURLForm","createElement","Fragment","FormDocumentInput","ref","theme","disabled","error","loaderBorderStyle","onAddButtonClick","onPasteURLButtonClick","__self","__source","fileName","lineNumber","columnNumber","DocumentControl","mediaURI","onReplace","onDelete","onDownload","className","viewWrapper","onOpenPasteURLForm","PasteURLForm","show","closeModal"],"sources":["../../../../src/components/document/form-document-field.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useTranslations, useWithCallback } from '../../hooks';\nimport type { AddItemActions } from '@wix/design-system';\n\nimport type { FormMediaControlProps } from '../media-control';\nimport {\n  PasteURLForm,\n  useMediaControl,\n  usePasteURLForm,\n} from '../media-control';\n\nimport { DocumentControl } from './document-control';\nimport { classes } from './form-document-field.st.css.js';\nimport { FormDocumentInput } from './form-document-input';\n\nexport { classes as documentClasses } from './form-document-field.st.css.js';\n\nexport const FormDocumentField: React.FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeDocument,\n  onClear: onClearDocument,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeDocument, onInput);\n  const onClear = useWithCallback(onClearDocument, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, loading, downloadMedia } = useMediaControl({\n    mediaType: MEDIA_TYPES.ALL_MEDIA,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({\n    onChange,\n  });\n\n  return (\n    <>\n      {!data ? (\n        <FormDocumentInput\n          dataHook={dataHook}\n          ref={inputRef}\n          theme=\"dashes\"\n          disabled={readOnly}\n          loading={loading}\n          error={invalid}\n          loaderBorderStyle=\"dashed\"\n          onAddButtonClick={callMedia}\n          onPasteURLButtonClick={onOpen({\n            title: t('CMS.document.pasteUrl.title'),\n          })}\n        />\n      ) : (\n        <DocumentControl\n          dataHook={dataHook}\n          ref={viewRef}\n          mediaURI={data}\n          readOnly={readOnly}\n          onReplace={callMedia}\n          onDelete={onClear}\n          onDownload={downloadMedia}\n          className={classes.viewWrapper}\n          loading={loading}\n          loaderBorderStyle=\"solid\"\n          onOpenPasteURLForm={onOpen({\n            title: t('CMS.document.replaceWithUrl.title'),\n          })}\n        />\n      )}\n      <PasteURLForm\n        title={title}\n        value={data}\n        show={isOpen}\n        closeModal={onClose}\n        onSave={onSave}\n      />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mediaUtils","_hooks","_mediaControl","_documentControl","_formDocumentFieldStCss","exports","documentClasses","classes","_formDocumentInput","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormDocumentField","data","onChange","onChangeDocument","onClear","onClearDocument","onInput","autoFocus","readOnly","invalid","dataHook","inputRef","forwardedRef","useTranslations","useWithCallback","setInputRef","useMergedRef","viewRef","useRef","callMedia","loading","downloadMedia","useMediaControl","mediaType","MEDIA_TYPES","ALL_MEDIA","value","isOpen","title","onOpen","onClose","onSave","usePasteURLForm","createElement","Fragment","FormDocumentInput","ref","theme","disabled","error","loaderBorderStyle","onAddButtonClick","onPasteURLButtonClick","__self","__source","fileName","lineNumber","columnNumber","DocumentControl","mediaURI","onReplace","onDelete","onDownload","className","viewWrapper","onOpenPasteURLForm","PasteURLForm","show","closeModal"],"sources":["../../../../src/components/document/form-document-field.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useMergedRef, useTranslations, useWithCallback } from '../../hooks';\nimport type { AddItemActions } from '@wix/design-system';\n\nimport type { FormMediaControlProps } from '../media-control';\nimport {\n  PasteURLForm,\n  useMediaControl,\n  usePasteURLForm,\n} from '../media-control';\n\nimport { DocumentControl } from './document-control';\nimport { classes } from './form-document-field.st.css.js';\nimport { FormDocumentInput } from './form-document-input';\n\nexport { classes as documentClasses } from './form-document-field.st.css.js';\n\nexport const FormDocumentField: React.FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeDocument,\n  onClear: onClearDocument,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n  inputRef: forwardedRef,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeDocument, onInput);\n  const onClear = useWithCallback(onClearDocument, onInput);\n\n  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, loading, downloadMedia } = useMediaControl({\n    mediaType: MEDIA_TYPES.ALL_MEDIA,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({\n    onChange,\n  });\n\n  return (\n    <>\n      {!data ? (\n        <FormDocumentInput\n          dataHook={dataHook}\n          ref={setInputRef}\n          theme=\"dashes\"\n          disabled={readOnly}\n          loading={loading}\n          error={invalid}\n          loaderBorderStyle=\"dashed\"\n          onAddButtonClick={callMedia}\n          onPasteURLButtonClick={onOpen({\n            title: t('CMS.document.pasteUrl.title'),\n          })}\n        />\n      ) : (\n        <DocumentControl\n          dataHook={dataHook}\n          ref={viewRef}\n          mediaURI={data}\n          readOnly={readOnly}\n          onReplace={callMedia}\n          onDelete={onClear}\n          onDownload={downloadMedia}\n          className={classes.viewWrapper}\n          loading={loading}\n          loaderBorderStyle=\"solid\"\n          onOpenPasteURLForm={onOpen({\n            title: t('CMS.document.replaceWithUrl.title'),\n          })}\n        />\n      )}\n      <PasteURLForm\n        title={title}\n        value={data}\n        show={isOpen}\n        closeModal={onClose}\n        onSave={onSave}\n      />\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/document/form-document-field.st.css.js

@@ -5,19 +5,19 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "formdocumentfield22050767";
+var _namespace_ = "formdocumentfield2347234029";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "formdocumentfield22050767__root",
-  "viewWrapper": "formdocumentfield22050767__viewWrapper",
-  "textWidth": "formdocumentfield22050767__textWidth",
-  "documentLoader": "formdocumentfield22050767__documentLoader",
-  "addDocument": "formdocumentfield22050767__addDocument",
-  "addItemWrapper": "formdocumentfield22050767__addItemWrapper"
+  "root": "formdocumentfield2347234029__root",
+  "viewWrapper": "formdocumentfield2347234029__viewWrapper",
+  "textWidth": "formdocumentfield2347234029__textWidth",
+  "documentLoader": "formdocumentfield2347234029__documentLoader",
+  "addDocument": "formdocumentfield2347234029__addDocument",
+  "addItemWrapper": "formdocumentfield2347234029__addItemWrapper"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/document/form-document-field.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/document/form-document-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formdocumentfield22050767\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formdocumentfield22050767__root\",\"viewWrapper\":\"formdocumentfield22050767__viewWrapper\",\"textWidth\":\"formdocumentfield22050767__textWidth\",\"documentLoader\":\"formdocumentfield22050767__documentLoader\",\"addDocument\":\"formdocumentfield22050767__addDocument\",\"addItemWrapper\":\"formdocumentfield22050767__addItemWrapper\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"BorderRadius\":\"2px\",\"documentViewBorderRadius\":\"var(--wds-border-radius-300, calc(2px * 3))\",\"documentActionsWidth\":\"196px\",\"addItemWSRBorderRadius\":\"var(--wds-border-radius-400, calc(2px * 4))\",\"documentLoaderPadding\":\"21px\",\"addDocumentPadding\":\"17px\"}; \nexport var vars = {\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-border-radius-300\":\"--wds-border-radius-300\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-color-blue-500\":\"--wds-color-blue-500\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B50\":\"--wsr-color-B50\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wds-color-red-100\":\"--wds-color-red-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,aAAa,EAAC,wCAAwC;EAAC,WAAW,EAAC,sCAAsC;EAAC,gBAAgB,EAAC,2CAA2C;EAAC,aAAa,EAAC,wCAAwC;EAAC,gBAAgB,EAAC;AAA2C,CAAC;AACnV,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,cAAc,EAAC,KAAK;EAAC,0BAA0B,EAAC,6CAA6C;EAAC,sBAAsB,EAAC,OAAO;EAAC,wBAAwB,EAAC,6CAA6C;EAAC,uBAAuB,EAAC,MAAM;EAAC,oBAAoB,EAAC;AAAM,CAAC;AAC7Q,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,mBAAmB,EAAC;AAAqB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/document/form-document-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formdocumentfield2347234029\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formdocumentfield2347234029__root\",\"viewWrapper\":\"formdocumentfield2347234029__viewWrapper\",\"textWidth\":\"formdocumentfield2347234029__textWidth\",\"documentLoader\":\"formdocumentfield2347234029__documentLoader\",\"addDocument\":\"formdocumentfield2347234029__addDocument\",\"addItemWrapper\":\"formdocumentfield2347234029__addItemWrapper\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"BorderRadius\":\"2px\",\"documentViewBorderRadius\":\"var(--wds-border-radius-300, calc(2px * 3))\",\"documentActionsWidth\":\"196px\",\"addItemWSRBorderRadius\":\"var(--wds-border-radius-400, calc(2px * 4))\",\"documentLoaderPadding\":\"21px\",\"addDocumentPadding\":\"17px\"}; \nexport var vars = {\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-border-radius-300\":\"--wds-border-radius-300\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-color-blue-500\":\"--wds-color-blue-500\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B50\":\"--wsr-color-B50\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wds-color-red-100\":\"--wds-color-red-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,6BAA6B;AAC/C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,mCAAmC;EAAC,aAAa,EAAC,0CAA0C;EAAC,WAAW,EAAC,wCAAwC;EAAC,gBAAgB,EAAC,6CAA6C;EAAC,aAAa,EAAC,0CAA0C;EAAC,gBAAgB,EAAC;AAA6C,CAAC;AAC/V,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,cAAc,EAAC,KAAK;EAAC,0BAA0B,EAAC,6CAA6C;EAAC,sBAAsB,EAAC,OAAO;EAAC,wBAAwB,EAAC,6CAA6C;EAAC,uBAAuB,EAAC,MAAM;EAAC,oBAAoB,EAAC;AAAM,CAAC;AAC7Q,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,mBAAmB,EAAC;AAAqB,CAAC","ignoreList":[]}

package/dist/cjs/components/document/form-document.js

@@ -10,6 +10,7 @@ var _react2 = require("@wix/bex-core/react");
 var _form = require("@wix/bex-core/form");
 var _string = require("../../validations/string");
 var _formDocumentField = require("./form-document-field");
+var _hooks = require("../../hooks");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/document/form-document.tsx";
 const _FormDocument = props => {
   var _field$validation2, _controller$fieldStat;
@@ -36,6 +37,7 @@ const _FormDocument = props => {
       }
     }
   });
+  const setFieldRef = (0, _hooks.useFieldRef)(controller.field.ref);
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
     required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
@@ -45,10 +47,15 @@ const _FormDocument = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 37,
       columnNumber: 5
     }
-  }, /*#__PURE__*/_react.default.createElement(_formDocumentField.FormDocumentField, {
+  }, /*#__PURE__*/_react.default.createElement(_formDocumentField.FormDocumentField
+  // Hand the add button to react-hook-form so
+  // shouldFocusError scrolls to + focuses this field when it
+  // blocks save.
+  , {
+    inputRef: setFieldRef,
     data: controller.field.value,
     onChange: value => controller.field.onChange(value),
     onClear: () => controller.field.onChange(null),
@@ -56,7 +63,7 @@ const _FormDocument = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 41,
+      lineNumber: 44,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/document/form-document.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_string","_formDocumentField","_jsxFileName","_FormDocument","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormDocumentField","onChange","onClear","FormDocument","exports","observer"],"sources":["../../../../src/components/document/form-document.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport { isEmpty } from '../../validations/string';\nimport { FormDocumentField } from './form-document-field';\n\nexport interface FormDocumentProps extends BaseInputProps<string> {}\n\nconst _FormDocument = (props: FormDocumentProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormDocumentField\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`document-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormDocument = observer(_FormDocument);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAA0D,IAAAO,YAAA;AAI1D,MAAMC,aAAa,GAAIC,KAAwB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,eAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEnB,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAChC,aAAA,CAAAiC,SAAS;IACRC,KAAK,EAAEvB,KAAK,CAACwB,WAAY;IACzBN,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCO,MAAM,EAAElB,UAAU,CAACmB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAA9B,qBAAA,GAAEQ,UAAU,CAACmB,UAAU,CAACC,KAAK,qBAA3B5B,qBAAA,CAA6B+B,OAAQ;IACpD7B,QAAQ,EAAEA,QAAS;IAAA8B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBjD,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAC3B,kBAAA,CAAA0C,iBAAiB;IAChBjC,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7BsB,QAAQ,EAAGtB,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACqC,QAAQ,CAACtB,KAAK,CAAE;IACtDuB,OAAO,EAAEA,CAAA,KAAM/B,UAAU,CAACP,KAAK,CAACqC,QAAQ,CAAC,IAAI,CAAE;IAC/CpC,QAAQ,EAAE,YAAYD,KAAK,CAACU,EAAE,EAAG;IAAAqB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAClC,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMI,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAAC7C,aAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_string","_formDocumentField","_hooks","_jsxFileName","_FormDocument","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","setFieldRef","useFieldRef","ref","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormDocumentField","inputRef","onChange","onClear","FormDocument","exports","observer"],"sources":["../../../../src/components/document/form-document.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport { isEmpty } from '../../validations/string';\nimport { FormDocumentField } from './form-document-field';\nimport { useFieldRef } from '../../hooks';\n\nexport interface FormDocumentProps extends BaseInputProps<string> {}\n\nconst _FormDocument = (props: FormDocumentProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const setFieldRef = useFieldRef(controller.field.ref);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormDocumentField\n        // Hand the add button to react-hook-form so\n        // shouldFocusError scrolls to + focuses this field when it\n        // blocks save.\n        inputRef={setFieldRef}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`document-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormDocument = observer(_FormDocument);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA0C,IAAAQ,YAAA;AAI1C,MAAMC,aAAa,GAAIC,KAAwB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,eAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAMe,WAAW,GAAG,IAAAC,kBAAW,EAACd,UAAU,CAACP,KAAK,CAACsB,GAAG,CAAC;EAErD,oBACErC,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAACpC,aAAA,CAAAqC,SAAS;IACRC,KAAK,EAAE1B,KAAK,CAAC2B,WAAY;IACzBT,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCU,MAAM,EAAErB,UAAU,CAACsB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAAjC,qBAAA,GAAEQ,UAAU,CAACsB,UAAU,CAACC,KAAK,qBAA3B/B,qBAAA,CAA6BkC,OAAQ;IACpDhC,QAAQ,EAAEA,QAAS;IAAAiC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBrD,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAAC/B,kBAAA,CAAA8C;EACC;EACA;EACA;EAAA;IACAC,QAAQ,EAAEpB,WAAY;IACtBjB,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7B0B,QAAQ,EAAG1B,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACyC,QAAQ,CAAC1B,KAAK,CAAE;IACtD2B,OAAO,EAAEA,CAAA,KAAMnC,UAAU,CAACP,KAAK,CAACyC,QAAQ,CAAC,IAAI,CAAE;IAC/CxC,QAAQ,EAAE,YAAYD,KAAK,CAACU,EAAE,EAAG;IAAAwB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,CAClC,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMK,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAACjD,aAAa,CAAC","ignoreList":[]}

package/dist/cjs/components/exclamation/exclamation.st.css.js

@@ -5,17 +5,17 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "exclamation2447154459";
+var _namespace_ = "exclamation1187432506";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "exclamation2447154459__root",
-  "exclamation": "exclamation2447154459__exclamation",
-  "actions": "exclamation2447154459__actions",
-  "action": "exclamation2447154459__action"
+  "root": "exclamation1187432506__root",
+  "exclamation": "exclamation1187432506__exclamation",
+  "actions": "exclamation1187432506__actions",
+  "action": "exclamation1187432506__action"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/exclamation/exclamation.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/exclamation/exclamation.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"exclamation2447154459\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"exclamation2447154459__root\",\"exclamation\":\"exclamation2447154459__exclamation\",\"actions\":\"exclamation2447154459__actions\",\"action\":\"exclamation2447154459__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-warning-primary\":\"--wds-color-fill-warning-primary\",\"wds-color-fill-destructive-primary\":\"--wds-color-fill-destructive-primary\",\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-200\":\"--wds-color-blue-200\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,aAAa,EAAC,oCAAoC;EAAC,SAAS,EAAC,gCAAgC;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAC3L,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,gCAAgC,EAAC,kCAAkC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC;AAAsB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/exclamation/exclamation.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"exclamation1187432506\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"exclamation1187432506__root\",\"exclamation\":\"exclamation1187432506__exclamation\",\"actions\":\"exclamation1187432506__actions\",\"action\":\"exclamation1187432506__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-warning-primary\":\"--wds-color-fill-warning-primary\",\"wds-color-fill-destructive-primary\":\"--wds-color-fill-destructive-primary\",\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-200\":\"--wds-color-blue-200\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,aAAa,EAAC,oCAAoC;EAAC,SAAS,EAAC,gCAAgC;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAC3L,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,gCAAgC,EAAC,kCAAkC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC;AAAsB,CAAC","ignoreList":[]}

package/dist/cjs/components/highlighted-text/highlighted-text.st.css.js

@@ -5,19 +5,19 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "highlightedtext950230055";
+var _namespace_ = "highlightedtext3214489151";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "highlightedtext950230055__root",
-  "substring": "highlightedtext950230055__substring"
+  "root": "highlightedtext3214489151__root",
+  "substring": "highlightedtext3214489151__substring"
 };
 var keyframes = exports.keyframes = {
-  "highlighted": "highlightedtext950230055__highlighted",
-  "highlighted-match": "highlightedtext950230055__highlighted-match"
+  "highlighted": "highlightedtext3214489151__highlighted",
+  "highlighted-match": "highlightedtext3214489151__highlighted-match"
 };
 var layers = exports.layers = {};
 var containers = exports.containers = {};