@oracle/oraclejet-preact 15.0.2 → 15.0.3

package/cjs/TextTag-d551cf74.js

@@ -0,0 +1,59 @@
+/* @oracle/oraclejet-preact: 15.0.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var PRIVATE_SelectCommon = require('./PRIVATE_SelectCommon.js');
+require('./UNSAFE_HiddenAccessible.js');
+require('./UNSAFE_IconButton.js');
+require('./UNSAFE_Text.js');
+var PRIVATE_ThemedIcons_CloseIcon = require('./PRIVATE_ThemedIcons/CloseIcon.js');
+var hooks_UNSAFE_useTabbableMode = require('./hooks/UNSAFE_useTabbableMode.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var utils_PRIVATE_keyboardUtils = require('./utils/PRIVATE_keyboardUtils.js');
+require('./utils/UNSAFE_classNames.js');
+var UNSAFE_SelectMultiple_themes_TextTagStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagStyles.css.js');
+var classNames = require('./classNames-9fbd49fc.js');
+var Text = require('./Text-88f82a73.js');
+var IconButton = require('./IconButton-81831f15.js');
+var HiddenAccessible = require('./HiddenAccessible-24e60493.js');
+
+/**
+ * The component for rendering selectable/removable TextTag
+ *
+ * @param param0 The props for the TextTag component
+ */
+function TextTag({ children, removeIcon = 'never', isSelected = false, onRemoveAction, onSelect, onRemoveIconClick, isFocused, value }) {
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const spanRef = hooks.useRef(null);
+    const navigationTextId = hooks.useId();
+    const rootClasses = classNames.classNames([UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.base, isSelected && UNSAFE_SelectMultiple_themes_TextTagStyles_css.textTagStyles.selected]);
+    const onRemoveActionCallback = hooks.useCallback(() => {
+        onRemoveAction?.(value);
+    }, [value, onRemoveAction]);
+    const onSelectCallback = hooks.useCallback(() => {
+        onSelect?.(value);
+    }, [value, onSelect]);
+    const onRemoveIconClickCallback = hooks.useCallback(() => {
+        onRemoveIconClick?.(value);
+    }, [value, onRemoveIconClick]);
+    const onKeyUp = hooks.useCallback((event) => {
+        if (utils_PRIVATE_keyboardUtils.isBackspaceOrDelete(event)) {
+            onRemoveActionCallback();
+            return;
+        }
+    }, [onRemoveActionCallback]);
+    hooks.useEffect(() => {
+        if (isFocused && isSelected) {
+            spanRef.current?.focus();
+            spanRef.current?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isFocused, isSelected]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("span", { ref: spanRef, class: rootClasses, tabIndex: -1, onClick: onSelectCallback, onKeyUp: onKeyUp, 
+                // Kill mouse down event to prevent focus transfer done by the parent container.
+                // We will programmatically take back focus in response to the onClick event.
+                onMouseDown: PRIVATE_SelectCommon.preventDefault, role: "option", "aria-describedby": navigationTextId, "aria-selected": isSelected ? 'true' : 'false', children: [jsxRuntime.jsx(Text.Text, { size: "md", variant: "inherit", children: children }), removeIcon === 'always' && (jsxRuntime.jsx(hooks_UNSAFE_useTabbableMode.TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsxRuntime.jsx(IconButton.IconButton, { size: "xs", variant: "ghost", onAction: onRemoveIconClickCallback, children: jsxRuntime.jsx(PRIVATE_ThemedIcons_CloseIcon.CloseIcon, {}) }) }))] }), jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { id: navigationTextId, children: translations.selectMultiple_removeSelectedTagInstructionText() })] }));
+}
+
+exports.TextTag = TextTag;
+//# sourceMappingURL=TextTag-d551cf74.js.map

package/cjs/TextTag-d551cf74.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTag-d551cf74.js","sources":["../../src/UNSAFE_SelectMultiple/TextTag.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 */\n\nimport { useCallback, useEffect, useId, useRef } from 'preact/hooks';\nimport { preventDefault } from '../PRIVATE_SelectCommon';\nimport { HiddenAccessible } from '../UNSAFE_HiddenAccessible';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { Text } from '../UNSAFE_Text';\nimport { CloseIcon } from '../PRIVATE_ThemedIcons/CloseIcon';\nimport { TabbableModeContext } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { isBackspaceOrDelete } from '../utils/PRIVATE_keyboardUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { textTagStyles } from './themes/TextTagStyles.css';\n\n/**\n * Props for the TextTag component\n */\ntype Props<V> = {\n  /**\n   * The label for the text tag\n   */\n  children: string;\n\n  /**\n   * Specifies whether to show the remove icon\n   */\n  removeIcon?: 'always' | 'never';\n\n  /**\n   * Indicates whether the component is focused\n   */\n  isFocused?: boolean;\n\n  /**\n   * Specifies if the TextTag component is selected\n   */\n  isSelected?: boolean;\n\n  /**\n   * Callback to be invoked when Delete/Backspace is pressed\n   */\n  onRemoveAction?: (value: V) => void;\n\n  /**\n   * Callback to be invoked when clicking on the text tag\n   */\n  onSelect?: (value: V) => void;\n\n  /**\n   * Callback to be invoked when the remove icon is clicked\n   */\n  onRemoveIconClick?: (value: V) => void;\n\n  /**\n   * The value of the text tag\n   */\n  value: V;\n};\n\n/**\n * The component for rendering selectable/removable TextTag\n *\n * @param param0 The props for the TextTag component\n */\nexport function TextTag<V>({\n  children,\n  removeIcon = 'never',\n  isSelected = false,\n  onRemoveAction,\n  onSelect,\n  onRemoveIconClick,\n  isFocused,\n  value\n}: Props<V>) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const spanRef = useRef<HTMLSpanElement>(null);\n  const navigationTextId = useId();\n\n  const rootClasses = classNames([textTagStyles.base, isSelected && textTagStyles.selected]);\n\n  const onRemoveActionCallback = useCallback(() => {\n    onRemoveAction?.(value);\n  }, [value, onRemoveAction]);\n  const onSelectCallback = useCallback(() => {\n    onSelect?.(value);\n  }, [value, onSelect]);\n  const onRemoveIconClickCallback = useCallback(() => {\n    onRemoveIconClick?.(value);\n  }, [value, onRemoveIconClick]);\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (isBackspaceOrDelete(event)) {\n        onRemoveActionCallback();\n        return;\n      }\n    },\n    [onRemoveActionCallback]\n  );\n\n  useEffect(() => {\n    if (isFocused && isSelected) {\n      spanRef.current?.focus();\n      spanRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isFocused, isSelected]);\n\n  return (\n    <>\n      <span\n        ref={spanRef}\n        class={rootClasses}\n        tabIndex={-1}\n        onClick={onSelectCallback}\n        onKeyUp={onKeyUp}\n        // Kill mouse down event to prevent focus transfer done by the parent container.\n        // We will programmatically take back focus in response to the onClick event.\n        onMouseDown={preventDefault}\n        role=\"option\"\n        aria-describedby={navigationTextId}\n        aria-selected={isSelected ? 'true' : 'false'}>\n        <Text size=\"md\" variant=\"inherit\">\n          {children}\n        </Text>\n        {removeIcon === 'always' && (\n          <TabbableModeContext.Provider value={{ isTabbable: false }}>\n            <IconButton size=\"xs\" variant=\"ghost\" onAction={onRemoveIconClickCallback}>\n              <CloseIcon />\n            </IconButton>\n          </TabbableModeContext.Provider>\n        )}\n      </span>\n      <HiddenAccessible id={navigationTextId}>\n        {translations.selectMultiple_removeSelectedTagInstructionText()}\n      </HiddenAccessible>\n    </>\n  );\n}\n"],"names":["useTranslationBundle","useRef","useId","classNames","textTagStyles","useCallback","isBackspaceOrDelete","useEffect","_jsxs","preventDefault","_jsx","Text","TabbableModeContext","IconButton","CloseIcon","HiddenAccessible"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkEA;;;;AAIG;AACG,SAAU,OAAO,CAAI,EACzB,QAAQ,EACR,UAAU,GAAG,OAAO,EACpB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,KAAK,EACI,EAAA;AACT,IAAA,MAAM,YAAY,GAAGA,sDAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,OAAO,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAC;AAC9C,IAAA,MAAM,gBAAgB,GAAGC,WAAK,EAAE,CAAC;AAEjC,IAAA,MAAM,WAAW,GAAGC,qBAAU,CAAC,CAACC,4DAAa,CAAC,IAAI,EAAE,UAAU,IAAIA,4DAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE3F,IAAA,MAAM,sBAAsB,GAAGC,iBAAW,CAAC,MAAK;AAC9C,QAAA,cAAc,GAAG,KAAK,CAAC,CAAC;AAC1B,KAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;AAC5B,IAAA,MAAM,gBAAgB,GAAGA,iBAAW,CAAC,MAAK;AACxC,QAAA,QAAQ,GAAG,KAAK,CAAC,CAAC;AACpB,KAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,IAAA,MAAM,yBAAyB,GAAGA,iBAAW,CAAC,MAAK;AACjD,QAAA,iBAAiB,GAAG,KAAK,CAAC,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAGA,iBAAW,CACzB,CAAC,KAAoB,KAAI;AACvB,QAAA,IAAIC,+CAAmB,CAAC,KAAK,CAAC,EAAE;AAC9B,YAAA,sBAAsB,EAAE,CAAC;YACzB,OAAO;AACR,SAAA;AACH,KAAC,EACD,CAAC,sBAAsB,CAAC,CACzB,CAAC;IAEFC,eAAS,CAAC,MAAK;QACb,IAAI,SAAS,IAAI,UAAU,EAAE;AAC3B,YAAA,OAAO,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YACzB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACvD,SAAA;AACH,KAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5B,QACEC,kDACEA,eACE,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,OAAO;;;AAGhB,gBAAA,WAAW,EAAEC,mCAAc,EAC3B,IAAI,EAAC,QAAQ,sBACK,gBAAgB,EAAA,eAAA,EACnB,UAAU,GAAG,MAAM,GAAG,OAAO,aAC5CC,cAAC,CAAAC,SAAI,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,YAC9B,QAAQ,EAAA,CACJ,EACN,UAAU,KAAK,QAAQ,KACtBD,eAACE,gDAAmB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EACxD,QAAA,EAAAF,cAAA,CAACG,qBAAU,EAAC,EAAA,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,yBAAyB,EACvE,QAAA,EAAAH,cAAA,CAACI,uCAAS,EAAA,EAAA,CAAG,GACF,EACgB,CAAA,CAChC,IACI,EACPJ,cAAA,CAACK,iCAAgB,EAAC,EAAA,EAAE,EAAE,gBAAgB,EAAA,QAAA,EACnC,YAAY,CAAC,+CAA+C,EAAE,EAC9C,CAAA,CAAA,EAAA,CAClB,EACH;AACJ;;;;"}

package/cjs/TextTagList-8e283133.js

@@ -0,0 +1,192 @@
+/* @oracle/oraclejet-preact: 15.0.3 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var hooks = require('preact/hooks');
+require('./hooks/UNSAFE_useFocusWithin.js');
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var utils_PRIVATE_keyboardUtils = require('./utils/PRIVATE_keyboardUtils.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_classNames.js');
+var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolations/dimensions.js');
+var utils_UNSAFE_mergeInterpolations = require('./utils/UNSAFE_mergeInterpolations.js');
+var TextTag = require('./TextTag-d551cf74.js');
+var UNSAFE_SelectMultiple_themes_TextTagListStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js');
+var useFocusWithin = require('./useFocusWithin-bf2eccdd.js');
+var classNames = require('./classNames-9fbd49fc.js');
+
+/**
+ * Supported style props
+ */
+const supportedDimensions = utils_UNSAFE_arrayUtils.stringLiteralArray(['maxWidth']);
+/**
+ * Setting up interpolations
+ */
+const supportedInterpolations = Array.from(supportedDimensions, (x) => utils_UNSAFE_interpolations_dimensions.dimensionInterpolations[x]);
+const styleInterpolations = utils_UNSAFE_mergeInterpolations.mergeInterpolations(supportedInterpolations);
+/**
+ * TextTagList component for rendering the collection of TextTags as well
+ * as managing the navigation.
+ *
+ * @param param0 The props for the TextTagList component
+ * @param ref The ref for the component
+ */
+function _TextTagList(props, ref = () => { }) {
+    // destructure props
+    const { 'aria-label': ariaLabel, data, hasInsideLabel = false, removeIcon = 'never', onExitNavigation, onRemove } = props;
+    // ref for setting the scroll position for the div
+    const divRef = hooks.useRef(null);
+    // Internal state for storing the current selected tags
+    const [selectedTags, setSelectedTags] = hooks.useState([]);
+    // The navigation of focus will depend on the reading direction, so we need to
+    // get the current reading direction
+    const { direction } = hooks_UNSAFE_useUser.useUser();
+    // Create a ref for maintaining the current selected tag. This is used for
+    // determining which tag needs to be selected next when pressing ArrowLeft or
+    // ArrowRight.
+    const currentSelectedTagIndex = hooks.useRef(-1);
+    // Create a ref that holds the last tag which is needed when receiving focus
+    // programmatically.
+    const lastTag = data.at(-1)?.value;
+    const lastTagMeta = hooks.useRef({ value: lastTag, index: data.length - 1 });
+    lastTagMeta.current = { value: lastTag, index: data.length - 1 };
+    // A function to select the tag at the given index
+    const selectTagAtIndex = hooks.useCallback((index) => {
+        const key = data.at(index)?.value;
+        if (key == null)
+            return;
+        setSelectedTags([key]);
+    }, [data] // setSelectedTags is stable and not needed in dep array
+    );
+    // A function to clear the selection
+    const clearSelection = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            currentSelectedTagIndex.current = -1;
+            return previousSelectedTags.length ? [] : previousSelectedTags;
+        });
+    }, []); // setSelectedTags is stable and not needed in dep array
+    // Handle the remove & delete events from the tags
+    const onTagRemoveIconClick = hooks.useCallback((value) => {
+        // on remove icon click we only need to remove the tag that
+        // invoked the event
+        onRemove?.([value]);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [clearSelection, onExitNavigation, onRemove]);
+    const onTagRemoveAction = hooks.useCallback((value) => {
+        // on delete action we need to remove the tag that invoked the delete action
+        // as well as the selected tags.
+        const valuesToRemove = [...selectedTags];
+        if (!selectedTags.includes(value)) {
+            valuesToRemove.push(value);
+        }
+        onRemove?.(valuesToRemove);
+        onExitNavigation?.();
+        // Firefox & Safari are not calling onBlur when focusing out of the
+        // tag list through onExitNavigation, so clear the selections explicitly
+        // here.
+        clearSelection();
+    }, [selectedTags, clearSelection, onExitNavigation, onRemove]);
+    // Handle the select event from the tags
+    const onTagSelect = hooks.useCallback((value) => {
+        setSelectedTags([value]);
+        currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);
+    }, [data, setSelectedTags]);
+    // Handle keyDown event on the tags container
+    const onTagKeyDown = hooks.useCallback((event) => {
+        if (data.length === 0)
+            return;
+        // Move towards the beginning of the list when pressing
+        // Left arrow (or Right arrow in rtl).
+        if ((direction === 'ltr' && event.code === 'ArrowLeft') ||
+            (direction === 'rtl' && event.code === 'ArrowRight')) {
+            if (currentSelectedTagIndex.current === 0)
+                return;
+            currentSelectedTagIndex.current -= 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // Move towards the end of the list when pressing
+        // Right arrow (or Left arrow in rtl). If at the end,
+        // invoke onExitNavigation.
+        if ((direction === 'ltr' && event.code === 'ArrowRight') ||
+            (direction === 'rtl' && event.code === 'ArrowLeft')) {
+            if (currentSelectedTagIndex.current === data.length - 1) {
+                // We have reached the end, so exit navigation
+                onExitNavigation?.();
+                return;
+            }
+            currentSelectedTagIndex.current += 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the Home key, move the focus to the first tag
+        if (event.code === 'Home') {
+            currentSelectedTagIndex.current = 0;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // When pressing the End key, move the focus to the last tag
+        if (event.code === 'End') {
+            currentSelectedTagIndex.current = data.length - 1;
+            selectTagAtIndex(currentSelectedTagIndex.current);
+            return;
+        }
+        // If it is a Select All event, then select all the tags and do
+        // not move the focus
+        if (utils_PRIVATE_keyboardUtils.isSelectAll(event)) {
+            setSelectedTags(data.map((tag) => tag.value));
+            // prevent default to prevent selection of the whole screen
+            event.preventDefault();
+            return;
+        }
+    }, [data, direction, onExitNavigation, selectTagAtIndex, setSelectedTags]);
+    const handleOnFocus = hooks.useCallback(() => {
+        setSelectedTags((previousSelectedTags) => {
+            // select the tag only if there are no current selected tags
+            // and there is data
+            if (previousSelectedTags.length || lastTagMeta.current.value === undefined)
+                return previousSelectedTags;
+            currentSelectedTagIndex.current = lastTagMeta.current.index;
+            return [lastTagMeta.current.value];
+        });
+    }, []); // setSelectedTags is stable and not needed in the dep array
+    const handleOnBlur = hooks.useCallback(() => {
+        clearSelection();
+    }, [clearSelection]);
+    // When blurring out of the component, remove all selections
+    const { focusProps } = useFocusWithin.useFocusWithin({
+        onBlurWithin: handleOnBlur
+    });
+    // Update the ref to include the handler methods
+    hooks.useImperativeHandle(ref, () => ({
+        blur: handleOnBlur,
+        focus: handleOnFocus
+    }), [handleOnBlur, handleOnFocus]);
+    hooks.useEffect(() => {
+        // every time the data is changed, scroll to the end of the list to show the latest added
+        // pill
+        // In ltr we need to scroll to the right, so positive value should be passed and in rtl we
+        // need to scroll to the left, so negative value should be passed
+        divRef.current?.scrollTo({
+            left: divRef.current.scrollWidth * (direction === 'ltr' ? 1 : -1)
+        });
+    }, [data, direction]);
+    // the styles for the component
+    const styles = styleInterpolations(props);
+    // TODO: use theming and multi-variant styles
+    // https://jira.oraclecorp.com/jira/browse/JET-57596
+    const rootClasses = classNames.classNames([
+        UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListBase,
+        hasInsideLabel && UNSAFE_SelectMultiple_themes_TextTagListStyles_css.textTagListStyles.textTagListInsideLabel
+    ]);
+    return (jsxRuntime.jsx("div", { class: rootClasses, ref: divRef, tabIndex: -1, onKeyDown: onTagKeyDown, role: "listbox", "aria-label": ariaLabel, "aria-multiselectable": "true", style: styles, ...focusProps, children: data.map((tag, index) => (jsxRuntime.jsx(TextTag.TextTag, { isFocused: currentSelectedTagIndex.current === index, isSelected: selectedTags.includes(tag.value), onRemoveAction: onTagRemoveAction, onSelect: onTagSelect, onRemoveIconClick: onTagRemoveIconClick, removeIcon: removeIcon, value: tag.value, children: tag.label }, tag.value))) }));
+}
+const TextTagList = compat.forwardRef(_TextTagList);
+
+exports.TextTagList = TextTagList;
+//# sourceMappingURL=TextTagList-8e283133.js.map

package/cjs/TextTagList-8e283133.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTagList-8e283133.js","sources":["../../src/UNSAFE_SelectMultiple/TextTagList.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 */\n\nimport { Ref } from 'preact';\nimport { forwardRef } from 'preact/compat';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\nimport { useFocusWithin } from '../hooks/UNSAFE_useFocusWithin';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { isSelectAll } from '../utils/PRIVATE_keyboardUtils';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { DimensionProps, dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { TextTag } from './TextTag';\nimport { textTagListStyles } from './themes/TextTagListStyles.css';\n\n/**\n * Data structure of the text tag item\n */\ntype TextTagItem<V> = {\n  label: string;\n  value: V;\n};\n\n/**\n * Type of the ref handle of the component\n */\ntype TextTagListHandle = {\n  /**\n   * Focuses the text tag container\n   */\n  focus: () => void;\n\n  /**\n   * Blurs the text tag container\n   */\n  blur: () => void;\n};\n\n/**\n * Supported style props\n */\nconst supportedDimensions = stringLiteralArray(['maxWidth']);\ntype SupportedDimensions = typeof supportedDimensions[number];\ntype StyleProps = Pick<DimensionProps, SupportedDimensions>;\n\n/**\n * Props for the TextTag component\n */\ntype Props<V> = StyleProps & {\n  /**\n   * Specifies accessible screen reader text.\n   */\n  'aria-label'?: string;\n\n  /**\n   * An array of objects which is used to stamp out the TextTag components\n   */\n  data: TextTagItem<V>[];\n\n  /**\n   * Flag to indicate if the label is inside the container\n   * TODO: Handle this in a more generic way if/when we make this component generic\n   */\n  hasInsideLabel?: boolean;\n\n  /**\n   * Specifies whether to show the remove icon in the TextTag components\n   */\n  removeIcon?: 'always' | 'never';\n\n  /**\n   * A callback function to be invoked when the component wants to exit the navigation.\n   * This happens when one presses Right arrow after reaching the end of the list (or Left\n   * arrow in RTL mode).\n   */\n  onExitNavigation?: () => void;\n\n  /**\n   * A callback function to be invoked when one or more text tags are removed\n   */\n  onRemove?: (items: V[]) => void;\n};\n\n/**\n * Setting up interpolations\n */\nconst supportedInterpolations = Array.from(supportedDimensions, (x) => dimensionInterpolations[x]);\nconst styleInterpolations = mergeInterpolations<StyleProps>(supportedInterpolations);\n\n/**\n * TextTagList component for rendering the collection of TextTags as well\n * as managing the navigation.\n *\n * @param param0 The props for the TextTagList component\n * @param ref The ref for the component\n */\nfunction _TextTagList<V>(props: Props<V>, ref: Ref<TextTagListHandle> = () => {}) {\n  // destructure props\n  const {\n    'aria-label': ariaLabel,\n    data,\n    hasInsideLabel = false,\n    removeIcon = 'never',\n    onExitNavigation,\n    onRemove\n  } = props;\n\n  // ref for setting the scroll position for the div\n  const divRef = useRef<HTMLDivElement>(null);\n\n  // Internal state for storing the current selected tags\n  const [selectedTags, setSelectedTags] = useState<V[]>([]);\n\n  // The navigation of focus will depend on the reading direction, so we need to\n  // get the current reading direction\n  const { direction } = useUser();\n\n  // Create a ref for maintaining the current selected tag. This is used for\n  // determining which tag needs to be selected next when pressing ArrowLeft or\n  // ArrowRight.\n  const currentSelectedTagIndex = useRef(-1);\n  // Create a ref that holds the last tag which is needed when receiving focus\n  // programmatically.\n  const lastTag = data.at(-1)?.value;\n  const lastTagMeta = useRef({ value: lastTag, index: data.length - 1 });\n  lastTagMeta.current = { value: lastTag, index: data.length - 1 };\n\n  // A function to select the tag at the given index\n  const selectTagAtIndex = useCallback(\n    (index: number) => {\n      const key = data.at(index)?.value;\n      if (key == null) return;\n      setSelectedTags([key]);\n    },\n    [data] // setSelectedTags is stable and not needed in dep array\n  );\n  // A function to clear the selection\n  const clearSelection = useCallback(() => {\n    setSelectedTags((previousSelectedTags) => {\n      currentSelectedTagIndex.current = -1;\n      return previousSelectedTags.length ? [] : previousSelectedTags;\n    });\n  }, []); // setSelectedTags is stable and not needed in dep array\n\n  // Handle the remove & delete events from the tags\n  const onTagRemoveIconClick = useCallback(\n    (value: V) => {\n      // on remove icon click we only need to remove the tag that\n      // invoked the event\n      onRemove?.([value]);\n      onExitNavigation?.();\n      // Firefox & Safari are not calling onBlur when focusing out of the\n      // tag list through onExitNavigation, so clear the selections explicitly\n      // here.\n      clearSelection();\n    },\n    [clearSelection, onExitNavigation, onRemove]\n  );\n  const onTagRemoveAction = useCallback(\n    (value: V) => {\n      // on delete action we need to remove the tag that invoked the delete action\n      // as well as the selected tags.\n      const valuesToRemove = [...selectedTags];\n      if (!selectedTags.includes(value)) {\n        valuesToRemove.push(value);\n      }\n      onRemove?.(valuesToRemove);\n      onExitNavigation?.();\n      // Firefox & Safari are not calling onBlur when focusing out of the\n      // tag list through onExitNavigation, so clear the selections explicitly\n      // here.\n      clearSelection();\n    },\n    [selectedTags, clearSelection, onExitNavigation, onRemove]\n  );\n\n  // Handle the select event from the tags\n  const onTagSelect = useCallback(\n    (value: V) => {\n      setSelectedTags([value]);\n      currentSelectedTagIndex.current = data.findIndex((tag) => tag.value === value);\n    },\n    [data, setSelectedTags]\n  );\n\n  // Handle keyDown event on the tags container\n  const onTagKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (data.length === 0) return;\n      // Move towards the beginning of the list when pressing\n      // Left arrow (or Right arrow in rtl).\n      if (\n        (direction === 'ltr' && event.code === 'ArrowLeft') ||\n        (direction === 'rtl' && event.code === 'ArrowRight')\n      ) {\n        if (currentSelectedTagIndex.current === 0) return;\n        currentSelectedTagIndex.current -= 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // Move towards the end of the list when pressing\n      // Right arrow (or Left arrow in rtl). If at the end,\n      // invoke onExitNavigation.\n      if (\n        (direction === 'ltr' && event.code === 'ArrowRight') ||\n        (direction === 'rtl' && event.code === 'ArrowLeft')\n      ) {\n        if (currentSelectedTagIndex.current === data.length - 1) {\n          // We have reached the end, so exit navigation\n          onExitNavigation?.();\n          return;\n        }\n        currentSelectedTagIndex.current += 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // When pressing the Home key, move the focus to the first tag\n      if (event.code === 'Home') {\n        currentSelectedTagIndex.current = 0;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // When pressing the End key, move the focus to the last tag\n      if (event.code === 'End') {\n        currentSelectedTagIndex.current = data.length - 1;\n        selectTagAtIndex(currentSelectedTagIndex.current);\n        return;\n      }\n\n      // If it is a Select All event, then select all the tags and do\n      // not move the focus\n      if (isSelectAll(event)) {\n        setSelectedTags(data.map((tag) => tag.value));\n        // prevent default to prevent selection of the whole screen\n        event.preventDefault();\n        return;\n      }\n    },\n    [data, direction, onExitNavigation, selectTagAtIndex, setSelectedTags]\n  );\n\n  const handleOnFocus = useCallback(() => {\n    setSelectedTags((previousSelectedTags) => {\n      // select the tag only if there are no current selected tags\n      // and there is data\n      if (previousSelectedTags.length || lastTagMeta.current.value === undefined)\n        return previousSelectedTags;\n\n      currentSelectedTagIndex.current = lastTagMeta.current.index;\n      return [lastTagMeta.current.value];\n    });\n  }, []); // setSelectedTags is stable and not needed in the dep array\n  const handleOnBlur = useCallback(() => {\n    clearSelection();\n  }, [clearSelection]);\n\n  // When blurring out of the component, remove all selections\n  const { focusProps } = useFocusWithin({\n    onBlurWithin: handleOnBlur\n  });\n\n  // Update the ref to include the handler methods\n  useImperativeHandle(\n    ref,\n    () => ({\n      blur: handleOnBlur,\n      focus: handleOnFocus\n    }),\n    [handleOnBlur, handleOnFocus]\n  );\n\n  useEffect(() => {\n    // every time the data is changed, scroll to the end of the list to show the latest added\n    // pill\n    // In ltr we need to scroll to the right, so positive value should be passed and in rtl we\n    // need to scroll to the left, so negative value should be passed\n    divRef.current?.scrollTo({\n      left: divRef.current.scrollWidth * (direction === 'ltr' ? 1 : -1)\n    });\n  }, [data, direction]);\n\n  // the styles for the component\n  const styles = styleInterpolations(props);\n  // TODO: use theming and multi-variant styles\n  // https://jira.oraclecorp.com/jira/browse/JET-57596\n  const rootClasses = classNames([\n    textTagListStyles.textTagListBase,\n    hasInsideLabel && textTagListStyles.textTagListInsideLabel\n  ]);\n\n  return (\n    <div\n      class={rootClasses}\n      ref={divRef}\n      tabIndex={-1}\n      onKeyDown={onTagKeyDown}\n      role=\"listbox\"\n      aria-label={ariaLabel}\n      aria-multiselectable=\"true\"\n      style={styles}\n      {...focusProps}>\n      {data.map((tag, index) => (\n        <TextTag\n          isFocused={currentSelectedTagIndex.current === index}\n          isSelected={selectedTags.includes(tag.value)}\n          key={tag.value}\n          onRemoveAction={onTagRemoveAction}\n          onSelect={onTagSelect}\n          onRemoveIconClick={onTagRemoveIconClick}\n          removeIcon={removeIcon}\n          value={tag.value}>\n          {tag.label}\n        </TextTag>\n      ))}\n    </div>\n  );\n}\n\nexport const TextTagList = forwardRef<TextTagListHandle, Props<any>>(_TextTagList);\n"],"names":["stringLiteralArray","dimensionInterpolations","mergeInterpolations","useRef","useState","useUser","useCallback","isSelectAll","useFocusWithin","useImperativeHandle","useEffect","classNames","textTagListStyles","_jsx","TextTag","forwardRef"],"mappings":"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"}

package/cjs/Theme-redwood/theme.css

@@ -1185,6 +1185,37 @@
   --labelColorDisabled__wmjnh613: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-disabled);
 }
 /* end:UNSAFE_Train/themes/redwood/TrainBaseTheme.styles.css */
+/* start:hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css */
+.TooltipContentBaseTheme_baseTheme__sanbbo0 {
+  --maxWidth__1x922a00: ;
+  --backgroundColor__1x922a01: ;
+  --textColor__1x922a02: ;
+  --fontSize__1x922a03: ;
+  --lineHeight__1x922a04: ;
+  --borderRadius__1x922a05: ;
+  --borderColor__1x922a06: ;
+  --paddingHorizontal__1x922a07: ;
+  --paddingVertical__1x922a08: ;
+  --variants-tooltip-maxWidth__1x922a09: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-tooltip-backgroundColor__1x922a0a: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral30);
+  --variants-tooltip-textColor__1x922a0b: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-tooltip-fontSize__1x922a0c: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-font-size);
+  --variants-tooltip-lineHeight__1x922a0d: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-line-height);
+  --variants-tooltip-borderRadius__1x922a0e: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
+  --variants-tooltip-borderColor__1x922a0f: transparent;
+  --variants-tooltip-paddingHorizontal__1x922a0g: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-tooltip-paddingVertical__1x922a0h: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
+  --variants-datatip-maxWidth__1x922a0i: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-datatip-backgroundColor__1x922a0j: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
+  --variants-datatip-textColor__1x922a0k: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-datatip-fontSize__1x922a0l: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-font-size);
+  --variants-datatip-lineHeight__1x922a0m: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-line-height);
+  --variants-datatip-borderRadius__1x922a0n: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
+  --variants-datatip-borderColor__1x922a0o: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);
+  --variants-datatip-paddingHorizontal__1x922a0p: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-datatip-paddingVertical__1x922a0q: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+}
+/* end:hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css */
 /* start:Common/themes/redwood/theme.styles.css */
 :root, .oj-c-colorscheme-dependent {
   --oj-c-EXPERIMENTAL-DO-NOT-USE-cursor-clickable: pointer;
@@ -1790,37 +1821,6 @@
   --oj-c-EXPERIMENTAL-DO-NOT-USE-label-lg-font-size: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size);
 }
 /* end:Common/themes/redwood/theme.styles.css */
-/* start:hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css */
-.TooltipContentBaseTheme_baseTheme__sanbbo0 {
-  --maxWidth__1x922a00: ;
-  --backgroundColor__1x922a01: ;
-  --textColor__1x922a02: ;
-  --fontSize__1x922a03: ;
-  --lineHeight__1x922a04: ;
-  --borderRadius__1x922a05: ;
-  --borderColor__1x922a06: ;
-  --paddingHorizontal__1x922a07: ;
-  --paddingVertical__1x922a08: ;
-  --variants-tooltip-maxWidth__1x922a09: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-tooltip-backgroundColor__1x922a0a: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral30);
-  --variants-tooltip-textColor__1x922a0b: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-tooltip-fontSize__1x922a0c: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-font-size);
-  --variants-tooltip-lineHeight__1x922a0d: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-line-height);
-  --variants-tooltip-borderRadius__1x922a0e: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
-  --variants-tooltip-borderColor__1x922a0f: transparent;
-  --variants-tooltip-paddingHorizontal__1x922a0g: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-tooltip-paddingVertical__1x922a0h: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
-  --variants-datatip-maxWidth__1x922a0i: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-datatip-backgroundColor__1x922a0j: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
-  --variants-datatip-textColor__1x922a0k: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-datatip-fontSize__1x922a0l: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-font-size);
-  --variants-datatip-lineHeight__1x922a0m: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-line-height);
-  --variants-datatip-borderRadius__1x922a0n: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
-  --variants-datatip-borderColor__1x922a0o: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);
-  --variants-datatip-paddingHorizontal__1x922a0p: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-datatip-paddingVertical__1x922a0q: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-}
-/* end:hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css */
 /* start:UNSAFE_TextField/themes/redwood/TextFieldBaseTheme.styles.css */
 .TextFieldBaseTheme_baseTheme__1qsscqw0 {
   --borderColor__w6gg1y0: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);

package/cjs/Theme-stable/theme.css

@@ -1171,6 +1171,37 @@
   --labelColorDisabled__wmjnh613: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-disabled);
 }
 /* end:UNSAFE_Train/themes/stable/TrainBaseTheme.styles.css */
+/* start:hooks/UNSAFE_useTooltip/themes/stable/TooltipContentBaseTheme.styles.css */
+.TooltipContentBaseTheme_baseTheme__sx4zts0 {
+  --maxWidth__1x922a00: ;
+  --backgroundColor__1x922a01: ;
+  --textColor__1x922a02: ;
+  --fontSize__1x922a03: ;
+  --lineHeight__1x922a04: ;
+  --borderRadius__1x922a05: ;
+  --borderColor__1x922a06: ;
+  --paddingHorizontal__1x922a07: ;
+  --paddingVertical__1x922a08: ;
+  --variants-tooltip-maxWidth__1x922a09: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-tooltip-backgroundColor__1x922a0a: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral30);
+  --variants-tooltip-textColor__1x922a0b: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-tooltip-fontSize__1x922a0c: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-font-size);
+  --variants-tooltip-lineHeight__1x922a0d: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-line-height);
+  --variants-tooltip-borderRadius__1x922a0e: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
+  --variants-tooltip-borderColor__1x922a0f: transparent;
+  --variants-tooltip-paddingHorizontal__1x922a0g: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-tooltip-paddingVertical__1x922a0h: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
+  --variants-datatip-maxWidth__1x922a0i: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-datatip-backgroundColor__1x922a0j: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
+  --variants-datatip-textColor__1x922a0k: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-datatip-fontSize__1x922a0l: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-font-size);
+  --variants-datatip-lineHeight__1x922a0m: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-line-height);
+  --variants-datatip-borderRadius__1x922a0n: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
+  --variants-datatip-borderColor__1x922a0o: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);
+  --variants-datatip-paddingHorizontal__1x922a0p: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --variants-datatip-paddingVertical__1x922a0q: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+}
+/* end:hooks/UNSAFE_useTooltip/themes/stable/TooltipContentBaseTheme.styles.css */
 /* start:Common/themes/stable/theme.styles.css */
 :root, .oj-c-colorscheme-dependent {
   --oj-c-EXPERIMENTAL-DO-NOT-USE-cursor-clickable: pointer;
@@ -1776,37 +1807,6 @@
   --oj-c-EXPERIMENTAL-DO-NOT-USE-label-lg-font-size: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size);
 }
 /* end:Common/themes/stable/theme.styles.css */
-/* start:hooks/UNSAFE_useTooltip/themes/stable/TooltipContentBaseTheme.styles.css */
-.TooltipContentBaseTheme_baseTheme__sx4zts0 {
-  --maxWidth__1x922a00: ;
-  --backgroundColor__1x922a01: ;
-  --textColor__1x922a02: ;
-  --fontSize__1x922a03: ;
-  --lineHeight__1x922a04: ;
-  --borderRadius__1x922a05: ;
-  --borderColor__1x922a06: ;
-  --paddingHorizontal__1x922a07: ;
-  --paddingVertical__1x922a08: ;
-  --variants-tooltip-maxWidth__1x922a09: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-tooltip-backgroundColor__1x922a0a: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral30);
-  --variants-tooltip-textColor__1x922a0b: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-tooltip-fontSize__1x922a0c: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-font-size);
-  --variants-tooltip-lineHeight__1x922a0d: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-sm-line-height);
-  --variants-tooltip-borderRadius__1x922a0e: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
-  --variants-tooltip-borderColor__1x922a0f: transparent;
-  --variants-tooltip-paddingHorizontal__1x922a0g: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-tooltip-paddingVertical__1x922a0h: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
-  --variants-datatip-maxWidth__1x922a0i: calc(72 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-datatip-backgroundColor__1x922a0j: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
-  --variants-datatip-textColor__1x922a0k: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-datatip-fontSize__1x922a0l: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-font-size);
-  --variants-datatip-lineHeight__1x922a0m: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-line-height);
-  --variants-datatip-borderRadius__1x922a0n: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
-  --variants-datatip-borderColor__1x922a0o: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);
-  --variants-datatip-paddingHorizontal__1x922a0p: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --variants-datatip-paddingVertical__1x922a0q: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-}
-/* end:hooks/UNSAFE_useTooltip/themes/stable/TooltipContentBaseTheme.styles.css */
 /* start:UNSAFE_TextField/themes/stable/TextFieldBaseTheme.styles.css */
 .TextFieldBaseTheme_baseTheme__tcmxi50 {
   --borderColor__w6gg1y0: rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-palette-neutral-190), 0.5);

package/cjs/TrainVariants.styles.css

@@ -1,28 +1,28 @@
-.TrainVariants_multiVariantStyles_needsEventsHover_isNeedsEventsHover__ty5ef5p:not(:active) {
+.TrainVariants_multiVariantStyles_needsEventsHover_isNeedsEventsHover__szao47p:not(:active) {
   cursor: pointer;
   background-color: var(--stepBgColorHover__wmjnh6m);
 }
-.TrainVariants_multiVariantStyles_stepIconNeedsEventsHover_isNeedsEventsHover__ty5ef5t:not(:active) {
+.TrainVariants_multiVariantStyles_stepIconNeedsEventsHover_isNeedsEventsHover__szao47t:not(:active) {
   cursor: pointer;
   border-color: var(--buttonBorderColorHover__wmjnh6k);
   color: var(--buttonTextColorHover__wmjnh6l);
   background-color: var(--buttonBgColorHover__wmjnh6j);
 }
-.TrainVariants_multiVariantStyles_stepLabelNeedsEventsHover_isNeedsEventsHover__ty5ef5x:not(:active) {
+.TrainVariants_multiVariantStyles_stepLabelNeedsEventsHover_isNeedsEventsHover__szao47x:not(:active) {
   text-decoration-line: underline;
 }
 @media (hover: hover) {
-  .TrainVariants_multiVariantStyles_pseudoHover_isPseudoHover__ty5ef5r:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_pseudoHover_isPseudoHover__szao47r:hover:not(:active) {
     cursor: pointer;
     background-color: var(--stepBgColorHover__wmjnh6m);
   }
-  .TrainVariants_multiVariantStyles_stepIconPseudoHover_isPseudoHover__ty5ef5v:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_stepIconPseudoHover_isPseudoHover__szao47v:hover:not(:active) {
     cursor: pointer;
     border-color: var(--buttonBorderColorHover__wmjnh6k);
     color: var(--buttonTextColorHover__wmjnh6l);
     background-color: var(--buttonBgColorHover__wmjnh6j);
   }
-  .TrainVariants_multiVariantStyles_stepLabelPseudoHover_isPseudoHover__ty5ef5z:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_stepLabelPseudoHover_isPseudoHover__szao47z:hover:not(:active) {
     text-decoration-line: underline;
   }
 }

package/cjs/TrainVariants.styles2.css

@@ -1,28 +1,28 @@
-.TrainVariants_multiVariantStyles_needsEventsHover_isNeedsEventsHover__szao47p:not(:active) {
+.TrainVariants_multiVariantStyles_needsEventsHover_isNeedsEventsHover__ty5ef5p:not(:active) {
   cursor: pointer;
   background-color: var(--stepBgColorHover__wmjnh6m);
 }
-.TrainVariants_multiVariantStyles_stepIconNeedsEventsHover_isNeedsEventsHover__szao47t:not(:active) {
+.TrainVariants_multiVariantStyles_stepIconNeedsEventsHover_isNeedsEventsHover__ty5ef5t:not(:active) {
   cursor: pointer;
   border-color: var(--buttonBorderColorHover__wmjnh6k);
   color: var(--buttonTextColorHover__wmjnh6l);
   background-color: var(--buttonBgColorHover__wmjnh6j);
 }
-.TrainVariants_multiVariantStyles_stepLabelNeedsEventsHover_isNeedsEventsHover__szao47x:not(:active) {
+.TrainVariants_multiVariantStyles_stepLabelNeedsEventsHover_isNeedsEventsHover__ty5ef5x:not(:active) {
   text-decoration-line: underline;
 }
 @media (hover: hover) {
-  .TrainVariants_multiVariantStyles_pseudoHover_isPseudoHover__szao47r:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_pseudoHover_isPseudoHover__ty5ef5r:hover:not(:active) {
     cursor: pointer;
     background-color: var(--stepBgColorHover__wmjnh6m);
   }
-  .TrainVariants_multiVariantStyles_stepIconPseudoHover_isPseudoHover__szao47v:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_stepIconPseudoHover_isPseudoHover__ty5ef5v:hover:not(:active) {
     cursor: pointer;
     border-color: var(--buttonBorderColorHover__wmjnh6k);
     color: var(--buttonTextColorHover__wmjnh6l);
     background-color: var(--buttonBgColorHover__wmjnh6j);
   }
-  .TrainVariants_multiVariantStyles_stepLabelPseudoHover_isPseudoHover__szao47z:hover:not(:active) {
+  .TrainVariants_multiVariantStyles_stepLabelPseudoHover_isPseudoHover__ty5ef5z:hover:not(:active) {
     text-decoration-line: underline;
   }
 }

package/cjs/UNSAFE_AspectRatio.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.0.2 */
+/* @oracle/oraclejet-preact: 15.0.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -9,15 +9,15 @@ var utils_UNSAFE_interpolations_dimensions = require('./utils/UNSAFE_interpolati
 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-1984816f.js');
+var classNames = require('./classNames-9fbd49fc.js');
 require('./utils/UNSAFE_size.js');
 require('./UNSAFE_Theme.js');
-require('./utils-bb547fca.js');
+require('./utils-12473e97.js');
 require('./Common/themes/themeContract.css.js');
-require('./_curry1-410cf7a9.js');
-require('./_curry3-dd1302bc.js');
-require('./_curry2-da22a179.js');
-require('./_has-d47ef7fe.js');
+require('./_curry1-a1d8720c.js');
+require('./_curry3-2363c368.js');
+require('./_curry2-5fc9376b.js');
+require('./_has-20ff7f93.js');
 
 // AspectRatio uses the common padding-bottom as a percentage
 // hack to get aspect-ratio to work.
@@ -35,7 +35,7 @@ require('./_has-d47ef7fe.js');
 // has the padding information.
 // 100%/ratio. 100/(4/3) = 75%
 // e.g., 16/9 = 56.25%, 4/3 = 75%, 1/1=100%, 2/1=50%
-const baseDivStyles = "zy62l4";
+const baseDivStyles = "_1yxc023";
 // 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

package/cjs/UNSAFE_AspectRatio.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_AspectRatio.js","sources":["../../src/UNSAFE_AspectRatio/AspectRatio.tsx","../../src/UNSAFE_AspectRatio/index.ts"],"sourcesContent":["import { VNode } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\n\n// AspectRatio uses the common padding-bottom as a percentage\n// hack to get aspect-ratio to work.\n// CSS now has an aspect-ratio attribute that makes this super easy.\n// aspect-ratio is supported in all major browsers, most recently in Safari 15.\n// https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio\n// However, it isn't until jet 14 that we drop support for Safari 14.\n// When jet 14 comes out we can replace the padding-bottom hack with aspect-ratio css property.\n// Also a user could just put aspect-ratio directly on their dom, instead of wrapping\n// it inside this AspectRatio component.\n\n// NOTE: padding-bottom has to be on a dom node that is the child of a dom node that has\n// width, not the same dom node. From css doc:\n// The size of the padding as a percentage, relative to the width of the containing block.\n// So the root dom node has the dimensions styling and the '::before' dom node\n// has the padding information.\n// 100%/ratio. 100/(4/3) = 75%\n// e.g., 16/9 = 56.25%, 4/3 = 75%, 1/1=100%, 2/1=50%\n\nconst baseDivStyles = cssProps`${{\n  position: 'relative',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n\n  '&::before': {\n    content: \"''\",\n    display: 'block',\n    paddingBottom: 'calc(100% / (var(--oj-c-PRIVATE-DO-NOT-USE-aspect-ratio)))'\n  },\n  // TODO: Revisit. there is no support for combinators, but combinators are necessary for the AspectRatio component, so it's an exception.\n  /* @ts-ignore */\n  '& > :first-child': {\n    position: 'absolute',\n    top: '0',\n    bottom: '0',\n    left: '0',\n    right: '0',\n    width: '100%',\n    height: '100%'\n  },\n  /* @ts-ignore */\n  '& > img': {\n    objectFit: 'cover'\n  },\n  /* @ts-ignore */\n  '& > video': {\n    objectFit: 'cover'\n  }\n}}`;\n\n// common aspect ratios\n// The box’s preferred aspect ratio is the specified ratio of width / height.\n// The ratio has a '/' as a separator and not a ':' because the '/' is what\n// the CSS aspect-ratio uses.\n// TODO: Don't use fixed ratios. Let them specify any number\nexport const ratios = stringLiteralArray([\n  '9/16',\n  '1/1',\n  '6/5',\n  '5/4',\n  '4/3',\n  '11/8',\n  '1.43/1',\n  '3/2',\n  '14/9',\n  '16/10',\n  '1.6180/1',\n  '5/3',\n  '16/9',\n  '1.85/1',\n  '1.9/1',\n  '2/1',\n  '2.2/1',\n  '64/21',\n  '2.4/1',\n  '2.414/1',\n  '2.76/1',\n  '32/9',\n  '18/5',\n  '4/1'\n]);\ntype Ratio = typeof ratios[number];\n\nconst dimensions = stringLiteralArray(['maxWidth', 'minWidth', 'width']);\n\ntype Dimension = typeof dimensions[number];\n\n// This component has some StyleInterpolationProps. Those are the width properties of the DimensionProps.\ntype StyleInterpolationProps = Pick<DimensionProps, Dimension>;\n\ntype AspectRatioProps = StyleInterpolationProps & {\n  /**\n   * The box’s preferred aspect ratio is the specified ratio of width / height. When ratio is 1/1\n   * it is a square.\n   */\n  ratio?: Ratio;\n  /**\n   * The child.\n   */\n  children: VNode<any>;\n};\n\n// Create an array [dimensionInterpolations['maxWidth'], dimensionInterpolations['width'], dimensionInterpolations['minWidth']]\nconst widthDimensionInterpolation = Array.from(dimensions, (x) => dimensionInterpolations[x]);\nconst interpolations = mergeInterpolations<StyleInterpolationProps>(widthDimensionInterpolation);\n\n/**\n * The AspectRatio component displays its content with a certain ratio based on the dimension\n * properties. Overflow content is hidden.\n *\n * It uses a common padding-bottom hack to do this. In future versions it will\n * be implemented using the CSS's aspect-ratio property when the browsers we need to support\n * all have it. For example, Safari 15 has it, but we won't drop Safari 14 until jet 14.\n *\n */\nexport function AspectRatio({ children, ratio = '1/1', ...props }: AspectRatioProps) {\n  const { class: cls, ...styles } = interpolations(props);\n  const stylesWithAspectRatioVar = { ...styles, '--oj-c-PRIVATE-DO-NOT-USE-aspect-ratio': ratio };\n  return (\n    <div class={classNames([baseDivStyles, cls])} style={stylesWithAspectRatioVar}>\n      {children}\n    </div>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nexport * from './AspectRatio';\n"],"names":["baseDivStyles","ratios","stringLiteralArray","dimensions","widthDimensionInterpolation","Array","from","x","dimensionInterpolations","interpolations","mergeInterpolations","AspectRatio","children","ratio","props","class","cls","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAAA,aAAA,GA6BC,QAAA,CAAA;AAED;AACA;AACA;AACA;AACA;AACA,MAAAC,MAAA,GAAAC,0CAAA,CAAA,0MAyBC,EAAA;AAGD,MAAAC,UAAA,GAAAD,0CAAA,CAAA,CAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AAmBA;AACA,MAAAE,2BAAA,GAAAC,KAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,CAAA,IAAAC,8DAAA,CAAAD,CAAA,CAAA,CAAA,CAAA;AACA,MAAAE,cAAA,GAAAC,oDAAA,CAAAN,2BAAA,CAAA,CAAA;AAEA;;;;;;;;AAQG;AACH,SAAAO,WAAAA,CAAA;EAAAC,QAAA;AAAAC,EAAAA,KAAA,GAAA,KAAA;EAAA,GAAAC,KAAAA;AAAA,CAAA,EAAA;EACE,MAAA;AAAAC,IAAAA,KAAA,EAAAC,GAAA;IAAA,GAAAC,MAAAA;AAAA,GAAA,GAAAR,cAAA,CAAAK,KAAA,CAAA,CAAA;;;;;;;;;;AAOF;;AClIA;;;;;;AAMG;;;;;"}
+{"version":3,"file":"UNSAFE_AspectRatio.js","sources":["../../src/UNSAFE_AspectRatio/AspectRatio.tsx","../../src/UNSAFE_AspectRatio/index.ts"],"sourcesContent":["import { VNode } from 'preact';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\n\n// AspectRatio uses the common padding-bottom as a percentage\n// hack to get aspect-ratio to work.\n// CSS now has an aspect-ratio attribute that makes this super easy.\n// aspect-ratio is supported in all major browsers, most recently in Safari 15.\n// https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio\n// However, it isn't until jet 14 that we drop support for Safari 14.\n// When jet 14 comes out we can replace the padding-bottom hack with aspect-ratio css property.\n// Also a user could just put aspect-ratio directly on their dom, instead of wrapping\n// it inside this AspectRatio component.\n\n// NOTE: padding-bottom has to be on a dom node that is the child of a dom node that has\n// width, not the same dom node. From css doc:\n// The size of the padding as a percentage, relative to the width of the containing block.\n// So the root dom node has the dimensions styling and the '::before' dom node\n// has the padding information.\n// 100%/ratio. 100/(4/3) = 75%\n// e.g., 16/9 = 56.25%, 4/3 = 75%, 1/1=100%, 2/1=50%\n\nconst baseDivStyles = cssProps`${{\n  position: 'relative',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n\n  '&::before': {\n    content: \"''\",\n    display: 'block',\n    paddingBottom: 'calc(100% / (var(--oj-c-PRIVATE-DO-NOT-USE-aspect-ratio)))'\n  },\n  // TODO: Revisit. there is no support for combinators, but combinators are necessary for the AspectRatio component, so it's an exception.\n  /* @ts-ignore */\n  '& > :first-child': {\n    position: 'absolute',\n    top: '0',\n    bottom: '0',\n    left: '0',\n    right: '0',\n    width: '100%',\n    height: '100%'\n  },\n  /* @ts-ignore */\n  '& > img': {\n    objectFit: 'cover'\n  },\n  /* @ts-ignore */\n  '& > video': {\n    objectFit: 'cover'\n  }\n}}`;\n\n// common aspect ratios\n// The box’s preferred aspect ratio is the specified ratio of width / height.\n// The ratio has a '/' as a separator and not a ':' because the '/' is what\n// the CSS aspect-ratio uses.\n// TODO: Don't use fixed ratios. Let them specify any number\nexport const ratios = stringLiteralArray([\n  '9/16',\n  '1/1',\n  '6/5',\n  '5/4',\n  '4/3',\n  '11/8',\n  '1.43/1',\n  '3/2',\n  '14/9',\n  '16/10',\n  '1.6180/1',\n  '5/3',\n  '16/9',\n  '1.85/1',\n  '1.9/1',\n  '2/1',\n  '2.2/1',\n  '64/21',\n  '2.4/1',\n  '2.414/1',\n  '2.76/1',\n  '32/9',\n  '18/5',\n  '4/1'\n]);\ntype Ratio = typeof ratios[number];\n\nconst dimensions = stringLiteralArray(['maxWidth', 'minWidth', 'width']);\n\ntype Dimension = typeof dimensions[number];\n\n// This component has some StyleInterpolationProps. Those are the width properties of the DimensionProps.\ntype StyleInterpolationProps = Pick<DimensionProps, Dimension>;\n\ntype AspectRatioProps = StyleInterpolationProps & {\n  /**\n   * The box’s preferred aspect ratio is the specified ratio of width / height. When ratio is 1/1\n   * it is a square.\n   */\n  ratio?: Ratio;\n  /**\n   * The child.\n   */\n  children: VNode<any>;\n};\n\n// Create an array [dimensionInterpolations['maxWidth'], dimensionInterpolations['width'], dimensionInterpolations['minWidth']]\nconst widthDimensionInterpolation = Array.from(dimensions, (x) => dimensionInterpolations[x]);\nconst interpolations = mergeInterpolations<StyleInterpolationProps>(widthDimensionInterpolation);\n\n/**\n * The AspectRatio component displays its content with a certain ratio based on the dimension\n * properties. Overflow content is hidden.\n *\n * It uses a common padding-bottom hack to do this. In future versions it will\n * be implemented using the CSS's aspect-ratio property when the browsers we need to support\n * all have it. For example, Safari 15 has it, but we won't drop Safari 14 until jet 14.\n *\n */\nexport function AspectRatio({ children, ratio = '1/1', ...props }: AspectRatioProps) {\n  const { class: cls, ...styles } = interpolations(props);\n  const stylesWithAspectRatioVar = { ...styles, '--oj-c-PRIVATE-DO-NOT-USE-aspect-ratio': ratio };\n  return (\n    <div class={classNames([baseDivStyles, cls])} style={stylesWithAspectRatioVar}>\n      {children}\n    </div>\n  );\n}\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nexport * from './AspectRatio';\n"],"names":["baseDivStyles","ratios","stringLiteralArray","dimensions","widthDimensionInterpolation","Array","from","x","dimensionInterpolations","interpolations","mergeInterpolations","AspectRatio","children","ratio","props","class","cls","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAAA,aAAA,GA6BC,UAAA,CAAA;AAED;AACA;AACA;AACA;AACA;AACA,MAAAC,MAAA,GAAAC,0CAAA,CAAA,0MAyBC,EAAA;AAGD,MAAAC,UAAA,GAAAD,0CAAA,CAAA,CAAA,UAAA,EAAA,UAAA,EAAA,OAAA,CAAA,CAAA,CAAA;AAmBA;AACA,MAAAE,2BAAA,GAAAC,KAAA,CAAAC,IAAA,CAAAH,UAAA,EAAAI,CAAA,IAAAC,8DAAA,CAAAD,CAAA,CAAA,CAAA,CAAA;AACA,MAAAE,cAAA,GAAAC,oDAAA,CAAAN,2BAAA,CAAA,CAAA;AAEA;;;;;;;;AAQG;AACH,SAAAO,WAAAA,CAAA;EAAAC,QAAA;AAAAC,EAAAA,KAAA,GAAA,KAAA;EAAA,GAAAC,KAAAA;AAAA,CAAA,EAAA;EACE,MAAA;AAAAC,IAAAA,KAAA,EAAAC,GAAA;IAAA,GAAAC,MAAAA;AAAA,GAAA,GAAAR,cAAA,CAAAK,KAAA,CAAA,CAAA;;;;;;;;;;AAOF;;AClIA;;;;;;AAMG;;;;;"}

package/cjs/UNSAFE_Avatar/themes/AvatarContract.css.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.0.2 */
+/* @oracle/oraclejet-preact: 15.0.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/UNSAFE_Avatar/themes/AvatarStyles.css.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.0.2 */
+/* @oracle/oraclejet-preact: 15.0.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/cjs/UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.css.js

@@ -1,4 +1,4 @@
-/* @oracle/oraclejet-preact: 15.0.2 */
+/* @oracle/oraclejet-preact: 15.0.3 */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });