@oracle/oraclejet-preact 14.0.5 → 14.1.0

package/cjs/TextFieldInput-c5f861ba.js

@@ -0,0 +1,182 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-6f60dd09.js');
+var jsxRuntime = require('preact/jsx-runtime');
+
+var hooks_UNSAFE_useFormFieldContext = require('./hooks/UNSAFE_useFormFieldContext.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var hooks_UNSAFE_useTextFieldInputHandlers = require('./hooks/UNSAFE_useTextFieldInputHandlers.js');
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_text = require('./utils/UNSAFE_interpolations/text.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var FormControlUtils = require('./FormControlUtils-c960c51d.js');
+var classNames = require('./classNames-55bceee6.js');
+
+const textFieldStyles = {
+  base: "_3navvy",
+  embedded: "_1u199qo",
+  nonReadonly: "gol8rq"
+};
+const readonlyStyles = {
+  base: "_1kz2e2a",
+  insideEnabledForm: "_1i0hm4r",
+  textarea: "_1e7m3af",
+  insideEnabledFormLabelInside: "_60ovt4",
+  notInsideEnabledForm: "_13qk218",
+  textareaNotInsideEnabledForm: "_1auvrj3"
+}; //Consolidating all loading styles on form elements here
+
+const loadingStyles = "xy1wrz";
+const getTextFieldClasses = (readonly, variant) => {
+  return classNames.classNames([textFieldStyles.base, variant === 'embedded' && textFieldStyles.embedded, !readonly && textFieldStyles.nonReadonly]);
+};
+const getReadonlyClasses = (isInsideNonReadonlyForm, hasInsideLabel, variant) => {
+  const classes = classNames.classNames([readonlyStyles.base, variant === 'textarea' && readonlyStyles.textarea, isInsideNonReadonlyForm ? readonlyStyles.insideEnabledForm : readonlyStyles.notInsideEnabledForm, variant === 'textarea' && !isInsideNonReadonlyForm && readonlyStyles.textareaNotInsideEnabledForm, isInsideNonReadonlyForm && hasInsideLabel && readonlyStyles.insideEnabledFormLabelInside]);
+  return classes;
+};
+const getInputId = id => {
+  return (id !== null && id !== void 0 ? id : '') + '|input';
+};
+const isInputPlaceholderShown = (hasInsideLabel, hasValue, isFocused) => {
+  return !(hasInsideLabel && !hasValue && !isFocused);
+};
+
+const rootStyles = {
+  base: "r31ub9",
+  // removes margin that Safari adds to the input element
+  input: "_1xcja60",
+  textarea: "_18nhsex",
+  password: "_7ug75m",
+  labelDefaultPadding: "_1j3ipzy",
+  labelInsideBase: "_8uf9oc",
+  textareaLabelInsideBase: "kvvgcx",
+  labelInsideNoValueAndHasFocus: "pzinoo",
+  hasStartContent: "urhp59",
+  hasEndContent: "_1d42cg5",
+  defaultColor: "_821xj3",
+  disabledColor: "_1a5o460",
+  // The 0.25em is the space between the prefix and the input. This is equivalent to ' '.
+  hasPrefix: "_4fcmfv",
+  hasSuffix: "fpdz8q",
+  default: "gius89",
+  defaultPaddingStart: "_13165zu",
+  defaultPaddingEnd: "oe9gzv",
+  embedded: "xp01v6"
+};
+const interpolations = [...Object.values(utils_UNSAFE_interpolations_text.textInterpolations)];
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(interpolations);
+const TextFieldInput = _a => {
+  var {
+    as = 'input',
+    ariaAutoComplete,
+    ariaControls,
+    ariaDescribedBy,
+    ariaExpanded,
+    ariaInvalid,
+    ariaLabel,
+    ariaLabelledBy,
+    ariaValueMax,
+    ariaValueMin,
+    ariaValueNow,
+    ariaValueText,
+    autoComplete,
+    autoFocus,
+    currentCommitValue,
+    hasEndContent = false,
+    hasInsideLabel = false,
+    hasPrefix = false,
+    hasStartContent = false,
+    hasSuffix = false,
+    id,
+    inputRef,
+    placeholder,
+    isRequired,
+    role,
+    rows,
+    spellcheck,
+    type,
+    value = '',
+    variant = 'default',
+    onInput,
+    onCommit,
+    onKeyDown,
+    onKeyUp
+  } = _a,
+      props = tslib_es6.__rest(_a, ["as", "ariaAutoComplete", "ariaControls", "ariaDescribedBy", "ariaExpanded", "ariaInvalid", "ariaLabel", "ariaLabelledBy", "ariaValueMax", "ariaValueMin", "ariaValueNow", "ariaValueText", "autoComplete", "autoFocus", "currentCommitValue", "hasEndContent", "hasInsideLabel", "hasPrefix", "hasStartContent", "hasSuffix", "id", "inputRef", "placeholder", "isRequired", "role", "rows", "spellcheck", "type", "value", "variant", "onInput", "onCommit", "onKeyDown", "onKeyUp"]);
+
+  const hasValue = value !== '';
+  const {
+    isDisabled,
+    isFocused,
+    isLoading,
+    isReadonly
+  } = hooks_UNSAFE_useFormFieldContext.useFormFieldContext();
+  const myPlaceholder = isInputPlaceholderShown(hasInsideLabel, hasValue, isFocused) ? placeholder : undefined;
+  const {
+    class: styleInterpolationClasses
+  } = styleInterpolations(props);
+  const renderPrefix = !isDisabled && hasPrefix;
+  const renderSuffix = !isDisabled && hasSuffix;
+  const inputClasses = classNames.classNames(['oj-c-text-field-input', rootStyles.base, variant === 'default' ? classNames.classNames([rootStyles.default, as === 'textarea' && rootStyles.textarea, as === 'input' && rootStyles.input, type === 'password' && rootStyles.password, !hasStartContent && !renderPrefix && rootStyles.defaultPaddingStart, !hasEndContent && !renderSuffix && rootStyles.defaultPaddingEnd]) : rootStyles.embedded, hasInsideLabel && classNames.classNames([rootStyles.labelInsideBase, as === 'textarea' && rootStyles.textareaLabelInsideBase, !hasValue && isFocused && rootStyles.labelInsideNoValueAndHasFocus]), !hasInsideLabel && as !== 'textarea' && rootStyles.labelDefaultPadding, // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.
+  // The padding between the input and the icon is different than the padding between the input and prefix/suffix (since they are both text)
+  // startcontentpadding+input+endcontentpadding
+  hasStartContent && !hasPrefix && rootStyles.hasStartContent, hasEndContent && !hasSuffix && rootStyles.hasEndContent, isDisabled ? rootStyles.disabledColor : rootStyles.defaultColor, // prefix+prefixpadding+input+suffixpadding+suffix
+  // if there is also a startcontent or end content,
+  // the prefix/suffix will have that padding on it (see PrefixSuffix)
+  renderPrefix && rootStyles.hasPrefix, renderSuffix && rootStyles.hasSuffix, styleInterpolationClasses]);
+  const Comp = as || 'input';
+  const handlers = hooks_UNSAFE_useTextFieldInputHandlers.useTextFieldInputHandlers({
+    currentCommitValue,
+    value,
+    onInput,
+    onCommit,
+    onKeyDown
+  }); // the implicit default for tabindex on an input is 0, so do not explicitly set it.
+  // JET-52914 - Implement Tabbable mode API contract in InputText
+  // if not tabbable, spread tabbableModeProps on component
+
+  const {
+    isTabbable,
+    tabbableModeProps
+  } = hooks_UNSAFE_useTabbableMode.useTabbableMode(); // TODO: for autoComplete='off', need to configure attrs appropriately to make sure it
+  // works across browsers and versions  (from review on 3/11/22)
+
+  return jsxRuntime.jsx(Comp, Object.assign({
+    "aria-autocomplete": ariaAutoComplete,
+    "aria-controls": ariaControls,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-invalid": ariaInvalid,
+    "aria-label": isLoading ? FormControlUtils.getLoadingAriaLabel() : ariaLabel ? ariaLabel : undefined,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": isRequired ? true : undefined,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuetext": ariaValueText,
+    autocomplete: autoComplete,
+    autofocus: autoFocus,
+    class: inputClasses,
+    disabled: isDisabled,
+    id: id,
+    onKeyUp: onKeyUp,
+    placeholder: myPlaceholder,
+    readonly: isReadonly,
+    // @ts-ignore
+    ref: inputRef,
+    role: role,
+    rows: rows,
+    spellcheck: spellcheck,
+    type: type,
+    value: value
+  }, handlers, !isTabbable && tabbableModeProps));
+};
+
+exports.TextFieldInput = TextFieldInput;
+exports.getInputId = getInputId;
+exports.getReadonlyClasses = getReadonlyClasses;
+exports.getTextFieldClasses = getTextFieldClasses;
+exports.loadingStyles = loadingStyles;
+/*  */
+//# sourceMappingURL=TextFieldInput-c5f861ba.js.map

package/cjs/TextFieldInput-c5f861ba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldInput-c5f861ba.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/Theme-redwood/theme.css

@@ -409,6 +409,10 @@
 :root {
   --oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color: rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-20), 0.7);
   --oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color: rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-190), 0.8);
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger:  #D63B25;
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning: #CF7C00;
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success: #508223;
+
 }
 
 .oj-c-colorscheme-dark, .oj-color-invert {
@@ -419,7 +423,6 @@
   --oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover      : rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-0), 0.08);
   --oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active     : rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-0), 0.12);
 }
-
 /* end:src/Common/themes/redwood/Common.css */
 /* start:src/hooks/UNSAFE_useTooltip/themes/redwood/useTooltip.css */
 :root {
@@ -586,7 +589,7 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);  
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         var(--oj-c-PRIVATE-DO-NOT-USE-core-divider-color);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);
-    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             transparent;    
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             transparent;        
 }
 
 .oj-c-base-button-callToAction {
@@ -601,7 +604,7 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-neutral-contrast);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             var(--oj-c-PRIVATE-DO-NOT-USE-core-color-disabled-1);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
-    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);    
 }
 
 .oj-c-base-button-borderless {
@@ -619,6 +622,21 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);  
 }
 
+.oj-c-base-button-ghost {
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color:                      transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color:                  transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color:                    var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-hover:                transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-hover:            transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-hover:              var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-active:               transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-active:           transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);      
+}
+
 .oj-c-base-button-solid {
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color:                      rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-190),.08);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color:                  transparent;
@@ -631,7 +649,7 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);    
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             var(--oj-c-PRIVATE-DO-NOT-USE-core-color-disabled-1);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
-    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);    
 }
 
 .oj-c-base-button-danger {
@@ -646,7 +664,7 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-danger-contrast);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             var(--oj-c-PRIVATE-DO-NOT-USE-core-color-disabled-1);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
-    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);    
 }
 
 .oj-c-base-button-lg {
@@ -736,13 +754,13 @@
 /* end:src/UNSAFE_BaseButton/themes/redwood/BaseButton.css */
 /* start:src/UNSAFE_Button/themes/redwood/ButtonLayout.css */
 .oj-c-button-layout-lg {
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        1rem;
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        1rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        1.0rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        1.0rem;
 }
 
 .oj-c-button-layout-md {
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        .625rem;
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:       .625rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:       0.625rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:       0.625rem;
 }
 
 .oj-c-button-layout-sm {
@@ -1181,6 +1199,24 @@
     --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     rgb(var(--oj-c-PRIVATE-DO-NOT-USE-palette-warning-rgb-100));
     --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-unselected:     rgb(var(--oj-c-PRIVATE-DO-NOT-USE-palette-warning-rgb-100));
 }
+
+.oj-c-rating-gauge-success {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+}
+
+.oj-c-rating-gauge-warning {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+}
+
+.oj-c-rating-gauge-danger {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+}
 /* end:src/UNSAFE_RatingGauge/themes/redwood/RatingGauge.css */
 /* start:src/UNSAFE_Selector/themes/redwood/Selector.css */
 :root {

package/cjs/Theme-stable/theme.css

@@ -389,6 +389,16 @@
   --oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color: rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-170), 0.15);
 }
 
+/* dvt vars */
+:root {
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color: rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-20), 0.7);
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color: rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-190), 0.8);
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger:  #D63B25;
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning: #CF7C00;
+  --oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success: #508223;
+
+}
+
 .oj-c-colorscheme-dark, .oj-color-invert {
   /* Override CSS vars to make it dark themed (the values are taken from the Legacy JET scoped under oj-color-invert) */
   --oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary  : rgb(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-0));
@@ -580,6 +590,21 @@
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             transparent;
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);   
+}
+
+.oj-c-base-button-ghost {
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color:                      transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color:                  transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color:                    var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-primary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-hover:                transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-hover:            transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-hover:              var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-active:               transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-active:           transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-active:             var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-secondary);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color-disabled:             transparent;
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color-disabled:         transparent;
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-color-disabled:           var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);  
 }
 
@@ -629,7 +654,7 @@
 :root {
     --oj-c-PRIVATE-DO-NOT-USE-base-button-bg-color:             transparent;
     --oj-c-PRIVATE-DO-NOT-USE-base-button-border-color:         rgba(var(--oj-c-PRIVATE-DO-NOT-USE-palette-neutral-rgb-190), .5);
-    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-radius:        var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-md);
+    --oj-c-PRIVATE-DO-NOT-USE-base-button-border-radius:        var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-md);    
     --oj-c-PRIVATE-DO-NOT-USE-base-button-font-weight:          600;
     --oj-c-PRIVATE-DO-NOT-USE-base-button-height:               2.75rem;
     --oj-c-PRIVATE-DO-NOT-USE-base-button-text-to-edge-padding: 1rem;
@@ -700,13 +725,13 @@
 /* end:src/UNSAFE_BaseButton/themes/stable/BaseButton.css */
 /* start:src/UNSAFE_Button/themes/stable/ButtonLayout.css */
 .oj-c-button-layout-lg {
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        1rem;
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        1rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        1.0rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        1.0rem;
 }
 
 .oj-c-button-layout-md {
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        .625rem;
-    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:       .625rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:       0.625rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:       0.625rem;
 }
 
 .oj-c-button-layout-sm {
@@ -715,6 +740,23 @@
     --oj-c-PRIVATE-DO-NOT-USE-button-icon-size:                   1.25rem;
 }    
 
+.oj-c-button-layout-embedded-lg {
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        1rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        0.84375rem;
+}
+
+.oj-c-button-layout-embedded-md {
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        .625rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        .59375rem;
+}
+
+.oj-c-button-layout-embedded-sm {
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-text-padding:        .5rem;      
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-to-edge-padding:        .46875rem;
+    --oj-c-PRIVATE-DO-NOT-USE-button-icon-size:                   1.25rem;
+}    
+
+
 :root {
     --oj-c-PRIVATE-DO-NOT-USE-button-icon-size:                   var(--oj-c-PRIVATE-DO-NOT-USE-core-icon-size-lg);
 }
@@ -1084,6 +1126,24 @@
     --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-unselected-readonly: rgb(var(--oj-c-PRIVATE-DO-NOT-USE-palette-warning-rgb-100));
     --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected-readonly: rgb(var(--oj-c-PRIVATE-DO-NOT-USE-palette-warning-rgb-100));
 }
+
+.oj-c-rating-gauge-success {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success);
+}
+
+.oj-c-rating-gauge-warning {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning);
+}
+
+.oj-c-rating-gauge-danger {
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected:              var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-border-color-selected:       var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+    --oj-c-PRIVATE-DO-NOT-USE-rating-gauge-color-selected-readonly:     var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger);
+}
 /* end:src/UNSAFE_RatingGauge/themes/stable/RatingGauge.css */
 /* start:src/UNSAFE_Selector/themes/stable/Selector.css */
 :root {

package/cjs/UNSAFE_AspectRatio.js

@@ -1,21 +1,21 @@
-/* @oracle/oraclejet-preact: 14.0.5 */
+/* @oracle/oraclejet-preact: 14.1.0 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-07720b96.js');
+var tslib_es6 = require('./tslib.es6-6f60dd09.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-d6e0ded0.js');
+var classNames = require('./classNames-55bceee6.js');
 require('./utils/UNSAFE_size.js');
-require('./_curry1-7cb69eef.js');
-require('./_curry3-b9a1c3c2.js');
-require('./_curry2-7f9f99a3.js');
-require('./_has-195d2d0c.js');
+require('./_curry1-f1ebd742.js');
+require('./_curry3-bc6e6a86.js');
+require('./_curry2-588f7ddc.js');
+require('./_has-2eedb7e0.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-195d2d0c.js');
 // 100%/ratio. 100/(4/3) = 75%
 // e.g., 16/9 = 56.25%, 4/3 = 75%, 1/1=100%, 2/1=50%
 
-const baseDivStyles = "swzxeh"; // common aspect ratios
+const baseDivStyles = "vn2maq"; // 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

@@ -0,0 +1,146 @@
+/* @oracle/oraclejet-preact: 14.1.0 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+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-6f60dd09.js');
+require('../../utils/UNSAFE_classNames.js');
+require('../../classNames-55bceee6.js');
+require("identity-obj-proxy");
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var userEvent__default = /*#__PURE__*/_interopDefaultLegacy(userEvent);
+
+describe('Test Avatar component', () => {
+    it('render', async function () {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { children: "TN" }));
+        const initials = await content.findByText('TN');
+        chai.expect(initials).not.null;
+        userEvent__default["default"].click(initials);
+    });
+    it('applies Linaria CSS classes', () => {
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, {}));
+        const firstElement = content.container.firstElementChild;
+        const classList = firstElement === null || firstElement === void 0 ? void 0 : firstElement.classList;
+        chai.expect(classList === null || classList === void 0 ? void 0 : classList.length).equals(3);
+    });
+    it('checks for avatar sizes', () => {
+        const sizeOptionsArray = [
+            '2xs',
+            'xs',
+            'sm',
+            'md',
+            'lg',
+            'xl',
+            '2xl'
+        ];
+        sizeOptionsArray.forEach((size) => {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { size: size }));
+            const firstElement = content.container.firstElementChild;
+            const classList = firstElement === null || firstElement === void 0 ? void 0 : firstElement.classList;
+            const bgColorClass = 'oj-c-avatar-' + size;
+            const result = classList === null || classList === void 0 ? void 0 : classList.value;
+            chai.expect(result).to.be.a('string').that.contains(bgColorClass);
+        });
+    });
+    it('checks for avatar initials', () => {
+        var _a;
+        const testInitials = 'TEST INITIAL';
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { initials: testInitials }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        const innerHTMLText = firstElement === null || firstElement === void 0 ? void 0 : firstElement.innerHTML;
+        chai.expect(innerHTMLText).equals(testInitials);
+    });
+    it('checks for avatar src', () => {
+        var _a;
+        const src = 'avatar-image.jpg';
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { src: src }));
+        const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        const srcImage = firstElement === null || firstElement === void 0 ? void 0 : firstElement.style.backgroundImage;
+        chai.expect(srcImage).to.be.a('string').that.contains(src);
+    });
+    // commented out until we resolve using this external dependency
+    // it('checks for avatar icon', () => {
+    //   const iconName = 'car';
+    //   const content = render(
+    //     <Avatar>
+    //       <DemoRedwoodIcon name={iconName} />
+    //     </Avatar>
+    //   );
+    //   const firstElement = content.container.firstElementChild as HTMLElement;
+    //   const iconElement = firstElement?.querySelectorAll(`.oj-ux-ico-${iconName}`);
+    //   expect(iconElement?.length).equals(1);
+    // });
+    //Note: added check for running the below test only on browser, so as to access the getComputedStyle when the component is rendered
+    if (typeof jest === 'undefined') {
+        it('checks for avatar shape', () => {
+            const shapeOptionsArray = ['circle', 'square'];
+            shapeOptionsArray.forEach((shape) => {
+                var _a;
+                const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { shape: shape }));
+                const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+                const avatarBorderRadius = window
+                    .getComputedStyle(firstElement)
+                    .getPropertyValue('border-radius');
+                if (shape === 'circle') {
+                    chai.expect(avatarBorderRadius).equals('50%');
+                }
+                else {
+                    chai.expect(avatarBorderRadius).not.equals('50%');
+                }
+            });
+        });
+    }
+    it('checks for backgroundColor style', () => {
+        const backgroundOptionsArray = [
+            'neutral',
+            'orange',
+            'green',
+            'teal',
+            'blue',
+            'slate',
+            'pink',
+            'purple',
+            'lilac',
+            'gray'
+        ];
+        backgroundOptionsArray.forEach((background) => {
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { background: background }));
+            const firstElement = content.container.firstElementChild;
+            const classList = firstElement === null || firstElement === void 0 ? void 0 : firstElement.classList;
+            const sizeClass = 'oj-c-avatar-bg-' + background;
+            const result = classList === null || classList === void 0 ? void 0 : classList.value;
+            chai.expect(result).to.be.a('string').that.contains(sizeClass);
+        });
+    });
+});
+describe('Security Test Avatar component', () => {
+    it('initials injection', function () {
+        const unwantedInitials = "<span id='evil'>Evil disabled</span>";
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { initials: unwantedInitials }));
+        const parentContainer = content.container;
+        const evilSpan = parentContainer.querySelectorAll('#evil').length;
+        chai.expect(evilSpan).equals(0);
+    });
+    it('src injection', function () {
+        const unwantedSrc = "<span id='evil'>Evil disabled</span>";
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { src: unwantedSrc }));
+        const parentContainer = content.container;
+        const evilSpan = parentContainer.querySelectorAll('#evil').length;
+        chai.expect(evilSpan).equals(0);
+    });
+    it('size injection', function () {
+        const unwantedInitials = "<span id='evil'>Evil disabled</span>";
+        // @ts-ignore
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Avatar.Avatar, { size: unwantedInitials }));
+        const parentContainer = content.container;
+        const evilSpan = parentContainer.querySelectorAll('#evil').length;
+        chai.expect(evilSpan).equals(0);
+    });
+});
+/*  */
+//# sourceMappingURL=Avatar.spec.js.map