@cube-dev/ui-kit 0.121.5 → 0.121.7

package/dist/components/fields/TextInput/TextInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  extractStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#white',\n    disabled: '#dark.04',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    Omit<AriaTextFieldProps, 'validate'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  autocomplete?: string;\n}\n\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange,\n    }),\n  });\n\n  let {\n    qa,\n    mods,\n    validationState,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    wrapperRef,\n    tooltip,\n    rows = 1,\n    size = 'medium',\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, OUTER_STYLES);\n  let type = otherProps.type;\n\n  inputStyles = extractStyles(\n    otherProps,\n    INPUT_STYLE_PROPS_LIST,\n    inputStyles,\n    undefined,\n    ['styles'],\n  );\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      validationState,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n    ],\n  );\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? rows : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={autocomplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n              {isLoading && <LoadingIcon data-element=\"InputIcon\" />}\n            </div>\n          ) : null}\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, {\n    ...props,\n    form: undefined,\n  });\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiCA,MAAM,aAAa;CACjB,GAAG;CACH,SAAS;CACT,cAAc;CACd,YAAY;CACZ,UAAU;CACV,MAAM;CACN,KAAK;CACL,QAAQ;CACR,SAAS;EACP,IAAI;EACJ,UAAU;EACX;CACF;AAED,MAAa,uBAA+B;CAC1C,SAAS;CACT,MAAM;CACN,UAAU;CACV,aAAa;EACX,IAAI;EACJ,QAAQ;EACR,QAAQ;EACR,mBAAmB;EACpB;CACD,UAAU;CACV,YAAY;CACZ,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,OAAO;EACP,SAAS;EACT,SAAS;EACT,mBAAmB;EACnB,qBAAqB;EACrB,UAAU;EACX;CACD,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACT,SAAS;EACT,UAAU;EACX;CACD,QAAQ;EACN,IAAI;EACJ,SAAS;EACV;CACD,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,QAAQ;EACN,IAAI;EACJ,WAAW;EACZ;CAED,OAAO;EACL,IAAI;EACJ,cAAc;EACd,eAAe;EACf,cAAc;EACf;CAED,QAAQ;CAER,QAAQ;CAER,OAAO;EACL,GAAG;EACH,SAAS;EACV;CAED,WAAW;EACT,SAAS;EACT,YAAY;EACZ,OAAO;EACP,OAAO;EACP,UAAU;EACX;CAED,gBAAgB;EACd,GAAG;EACH,SAAS;EACT,YAAY;EACZ,OAAO;GACL,IAAI;GACJ,QAAQ;GACT;EACD,UAAU;EACX;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,yBAAyB,CAAC,GAAG,cAAc,SAAS;AAE1D,MAAa,uBAA+B;CAC1C,QAAQ;CACR,WAAW;CACX,OAAO;CACP,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;CACR,UAAU;CACV,QAAQ;EACN,IAAI;EACJ,WAAW;EACX,0BAA0B;EAC1B,0BAA0B;EAC3B;CACD,QAAQ;CACR,YAAY;CAEZ,aAAa;EACX,GAAG;EACH,QAAQ;EACT;CACD,mCAAmC,EACjC,QAAQ,8BACT;CAED,qBAAqB;CACrB,iBAAiB;EACf,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACf,QAAQ;EACT;CACD,kBAAkB;EAChB,IAAI;EACJ,cAAc;EACd,cAAc;EACd,eAAe;EACf,QAAQ;EACT;CACF;AAED,MAAM,eAAe,MAAM;CAAE,IAAI;CAAS,QAAQ;CAAsB,CAAC;AA4CzE,SAAS,eAAe,OAA+B,KAAK;AAC1D,SAAQ,iBAAiB,MAAM;AAC/B,SAAQ,aAAa,MAAM;AAC3B,SAAQ,cAAc,OAAO;EAC3B,0BAA0B;EAC1B,mBAAmB,EAAE,OAAO,gBAAgB;GAC1C,OACE,OAAO,UAAU,YAAY,OAAO,UAAU,WAC1C,OAAO,MAAM,GACb;GACN;GACD;EACF,CAAC;CAEF,IAAI,EACF,IACA,MACA,iBACA,QACA,YACA,WACA,WACA,YACA,cACA,UACA,WACA,kBACA,OACA,cAAc,EAAE,EAChB,QACA,iBAAiB,UACjB,YACA,SACA,OAAO,GACP,OAAO,UACP,cACA,MACA,WACA,WACA,MACA,GAAG,eACD;CAEJ,IAAI,SAAS,cAAc,YAAY,aAAa;CACpD,IAAI,OAAO,WAAW;AAEtB,eAAc,cACZ,YACA,wBACA,aACA,QACA,CAAC,SAAS,CACX;CAED,IAAI,cAAoC,YAAY,aAAa;CACjE,IAAI,EAAE,WAAW,eAAeA,WAAS,EAAE,YAAY,CAAC;CACxD,IAAI,EAAE,YAAY,cAAc,SAAS,EAAE,YAAY,CAAC;CACxD,IAAI,SAAS,OAAO,KAAK;AAEzB,YAAW,gBAAgB,SAAS;AAGpC,qBAAoB,YAAY;EAC9B,GAAG,mBAAmB,QAAQ,SAAS;EACvC,SAAS;AACP,OAAI,UAAU,QACZ,UAAS,QAAQ,QAAQ;;EAG7B,kBAAkB;AAChB,UAAO,UAAU;;EAEpB,EAAE;CAEH,IAAI,YAAY,oBAAoB;CAEpC,IAAI,aAAa,aADI,YAAY,cAAc,UACF;AAG7C,KAAI,CAAC,YAAY,aAAa;AAC5B,MAAI,CAAC,WACH,cAAa,EAAE;AAGjB,aAAW,cAAc;;AAG3B,KAAI,MAAM;AACR,SAAO,oBAAC;GAAI,gBAAa;aAAa;IAAW;AAEjD,MAAI,OACF,UACE,8CACG,MACA,UACA;MAGL,UAAS;;CAIb,MAAM,YAAY,eACT;EACL,SAAS;EACT,OAAO,oBAAoB;EAC3B,UAAU,CAAC,CAAC;EACZ,SAAS;EACT,SAAS;EACT,UAAU;EACV,WAAW;EACX,QAAQ,CAAC,CAAC;EACV,QAAS,mBAAmB,CAAC,aAAc,aAAa,CAAC,CAAC;EAC1D,GAAG;EACJ,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,qBADkB,aAAa,SAAS,cAEzB,WAAW,OAAO,SACjC,EACE,YAAY,sBACb,GACD,EAAE;AA4CR,QAAO,cAzCL,qBAAC;EACC,KAAK;EACL,MAAM;EACN,aAAW;EACH;EACR,GAAI;;GAEH,SAAS,oBAAC;IAAI,gBAAa;cAAU;KAAa,GAAG;GACtD,oBAAC;IACC,IAAI,MAAM;IACV,IAAI;IACJ,mBAAgB;IAChB,GAAIC,aAAW,YAAY,YAAY,WAAW;IAClD,KAAK;IACL,MAAM,YAAY,OAAO;IACzB,MAAM;IACN,OAAO;IACP,kBAAgB,YAAY,KAAK;IACtB;IACX,aAAW;IACX,cAAc;IACd,QAAQ;IACR,UAAU,CAAC,CAAC;IACD;IACA;KACX;GACA,mBAAmB,CAAC,aAAc,aAAa,SAC/C,qBAAC;IAAI,gBAAa;;KACf,mBAAmB,WAAW,SAAS;KACtC,mBAAmB,CAAC,aAAc,YAClC,qBAAC;MAAI,gBAAa;iBACf,mBAAmB,CAAC,YAAY,aAAa,MAC7C,aAAa,oBAAC,eAAY,gBAAa,cAAc;OAClD,GACJ;KACH,mBAAmB,UAAU,SAAS;;KACnC,GACJ;;GACgB,EAGQ,QAAQ;EACtC,GAAG;EACH,MAAM;EACP,CAAC;;AAGJ,MAAM,gBAAgB,WAAW,eAAe"}
+{"version":3,"file":"TextInputBase.js","names":["useFocus","mergeProps"],"sources":["../../../../src/components/fields/TextInput/TextInputBase.tsx"],"sourcesContent":["import { createFocusableRef } from '@react-spectrum/utils';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  COLOR_STYLES,\n  ColorStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Props,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { AriaNumberFieldProps, AriaTextFieldProps, useHover } from 'react-aria';\n\nimport { LoadingIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps, useCombinedRefs } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { useFieldProps, useFormProps, wrapWithField } from '../../form';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nconst ADD_STYLES = {\n  $: '>',\n  display: 'grid',\n  placeContent: 'stretch',\n  placeItems: 'center',\n  gridRows: '1sf',\n  flow: 'column',\n  gap: 0,\n  cursor: 'inherit',\n  opacity: {\n    '': 1,\n    disabled: '$disabled-opacity',\n  },\n};\n\nexport const INPUT_WRAPPER_STYLES: Styles = {\n  display: 'grid',\n  flow: 'row',\n  position: 'relative',\n  gridColumns: {\n    '': '1sf',\n    prefix: 'max-content 1sf',\n    suffix: '1sf max-content',\n    'prefix & suffix': 'max-content 1sf max-content',\n  },\n  gridRows: '1sf',\n  placeItems: 'stretch',\n  fill: {\n    '': '#white',\n    disabled: '#dark.04',\n  },\n  border: {\n    '': true,\n    valid: '#success-text.50',\n    invalid: '#danger-text.50',\n    focused: '#primary-text',\n    'valid & focused': '#success-text',\n    'invalid & focused': '#danger-text',\n    disabled: true,\n  },\n  preset: 't3',\n  radius: true,\n  cursor: 'text',\n  color: {\n    '': '#dark-02',\n    focused: '#dark-02',\n    invalid: '#danger-text',\n    disabled: '#dark.30',\n  },\n  zIndex: {\n    '': 'initial',\n    focused: 1,\n  },\n  boxSizing: 'border-box',\n  transition: 'theme',\n  backgroundClip: 'content-box',\n  height: {\n    '': '$size $size',\n    multiline: 'min $size',\n  },\n\n  $size: {\n    '': '$size-md',\n    'size=small': '$size-sm',\n    'size=medium': '$size-md',\n    'size=large': '$size-lg',\n  },\n\n  Prefix: ADD_STYLES,\n\n  Suffix: ADD_STYLES,\n\n  State: {\n    $: '> Suffix >',\n    display: 'flex',\n  },\n\n  InputIcon: {\n    display: 'grid',\n    placeItems: 'center',\n    width: 'min $size-sm',\n    color: 'inherit',\n    fontSize: '$icon-size',\n  },\n\n  ValidationIcon: {\n    $: '> Suffix > State >',\n    display: 'grid',\n    placeItems: 'center',\n    width: {\n      '': 'min $size-sm',\n      suffix: 'min $size-xs',\n    },\n    fontSize: '$icon-size',\n  },\n};\n\nconst InputWrapperElement = tasty({\n  qa: 'InputWrapper',\n  styles: INPUT_WRAPPER_STYLES,\n});\n\nconst PROP_STYLES = [\n  ...BASE_STYLES,\n  ...OUTER_STYLES,\n  ...BLOCK_STYLES,\n  ...COLOR_STYLES,\n];\n\nexport const DEFAULT_INPUT_STYLES: Styles = {\n  recipe: 'reset input / input-autofill',\n  placeSelf: 'stretch',\n  width: 'initial 100% 100%',\n  transition: 'theme',\n  radius: true,\n  padding: '$vertical-padding $right-padding $vertical-padding $left-padding',\n  textAlign: 'left',\n  preset: 't3',\n  flexGrow: 1,\n  margin: {\n    '': 0,\n    multiline: '((($size-md - 1lh) / 2) - 1bw) 0',\n    'multiline & size=small': '((($size-sm - 1lh) / 2) - 1bw) 0',\n    'multiline & size=large': '((($size-lg - 1lh) / 2) - 1bw) 0',\n  },\n  resize: 'none',\n  userSelect: 'auto',\n\n  Placeholder: {\n    $: '::placeholder',\n    recipe: 'input-placeholder',\n  },\n  '&::-webkit-search-cancel-button': {\n    recipe: 'input-search-cancel-button',\n  },\n\n  '$vertical-padding': 0,\n  '$left-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    prefix: '0',\n  },\n  '$right-padding': {\n    '': '(1x - 1bw)',\n    'size=small': '(1x - 1bw)',\n    'size=large': '(1.25x - 1bw)',\n    'size=xlarge': '(1.5x - 1bw)',\n    suffix: '0',\n  },\n};\n\nconst InputElement = tasty({ qa: 'Input', styles: DEFAULT_INPUT_STYLES });\n\nexport interface CubeTextInputBaseProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    BaseStyleProps,\n    ColorStyleProps,\n    Omit<AriaTextFieldProps, 'validate'>,\n    FieldBaseProps {\n  validate?: AriaTextFieldProps['validate'] | AriaNumberFieldProps['validate'];\n  /** Left input icon */\n  icon?: ReactElement | null;\n  /** Input decoration before the main input */\n  prefix?: ReactNode;\n  /** Input decoration after the main input */\n  suffix?: ReactNode;\n  /** Suffix position goes before or after the validation and loading statuses */\n  suffixPosition?: 'before' | 'after';\n  /** Whether the input is multiline */\n  multiLine?: boolean;\n  /** Whether the input should have autofocus */\n  autoFocus?: boolean;\n  /** Direct input props */\n  inputProps?: Props;\n  /** Direct input wrapper props */\n  wrapperProps?: Props;\n  /** The input ref */\n  inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;\n  /** The wrapper ref */\n  wrapperRef?: RefObject<HTMLDivElement>;\n  /** Whether the input has the loading status */\n  isLoading?: boolean;\n  /** The loading status indicator */\n  loadingIndicator?: ReactNode;\n  /** Style map for the input */\n  inputStyles?: Styles;\n  /** The number of rows for the input. Only applies to textarea. */\n  rows?: number;\n  /** The resize CSS property sets whether an element is resizable, and if so, in which directions. */\n  resize?: Styles['resize'];\n  /** The size of the input */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  autocomplete?: string;\n}\n\nfunction _TextInputBase(props: CubeTextInputBaseProps, ref) {\n  props = useProviderProps(props);\n  props = useFormProps(props);\n  props = useFieldProps(props, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value:\n        typeof value === 'string' || typeof value === 'number'\n          ? String(value)\n          : '',\n      onChange,\n    }),\n  });\n\n  let {\n    qa,\n    mods,\n    validationState,\n    prefix,\n    isDisabled,\n    multiLine,\n    autoFocus,\n    inputProps,\n    wrapperProps,\n    inputRef,\n    isLoading,\n    loadingIndicator,\n    value,\n    inputStyles = {},\n    suffix,\n    suffixPosition = 'before',\n    wrapperRef,\n    tooltip,\n    rows = 1,\n    size = 'medium',\n    autocomplete,\n    icon,\n    maxLength,\n    minLength,\n    form,\n    resize,\n    ...otherProps\n  } = props;\n\n  let styles = extractStyles(otherProps, PROP_STYLES);\n  let type = otherProps.type;\n\n  if (resize) {\n    inputStyles = { ...inputStyles, resize };\n  }\n\n  let ElementType: 'textarea' | 'input' = multiLine ? 'textarea' : 'input';\n  let { isFocused, focusProps } = useFocus({ isDisabled });\n  let { hoverProps, isHovered } = useHover({ isDisabled });\n  let domRef = useRef(null);\n\n  inputRef = useCombinedRefs(inputRef);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef?.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef?.current;\n    },\n  }));\n\n  let isInvalid = validationState === 'invalid';\n  let validationIcon = isInvalid ? InvalidIcon : ValidIcon;\n  let validation = cloneElement(validationIcon);\n\n  // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270\n  if (!inputProps?.placeholder) {\n    if (!inputProps) {\n      inputProps = {};\n    }\n\n    inputProps.placeholder = ' ';\n  }\n\n  if (icon) {\n    icon = <div data-element=\"InputIcon\">{icon}</div>;\n\n    if (prefix) {\n      prefix = (\n        <>\n          {icon}\n          {prefix}\n        </>\n      );\n    } else {\n      prefix = icon;\n    }\n  }\n\n  const modifiers = useMemo(\n    () => ({\n      invalid: isInvalid,\n      valid: validationState === 'valid',\n      loadable: !!loadingIndicator,\n      focused: isFocused,\n      hovered: isHovered,\n      disabled: isDisabled,\n      multiline: multiLine,\n      prefix: !!prefix,\n      suffix: (validationState && !isLoading) || isLoading || !!suffix,\n      ...mods,\n    }),\n    [\n      mods,\n      isInvalid,\n      validationState,\n      loadingIndicator,\n      isFocused,\n      isDisabled,\n      isHovered,\n      multiLine,\n      prefix,\n      suffix,\n    ],\n  );\n\n  const hasTextSecurity = multiLine && type === 'password';\n  const textSecurityStyles =\n    hasTextSecurity && inputProps.value?.length\n      ? {\n          fontFamily: 'text-security-disc',\n        }\n      : {};\n\n  const textField = (\n    <InputWrapperElement\n      ref={wrapperRef}\n      mods={modifiers}\n      data-size={size}\n      styles={styles}\n      {...wrapperProps}\n    >\n      {prefix ? <div data-element=\"Prefix\">{prefix}</div> : null}\n      <InputElement\n        qa={qa || 'Input'}\n        as={ElementType}\n        data-input-type=\"textinput\"\n        {...mergeProps(inputProps, focusProps, hoverProps)}\n        ref={inputRef}\n        rows={multiLine ? rows : undefined}\n        mods={modifiers}\n        style={textSecurityStyles}\n        data-autofocus={autoFocus ? '' : undefined}\n        autoFocus={autoFocus}\n        data-size={size}\n        autoComplete={autocomplete}\n        styles={inputStyles}\n        disabled={!!isDisabled}\n        maxLength={maxLength}\n        minLength={minLength}\n      />\n      {(validationState && !isLoading) || isLoading || suffix ? (\n        <div data-element=\"Suffix\">\n          {suffixPosition === 'before' ? suffix : null}\n          {(validationState && !isLoading) || isLoading ? (\n            <div data-element=\"State\">\n              {validationState && !isLoading ? validation : null}\n              {isLoading && <LoadingIcon data-element=\"InputIcon\" />}\n            </div>\n          ) : null}\n          {suffixPosition === 'after' ? suffix : null}\n        </div>\n      ) : null}\n    </InputWrapperElement>\n  );\n\n  return wrapWithField(textField, domRef, {\n    ...props,\n    form: undefined,\n  });\n}\n\nconst TextInputBase = forwardRef(_TextInputBase);\n\nexport { TextInputBase };\nexport type { AriaTextFieldProps };\n"],"mappings":"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"}

package/dist/components/fields/TextInputMapper/TextInputMapper.js

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { _Text } from "../../content/Text.js";
@@ -59,7 +59,7 @@ const FieldElement = tasty({
 });
 FieldElement.displayName = "FieldWrapperElement";
 const MessageElement = tasty({
-	qa: "Field_Message",
+	qa: "FieldMessage",
 	styles: {
 		preset: "t4",
 		color: {
@@ -73,7 +73,7 @@ const MessageElement = tasty({
 	}
 });
 const DescriptionElement = tasty({
-	qa: "Field_Description",
+	qa: "FieldDescription",
 	styles: {
 		preset: "t4",
 		color: "#dark-03",

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

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":["Label","Item","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'Field_Message',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'Field_Description',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    validationState,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      validationState={validationState}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>{label}</div>\n\n          {tooltip ? (\n            <Item\n              icon={<InfoCircleIcon color=\"#primary-text\" />}\n              size=\"inline\"\n              tooltip={\n                typeof tooltip === 'string' ? tooltip : { title: tooltip }\n              }\n            />\n          ) : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    invalid: validationState === 'invalid',\n    valid: validationState === 'valid',\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of validationState\n                invalid: isErrorMessage || validationState === 'invalid',\n              }}\n              styles={messageStyles}\n              role={\n                isErrorMessage || validationState === 'invalid'\n                  ? 'alert'\n                  : undefined\n              }\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"FieldWrapper.js","names":["Label","Item","Text"],"sources":["../../../../src/components/form/FieldWrapper/FieldWrapper.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { InfoCircleIcon } from '../../../icons/index';\nimport { mergeProps, wrapNodeIfPlain } from '../../../utils/react/index';\nimport { Item } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { Label } from '../Label';\n\nimport { CubeFieldWrapperProps } from './types';\n\nconst FieldElement = tasty({\n  qa: 'Field',\n  styles: {\n    display: 'grid',\n    width: 'auto',\n    gridColumns: {\n      '': 'minmax(0, 1fr)',\n      'has-sider': '($full-label-width, auto) minmax(0, 1fr)',\n      'has-split': 'auto auto',\n    },\n    gap: 0,\n    placeItems: {\n      '': 'baseline stretch',\n      'has-split': 'center',\n    },\n    placeContent: {\n      '': 'initial',\n      'has-split': 'space-between',\n    },\n    '$full-label-width': '($label-width + 1x)',\n\n    LabelArea: {\n      display: 'block',\n      width: {\n        '': 'initial',\n        'has-sider': '$label-width',\n      },\n      margin: {\n        '': '1x bottom',\n        'has-sider': '1x right',\n        'has-split': '1x right',\n        ':empty': '0',\n      },\n    },\n\n    InputArea: {\n      display: 'block',\n      flow: 'column',\n      gap: '.5x',\n      gridColumn: {\n        '': 'initial',\n        'has-sider': 2,\n        'has-split': 2,\n      },\n    },\n  },\n});\n\nif (process.env.NODE_ENV === 'development') {\n  FieldElement.displayName = 'FieldWrapperElement';\n}\n\nconst MessageElement = tasty({\n  qa: 'FieldMessage',\n  styles: {\n    preset: 't4',\n    color: {\n      '': '#dark-02',\n      invalid: '#danger-text',\n      valid: '#success-text',\n      disabled: '#dark.40',\n    },\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\nconst DescriptionElement = tasty({\n  qa: 'FieldDescription',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    textAlign: 'left',\n    userSelect: 'none',\n  },\n});\n\n/**\n * A wrapper for form fields to provide additional decoration for inputs.\n * @internal Do not use this component directly.\n */\nexport const FieldWrapper = forwardRef(function FieldWrapper(\n  props: CubeFieldWrapperProps,\n  ref,\n) {\n  const {\n    as,\n    labelPosition = 'top',\n    label,\n    extra,\n    styles,\n    isRequired,\n    isDisabled,\n    labelStyles,\n    necessityIndicator,\n    labelProps,\n    fieldProps,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    Component,\n    validationState,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n    children,\n  } = props;\n\n  const labelComponent = label ? (\n    <Label\n      as={as === 'label' ? 'div' : 'label'}\n      styles={labelStyles}\n      labelPosition={labelPosition}\n      isRequired={requiredMark ? isRequired : false}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      validationState={validationState}\n      aria-label={typeof label === 'string' ? label : undefined}\n      {...labelProps}\n    >\n      <Flex placeContent=\"baseline space-between\" width=\"100%\">\n        <Space placeItems=\"center\" gap=\"0.75x\">\n          <div>{label}</div>\n\n          {tooltip ? (\n            <Item\n              icon={<InfoCircleIcon color=\"#primary-text\" />}\n              size=\"inline\"\n              tooltip={\n                typeof tooltip === 'string' ? tooltip : { title: tooltip }\n              }\n            />\n          ) : null}\n\n          {labelSuffix ? <div>{labelSuffix}</div> : null}\n        </Space>\n\n        {extra && <Text preset=\"t3\">{extra}</Text>}\n      </Flex>\n    </Label>\n  ) : null;\n\n  // Create description component with proper styling\n  const createDescriptionComponent = () => {\n    if (!description) return null;\n\n    return (\n      <DescriptionElement data-element=\"Description\">\n        {wrapNodeIfPlain(description, () => (\n          <span>{description}</span>\n        ))}\n      </DescriptionElement>\n    );\n  };\n\n  // Description positioning based on label position\n  const descriptionForLabel =\n    labelPosition === 'side' || labelPosition === 'split'\n      ? createDescriptionComponent()\n      : null;\n  const descriptionForInput =\n    labelPosition === 'top' ? createDescriptionComponent() : null;\n\n  const mods = {\n    'has-sider': labelPosition === 'side',\n    'has-split': labelPosition === 'split',\n    'has-description': !!description,\n    invalid: validationState === 'invalid',\n    valid: validationState === 'valid',\n  };\n\n  // Determine which message to display (errorMessage takes precedence, then message for backward compatibility)\n  const displayMessage = errorMessage || message;\n  const isErrorMessage = !!errorMessage;\n\n  // Merge fieldProps with styles to ensure both are applied\n  const mergedFieldProps = styles\n    ? mergeProps(fieldProps, { styles })\n    : fieldProps;\n\n  return (\n    <>\n      <FieldElement\n        ref={ref}\n        as={as ?? 'div'}\n        mods={mods}\n        isHidden={isHidden}\n        {...mergedFieldProps}\n      >\n        {labelComponent || descriptionForLabel ? (\n          <div data-element=\"LabelArea\">\n            {labelComponent}\n            {descriptionForLabel}\n          </div>\n        ) : null}\n        <div data-element=\"InputArea\">\n          {Component}\n          {descriptionForInput}\n          {displayMessage && !isDisabled && (\n            <MessageElement\n              mods={{\n                ...mods,\n                // Force invalid state for errorMessage regardless of validationState\n                invalid: isErrorMessage || validationState === 'invalid',\n              }}\n              styles={messageStyles}\n              role={\n                isErrorMessage || validationState === 'invalid'\n                  ? 'alert'\n                  : undefined\n              }\n            >\n              {displayMessage}\n            </MessageElement>\n          )}\n        </div>\n      </FieldElement>\n      {children}\n    </>\n  );\n});\n"],"mappings":"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"}

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 //#region src/components/form/FieldWrapper/extract-field-wrapper-props.ts
 const createFieldWrapperPropsKeys = (arr) => new Set(arr);
 const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { FieldWrapper } from "../FieldWrapper/FieldWrapper.js";

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

@@ -1,9 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { timeout } from "../../../utils/promise.js";
 import { useForm } from "./use-form.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { createContext, forwardRef, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDOMRef } from "@react-spectrum/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: DOMRef<HTMLFormElement>,\n) {\n  props = useProviderProps(props);\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useDOMRef(ref as any);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          validationState={validationState}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: DOMRef<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: DOMRef<HTMLFormElement>,\n) {\n  props = useProviderProps(props);\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    validationState,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useDOMRef(ref as any);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          validationState={validationState}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: DOMRef<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":";;;;;;;;;;;;AA6BA,MAAa,cAAc,cAAc,EAAE,CAAC;AAE5C,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,SAAS;GACP,IAAI;GACJ,YAAY;GACb;EACD,MAAM;GACJ,IAAI;GACJ,YAAY;GACb;EACD,YAAY;GACV,IAAI;GACJ,YAAY;GACb;EACD,KAAK;EACL,gBAAgB;EACjB;CACF,CAAC;AAEF,SAAgB,aAAa,OAAO;AAGlC,QAAO;EAAE,GAFG,WAAW,YAAY;EAElB,GAAG;EAAO;;AAG7B,MAAM,gBAAgB,IAAI,IAAI;CAC5B;CACA;CACA;CACA;CACA;CACD,CAAC;AA2BF,SAAS,KACP,OACA,KACA;AACA,SAAQ,iBAAiB,MAAM;CAC/B,IAAI,EACF,IACA,MACA,UACA,eACA,aACA,oBACA,YACA,YACA,iBACA,aACA,iBACA,WACA,eACA,gBACA,eAAe,MACf,MACA,YACA,UACA,gBACA,GAAG,eACD;CACJ,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,eAAe,gBAAgB;AAErC,KAAI,CAAC,YACH,eAAc;AAGhB,KAAI,CAAC,cACH,iBAAgB,eAAe,SAAS;AAG1C,KAAI,CAAC,WACH,cAAa,eAAe,SAAS;AAGvC,OAAM,gBAAgB,IAAI;CAE1B,IAAI;AAEJ,MAAK,YAAY,mBAAmB,CAAC,WAAW,OAC9C,oBAAmB,OAAO,MAAM;AAC9B,MAAI,KAAK,GAAG,gBAAgB;AAC1B,QAAK,GAAG,kBAAkB,GAAG,gBAAgB;AAC7C,QAAK,GAAG,mBAAmB,GAAG,iBAAiB;AAE/C,OAAI,EAAE,aAAa;IACjB,MAAM,MAAM,EAAE;AAEd,QACE,IAAI,aACJ,IAAI,UAAU,aAAa,OAAO,KAAK,SAEvC;;;AAKN,MAAI,CAAC,QAAQ,KAAK,aAAc;AAEhC,OAAK,cAAc;AACnB,OAAK,cAAc,KAAK;AAExB,MAAI;AACF,OAAI;AACF,UAAM,KAAK,gBAAgB;YACpB,GAAG;AACV,UAAM,cAAc,MAAM;AAE1B;;AAGF,SAAM,SAAS;AACf,SAAM,WAAW,KAAK,aAAa,CAAC;WAC7B,GAAG;AACV,SAAM,SAAS;AAGf,QAAK,cAAc;AAEnB,oBAAiB,EAAE;AAEnB,OAAI,aAAa,MACf,OAAM;YAEA;AACR,SAAM,cAAc,MAAM;;;AAQhC,EAAC,QAAQ,QAAW,MAAM,OAAO,IAAI,SAAS;EAC5C,UAAU;EACV;EACD,CAAC;CAEF,IAAI,SAAS,cAAc,YAAY,iBAAiB;AAExD,KAAI,WACF,QAAO,kBAAkB;CAG3B,IAAI,SAAS,UAAU,IAAW;CAElC,IAAI,MAAM;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa,KAAK;EAClB,UAAU;EACX;AAED,KAAI,YAAY,WAAW,MACzB;MAAI,eAAe;AACjB,QAAK,sBAAsB,cAAc;AACzC,QAAK,YAAY,QAAW,KAAK;AACjC,eAAY,UAAU;;;AAI1B,KAAI,iBAAiB,YAAY,eAAe;AAC9C,QAAM,sBAAsB,iBAAiB,EAAE,CAAC;AAChD,mBAAiB,UAAU;;AAG7B,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EAC7D,KAAK;EACL;EACI;EACI;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY;GACb;EACD,UAAU;YAEV,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC;IACC,YAAY;IACA;IACA;IACK;IAEhB;KACQ;IACU;GACX;;;;;AAOlB,MAAM,QAAQ,WAAW,KAAK;AAI9B,AAAC,MAAc,cAAc"}

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { FormContext } from "./Form.js";
 import { Alert } from "../../content/Alert/Alert.js";
 import { forwardRef, isValidElement, useContext } from "react";

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

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

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

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

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useIsFirstRender } from "../../../../_internal/hooks/use-is-first-render.js";
 import { delayValidationRule } from "../validation.js";

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

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

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

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

package/dist/components/form/Label.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useDOMRef } from "@react-spectrum/utils";

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nconst INTL_MESSAGES = {\n  '(required)': '(required)',\n  '(optional)': '(optional)',\n};\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let formatMessage = (message) => INTL_MESSAGES[message];\n  let necessityLabel = isRequired\n    ? formatMessage('(required)')\n    : formatMessage('(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName\n          ? formatMessage('(required)')\n          : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;AAmBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAM,gBAAgB;CACpB,cAAc;CACd,cAAc;CACf;AAED,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,UAAU,IAAI;CAE3B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,iBAAiB,YAAY,cAAc;CAC/C,IAAI,iBAAiB,aACjB,cAAc,aAAa,GAC3B,cAAc,aAAa;CAC/B,IAAI,OACF,oBAAC;EACC,cACE,+CACI,cAAc,aAAa,GAC3B;YAGL;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationState,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\nconst INTL_MESSAGES = {\n  '(required)': '(required)',\n  '(optional)': '(optional)',\n};\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps extends BaseProps, ContainerStyleProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator;\n  isRequired?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  validationState?: ValidationState;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    necessityIndicator = isRequired != null ? 'icon' : null,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    validationState,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useDOMRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let formatMessage = (message) => INTL_MESSAGES[message];\n  let necessityLabel = isRequired\n    ? formatMessage('(required)')\n    : formatMessage('(optional)');\n  let icon = (\n    <span\n      aria-label={\n        includeNecessityIndicatorInAccessibilityName\n          ? formatMessage('(required)')\n          : undefined\n      }\n    >\n      {REQUIRED_ICON}\n    </span>\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        invalid: validationState === 'invalid',\n        valid: validationState === 'valid',\n      }}\n    >\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {(necessityIndicator === 'label' ||\n            (necessityIndicator === 'icon' && isRequired)) &&\n            ' \\u200b'}\n          {/* necessityLabel is hidden to screen readers if the field is required because\n           * aria-required is set on the field in that case. That will already be announced,\n           * so no need to duplicate it here. If optional, we do want it to be announced here. */}\n          {necessityIndicator === 'label' && (\n            <span\n              aria-hidden={\n                !includeNecessityIndicatorInAccessibilityName\n                  ? isRequired\n                  : undefined\n              }\n            >\n              {necessityLabel}\n            </span>\n          )}\n          {necessityIndicator === 'icon' && isRequired && icon}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;AAmBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;AAGR,MAAM,gBAAgB;CACpB,cAAc;CACd,cAAc;CACf;AAED,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,qBAAqB,cAAc,OAAO,SAAS,MACnD,+CAA+C,OAC/C,SACA,YACA,iBACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,UAAU,IAAI;CAE3B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,IAAI,iBAAiB,YAAY,cAAc;CAC/C,IAAI,iBAAiB,aACjB,cAAc,aAAa,GAC3B,cAAc,aAAa;CAC/B,IAAI,OACF,oBAAC;EACC,cACE,+CACI,cAAc,aAAa,GAC3B;YAGL;GACI;AAGT,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,SAAS,oBAAoB;GAC7B,OAAO,oBAAoB;GAC5B;YAEA,OAAO,aAAa,WACnB,WAEA;GACG;IACC,uBAAuB,WACtB,uBAAuB,UAAU,eAClC;GAID,uBAAuB,WACtB,oBAAC;IACC,eACE,CAAC,+CACG,aACA;cAGL;KACI;GAER,uBAAuB,UAAU,cAAc;MAC/C;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}

package/dist/components/form/wrapper.js

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

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

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

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

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

package/dist/components/layout/Flex.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlexElement = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'row',\n  },\n});\n\nexport interface CubeFlexProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flex = forwardRef(function Flex(props: CubeFlexProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES);\n\n  return (\n    <FlexElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAIF,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,iBAAiB;AAErD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Flow.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Flow.js","names":[],"sources":["../../../src/components/layout/Flow.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst FlowElement = tasty({\n  styles: {\n    display: 'block',\n    flow: 'column',\n  },\n});\n\nconst STYLE_PROPS = CONTAINER_STYLES;\n\nexport interface CubeFlowProps extends AllBaseProps, ContainerStyleProps {}\n\nexport const Flow = forwardRef(function Flow(props: CubeFlowProps, ref) {\n  const styles = extractStyles(props, STYLE_PROPS);\n\n  return (\n    <FlowElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAEF,MAAM,cAAc;AAIpB,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,YAAY;AAEhD,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Grid.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAWA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  ShortGridStyles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst GridElement = tasty({\n  styles: {\n    display: 'grid',\n    flow: 'row',\n  },\n});\n\nexport interface CubeGridProps\n  extends Omit<AllBaseProps, 'rows'>,\n    ContainerStyleProps,\n    ShortGridStyles {}\n\nconst PROP_MAP = {\n  template: 'gridTemplate',\n  columns: 'gridColumns',\n  rows: 'gridRows',\n  areas: 'gridAreas',\n} as const;\n\nexport const Grid = forwardRef(function Grid(props: CubeGridProps, ref) {\n  const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);\n\n  return (\n    <GridElement\n      {...filterBaseProps(props, { eventProps: true })}\n      ref={ref}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAYA,MAAM,cAAc,MAAM,EACxB,QAAQ;CACN,SAAS;CACT,MAAM;CACP,EACF,CAAC;AAOF,MAAM,WAAW;CACf,UAAU;CACV,SAAS;CACT,MAAM;CACN,OAAO;CACR;AAED,MAAa,OAAO,WAAW,SAAS,KAAK,OAAsB,KAAK;CACtE,MAAM,SAAS,cAAc,OAAO,kBAAkB,QAAW,SAAS;AAE1E,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;GACR;EAEJ"}

package/dist/components/layout/Panel.js

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

package/dist/components/layout/Prefix.js

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Prefix.js","names":[],"sources":["../../../src/components/layout/Prefix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef } from 'react';\n\nimport { useCombinedRefs, useLayoutEffect } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst PrefixElement = tasty({\n  element: 'Prefix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    left: '$prefix-gap',\n    top: '$prefix-gap',\n    bottom: '$prefix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $prefix-gap))',\n  },\n});\n\nexport interface CubePrefixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Prefix = forwardRef<HTMLDivElement, CubePrefixProps>(\n  function Prefix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useLayoutEffect(() => {\n      if (ref?.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <PrefixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          // @ts-ignore\n          '--prefix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </PrefixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAE9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,yBAAsB;AACpB,MAAI,KAAK,WAAW,cAClB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EAEL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/layout/ResizablePanel.js

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

package/dist/components/layout/Space.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty } from "@tenphi/tasty";
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
+import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;AAUA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}
+{"version":3,"file":"Space.js","names":[],"sources":["../../../src/components/layout/Space.tsx"],"sourcesContent":["import {\n  AllBaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { extractStyles } from '../../utils/styles';\n\nconst SpaceElement = tasty({\n  styles: {\n    display: 'flex',\n    gap: true,\n    flow: {\n      '': 'row',\n      vertical: 'column',\n    },\n    placeItems: {\n      '': 'center stretch',\n      vertical: 'stretch',\n    },\n  },\n});\n\nexport interface CubeSpaceProps extends AllBaseProps, ContainerStyleProps {\n  direction?: 'vertical' | 'horizontal';\n}\n\nexport const Space = forwardRef(function Space(props: CubeSpaceProps, ref) {\n  const { mods, direction, ...otherProps } = props;\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  return (\n    <SpaceElement\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={ref}\n      mods={{\n        vertical:\n          direction === 'vertical' ||\n          otherProps.flow === 'column' ||\n          styles.flow === 'column',\n        ...mods,\n      }}\n      styles={styles}\n    />\n  );\n});\n"],"mappings":";;;;;;;AAWA,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;CACT,KAAK;CACL,MAAM;EACJ,IAAI;EACJ,UAAU;EACX;CACD,YAAY;EACV,IAAI;EACJ,UAAU;EACX;CACF,EACF,CAAC;AAMF,MAAa,QAAQ,WAAW,SAAS,MAAM,OAAuB,KAAK;CACzE,MAAM,EAAE,MAAM,WAAW,GAAG,eAAe;CAC3C,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAE1D,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,YAAY,MAAM,CAAC;EAChD;EACL,MAAM;GACJ,UACE,cAAc,cACd,WAAW,SAAS,YACpB,OAAO,SAAS;GAClB,GAAG;GACJ;EACO;GACR;EAEJ"}

package/dist/components/layout/Suffix.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../utils/styles.js";
 import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, filterBaseProps, parseStyle, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport { useCombinedRefs } from '../../utils/react';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}
+{"version":3,"file":"Suffix.js","names":[],"sources":["../../../src/components/layout/Suffix.tsx"],"sourcesContent":["import {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  parseStyle,\n  tasty,\n} from '@tenphi/tasty';\nimport { CSSProperties, forwardRef, useEffect } from 'react';\n\nimport { useCombinedRefs } from '../../utils/react';\nimport { extractStyles } from '../../utils/styles';\n\nconst SuffixElement = tasty({\n  element: 'Suffix',\n  styles: {\n    position: 'absolute',\n    display: 'grid',\n    placeContent: 'stretch',\n    placeItems: 'center',\n    flow: 'column',\n    gap: 0,\n    right: '$suffix-gap',\n    top: '$suffix-gap',\n    bottom: '$suffix-gap',\n    color: '#dark-02',\n    height: '(100% - (2 * $suffix-gap))',\n  },\n});\n\nexport interface CubeSuffixProps extends BaseProps, ContainerStyleProps {\n  onWidthChange?: Function;\n  outerGap?: CSSProperties['gap'];\n}\n\nexport const Suffix = forwardRef<HTMLDivElement, CubeSuffixProps>(\n  function Suffix(allProps, outerRef) {\n    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;\n    const styles = extractStyles(props, CONTAINER_STYLES);\n    const ref = useCombinedRefs(outerRef);\n\n    useEffect(() => {\n      if (ref && ref.current && onWidthChange) {\n        onWidthChange(ref.current.offsetWidth);\n      }\n    }, [children, ref, onWidthChange]);\n\n    return (\n      <SuffixElement\n        {...filterBaseProps(props, { eventProps: true })}\n        ref={ref}\n        styles={styles}\n        style={{\n          '--suffix-gap': parseStyle(outerGap).output,\n        }}\n      >\n        {children}\n      </SuffixElement>\n    );\n  },\n);\n"],"mappings":";;;;;;;;AAaA,MAAM,gBAAgB,MAAM;CAC1B,SAAS;CACT,QAAQ;EACN,UAAU;EACV,SAAS;EACT,cAAc;EACd,YAAY;EACZ,MAAM;EACN,KAAK;EACL,OAAO;EACP,KAAK;EACL,QAAQ;EACR,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAOF,MAAa,SAAS,WACpB,SAAS,OAAO,UAAU,UAAU;CAClC,IAAI,EAAE,eAAe,WAAW,OAAO,UAAU,GAAG,UAAU;CAC9D,MAAM,SAAS,cAAc,OAAO,iBAAiB;CACrD,MAAM,MAAM,gBAAgB,SAAS;AAErC,iBAAgB;AACd,MAAI,OAAO,IAAI,WAAW,cACxB,eAAc,IAAI,QAAQ,YAAY;IAEvC;EAAC;EAAU;EAAK;EAAc,CAAC;AAElC,QACE,oBAAC;EACC,GAAI,gBAAgB,OAAO,EAAE,YAAY,MAAM,CAAC;EAC3C;EACG;EACR,OAAO,EACL,gBAAgB,WAAW,SAAS,CAAC,QACtC;EAEA;GACa;EAGrB"}

package/dist/components/navigation/Tabs/DraggableTabList.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useCallback, useMemo } from "react";
 import { ListDropTargetDelegate, ListKeyboardDelegate, useDraggableCollection, useDroppableCollection } from "react-aria";

package/dist/components/navigation/Tabs/EditableTitle.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { EditableTitleInputElement, HiddenMeasure } from "./styled.js";
 import { useLayoutEffect, useRef, useState } from "react";

package/dist/components/navigation/Tabs/TabButton.js

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

package/dist/components/navigation/Tabs/TabDropIndicator.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { DropIndicatorElement } from "./styled.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { TabPanelElement } from "./styled.js";
 import { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

package/dist/components/navigation/Tabs/TabPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.121.5 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.121.7 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useMergeStyles } from "../../../utils/react/useMergeStyles.js";
@@ -14,7 +15,7 @@ import { TabPicker } from "./TabPicker.js";
 import { TabsAction } from "./TabsAction.js";
 import { useTabEditing } from "./use-tab-editing.js";
 import { useTabIndicator } from "./use-tab-indicator.js";
-import { OUTER_STYLES, extractStyles, mergeStyles } from "@tenphi/tasty";
+import { OUTER_STYLES, mergeStyles } from "@tenphi/tasty";
 import { Children, forwardRef, isValidElement, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useTabList } from "react-aria";