@oracle/oraclejet-preact 15.0.12 → 15.0.14

package/cjs/TextFieldVariants.styles.css

@@ -1,22 +1,22 @@
-.TextFieldVariants_multiVariantStyles_compound_7__1f8p3fet {
+.TextFieldVariants_multiVariantStyles_compound_7__vaf9zit {
   z-index: 1;
 }
-.TextFieldVariants_multiVariantStyles_compound_8__1f8p3feu {
+.TextFieldVariants_multiVariantStyles_compound_8__vaf9ziu {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.TextFieldVariants_multiVariantStyles_compound_9__1f8p3fev {
+.TextFieldVariants_multiVariantStyles_compound_9__vaf9ziv {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_10__1f8p3few {
+.TextFieldVariants_multiVariantStyles_compound_10__vaf9ziw {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_11__1f8p3fex {
+.TextFieldVariants_multiVariantStyles_compound_11__vaf9zix {
   min-height: var(--insideEdgeHeight__w6gg1yb);
 }

package/cjs/TextFieldVariants.styles2.css

@@ -1,22 +1,22 @@
-.TextFieldVariants_multiVariantStyles_compound_7__vaf9zit {
+.TextFieldVariants_multiVariantStyles_compound_7__1f8p3fet {
   z-index: 1;
 }
-.TextFieldVariants_multiVariantStyles_compound_8__vaf9ziu {
+.TextFieldVariants_multiVariantStyles_compound_8__1f8p3feu {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.TextFieldVariants_multiVariantStyles_compound_9__vaf9ziv {
+.TextFieldVariants_multiVariantStyles_compound_9__1f8p3fev {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_10__vaf9ziw {
+.TextFieldVariants_multiVariantStyles_compound_10__1f8p3few {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -1px;
 }
-.TextFieldVariants_multiVariantStyles_compound_11__vaf9zix {
+.TextFieldVariants_multiVariantStyles_compound_11__1f8p3fex {
   min-height: var(--insideEdgeHeight__w6gg1yb);
 }

package/cjs/TextTag-fe93820e.js

@@ -0,0 +1,59 @@
+/* @oracle/oraclejet-preact: 15.0.14 */
+'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-9c2c8a6b.js');
+var Text = require('./Text-ae960e6b.js');
+var IconButton = require('./IconButton-fd69d098.js');
+var HiddenAccessible = require('./HiddenAccessible-32b21567.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-fe93820e.js.map

package/cjs/TextTag-fe93820e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTag-fe93820e.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-2e5eaad2.js

@@ -0,0 +1,192 @@
+/* @oracle/oraclejet-preact: 15.0.14 */
+'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-fe93820e.js');
+var UNSAFE_SelectMultiple_themes_TextTagListStyles_css = require('./UNSAFE_SelectMultiple/themes/TextTagListStyles.css.js');
+var useFocusWithin = require('./useFocusWithin-7acd4067.js');
+var classNames = require('./classNames-9c2c8a6b.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-2e5eaad2.js.map

package/cjs/TextTagList-2e5eaad2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextTagList-2e5eaad2.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

@@ -738,6 +738,11 @@
   --summaryLineHeight__1aj7c365: 1.333rem;
 }
 /* end:UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css */
+/* start:UNSAFE_DrawerPopup/themes/redwood/DrawerPopupBaseTheme.styles.css */
+.DrawerPopupBaseTheme_baseTheme__11hfduf0 {
+  --overlayDrawerBackgroundColor__1ekn0ug0: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
+}
+/* end:UNSAFE_DrawerPopup/themes/redwood/DrawerPopupBaseTheme.styles.css */
 /* start:UNSAFE_FilePicker/themes/redwood/FilePickerBaseTheme.styles.css */
 .FilePickerBaseTheme_baseTheme__gjv4mp0 {
   --borderColor__12s6ppx0: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-enabled);
@@ -755,11 +760,6 @@
   --groupHeaderBgColorSticky__11yn0c70: rgb(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-palette-neutral-30));
 }
 /* end:UNSAFE_GroupedList/themes/redwood/GroupedListBaseTheme.styles.css */
-/* start:UNSAFE_DrawerPopup/themes/redwood/DrawerPopupBaseTheme.styles.css */
-.DrawerPopupBaseTheme_baseTheme__11hfduf0 {
-  --overlayDrawerBackgroundColor__1ekn0ug0: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral0);
-}
-/* end:UNSAFE_DrawerPopup/themes/redwood/DrawerPopupBaseTheme.styles.css */
 /* start:UNSAFE_Indexer/themes/redwood/IndexerBaseTheme.styles.css */
 .IndexerBaseTheme_baseTheme__k2mgdb0 {
   --textColor__1gj3n970: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
@@ -789,6 +789,22 @@
   --summaryLineHeight__l2hi9d6: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-subheader-xs-line-height);
 }
 /* end:UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css */
+/* start:UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.styles.css */
+.MenuItemBaseTheme_baseTheme__153jibj0 {
+  --iconSize__1qbg5hn0: calc(6 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --startEdgeToStartIconPadding__1qbg5hn1: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --endIconToEndEdgePadding__1qbg5hn2: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --startIconToLabelPadding__1qbg5hn3: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --labelToEndIconPadding__1qbg5hn4: calc(8 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --textColor__1qbg5hn5: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --iconColor__1qbg5hn6: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+}
+/* end:UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.styles.css */
+/* start:UNSAFE_Menu/themes/redwood/MenuDividerBaseTheme.styles.css */
+.MenuDividerBaseTheme_baseTheme__1wmh2g70 {
+  --verticalPadding__14rtvpd0: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+}
+/* end:UNSAFE_Menu/themes/redwood/MenuDividerBaseTheme.styles.css */
 /* start:UNSAFE_MeterBar/themes/redwood/MeterBarBaseTheme.styles.css */
 .MeterBarBaseTheme_baseTheme__1n8hfuv0 {
   --size__saju1q0: ;
@@ -797,6 +813,24 @@
   --sizes-sm__saju1q3: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
 }
 /* end:UNSAFE_MeterBar/themes/redwood/MeterBarBaseTheme.styles.css */
+/* start:UNSAFE_MeterCircle/themes/redwood/MeterCircleBaseTheme.styles.css */
+.MeterCircleBaseTheme_baseTheme__jo6utu0 {
+  --size__1qest1m0: ;
+  --trackSize__1qest1m1: ;
+  --sizes-lg__1qest1m2: calc(49  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-md__1qest1m3: calc(24  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-sm__1qest1m4: calc(14  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --trackSizes-lg__1qest1m5: calc(3 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --trackSizes-md__1qest1m6: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --trackSizes-sm__1qest1m7: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
+}
+/* end:UNSAFE_MeterCircle/themes/redwood/MeterCircleBaseTheme.styles.css */
+/* start:UNSAFE_ProgressBar/themes/redwood/ProgressBarBaseTheme.styles.css */
+.ProgressBarBaseTheme_baseTheme__suzb8h0 {
+  --height__irxz4j0: 6px;
+  --borderRadius__irxz4j1: 3px;
+}
+/* end:UNSAFE_ProgressBar/themes/redwood/ProgressBarBaseTheme.styles.css */
 /* start:UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css */
 .PopupBaseTheme_baseTheme__17qjw4f0 {
   --borderColor__2ugez71: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-divider);
@@ -806,12 +840,6 @@
   --padding__2ugez74: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
 /* end:UNSAFE_Popup/themes/redwood/PopupBaseTheme.styles.css */
-/* start:UNSAFE_ProgressBar/themes/redwood/ProgressBarBaseTheme.styles.css */
-.ProgressBarBaseTheme_baseTheme__suzb8h0 {
-  --height__irxz4j0: 6px;
-  --borderRadius__irxz4j1: 3px;
-}
-/* end:UNSAFE_ProgressBar/themes/redwood/ProgressBarBaseTheme.styles.css */
 /* start:UNSAFE_ProgressCircle/themes/redwood/ProgressCircleBaseTheme.styles.css */
 .ProgressCircleBaseTheme_baseTheme__1qsbny60 {
   --size__lborgv0: ;
@@ -824,22 +852,6 @@
   --sizes-lg-trackWidth__lborgv7: calc(1.5 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
 /* end:UNSAFE_ProgressCircle/themes/redwood/ProgressCircleBaseTheme.styles.css */
-/* start:UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.styles.css */
-.MenuItemBaseTheme_baseTheme__153jibj0 {
-  --iconSize__1qbg5hn0: calc(6 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --startEdgeToStartIconPadding__1qbg5hn1: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --endIconToEndEdgePadding__1qbg5hn2: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --startIconToLabelPadding__1qbg5hn3: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --labelToEndIconPadding__1qbg5hn4: calc(8 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --textColor__1qbg5hn5: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --iconColor__1qbg5hn6: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-}
-/* end:UNSAFE_Menu/themes/redwood/MenuItemBaseTheme.styles.css */
-/* start:UNSAFE_Menu/themes/redwood/MenuDividerBaseTheme.styles.css */
-.MenuDividerBaseTheme_baseTheme__1wmh2g70 {
-  --verticalPadding__14rtvpd0: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-}
-/* end:UNSAFE_Menu/themes/redwood/MenuDividerBaseTheme.styles.css */
 /* start:UNSAFE_Skeleton/themes/redwood/SkeletonBaseTheme.styles.css */
 .SkeletonBaseTheme_baseTheme__afgqbw0 {
   --bgColor-start__1mh02730: rgba(var(--oj-c-EXPERIMENTAL-DO-NOT-USE-palette-neutral-170), 0.05);
@@ -855,13 +867,6 @@
   --borderWidthLeftRight__1j8m5ay4: 1.5px;
 }
 /* end:UNSAFE_TabBar/themes/redwood/TabBarItemBaseTheme.styles.css */
-/* start:UNSAFE_Radio/themes/redwood/RadioBaseTheme.styles.css */
-.RadioBaseTheme_baseTheme__1rmn4iw0 {
-  --iconToTextGap__uwoc4u2: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --outlineWidth__uwoc4u0: 1px;
-  --rowHeight__uwoc4u1: calc(9 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-}
-/* end:UNSAFE_Radio/themes/redwood/RadioBaseTheme.styles.css */
 /* start:UNSAFE_Radio/themes/redwood/RadioIconBaseTheme.styles.css */
 .RadioIconBaseTheme_baseTheme__17vksju0 {
   --iconSize__1681zg40: var(--iconSize__1681zg40);
@@ -870,12 +875,25 @@
   --iconTransformActive__1681zg43: scale(0.75);
 }
 /* end:UNSAFE_Radio/themes/redwood/RadioIconBaseTheme.styles.css */
+/* start:UNSAFE_Radio/themes/redwood/RadioBaseTheme.styles.css */
+.RadioBaseTheme_baseTheme__1rmn4iw0 {
+  --iconToTextGap__uwoc4u2: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --outlineWidth__uwoc4u0: 1px;
+  --rowHeight__uwoc4u1: calc(9 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+}
+/* end:UNSAFE_Radio/themes/redwood/RadioBaseTheme.styles.css */
 /* start:UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css */
 .UserAssistanceBaseTheme_baseTheme__j8tei50 {
   --inlineTextColor__1n9ixz60: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-secondary);
   --inlineFontSize__1n9ixz61: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-xs-font-size);
 }
 /* end:UNSAFE_UserAssistance/themes/redwood/UserAssistanceBaseTheme.styles.css */
+/* start:UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css */
+.WindowOverlayBaseTheme_baseTheme__1qrldld0 {
+  --notificationMainAxisOffset__5h4cac0: 0px;
+  --notificationCrossAxisOffset__5h4cac1: 0px;
+}
+/* end:UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css */
 /* start:UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.styles.css */
 .FormLayoutBaseTheme_baseTheme__sm2a4g0 {
   --startEdgeLabelToValuePadding__vm51h40: calc(6 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
@@ -883,24 +901,49 @@
   --topEdgeLabelToValuePadding__vm51h42: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
 /* end:UNSAFE_TextField/themes/redwood/FormLayoutBaseTheme.styles.css */
-/* start:UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css */
-.WindowOverlayBaseTheme_baseTheme__1qrldld0 {
-  --notificationMainAxisOffset__5h4cac0: 0px;
-  --notificationCrossAxisOffset__5h4cac1: 0px;
-}
-/* end:UNSAFE_WindowOverlay/themes/redwood/WindowOverlayBaseTheme.styles.css */
-/* start:UNSAFE_MeterCircle/themes/redwood/MeterCircleBaseTheme.styles.css */
-.MeterCircleBaseTheme_baseTheme__jo6utu0 {
-  --size__1qest1m0: ;
-  --trackSize__1qest1m1: ;
-  --sizes-lg__1qest1m2: calc(49  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-md__1qest1m3: calc(24  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-sm__1qest1m4: calc(14  * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --trackSizes-lg__1qest1m5: calc(3 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --trackSizes-md__1qest1m6: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --trackSizes-sm__1qest1m7: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
+/* start:UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css */
+.BadgeThemeBaseTheme_baseTheme__lng3910 {
+  --backgroundColor__88ut8n0: ;
+  --color__88ut8n1: ;
+  --fontSize__88ut8n2: ;
+  --fontWeight__88ut8n3: ;
+  --fontStretch__88ut8n4: condensed;
+  --size__88ut8n5: ;
+  --height__88ut8n6: ;
+  --borderRadius__88ut8n7: ;
+  --padding__88ut8n8: ;
+  --variants-neutral-backgroundColor__88ut8n9: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral-strong);
+  --variants-neutral-color__88ut8na: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
+  --variants-danger-backgroundColor__88ut8nb: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-danger-strong);
+  --variants-danger-color__88ut8nc: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
+  --variants-warning-backgroundColor__88ut8nd: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-warning-strong);
+  --variants-warning-color__88ut8ne: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
+  --variants-success-backgroundColor__88ut8nf: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-success-strong);
+  --variants-success-color__88ut8ng: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
+  --variants-info-backgroundColor__88ut8nh: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-info-strong);
+  --variants-info-color__88ut8ni: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
+  --variants-neutralSubtle-backgroundColor__88ut8nj: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral-subtle);
+  --variants-neutralSubtle-color__88ut8nk: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-dangerSubtle-backgroundColor__88ut8nl: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-danger-subtle);
+  --variants-dangerSubtle-color__88ut8nm: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-warningSubtle-backgroundColor__88ut8nn: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-warning-subtle);
+  --variants-warningSubtle-color__88ut8no: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-successSubtle-backgroundColor__88ut8np: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-success-subtle);
+  --variants-successSubtle-color__88ut8nq: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --variants-infoSubtle-backgroundColor__88ut8nr: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-info-subtle);
+  --variants-infoSubtle-color__88ut8ns: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
+  --sizes-sm-height__88ut8nt: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-sm-fontSize__88ut8nu: calc(2.25 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-sm-fontWeight__88ut8nv: 700;
+  --sizes-sm-borderRadius__88ut8nw: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
+  --sizes-sm-padding__88ut8nx: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
+  --sizes-md-height__88ut8ny: calc(6 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-md-fontSize__88ut8nz: calc(2.75 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
+  --sizes-md-fontWeight__88ut8n10: 700;
+  --sizes-md-borderRadius__88ut8n11: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-lg);
+  --sizes-md-padding__88ut8n12: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
 }
-/* end:UNSAFE_MeterCircle/themes/redwood/MeterCircleBaseTheme.styles.css */
+/* end:UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css */
 /* start:UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.styles.css */
 .AvatarBaseTheme_baseTheme__se034w0 {
   --bgColor__n2nsgo0: ;
@@ -979,49 +1022,6 @@
   --shapes-circle-borderRadius__n2nsgo21: 50%;
 }
 /* end:UNSAFE_Avatar/themes/redwood/AvatarBaseTheme.styles.css */
-/* start:UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css */
-.BadgeThemeBaseTheme_baseTheme__lng3910 {
-  --backgroundColor__88ut8n0: ;
-  --color__88ut8n1: ;
-  --fontSize__88ut8n2: ;
-  --fontWeight__88ut8n3: ;
-  --fontStretch__88ut8n4: condensed;
-  --size__88ut8n5: ;
-  --height__88ut8n6: ;
-  --borderRadius__88ut8n7: ;
-  --padding__88ut8n8: ;
-  --variants-neutral-backgroundColor__88ut8n9: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral-strong);
-  --variants-neutral-color__88ut8na: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
-  --variants-danger-backgroundColor__88ut8nb: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-danger-strong);
-  --variants-danger-color__88ut8nc: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
-  --variants-warning-backgroundColor__88ut8nd: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-warning-strong);
-  --variants-warning-color__88ut8ne: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
-  --variants-success-backgroundColor__88ut8nf: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-success-strong);
-  --variants-success-color__88ut8ng: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
-  --variants-info-backgroundColor__88ut8nh: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-info-strong);
-  --variants-info-color__88ut8ni: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-on-color);
-  --variants-neutralSubtle-backgroundColor__88ut8nj: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-neutral-subtle);
-  --variants-neutralSubtle-color__88ut8nk: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-dangerSubtle-backgroundColor__88ut8nl: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-danger-subtle);
-  --variants-dangerSubtle-color__88ut8nm: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-warningSubtle-backgroundColor__88ut8nn: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-warning-subtle);
-  --variants-warningSubtle-color__88ut8no: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-successSubtle-backgroundColor__88ut8np: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-success-subtle);
-  --variants-successSubtle-color__88ut8nq: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --variants-infoSubtle-backgroundColor__88ut8nr: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-surface-info-subtle);
-  --variants-infoSubtle-color__88ut8ns: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-text-icon-primary);
-  --sizes-sm-height__88ut8nt: calc(4 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-sm-fontSize__88ut8nu: calc(2.25 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-sm-fontWeight__88ut8nv: 700;
-  --sizes-sm-borderRadius__88ut8nw: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-md);
-  --sizes-sm-padding__88ut8nx: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x));
-  --sizes-md-height__88ut8ny: calc(6 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-md-fontSize__88ut8nz: calc(2.75 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-  --sizes-md-fontWeight__88ut8n10: 700;
-  --sizes-md-borderRadius__88ut8n11: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-border-radius-lg);
-  --sizes-md-padding__88ut8n12: calc(2 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, var(--oj-core-spacing-1x)));
-}
-/* end:UNSAFE_Badge/themes/redwood/BadgeThemeBaseTheme.styles.css */
 /* start:UNSAFE_Dialog/themes/redwood/DialogBaseTheme.styles.css */
 .DialogBaseTheme_baseTheme__s3vxcb0 {
   --boxShadow__9f8o6i0: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-box-shadow-lg);