@oracle/oraclejet-preact 14.1.1 → 14.1.3

package/cjs/{TextFieldInput-1b78e77e.js.map → TextFieldInput-9e26e6b2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextFieldInput-1b78e77e.js","sources":["../../src/UNSAFE_TextField/TextFieldUtils.ts","../../src/UNSAFE_TextField/TextFieldInput.tsx"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst textFieldStyles = {\n  base: cssProps`${{\n    display: 'inline-block',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  embedded: cssProps`${{\n    height: '100%'\n  }}`,\n\n  nonReadonly: cssProps`${{\n    fontWeight: '400',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-font-size)'\n  }}`\n};\n\nconst readonlyStyles = {\n  base: cssProps`${{\n    fontWeight: 'var(--oj-form-control-font-weight-read-only)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n    position: 'relative',\n    borderStyle: 'solid',\n    transitionProperty: 'border-color',\n    transitionDuration: '0.1s',\n    transitionTimingFunction: 'linear',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-radius)',\n    flexDirection: 'row',\n    alignItems: 'center',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  insideEnabledForm: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-width)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color-disabled)',\n    backgroundColor: 'transparent',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)',\n    minWidth: '1em',\n    display: 'inline-flex',\n    flex: '1'\n  }}`,\n\n  textarea: cssProps`${{\n    height: 'auto'\n  }}`,\n\n  insideEnabledFormLabelInside: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)'\n  }}`,\n\n  notInsideEnabledForm: cssProps`${{\n    overflowX: 'visible',\n    overflowY: 'visible',\n    borderWidth: '0',\n    backgroundColor: 'transparent',\n    height: 'auto'\n  }}`,\n\n  textareaNotInsideEnabledForm: cssProps`${{\n    paddingTop: '0',\n    paddingBottom: '0'\n  }}`\n};\n\n//Consolidating all loading styles on form elements here\nexport const loadingStyles = cssProps`${{\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-skeleton-bg-end-color)',\n  backgroundSize: '200% 200%',\n  borderWidth: '0',\n  // need to use a var for the animation name because otherwise linaria will obfuscate it\n  // and make it different from the actual keyframes name\n  animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-skeleton)',\n  animationIterationCount: 'infinite',\n  animationDirection: 'alternate',\n  animationDuration: '1.5s',\n  opacity: '1'\n}}`;\n\nexport const getTextFieldClasses = (readonly?: boolean, variant?: 'default' | 'embedded') => {\n  return classNames([\n    textFieldStyles.base,\n    variant === 'embedded' && textFieldStyles.embedded,\n    !readonly && textFieldStyles.nonReadonly\n  ]);\n};\n\nexport const getReadonlyClasses = (\n  isInsideNonReadonlyForm?: boolean,\n  hasInsideLabel?: boolean,\n  variant?: 'textarea'\n) => {\n  const classes = classNames([\n    readonlyStyles.base,\n    variant === 'textarea' && readonlyStyles.textarea,\n    isInsideNonReadonlyForm\n      ? readonlyStyles.insideEnabledForm\n      : readonlyStyles.notInsideEnabledForm,\n    variant === 'textarea' &&\n      !isInsideNonReadonlyForm &&\n      readonlyStyles.textareaNotInsideEnabledForm,\n    isInsideNonReadonlyForm && hasInsideLabel && readonlyStyles.insideEnabledFormLabelInside\n  ]);\n  return classes;\n};\n\nexport const getInputId = (id?: string) => {\n  return (id ?? '') + '|input';\n};\n\nexport const isInputPlaceholderShown = (\n  hasInsideLabel: boolean,\n  hasValue: boolean,\n  isFocused?: boolean\n) => {\n  return !(hasInsideLabel && !hasValue && !isFocused);\n};\n","import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Ref } from 'preact';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTextFieldInputHandlers } from '../hooks/UNSAFE_useTextFieldInputHandlers';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\nimport { getLoadingAriaLabel } from './FormControlUtils';\nimport { isInputPlaceholderShown } from './TextFieldUtils';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\nconst rootStyles = {\n  base: cssProps`${{\n    // normally removing an outline can cause accessibility issues, however\n    // on an input the cursor blinks so an outline is not required for\n    // accessibility. As of 6-11-14 only chrome is putting\n    // an outline on inputs anyway\n    outlineStyle: 'none',\n    outlineWidth: '0',\n    boxSizing: 'border-box',\n    fontFamily: 'inherit',\n    lineHeight: 'inherit',\n    fontWeight: 'inherit',\n    border: '0',\n    backgroundColor: 'transparent',\n    width: '100%',\n\n    '&::selection': {\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-selected)'\n    }\n  }}`,\n  // removes margin that Safari adds to the input element\n  input: cssProps`${{\n    margin: '0'\n  }}`,\n  textarea: cssProps`${{\n    paddingTop:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n    paddingBottom:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n\n    resize: 'none'\n  }}`,\n  password: cssProps`${{\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`,\n  labelDefaultPadding: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0\n  }}`,\n  labelInsideBase: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)',\n    paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-padding-top)',\n    paddingBottom: 0,\n\n    '&:hover': {\n      backgroundColor: 'transparent'\n    }\n  }}`,\n  textareaLabelInsideBase: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0,\n    // We are using a transparent border here instead of padding, due to how textarea scrolls the padding off the screen\n    // and the text content will clash with the inside label.\n    borderColor: 'transparent',\n    borderStyle: 'solid',\n    borderBlockStartWidth:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size) * var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height) + var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top))',\n    // The 0.25rem is an aesthetically pleasing amount of bottom padding\n    borderBlockEndWidth: '0.25rem'\n  }}`,\n\n  labelInsideNoValueAndHasFocus: cssProps`${{\n    animationName:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-placeholder)',\n    animationDuration: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-duration-xlong)',\n    animationTimingFunction: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-ease-in)'\n  }}`,\n\n  hasStartContent: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  hasEndContent: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  defaultColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color)'\n  }}`,\n\n  disabledColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color-disabled)'\n  }}`,\n  // The 0.25em is the space between the prefix and the input. This is equivalent to ' '.\n  hasPrefix: cssProps`${{\n    paddingInlineStart: '.25em'\n  }}`,\n\n  hasSuffix: cssProps`${{\n    paddingInlineEnd: '.25em'\n  }}`,\n\n  default: cssProps`${{\n    fontSize: '100%'\n  }}`,\n\n  defaultPaddingStart: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  defaultPaddingEnd: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  embedded: cssProps`${{\n    color: 'inherit',\n    fontSize: 'inherit',\n    height: '100%',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-embedded-padding, var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding))',\n\n    // textarea styles\n    resize: 'none',\n\n    // input-password styles\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`\n};\n\nconst interpolations = [...Object.values(textInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\ntype Autocomplete = 'off' | 'on' | string;\n\ntype OrigPickedPropsFromInput = Pick<\n  HTMLAttributesSignalExcluded<HTMLInputElement>,\n  'autofocus' | 'id' | 'placeholder' | 'required' | 'role' | 'spellcheck' | 'type'\n>;\ntype RenamedPropsFromInput = Omit<OrigPickedPropsFromInput, 'autofocus' | 'required'> & {\n  autoFocus?: OrigPickedPropsFromInput['autofocus'];\n  isRequired?: OrigPickedPropsFromInput['required'];\n};\ntype InputProps = {\n  as?: 'input';\n  type?: Pick<HTMLAttributesSignalExcluded<HTMLInputElement>, 'type'>['type'];\n  rows?: never;\n  inputRef?: Ref<HTMLInputElement>;\n  hasPrefix?: boolean;\n  hasSuffix?: boolean;\n};\n\ntype TextAreaProps = {\n  as: 'textarea';\n  type?: never;\n  rows?: number;\n  inputRef?: Ref<HTMLTextAreaElement>;\n  hasPrefix?: never;\n  hasSuffix?: never;\n};\n\ntype UniqueProps = InputProps | TextAreaProps;\n\ntype AriaProps = {\n  ariaAutoComplete?: 'none' | 'inline' | 'list' | 'both';\n  ariaControls?: string;\n  ariaDescribedBy?: string;\n  ariaExpanded?: boolean;\n  ariaInvalid?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaValueMax?: number;\n  ariaValueMin?: number;\n  ariaValueNow?: number;\n  ariaValueText?: string;\n};\n\ntype Props = UniqueProps &\n  TextProps &\n  RenamedPropsFromInput &\n  AriaProps & {\n    autoComplete?: Autocomplete;\n    // TODO: Should we expose has* props like these or should we pass this info\n    // via FormFieldContext?  (from review on 3/8/22)\n    currentCommitValue?: string;\n    hasEndContent?: boolean;\n    hasInsideLabel?: boolean;\n    hasStartContent?: boolean;\n    value?: string;\n    variant?: 'default' | 'embedded';\n    onInput?: (detail: ValueUpdateDetail<string>) => void;\n    onCommit?: (detail: ValueUpdateDetail<string>) => void;\n    onKeyDown?: (event: KeyboardEvent) => void;\n    onKeyUp?: (event: KeyboardEvent) => void;\n  };\n\nexport const TextFieldInput = ({\n  as = 'input',\n  ariaAutoComplete,\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaInvalid,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaValueMax,\n  ariaValueMin,\n  ariaValueNow,\n  ariaValueText,\n  autoComplete,\n  autoFocus,\n  currentCommitValue,\n  hasEndContent = false,\n  hasInsideLabel = false,\n  hasPrefix = false,\n  hasStartContent = false,\n  hasSuffix = false,\n  id,\n  inputRef,\n  placeholder,\n  isRequired,\n  role,\n  rows,\n  spellcheck,\n  type,\n  value = '',\n  variant = 'default',\n  onInput,\n  onCommit,\n  onKeyDown,\n  onKeyUp,\n  ...props\n}: Props) => {\n  const hasValue = value !== '';\n  const { isDisabled, isFocused, isLoading, isReadonly } = useFormFieldContext();\n  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)\n    ? placeholder\n    : undefined;\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n  const renderPrefix = !isDisabled && hasPrefix;\n  const renderSuffix = !isDisabled && hasSuffix;\n  const inputClasses = classNames([\n    'oj-c-text-field-input',\n    rootStyles.base,\n    variant === 'default'\n      ? classNames([\n          rootStyles.default,\n          as === 'textarea' && rootStyles.textarea,\n          as === 'input' && rootStyles.input,\n          type === 'password' && rootStyles.password,\n          !hasStartContent && !renderPrefix && rootStyles.defaultPaddingStart,\n          !hasEndContent && !renderSuffix && rootStyles.defaultPaddingEnd\n        ])\n      : rootStyles.embedded,\n    hasInsideLabel &&\n      classNames([\n        rootStyles.labelInsideBase,\n        as === 'textarea' && rootStyles.textareaLabelInsideBase,\n        !hasValue && isFocused && rootStyles.labelInsideNoValueAndHasFocus\n      ]),\n    !hasInsideLabel && as !== 'textarea' && rootStyles.labelDefaultPadding,\n    // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.\n    // The padding between the input and the icon is different than the padding between the input and prefix/suffix (since they are both text)\n    // startcontentpadding+input+endcontentpadding\n    hasStartContent && !hasPrefix && rootStyles.hasStartContent,\n    hasEndContent && !hasSuffix && rootStyles.hasEndContent,\n    isDisabled ? rootStyles.disabledColor : rootStyles.defaultColor,\n    // prefix+prefixpadding+input+suffixpadding+suffix\n    // if there is also a startcontent or end content,\n    // the prefix/suffix will have that padding on it (see PrefixSuffix)\n    renderPrefix && rootStyles.hasPrefix,\n    renderSuffix && rootStyles.hasSuffix,\n    styleInterpolationClasses\n  ]);\n  const Comp = as || 'input';\n  const handlers = useTextFieldInputHandlers({\n    currentCommitValue,\n    value,\n    onInput,\n    onCommit,\n    onKeyDown\n  });\n  // the implicit default for tabindex on an input is 0, so do not explicitly set it.\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // if not tabbable, spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n  // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it\n  // works across browsers and versions  (from review on 3/11/22)\n  return (\n    <Comp\n      aria-autocomplete={ariaAutoComplete}\n      aria-controls={ariaControls}\n      aria-describedby={ariaDescribedBy}\n      aria-expanded={ariaExpanded}\n      aria-invalid={ariaInvalid}\n      aria-label={isLoading ? getLoadingAriaLabel() : ariaLabel ? ariaLabel : undefined}\n      aria-labelledby={ariaLabelledBy}\n      aria-required={isRequired ? true : undefined}\n      aria-valuemax={ariaValueMax}\n      aria-valuemin={ariaValueMin}\n      aria-valuenow={ariaValueNow}\n      aria-valuetext={ariaValueText}\n      autocomplete={autoComplete}\n      autofocus={autoFocus}\n      class={inputClasses}\n      disabled={isDisabled}\n      id={id}\n      onKeyUp={onKeyUp}\n      placeholder={myPlaceholder}\n      readonly={isReadonly}\n      // @ts-ignore\n      ref={inputRef}\n      role={role}\n      rows={rows}\n      spellcheck={spellcheck}\n      type={type}\n      value={value}\n      {...handlers}\n      {...(!isTabbable && tabbableModeProps)}\n    />\n  );\n};\n"],"names":["textFieldStyles","readonlyStyles","loadingStyles","getTextFieldClasses","readonly","variant","classNames","base","embedded","nonReadonly","getReadonlyClasses","isInsideNonReadonlyForm","hasInsideLabel","textarea","textareaNotInsideEnabledForm","insideEnabledFormLabelInside","classes","getInputId","id","isInputPlaceholderShown","hasValue","isFocused","rootStyles","interpolations","Object","values","textInterpolations","styleInterpolations","mergeInterpolations","TextFieldInput","_a","as","ariaAutoComplete","ariaControls","ariaDescribedBy","ariaExpanded","ariaInvalid","ariaLabel","ariaLabelledBy","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText","autoComplete","autoFocus","currentCommitValue","hasEndContent","hasPrefix","hasStartContent","hasSuffix","inputRef","placeholder","isRequired","role","rows","spellcheck","type","value","onInput","onCommit","onKeyDown","onKeyUp","props","__rest","isDisabled","isLoading","isReadonly","useFormFieldContext","renderPrefix","renderSuffix","default","input","password","defaultPaddingStart","defaultPaddingEnd","labelInsideBase","textareaLabelInsideBase","labelInsideNoValueAndHasFocus","Comp","_jsx","assign","getLoadingAriaLabel","undefined","autocomplete","autofocus","class","inputClasses","disabled","myPlaceholder","ref","handlers","isTabbable","tabbableModeProps"],"mappings":"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"}
+{"version":3,"file":"TextFieldInput-9e26e6b2.js","sources":["../../src/UNSAFE_TextField/TextFieldUtils.ts","../../src/UNSAFE_TextField/TextFieldInput.tsx"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst textFieldStyles = {\n  base: cssProps`${{\n    display: 'inline-block',\n    lineHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height)',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  embedded: cssProps`${{\n    height: '100%'\n  }}`,\n\n  nonReadonly: cssProps`${{\n    fontWeight: '400',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-font-size)'\n  }}`\n};\n\nconst readonlyStyles = {\n  base: cssProps`${{\n    fontWeight: 'var(--oj-form-control-font-weight-read-only)',\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-font-size)',\n    position: 'relative',\n    borderStyle: 'solid',\n    transitionProperty: 'border-color',\n    transitionDuration: '0.1s',\n    transitionTimingFunction: 'linear',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-radius)',\n    flexDirection: 'row',\n    alignItems: 'center',\n    maxWidth: '100%',\n    width: '100%',\n    boxSizing: 'border-box'\n  }}`,\n\n  insideEnabledForm: cssProps`${{\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-width)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-border-color-disabled)',\n    backgroundColor: 'transparent',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height)',\n    minWidth: '1em',\n    display: 'inline-flex',\n    flex: '1'\n  }}`,\n\n  textarea: cssProps`${{\n    height: 'auto'\n  }}`,\n\n  insideEnabledFormLabelInside: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)'\n  }}`,\n\n  notInsideEnabledForm: cssProps`${{\n    overflowX: 'visible',\n    overflowY: 'visible',\n    borderWidth: '0',\n    backgroundColor: 'transparent',\n    height: 'auto'\n  }}`,\n\n  textareaNotInsideEnabledForm: cssProps`${{\n    paddingTop: '0',\n    paddingBottom: '0'\n  }}`\n};\n\n//Consolidating all loading styles on form elements here\nexport const loadingStyles = cssProps`${{\n  backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-skeleton-bg-end-color)',\n  backgroundSize: '200% 200%',\n  borderWidth: '0',\n  // need to use a var for the animation name because otherwise linaria will obfuscate it\n  // and make it different from the actual keyframes name\n  animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-skeleton)',\n  animationIterationCount: 'infinite',\n  animationDirection: 'alternate',\n  animationDuration: '1.5s',\n  opacity: '1'\n}}`;\n\nexport const getTextFieldClasses = (readonly?: boolean, variant?: 'default' | 'embedded') => {\n  return classNames([\n    textFieldStyles.base,\n    variant === 'embedded' && textFieldStyles.embedded,\n    !readonly && textFieldStyles.nonReadonly\n  ]);\n};\n\nexport const getReadonlyClasses = (\n  isInsideNonReadonlyForm?: boolean,\n  hasInsideLabel?: boolean,\n  variant?: 'textarea'\n) => {\n  const classes = classNames([\n    readonlyStyles.base,\n    variant === 'textarea' && readonlyStyles.textarea,\n    isInsideNonReadonlyForm\n      ? readonlyStyles.insideEnabledForm\n      : readonlyStyles.notInsideEnabledForm,\n    variant === 'textarea' &&\n      !isInsideNonReadonlyForm &&\n      readonlyStyles.textareaNotInsideEnabledForm,\n    isInsideNonReadonlyForm && hasInsideLabel && readonlyStyles.insideEnabledFormLabelInside\n  ]);\n  return classes;\n};\n\nexport const getInputId = (id?: string) => {\n  return (id ?? '') + '|input';\n};\n\nexport const isInputPlaceholderShown = (\n  hasInsideLabel: boolean,\n  hasValue: boolean,\n  isFocused?: boolean\n) => {\n  return !(hasInsideLabel && !hasValue && !isFocused);\n};\n","import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { Ref } from 'preact';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTextFieldInputHandlers } from '../hooks/UNSAFE_useTextFieldInputHandlers';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport type { TextProps } from '../utils/UNSAFE_interpolations/text';\nimport { textInterpolations } from '../utils/UNSAFE_interpolations/text';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\nimport { getLoadingAriaLabel } from './FormControlUtils';\nimport { isInputPlaceholderShown } from './TextFieldUtils';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\nconst rootStyles = {\n  base: cssProps`${{\n    // normally removing an outline can cause accessibility issues, however\n    // on an input the cursor blinks so an outline is not required for\n    // accessibility. As of 6-11-14 only chrome is putting\n    // an outline on inputs anyway\n    outlineStyle: 'none',\n    outlineWidth: '0',\n    boxSizing: 'border-box',\n    fontFamily: 'inherit',\n    lineHeight: 'inherit',\n    fontWeight: 'inherit',\n    border: '0',\n    backgroundColor: 'transparent',\n    width: '100%',\n\n    '&::selection': {\n      backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-selected)'\n    }\n  }}`,\n  // removes margin that Safari adds to the input element\n  input: cssProps`${{\n    margin: '0'\n  }}`,\n  textarea: cssProps`${{\n    paddingTop:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n    paddingBottom:\n      'calc((var(--oj-c-PRIVATE-DO-NOT-USE-text-field-height) - 1rem * var(--oj-c-PRIVATE-DO-NOT-USE-typography-body-md-line-height))/ 2 - 1px)',\n\n    resize: 'none'\n  }}`,\n  password: cssProps`${{\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`,\n  labelDefaultPadding: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0\n  }}`,\n  labelInsideBase: cssProps`${{\n    minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)',\n    paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-padding-top)',\n    paddingBottom: 0,\n\n    '&:hover': {\n      backgroundColor: 'transparent'\n    }\n  }}`,\n  textareaLabelInsideBase: cssProps`${{\n    paddingTop: 0,\n    paddingBottom: 0,\n    // We are using a transparent border here instead of padding, due to how textarea scrolls the padding off the screen\n    // and the text content will clash with the inside label.\n    borderColor: 'transparent',\n    borderStyle: 'solid',\n    borderBlockStartWidth:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-font-size) * var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-line-height) + var(--oj-c-PRIVATE-DO-NOT-USE-label-inside-edge-position-top))',\n    // The 0.25rem is an aesthetically pleasing amount of bottom padding\n    borderBlockEndWidth: '0.25rem'\n  }}`,\n\n  labelInsideNoValueAndHasFocus: cssProps`${{\n    animationName:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-private-preact-text-field-animation-name-placeholder)',\n    animationDuration: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-duration-xlong)',\n    animationTimingFunction: 'var(--oj-c-PRIVATE-DO-NOT-USE-animation-ease-in)'\n  }}`,\n\n  hasStartContent: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  hasEndContent: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n  }}`,\n\n  defaultColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color)'\n  }}`,\n\n  disabledColor: cssProps`${{\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color-disabled)'\n  }}`,\n  // The 0.25em is the space between the prefix and the input. This is equivalent to ' '.\n  hasPrefix: cssProps`${{\n    paddingInlineStart: '.25em'\n  }}`,\n\n  hasSuffix: cssProps`${{\n    paddingInlineEnd: '.25em'\n  }}`,\n\n  default: cssProps`${{\n    fontSize: '100%'\n  }}`,\n\n  defaultPaddingStart: cssProps`${{\n    paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  defaultPaddingEnd: cssProps`${{\n    paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n  }}`,\n\n  embedded: cssProps`${{\n    color: 'inherit',\n    fontSize: 'inherit',\n    height: '100%',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-embedded-padding, var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding))',\n\n    // textarea styles\n    resize: 'none',\n\n    // input-password styles\n    '&::-ms-reveal': {\n      display: 'none'\n    }\n  }}`\n};\n\nconst interpolations = [...Object.values(textInterpolations)];\n\nconst styleInterpolations = mergeInterpolations<Props>(interpolations);\n\ntype Autocomplete = 'off' | 'on' | string;\n\ntype OrigPickedPropsFromInput = Pick<\n  HTMLAttributesSignalExcluded<HTMLInputElement>,\n  'autofocus' | 'id' | 'placeholder' | 'required' | 'role' | 'spellcheck' | 'type'\n>;\ntype RenamedPropsFromInput = Omit<OrigPickedPropsFromInput, 'autofocus' | 'required'> & {\n  autoFocus?: OrigPickedPropsFromInput['autofocus'];\n  isRequired?: OrigPickedPropsFromInput['required'];\n};\ntype InputProps = {\n  as?: 'input';\n  type?: Pick<HTMLAttributesSignalExcluded<HTMLInputElement>, 'type'>['type'];\n  rows?: never;\n  inputRef?: Ref<HTMLInputElement>;\n  hasPrefix?: boolean;\n  hasSuffix?: boolean;\n};\n\ntype TextAreaProps = {\n  as: 'textarea';\n  type?: never;\n  rows?: number;\n  inputRef?: Ref<HTMLTextAreaElement>;\n  hasPrefix?: never;\n  hasSuffix?: never;\n};\n\ntype UniqueProps = InputProps | TextAreaProps;\n\ntype AriaProps = {\n  ariaAutoComplete?: 'none' | 'inline' | 'list' | 'both';\n  ariaControls?: string;\n  ariaDescribedBy?: string;\n  ariaExpanded?: boolean;\n  ariaInvalid?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaValueMax?: number;\n  ariaValueMin?: number;\n  ariaValueNow?: number;\n  ariaValueText?: string;\n};\n\ntype Props = UniqueProps &\n  TextProps &\n  RenamedPropsFromInput &\n  AriaProps & {\n    autoComplete?: Autocomplete;\n    // TODO: Should we expose has* props like these or should we pass this info\n    // via FormFieldContext?  (from review on 3/8/22)\n    currentCommitValue?: string;\n    hasEndContent?: boolean;\n    hasInsideLabel?: boolean;\n    hasStartContent?: boolean;\n    value?: string;\n    variant?: 'default' | 'embedded';\n    onInput?: (detail: ValueUpdateDetail<string>) => void;\n    onCommit?: (detail: ValueUpdateDetail<string>) => void;\n    onKeyDown?: (event: KeyboardEvent) => void;\n    onKeyUp?: (event: KeyboardEvent) => void;\n  };\n\nexport const TextFieldInput = ({\n  as = 'input',\n  ariaAutoComplete,\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaInvalid,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaValueMax,\n  ariaValueMin,\n  ariaValueNow,\n  ariaValueText,\n  autoComplete,\n  autoFocus,\n  currentCommitValue,\n  hasEndContent = false,\n  hasInsideLabel = false,\n  hasPrefix = false,\n  hasStartContent = false,\n  hasSuffix = false,\n  id,\n  inputRef,\n  placeholder,\n  isRequired,\n  role,\n  rows,\n  spellcheck,\n  type,\n  value = '',\n  variant = 'default',\n  onInput,\n  onCommit,\n  onKeyDown,\n  onKeyUp,\n  ...props\n}: Props) => {\n  const hasValue = value !== '';\n  const { isDisabled, isFocused, isLoading, isReadonly } = useFormFieldContext();\n  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused)\n    ? placeholder\n    : undefined;\n  const { class: styleInterpolationClasses } = styleInterpolations(props);\n  const renderPrefix = !isDisabled && hasPrefix;\n  const renderSuffix = !isDisabled && hasSuffix;\n  const inputClasses = classNames([\n    'oj-c-text-field-input',\n    rootStyles.base,\n    variant === 'default'\n      ? classNames([\n          rootStyles.default,\n          as === 'textarea' && rootStyles.textarea,\n          as === 'input' && rootStyles.input,\n          type === 'password' && rootStyles.password,\n          !hasStartContent && !renderPrefix && rootStyles.defaultPaddingStart,\n          !hasEndContent && !renderSuffix && rootStyles.defaultPaddingEnd\n        ])\n      : rootStyles.embedded,\n    hasInsideLabel &&\n      classNames([\n        rootStyles.labelInsideBase,\n        as === 'textarea' && rootStyles.textareaLabelInsideBase,\n        !hasValue && isFocused && rootStyles.labelInsideNoValueAndHasFocus\n      ]),\n    !hasInsideLabel && as !== 'textarea' && rootStyles.labelDefaultPadding,\n    // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.\n    // The padding between the input and the icon is different than the padding between the input and prefix/suffix (since they are both text)\n    // startcontentpadding+input+endcontentpadding\n    hasStartContent && !hasPrefix && rootStyles.hasStartContent,\n    hasEndContent && !hasSuffix && rootStyles.hasEndContent,\n    isDisabled ? rootStyles.disabledColor : rootStyles.defaultColor,\n    // prefix+prefixpadding+input+suffixpadding+suffix\n    // if there is also a startcontent or end content,\n    // the prefix/suffix will have that padding on it (see PrefixSuffix)\n    renderPrefix && rootStyles.hasPrefix,\n    renderSuffix && rootStyles.hasSuffix,\n    styleInterpolationClasses\n  ]);\n  const Comp = as || 'input';\n  const handlers = useTextFieldInputHandlers({\n    currentCommitValue,\n    value,\n    onInput,\n    onCommit,\n    onKeyDown\n  });\n  // the implicit default for tabindex on an input is 0, so do not explicitly set it.\n  // JET-52914 - Implement Tabbable mode API contract in InputText\n  // if not tabbable, spread tabbableModeProps on component\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n  // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it\n  // works across browsers and versions  (from review on 3/11/22)\n  return (\n    <Comp\n      aria-autocomplete={ariaAutoComplete}\n      aria-controls={ariaControls}\n      aria-describedby={ariaDescribedBy}\n      aria-expanded={ariaExpanded}\n      aria-invalid={ariaInvalid}\n      aria-label={isLoading ? getLoadingAriaLabel() : ariaLabel ? ariaLabel : undefined}\n      aria-labelledby={ariaLabelledBy}\n      aria-required={isRequired ? true : undefined}\n      aria-valuemax={ariaValueMax}\n      aria-valuemin={ariaValueMin}\n      aria-valuenow={ariaValueNow}\n      aria-valuetext={ariaValueText}\n      autocomplete={autoComplete}\n      autofocus={autoFocus}\n      class={inputClasses}\n      disabled={isDisabled}\n      id={id}\n      onKeyUp={onKeyUp}\n      placeholder={myPlaceholder}\n      readonly={isReadonly}\n      // @ts-ignore\n      ref={inputRef}\n      role={role}\n      rows={rows}\n      spellcheck={spellcheck}\n      type={type}\n      value={value}\n      {...handlers}\n      {...(!isTabbable && tabbableModeProps)}\n    />\n  );\n};\n"],"names":["textFieldStyles","readonlyStyles","loadingStyles","getTextFieldClasses","readonly","variant","classNames","base","embedded","nonReadonly","getReadonlyClasses","isInsideNonReadonlyForm","hasInsideLabel","textarea","textareaNotInsideEnabledForm","insideEnabledFormLabelInside","classes","getInputId","id","isInputPlaceholderShown","hasValue","isFocused","rootStyles","interpolations","Object","values","textInterpolations","styleInterpolations","mergeInterpolations","TextFieldInput","_a","as","ariaAutoComplete","ariaControls","ariaDescribedBy","ariaExpanded","ariaInvalid","ariaLabel","ariaLabelledBy","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText","autoComplete","autoFocus","currentCommitValue","hasEndContent","hasPrefix","hasStartContent","hasSuffix","inputRef","placeholder","isRequired","role","rows","spellcheck","type","value","onInput","onCommit","onKeyDown","onKeyUp","props","__rest","isDisabled","isLoading","isReadonly","useFormFieldContext","renderPrefix","renderSuffix","default","input","password","defaultPaddingStart","defaultPaddingEnd","labelInsideBase","textareaLabelInsideBase","labelInsideNoValueAndHasFocus","Comp","_jsx","assign","getLoadingAriaLabel","undefined","autocomplete","autofocus","class","inputClasses","disabled","myPlaceholder","ref","handlers","isTabbable","tabbableModeProps"],"mappings":"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"}

package/cjs/UNSAFE_AspectRatio.js

@@ -1,21 +1,21 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-337905dc.js');
+var tslib_es6 = require('./tslib.es6-71a116e9.js');
 var jsxRuntime = require('preact/jsx-runtime');
 require("identity-obj-proxy");
 var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
 var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
 require('./utils/UNSAFE_classNames.js');
 var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
-var classNames = require('./classNames-28108b7d.js');
+var classNames = require('./classNames-e9365328.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-3251b1fd.js');
-require('./_curry3-047e03f4.js');
-require('./_curry2-44662556.js');
-require('./_has-c5b8419a.js');
+require('./_curry1-a4360e1e.js');
+require('./_curry3-ae14864b.js');
+require('./_curry2-f98bb992.js');
+require('./_has-bc6203bb.js');
 
 // hack to get aspect-ratio to work.
 // CSS now has an aspect-ratio attribute that makes this super easy.
@@ -33,7 +33,7 @@ require('./_has-c5b8419a.js');
 // 100%/ratio. 100/(4/3) = 75%
 // e.g., 16/9 = 56.25%, 4/3 = 75%, 1/1=100%, 2/1=50%
 
-const baseDivStyles = "_1bdsc1q"; // common aspect ratios
+const baseDivStyles = "_1ink9d0"; // common aspect ratios
 // The box’s preferred aspect ratio is the specified ratio of width / height.
 // The ratio has a '/' as a separator and not a ':' because the '/' is what
 // the CSS aspect-ratio uses.

package/cjs/UNSAFE_Avatar/__tests__/Avatar.spec.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
@@ -6,9 +6,9 @@ var preact = require('@testing-library/preact');
 var userEvent = require('@testing-library/user-event');
 var chai = require('chai');
 var UNSAFE_Avatar = require('../../UNSAFE_Avatar.js');
-require('../../tslib.es6-337905dc.js');
+require('../../tslib.es6-71a116e9.js');
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-28108b7d.js');
+require('../../classNames-e9365328.js');
 require("identity-obj-proxy");
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/UNSAFE_Avatar.js

@@ -1,13 +1,13 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-337905dc.js');
+var tslib_es6 = require('./tslib.es6-71a116e9.js');
 var jsxRuntime = require('preact/jsx-runtime');
 require('./utils/UNSAFE_classNames.js');
 require("identity-obj-proxy");
-var classNames = require('./classNames-28108b7d.js');
+var classNames = require('./classNames-e9365328.js');
 
 /**
  * An avatar represents a person or entity as initials or an image.
@@ -94,16 +94,16 @@ const AvatarWrapper = ({
 };
 
 const styles = {
-  base: "_3l6tvf",
-  circle: "ka8x1b"
+  base: "cecya4",
+  circle: "_1vti3lj"
 };
-const childrenStyles = "e2rj6j";
+const childrenStyles = "veu7d9";
 const contentStyles = {
-  base: "_1hfxiom",
-  content: "_2igphf",
-  image: "avjgiz",
-  initials: "_1qedi4u",
-  icon: "_1jjmye5"
+  base: "_1i9xu55",
+  content: "_4e7266",
+  image: "_1cciu5d",
+  initials: "_1yltnpn",
+  icon: "_154ewnw"
 };
 
 exports.Avatar = Avatar;

package/cjs/UNSAFE_Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_Avatar.js","sources":["../../src/UNSAFE_Avatar/Avatar.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype Props = {\n  /**\n   * Specifies the source for the image of the avatar.  Will only be displayed if no icon component is specified as a child.  Image will be rendered as a\n   * background image.\n   */\n  src?: string;\n  /**\n   * Specifies the initials of the avatar.  Will only be displayed if both the src attribute and the child icon component are not specified.\n   */\n  initials?: string;\n  /**\n   * Specifies the background of the avatar.\n   */\n  background?:\n    | 'neutral'\n    | 'orange'\n    | 'green'\n    | 'teal'\n    | 'blue'\n    | 'slate'\n    | 'pink'\n    | 'purple'\n    | 'lilac'\n    | 'gray';\n\n  /**\n   * Specifies the size of the avatar.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n  /**\n   * Specifies the shape of the avatar. Can be square or circle.  The default value of this\n   * property varies by theme.\n   */\n  shape?: 'square' | 'circle';\n  /**\n   * AccessibleLabel does not need to be set if associated information is available to assistive technologies elsewhere on the page,\n   * for example if a person's name is shown next to the avatar.\n   * Otherwise accessibleLabel must be set to make the page accessible.\n   *\n   *  If accessibleLabel  is set, role will internally be set to 'img'.\n   */\n  accessibleLabel?: string;\n} & IntrinsicProps;\n\n/**\n * An avatar represents a person or entity as initials or an image.\n */\nexport function Avatar({ children, src, ...otherProps }: Props) {\n  if (src && !children) {\n    return <ImageAvatar src={src} {...otherProps}></ImageAvatar>;\n  } else {\n    return <ContentAvatar {...otherProps}>{children}</ContentAvatar>;\n  }\n}\n\nconst ImageAvatar = ({ src, ...otherProps }: Props) => {\n  const classes = classNames([contentStyles.base, contentStyles.image]);\n  return (\n    <AvatarWrapper {...otherProps}>\n      <div class={classes} style={{ backgroundImage: `url(${src})` }}></div>\n    </AvatarWrapper>\n  );\n};\n\nconst ContentAvatar = ({ children, initials, ...otherProps }: Props) => {\n  const classes = [\n    contentStyles.base,\n    contentStyles.content,\n    initials ? contentStyles.initials : contentStyles.icon,\n    !initials && childrenStyles\n  ];\n\n  const childContent = initials || children;\n  return (\n    <AvatarWrapper {...otherProps}>\n      <div aria-hidden=\"true\" class={classNames(classes)}>\n        {childContent}\n      </div>\n    </AvatarWrapper>\n  );\n};\n\nconst AvatarWrapper = ({\n  background = 'neutral',\n  size = 'md',\n  shape = 'square',\n  children,\n  accessibleLabel\n}: Props) => {\n  const classes = classNames([\n    styles.base,\n    `oj-c-avatar-bg-${background}`,\n    `oj-c-avatar-${size}`,\n    shape === 'circle' && styles.circle\n  ]);\n  if (accessibleLabel) {\n    return (\n      <div aria-label={accessibleLabel} role=\"img\" class={classes}>\n        {children}\n      </div>\n    );\n  } else {\n    return <div class={classes}>{children}</div>;\n  }\n};\n\nconst styles = {\n  base: cssProps`${{\n    display: 'inline-grid',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE--avatar-size)'\n  }}`,\n\n  circle: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-avatar-border-radius': '50%'\n  }}`\n};\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst contentStyles = {\n  base: cssProps`${{\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-border-radius)',\n    alignSelf: 'stretch',\n    alignItems: 'center',\n    justifyContent: 'center',\n    display: 'flex',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    gridRowStart: '1',\n    gridColumnStart: '1',\n    gridRowEnd: '2',\n    gridColumnEnd: '2',\n    backgroundPosition: 'center center',\n    overflowX: 'hidden',\n    overflowY: 'hidden'\n  }}`,\n  content: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-bg-color)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-text-color)',\n    backgroundSize: '196px 196px',\n    backgroundImage: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-pattern)'\n  }}`,\n  image: cssProps`${{\n    backgroundSize: 'cover'\n  }}`,\n  initials: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-initials-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-initials-font-weight)'\n  }}`,\n  icon: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-icon-font-size)'\n  }}`\n};\n"],"names":["Avatar","_a","src","children","_jsx","ContentAvatar","Object","assign","otherProps","ImageAvatar","__rest","classes","classNames","contentStyles","base","image","content","childContent","initials","AvatarWrapper","background","size","shape","accessibleLabel","styles","circle","role","class","childrenStyles"],"mappings":";;;;;;;;;;;AAyDA;;AAEG;;AACH,SAAAA,MAAA,CAAAC,EAAA,EAAA;;;;;;;AACE,EAAA,IAAAC,GAAA,IAAA,CAAAC,QAAA,EAAA;;;;AAEC,GAFD,MAEO;IACL,OAAAC,cAAA,CAAAC,aAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAC,UAAA,EAAA;AAAAL,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AACD,GAAA;AACH,CAAA;;AAEA,MAAAM,WAAA,GAAAR,EAAA,IAAA;EAAqB,IAAA;AAAAC,IAAAA,GAAAA;AAAA,GAAA,GAAAD,EAAA;MAAAO,UAAA,GAAAE,gBAAA,CAAAT,EAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;;AACnB,EAAA,MAAAU,OAAA,GAAAC,qBAAA,CAAA,CAAAC,aAAA,CAAAC,IAAA,EAAAD,aAAA,CAAAE,KAAA,CAAA,CAAA,CAAA;;;;;;;;;AAMF,CAPA,CAAA;;AASA,MAAAV,aAAA,GAAAJ,EAAA,IAAA;;;;;;;EACE,MAAAU,OAAA,GAAA,CACEE,aAAA,CAAAC,IADF,EAEED,aAAA,CAAAG,OAFF,wDAAA,6BAAA,CAAA,CAAA;AAOA,EAAA,MAAAC,YAAA,GAAAC,QAAA,IAAAf,QAAA,CAAA;;;;;;;;;AAQF,CAhBA,CAAA;;AAkBA,MAAAgB,aAAA,GAAA,CAAA;AAAAC,EAAAA,UAAA,GAAA,SAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAAC,EAAAA,KAAA,GAAA,QAAA;EAAAnB,QAAA;AAAAoB,EAAAA,eAAAA;AAAA,CAAA,KAAA;yCAQIC,MAAA,CAAAV,MACA,CAAA,eAAA,EAAAM,UAAA,CAAA,GACA,CAAAC,YAAAA,EAAAA,IAAA,IACAC,KAAA,KAAA,QAAA,IAAAE,MAAA,CAAAC;;AAEF,EAAA,IAAAF,eAAA,EAAA;AACE,IAAA,OAAAnB,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAA,MAAA,YAAA,EAAAgB,eAAA;AAAAG,MAAAA,IAAA,EAAA,KAAA;AAAAC,MAAAA,KAAA,EAAAhB,OAAAA;AAAA,KAAA,EAAA;AAAAR,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AAKD,GAND,MAMO;AACL,IAAA,OAAAC,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAAoB,MAAAA,KAAA,EAAAhB,OAAAA;AAAA,KAAA,EAAA;AAAAR,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AACD,GAAA;AACH,CAtBA,CAAA;;AAwBA,MAAAqB,MAAA,GAAA;QAAA,SAAA;;AAAA,CAAA,CAAA;AAYA,MAAAI,cAAA,GAAA,QAAA,CAAA;AAUA,MAAAf,aAAA,GAAA;QAAA,UAAA;WAAA,SAAA;SAAA,QAAA;YAAA,UAAA;;AAAA,CAAA;;;;;;;"}
+{"version":3,"file":"UNSAFE_Avatar.js","sources":["../../src/UNSAFE_Avatar/Avatar.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype Props = {\n  /**\n   * Specifies the source for the image of the avatar.  Will only be displayed if no icon component is specified as a child.  Image will be rendered as a\n   * background image.\n   */\n  src?: string;\n  /**\n   * Specifies the initials of the avatar.  Will only be displayed if both the src attribute and the child icon component are not specified.\n   */\n  initials?: string;\n  /**\n   * Specifies the background of the avatar.\n   */\n  background?:\n    | 'neutral'\n    | 'orange'\n    | 'green'\n    | 'teal'\n    | 'blue'\n    | 'slate'\n    | 'pink'\n    | 'purple'\n    | 'lilac'\n    | 'gray';\n\n  /**\n   * Specifies the size of the avatar.\n   */\n  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n  /**\n   * Specifies the shape of the avatar. Can be square or circle.  The default value of this\n   * property varies by theme.\n   */\n  shape?: 'square' | 'circle';\n  /**\n   * AccessibleLabel does not need to be set if associated information is available to assistive technologies elsewhere on the page,\n   * for example if a person's name is shown next to the avatar.\n   * Otherwise accessibleLabel must be set to make the page accessible.\n   *\n   *  If accessibleLabel  is set, role will internally be set to 'img'.\n   */\n  accessibleLabel?: string;\n} & IntrinsicProps;\n\n/**\n * An avatar represents a person or entity as initials or an image.\n */\nexport function Avatar({ children, src, ...otherProps }: Props) {\n  if (src && !children) {\n    return <ImageAvatar src={src} {...otherProps}></ImageAvatar>;\n  } else {\n    return <ContentAvatar {...otherProps}>{children}</ContentAvatar>;\n  }\n}\n\nconst ImageAvatar = ({ src, ...otherProps }: Props) => {\n  const classes = classNames([contentStyles.base, contentStyles.image]);\n  return (\n    <AvatarWrapper {...otherProps}>\n      <div class={classes} style={{ backgroundImage: `url(${src})` }}></div>\n    </AvatarWrapper>\n  );\n};\n\nconst ContentAvatar = ({ children, initials, ...otherProps }: Props) => {\n  const classes = [\n    contentStyles.base,\n    contentStyles.content,\n    initials ? contentStyles.initials : contentStyles.icon,\n    !initials && childrenStyles\n  ];\n\n  const childContent = initials || children;\n  return (\n    <AvatarWrapper {...otherProps}>\n      <div aria-hidden=\"true\" class={classNames(classes)}>\n        {childContent}\n      </div>\n    </AvatarWrapper>\n  );\n};\n\nconst AvatarWrapper = ({\n  background = 'neutral',\n  size = 'md',\n  shape = 'square',\n  children,\n  accessibleLabel\n}: Props) => {\n  const classes = classNames([\n    styles.base,\n    `oj-c-avatar-bg-${background}`,\n    `oj-c-avatar-${size}`,\n    shape === 'circle' && styles.circle\n  ]);\n  if (accessibleLabel) {\n    return (\n      <div aria-label={accessibleLabel} role=\"img\" class={classes}>\n        {children}\n      </div>\n    );\n  } else {\n    return <div class={classes}>{children}</div>;\n  }\n};\n\nconst styles = {\n  base: cssProps`${{\n    display: 'inline-grid',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE--avatar-size)'\n  }}`,\n\n  circle: cssProps`${{\n    '--oj-c-PRIVATE-DO-NOT-USE-avatar-border-radius': '50%'\n  }}`\n};\n\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst contentStyles = {\n  base: cssProps`${{\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-border-radius)',\n    alignSelf: 'stretch',\n    alignItems: 'center',\n    justifyContent: 'center',\n    display: 'flex',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-size)',\n    gridRowStart: '1',\n    gridColumnStart: '1',\n    gridRowEnd: '2',\n    gridColumnEnd: '2',\n    backgroundPosition: 'center center',\n    overflowX: 'hidden',\n    overflowY: 'hidden'\n  }}`,\n  content: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-bg-color)',\n    color: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-text-color)',\n    backgroundSize: '196px 196px',\n    backgroundImage: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-pattern)'\n  }}`,\n  image: cssProps`${{\n    backgroundSize: 'cover'\n  }}`,\n  initials: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-initials-font-size)',\n    fontWeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-initials-font-weight)'\n  }}`,\n  icon: cssProps`${{\n    fontSize: 'var(--oj-c-PRIVATE-DO-NOT-USE-avatar-icon-font-size)'\n  }}`\n};\n"],"names":["Avatar","_a","src","children","_jsx","ContentAvatar","Object","assign","otherProps","ImageAvatar","__rest","classes","classNames","contentStyles","base","image","content","childContent","initials","AvatarWrapper","background","size","shape","accessibleLabel","styles","circle","role","class","childrenStyles"],"mappings":";;;;;;;;;;;AAyDA;;AAEG;;AACH,SAAAA,MAAA,CAAAC,EAAA,EAAA;;;;;;;AACE,EAAA,IAAAC,GAAA,IAAA,CAAAC,QAAA,EAAA;;;;AAEC,GAFD,MAEO;IACL,OAAAC,cAAA,CAAAC,aAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAC,UAAA,EAAA;AAAAL,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AACD,GAAA;AACH,CAAA;;AAEA,MAAAM,WAAA,GAAAR,EAAA,IAAA;EAAqB,IAAA;AAAAC,IAAAA,GAAAA;AAAA,GAAA,GAAAD,EAAA;MAAAO,UAAA,GAAAE,gBAAA,CAAAT,EAAA,EAAA,CAAA,KAAA,CAAA,CAAA,CAAA;;AACnB,EAAA,MAAAU,OAAA,GAAAC,qBAAA,CAAA,CAAAC,aAAA,CAAAC,IAAA,EAAAD,aAAA,CAAAE,KAAA,CAAA,CAAA,CAAA;;;;;;;;;AAMF,CAPA,CAAA;;AASA,MAAAV,aAAA,GAAAJ,EAAA,IAAA;;;;;;;EACE,MAAAU,OAAA,GAAA,CACEE,aAAA,CAAAC,IADF,EAEED,aAAA,CAAAG,OAFF,wDAAA,6BAAA,CAAA,CAAA;AAOA,EAAA,MAAAC,YAAA,GAAAC,QAAA,IAAAf,QAAA,CAAA;;;;;;;;;AAQF,CAhBA,CAAA;;AAkBA,MAAAgB,aAAA,GAAA,CAAA;AAAAC,EAAAA,UAAA,GAAA,SAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAAC,EAAAA,KAAA,GAAA,QAAA;EAAAnB,QAAA;AAAAoB,EAAAA,eAAAA;AAAA,CAAA,KAAA;yCAQIC,MAAA,CAAAV,MACA,CAAA,eAAA,EAAAM,UAAA,CAAA,GACA,CAAAC,YAAAA,EAAAA,IAAA,IACAC,KAAA,KAAA,QAAA,IAAAE,MAAA,CAAAC;;AAEF,EAAA,IAAAF,eAAA,EAAA;AACE,IAAA,OAAAnB,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAA,MAAA,YAAA,EAAAgB,eAAA;AAAAG,MAAAA,IAAA,EAAA,KAAA;AAAAC,MAAAA,KAAA,EAAAhB,OAAAA;AAAA,KAAA,EAAA;AAAAR,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AAKD,GAND,MAMO;AACL,IAAA,OAAAC,cAAA,CAAA,KAAA,EAAAE,MAAA,CAAAC,MAAA,CAAA;AAAAoB,MAAAA,KAAA,EAAAhB,OAAAA;AAAA,KAAA,EAAA;AAAAR,MAAAA,QAAA,EAAAA,QAAAA;AAAA,KAAA,CAAA,CAAA,CAAA;AACD,GAAA;AACH,CAtBA,CAAA;;AAwBA,MAAAqB,MAAA,GAAA;QAAA,QAAA;;AAAA,CAAA,CAAA;AAYA,MAAAI,cAAA,GAAA,QAAA,CAAA;AAUA,MAAAf,aAAA,GAAA;QAAA,UAAA;WAAA,SAAA;SAAA,UAAA;YAAA,UAAA;;AAAA,CAAA;;;;;;;"}

package/cjs/UNSAFE_Badge/__tests__/Badge.spec.js

@@ -1,12 +1,12 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var Badge = require('../../Badge-20d11e9f.js');
+var Badge = require('../../Badge-1221f72f.js');
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-28108b7d.js');
+require('../../classNames-e9365328.js');
 require("identity-obj-proxy");
 
 describe('Test Badge component', () => {

package/cjs/UNSAFE_Badge.js

@@ -1,12 +1,12 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Badge = require('./Badge-20d11e9f.js');
+var Badge = require('./Badge-1221f72f.js');
 require('preact/jsx-runtime');
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-28108b7d.js');
+require('./classNames-e9365328.js');
 require("identity-obj-proxy");
 
 

package/cjs/UNSAFE_BaseButton/__tests__/BaseButton.spec.js

@@ -1,31 +1,31 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var BaseButton = require('../../BaseButton-3d18e665.js');
+var BaseButton = require('../../BaseButton-dc4a71d2.js');
 var hooks_UNSAFE_useTabbableMode = require('../../hooks/UNSAFE_useTabbableMode.js');
-require('../../tslib.es6-337905dc.js');
+require('../../tslib.es6-71a116e9.js');
 require('../../hooks/UNSAFE_usePress.js');
 require('preact/hooks');
 require('../../hooks/UNSAFE_useHover.js');
 require('../../hooks/UNSAFE_useToggle.js');
 require('../../hooks/UNSAFE_useActive.js');
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-28108b7d.js');
+require('../../classNames-e9365328.js');
 require('preact/compat');
 require("identity-obj-proxy");
 require('../../utils/UNSAFE_interpolations/dimensions.js');
 require('../../utils/UNSAFE_arrayUtils.js');
 require('../../utils/UNSAFE_size.js');
-require('../../_curry1-3251b1fd.js');
+require('../../_curry1-a4360e1e.js');
 require('../../utils/UNSAFE_mergeInterpolations.js');
-require('../../_curry3-047e03f4.js');
-require('../../_curry2-44662556.js');
-require('../../_has-c5b8419a.js');
+require('../../_curry3-ae14864b.js');
+require('../../_curry2-f98bb992.js');
+require('../../_has-bc6203bb.js');
 require('../../utils/PRIVATE_clientHints.js');
-require('../../clientHints-5c8adda8.js');
+require('../../clientHints-325c7a1f.js');
 require('../../utils/UNSAFE_mergeProps.js');
 require('preact');
 

package/cjs/UNSAFE_BaseButton.js

@@ -1,10 +1,10 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var BaseButton = require('./BaseButton-3d18e665.js');
-require('./tslib.es6-337905dc.js');
+var BaseButton = require('./BaseButton-dc4a71d2.js');
+require('./tslib.es6-71a116e9.js');
 require('preact/jsx-runtime');
 require('./hooks/UNSAFE_usePress.js');
 require('preact/hooks');
@@ -12,19 +12,19 @@ require('./hooks/UNSAFE_useHover.js');
 require('./hooks/UNSAFE_useToggle.js');
 require('./hooks/UNSAFE_useActive.js');
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-28108b7d.js');
+require('./classNames-e9365328.js');
 require('preact/compat');
 require("identity-obj-proxy");
 require('./utils/UNSAFE_interpolations/dimensions.js');
 require('./utils/UNSAFE_arrayUtils.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-3251b1fd.js');
+require('./_curry1-a4360e1e.js');
 require('./utils/UNSAFE_mergeInterpolations.js');
-require('./_curry3-047e03f4.js');
-require('./_curry2-44662556.js');
-require('./_has-c5b8419a.js');
+require('./_curry3-ae14864b.js');
+require('./_curry2-f98bb992.js');
+require('./_has-bc6203bb.js');
 require('./utils/PRIVATE_clientHints.js');
-require('./clientHints-5c8adda8.js');
+require('./clientHints-325c7a1f.js');
 require('./hooks/UNSAFE_useTabbableMode.js');
 require('preact');
 require('./utils/UNSAFE_mergeProps.js');

package/cjs/UNSAFE_Button/__tests__/Button.spec.js

@@ -1,33 +1,33 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var Button = require('../../Button-6445c7e0.js');
+var Button = require('../../Button-34a21c0e.js');
 var hooks_UNSAFE_useTabbableMode = require('../../hooks/UNSAFE_useTabbableMode.js');
 require('../../UNSAFE_BaseButton.js');
-require('../../BaseButton-3d18e665.js');
-require('../../tslib.es6-337905dc.js');
+require('../../BaseButton-dc4a71d2.js');
+require('../../tslib.es6-71a116e9.js');
 require('../../hooks/UNSAFE_usePress.js');
 require('preact/hooks');
 require('../../hooks/UNSAFE_useHover.js');
 require('../../hooks/UNSAFE_useToggle.js');
 require('../../hooks/UNSAFE_useActive.js');
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-28108b7d.js');
+require('../../classNames-e9365328.js');
 require('preact/compat');
 require("identity-obj-proxy");
 require('../../utils/UNSAFE_interpolations/dimensions.js');
 require('../../utils/UNSAFE_arrayUtils.js');
 require('../../utils/UNSAFE_size.js');
-require('../../_curry1-3251b1fd.js');
+require('../../_curry1-a4360e1e.js');
 require('../../utils/UNSAFE_mergeInterpolations.js');
-require('../../_curry3-047e03f4.js');
-require('../../_curry2-44662556.js');
-require('../../_has-c5b8419a.js');
+require('../../_curry3-ae14864b.js');
+require('../../_curry2-f98bb992.js');
+require('../../_has-bc6203bb.js');
 require('../../utils/PRIVATE_clientHints.js');
-require('../../clientHints-5c8adda8.js');
+require('../../clientHints-325c7a1f.js');
 require('../../utils/UNSAFE_mergeProps.js');
 require('preact');
 

package/cjs/UNSAFE_Button.js

@@ -1,32 +1,32 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('./Button-6445c7e0.js');
+var Button = require('./Button-34a21c0e.js');
 require('preact/jsx-runtime');
 require('./UNSAFE_BaseButton.js');
-require('./BaseButton-3d18e665.js');
-require('./tslib.es6-337905dc.js');
+require('./BaseButton-dc4a71d2.js');
+require('./tslib.es6-71a116e9.js');
 require('./hooks/UNSAFE_usePress.js');
 require('preact/hooks');
 require('./hooks/UNSAFE_useHover.js');
 require('./hooks/UNSAFE_useToggle.js');
 require('./hooks/UNSAFE_useActive.js');
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-28108b7d.js');
+require('./classNames-e9365328.js');
 require('preact/compat');
 require("identity-obj-proxy");
 require('./utils/UNSAFE_interpolations/dimensions.js');
 require('./utils/UNSAFE_arrayUtils.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-3251b1fd.js');
+require('./_curry1-a4360e1e.js');
 require('./utils/UNSAFE_mergeInterpolations.js');
-require('./_curry3-047e03f4.js');
-require('./_curry2-44662556.js');
-require('./_has-c5b8419a.js');
+require('./_curry3-ae14864b.js');
+require('./_curry2-f98bb992.js');
+require('./_has-bc6203bb.js');
 require('./utils/PRIVATE_clientHints.js');
-require('./clientHints-5c8adda8.js');
+require('./clientHints-325c7a1f.js');
 require('./hooks/UNSAFE_useTabbableMode.js');
 require('preact');
 require('./utils/UNSAFE_mergeProps.js');

package/cjs/UNSAFE_Center.js

@@ -1,29 +1,29 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-337905dc.js');
+var tslib_es6 = require('./tslib.es6-71a116e9.js');
 var jsxRuntime = require('preact/jsx-runtime');
 require('./UNSAFE_Flex.js');
-var Flex = require('./Flex-d73eb41d.js');
+var Flex = require('./Flex-7b74b56d.js');
 require('./utils/UNSAFE_interpolations/dimensions.js');
 require('./utils/UNSAFE_arrayUtils.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-3251b1fd.js');
+require('./_curry1-a4360e1e.js');
 require('./utils/UNSAFE_mergeInterpolations.js');
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-28108b7d.js');
-require('./_curry3-047e03f4.js');
-require('./_curry2-44662556.js');
-require('./_has-c5b8419a.js');
+require('./classNames-e9365328.js');
+require('./_curry3-ae14864b.js');
+require('./_curry2-f98bb992.js');
+require('./_has-bc6203bb.js');
 
 require('./utils/UNSAFE_interpolations/boxalignment.js');
-require('./keys-dc35838f.js');
+require('./keys-32adc198.js');
 require('./utils/UNSAFE_interpolations/flexbox.js');
-require('./flexbox-5a021af6.js');
+require('./flexbox-3aeb4b0c.js');
 require('./utils/UNSAFE_interpolations/flexitem.js');
-require('./flexitem-382affea.js');
+require('./flexitem-6d1f9bc3.js');
 
 /**
  * Center is a convenience component that creates a flexbox

package/cjs/UNSAFE_Chip/__tests__/Chip.spec.js

@@ -1,10 +1,10 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
 var preact = require('@testing-library/preact');
 var chai = require('chai');
-var Chip = require('../../Chip-45930c46.js');
+var Chip = require('../../Chip-34c8efc8.js');
 var userEvent = require('@testing-library/user-event');
 var hooks_UNSAFE_useTabbableMode = require('../../hooks/UNSAFE_useTabbableMode.js');
 require('../../hooks/UNSAFE_useActionable.js');
@@ -17,7 +17,7 @@ require('../../hooks/UNSAFE_useFocus.js');
 require('../../hooks/UNSAFE_usePress.js');
 require("identity-obj-proxy");
 require('../../utils/UNSAFE_classNames.js');
-require('../../classNames-28108b7d.js');
+require('../../classNames-e9365328.js');
 require('preact');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/UNSAFE_Chip.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 14.1.1 */
+/* @oracle/oraclejet-preact: 14.1.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('./Chip-45930c46.js');
+var Chip = require('./Chip-34c8efc8.js');
 require('preact/jsx-runtime');
 require('./hooks/UNSAFE_useActionable.js');
 require('./utils/UNSAFE_mergeProps.js');
@@ -15,7 +15,7 @@ require('./hooks/UNSAFE_useFocus.js');
 require('./hooks/UNSAFE_usePress.js');
 require("identity-obj-proxy");
 require('./utils/UNSAFE_classNames.js');
-require('./classNames-28108b7d.js');
+require('./classNames-e9365328.js');
 require('./hooks/UNSAFE_useTabbableMode.js');
 require('preact');