@oracle/oraclejet-preact 19.0.1 → 19.0.3

package/es/CheckboxSet-751d4298.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSet-751d4298.js","sources":["../../src/UNSAFE_CheckboxSet/CheckboxSetContext.ts","../../src/UNSAFE_CheckboxSet/CheckboxSet.tsx"],"sourcesContent":["import { createContext } from 'preact';\nimport { useContext } from 'preact/hooks';\n\nimport { ValueUpdateDetail } from '../utils/UNSAFE_valueUpdateDetail';\n\ntype CheckboxSetContextValue = {\n  name: string;\n  value?: Set<string | number>;\n  onCommit?: (detail: ValueUpdateDetail<Set<string | number>>) => void;\n};\n\nconst CheckboxSetContext = createContext<CheckboxSetContextValue>({} as CheckboxSetContextValue);\nconst useCheckboxSetContext = () => useContext(CheckboxSetContext);\n\nexport { CheckboxSetContext, useCheckboxSetContext };\n","import { ComponentChildren, ComponentProps, Ref, toChildArray, JSX } from 'preact';\nimport { useMemo } from 'preact/hooks';\nimport { forwardRef } from 'preact/compat';\n\nimport { CheckboxSetContext } from './CheckboxSetContext';\nimport { CheckboxRadioField } from '#PRIVATE_CheckboxRadioField';\nimport { InlineUserAssistance, UserAssistanceDensityType } from '#UNSAFE_UserAssistance';\nimport { useFormContext } from '#hooks/UNSAFE_useFormContext';\nimport { FormFieldContext } from '#hooks/UNSAFE_useFormFieldContext';\nimport { useFormFieldContextProps } from '#hooks/UNSAFE_useFormFieldContextProps';\nimport { FlexboxProps } from '#utils/UNSAFE_interpolations/flexbox';\nimport { Size } from '#utils/UNSAFE_size';\nimport { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { FocusableHandle } from '#hooks/UNSAFE_useFocusableTextField';\nimport { styles } from './CheckboxSetStyles.css';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { useId } from '#hooks/UNSAFE_useId';\nimport { LayoutColumnSpan } from '#utils/UNSAFE_styles/Layout';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype InlineUserAssistanceProps = ComponentProps<typeof InlineUserAssistance>;\n\ntype Props = {\n  /**\n   * The ID of an element (or space separated IDs of multiple elements) that\n   * describes the input.\n   */\n  'aria-describedby'?: UnpackSignals<JSX.AriaAttributes>['aria-describedby'];\n  /**\n   * Text to provide guidance to help the user understand what data to enter.\n   */\n  assistiveText?: InlineUserAssistanceProps['assistiveText'];\n  /**\n   * set of CheckboxItems\n   */\n  children: ComponentChildren;\n  /**\n   * Specifies how many columns to span in a FormLayout with direction === 'row'\n   */\n  columnSpan?: LayoutColumnSpan;\n  /**\n   * layout direction of the children elements\n   */\n  direction?: FlexboxProps['direction'];\n  /**\n   * Help source URL associated with the component.\n   */\n  helpSourceLink?: InlineUserAssistanceProps['helpSourceLink'];\n  /**\n   * Custom text to be rendered for the <code>helpSourceLink</code>.\n   */\n  helpSourceText?: InlineUserAssistanceProps['helpSourceText'];\n  /**\n   * Specifies whether the checkbox set requires a selection to be made.\n   */\n  isRequired?: boolean;\n  /**\n   * Specifies if the checkbox set is read-only.\n   */\n  isReadonly?: boolean;\n  /**\n   * Specifies if the checkbox set is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Label text for the group of checkbox items.\n   */\n  label: string;\n  /**\n   * Specifies where the label is positioned relative to the field.\n   */\n  labelEdge?: 'none' | 'top' | 'start' | 'inside';\n  /**\n   * Specifies the width of the label when <code>labelEdge</code> is <code>\"start\"</code>.\n   */\n  labelStartWidth?: Size;\n  /**\n   * Messages to show on screen that are associated with the component.\n   */\n  messages?: InlineUserAssistanceProps['messages'];\n  /**\n   * Callback invoked each time the user changes selected option.\n   */\n  onCommit: (detail: ValueUpdateDetail<Set<string | number>>) => void;\n  /**\n   * Specifies the density of the user assistance presentation.  It can be set to:\n   * <ul>\n   * <li><code>'reflow'</code>: Show inline.  Layout will reflow when text is displayed.</li>\n   * <li><code>'efficient'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * <li><code>'compact'</code>: Show inline and reserve space to prevent layout reflow when user\n   * assistance text is displayed.</li>\n   * </ul>\n   */\n  userAssistanceDensity?: UserAssistanceDensityType;\n  /**\n   * Value of the selected checkbox option.\n   */\n  value?: Set<string | number>;\n} & TestIdProps;\n/**\n * A CheckboxSet allows the user to select one or more options from a set.\n */\nexport const CheckboxSet = forwardRef(\n  (\n    {\n      'aria-describedby': ariaDescribedBy,\n      assistiveText,\n      columnSpan,\n      direction = 'column',\n      helpSourceLink,\n      helpSourceText,\n      isDisabled: propIsDisabled,\n      isReadonly: propIsReadonly,\n      isRequired = false,\n      label,\n      labelEdge: propLabelEdge,\n      labelStartWidth: propLabelStartWidth,\n      messages,\n      onCommit,\n      userAssistanceDensity: propUserAssistanceDensity,\n      value,\n      children,\n      testId\n    }: Props,\n    ref?: Ref<FocusableHandle>\n  ) => {\n    const hasValue = value !== undefined ? value.size > 0 : false;\n    const baseId = useId();\n\n    const {\n      isDisabled: isFormDisabled,\n      isReadonly: isFormReadonly,\n      labelEdge: formLabelEdge,\n      labelStartWidth: formLabelStartWidth,\n      userAssistanceDensity: formUserAssistanceDensity\n    } = useFormContext();\n\n    // default to FormContext values if component properties are not specified\n    const isDisabled = propIsDisabled ?? isFormDisabled;\n    const isReadonly = propIsReadonly ?? isFormReadonly;\n    const labelEdge = propLabelEdge ?? formLabelEdge;\n    const labelStartWidth = propLabelStartWidth ?? formLabelStartWidth;\n    const userAssistanceDensity = propUserAssistanceDensity ?? formUserAssistanceDensity;\n\n    const formFieldContext = useFormFieldContextProps({\n      hasValue,\n      isDisabled,\n      isReadonly\n    });\n\n    const checkboxSetContext = useMemo(\n      () => ({\n        name: baseId,\n        value,\n        onCommit\n      }),\n      [baseId, onCommit, value]\n    );\n\n    // wrap each CheckboxItem in an <li> tag and the entire set with <ul>\n    const childrenArray = toChildArray(children).filter(Boolean);\n    const wrappedChildren = childrenArray.map((item) => <li>{item}</li>);\n\n    return (\n      <FormFieldContext.Provider value={formFieldContext}>\n        <CheckboxRadioField\n          aria-describedby={ariaDescribedBy}\n          assistiveText={assistiveText}\n          baseId={baseId}\n          columnSpan={columnSpan}\n          direction={direction}\n          helpSourceLink={helpSourceLink}\n          helpSourceText={helpSourceText}\n          isDisabled={isDisabled}\n          isReadonly={isReadonly}\n          isRequired={isRequired}\n          label={label}\n          labelEdge={labelEdge}\n          labelStartWidth={labelStartWidth}\n          parentComponentVariant=\"checkboxSet\"\n          messages={messages}\n          userAssistanceDensity={userAssistanceDensity}\n          hasValue={hasValue}\n          role=\"group\"\n          testId={testId}\n          ref={ref}>\n          <CheckboxSetContext.Provider value={checkboxSetContext}>\n            <ul className={styles.ul}>{wrappedChildren}</ul>\n          </CheckboxSetContext.Provider>\n        </CheckboxRadioField>\n      </FormFieldContext.Provider>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":"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"}

package/es/CheckboxStyles.styles.css

@@ -26,4 +26,10 @@
   padding-block-start: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) + 1px) * 0.5);
   padding-block-end: calc((var(--rowHeight__1qyga5a2) - var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-line-height) * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size) - 1px) * 0.5);
   font-size: var(--oj-c-EXPERIMENTAL-DO-NOT-USE-body-md-font-size);
+}
+.CheckboxStyles_valueLabelStyle__13w91qj3 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: calc(-1 * var(--oj-c-EXPERIMENTAL-DO-NOT-USE-size-units, 0.25rem));
+}
+.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj3 .LinkBaseTheme_baseTheme__eahcnn0, :root.oj-scale-sm .CheckboxStyles_valueLabelStyle__13w91qj3 .LinkBaseTheme_baseTheme__eahcnn0 {
+  margin-top: -5px;
 }

package/es/Chip-9e0e6f76.js

@@ -7,7 +7,7 @@ import { u as useTabbableMode } from './useTabbableMode-a2fdbb06.js';
 import { multiVariantStyles } from './UNSAFE_Chip/themes/ChipStyles.css.js';
 import { u as useInteractionStyle } from './useInteractionStyle-99e32c23.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
-import { u as useTestId } from './useTestId-e5d44ab1.js';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
 
 function Chip({ isSelected, isDisabled, 'aria-label': accessibleLabel, children, testId, onToggle }) {
     const handleAction = useCallback(() => {

package/es/ClearIcon-112c6200.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import { I as IconButton } from './IconButton-e7787aeb.js';
+import { S as SvgDeleteCircleS } from './DeleteCircleS-d7e6d8cb.js';
+import { T as TabbableModeContext } from './TabbableModeContext-7d8ad946.js';
+import 'preact/hooks';
+
+/**
+ * ClearIcon is used to clear an input value.
+ * @param onClick Callback for clearing value when button is clicked
+ * @param testId ID used for testing purposes
+ */
+function ClearIcon({ onClick, testId }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const clearStr = translations.formControl_clear();
+    return (jsx(TabbableModeContext.Provider, { value: { isTabbable: false }, children: jsx("div", { "aria-hidden": "true", children: jsx(IconButton, { variant: "ghost", size: "sm", onAction: onClick, tooltip: clearStr, testId: testId, children: jsx(SvgDeleteCircleS, {}) }) }) }));
+}
+
+export { ClearIcon as C };
+//# sourceMappingURL=ClearIcon-112c6200.js.map

package/es/ClearIcon-112c6200.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearIcon-112c6200.js","sources":["../../src/PRIVATE_ClearIcon/ClearIcon.tsx"],"sourcesContent":["import type { BundleType } from '#resources/nls/bundle';\nimport { useTranslationBundle } from '#hooks/UNSAFE_useTranslationBundle';\nimport { IconButton } from '#UNSAFE_IconButton';\nimport type { TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport { DeleteIcon } from '#PRIVATE_ThemedIcons/DeleteIcon';\nimport { TabbableModeContext } from '#hooks/UNSAFE_useTabbableMode';\n\ntype Props = {\n  onClick?: () => void;\n} & TestIdProps;\n\n/**\n * ClearIcon is used to clear an input value.\n * @param onClick Callback for clearing value when button is clicked\n * @param testId ID used for testing purposes\n */\nexport function ClearIcon({ onClick, testId }: Props) {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const clearStr = translations.formControl_clear();\n\n  return (\n    <TabbableModeContext.Provider value={{ isTabbable: false }}>\n      <div aria-hidden=\"true\">\n        <IconButton variant=\"ghost\" size=\"sm\" onAction={onClick} tooltip={clearStr} testId={testId}>\n          <DeleteIcon />\n        </IconButton>\n      </div>\n    </TabbableModeContext.Provider>\n  );\n}\n"],"names":["_jsx","DeleteIcon"],"mappings":";;;;;;;;AAWA;;;;AAIG;SACa,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAS,EAAA;AAClD,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,iBAAiB,EAAE,CAAC;IAElD,QACEA,IAAC,mBAAmB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,YACxDA,GAAiB,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,YACrBA,GAAC,CAAA,UAAU,EAAC,EAAA,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YACxFA,GAAC,CAAAC,gBAAU,KAAG,EACH,CAAA,EAAA,CACT,EACuB,CAAA,EAC/B;AACJ;;;;"}

package/es/CollapseIcon-3013b9f0.js

@@ -1,7 +1,7 @@
 /* @oracle/oraclejet-preact: undefined */
 import { S as SvgChevronRight } from './ChevronRight-e0152ded.js';
 import { S as SvgChevronLeft } from './ChevronLeft-9485ef57.js';
-import { w as withDirectionIcon } from './withDirectionIcon-6032db58.js';
+import { w as withDirectionIcon } from './withDirectionIcon-e5c4596f.js';
 
 /**
  * @license

package/es/ColorPalette-765bbe22.js

@@ -0,0 +1,81 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { forwardRef, useState, useEffect, useImperativeHandle } from 'preact/compat';
+import { useRef } from 'preact/hooks';
+import { C as ColorSwatch } from './ColorSwatch-e98ed8ec.js';
+import { p as parseColorValue, c as convertPalette, s as sortPalette } from './swatchData-64959ad2.js';
+import { F as Flex } from './Flex-97b023db.js';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { d as dimensionInterpolations } from './dimensions-ddde0eee.js';
+import { p as paddingInterpolations } from './padding-9b3afaa2.js';
+import { c as colorInterpolations } from './colors-b6530fec.js';
+import { a as ariaInterpolations } from './aria-efa0582c.js';
+import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
+import bundle from './resources/nls/en/bundle.js';
+import { S as SwatchFlexView } from './SwatchFlexView-6c94f2bd.js';
+
+const interpolations = [
+    ...Object.values(dimensionInterpolations),
+    ...Object.values(colorInterpolations),
+    ...Object.values(ariaInterpolations),
+    ...Object.values(paddingInterpolations)
+];
+const mergedInterpolations = mergeInterpolations(interpolations);
+/**
+ * A Color Palette is an interface that displays a variety of color swatches allowing
+ * users to select a color value.
+ *
+ * @param {ColorPaletteProps} props ColorPalette component props.
+ * @returns {JSX.Element} ColorPalette component element.
+ */
+const ColorPalette = forwardRef(({ value, swatchSize = 'sm', palette, onCommit, testId, ...props }, focusHandleRef) => {
+    const { class: mergedClasses, ariaLabel, ariaLabelledBy, ...mergedStyles } = mergedInterpolations(props);
+    const rootRef = useRef(null);
+    const testIdProps = useTestId(testId);
+    const colorPaletteTranslated = bundle.accColorPalette();
+    const [current, setCurrent] = useState(undefined);
+    const [selected, setSelected] = useState({
+        all: false,
+        keys: new Set([value ?? undefined])
+    });
+    useEffect(() => {
+        setSelected({
+            all: false,
+            keys: new Set([parseColorValue(value ?? undefined)])
+        });
+    }, [value]);
+    useEffect(() => { }, [selected]); // redraw when selection occurs
+    const getRowKey = (data) => {
+        return data;
+    };
+    //Allows to call focus on rootRef without having to expose it
+    useImperativeHandle(focusHandleRef, () => ({
+        focus: () => {
+            if (rootRef.current) {
+                rootRef.current.focus();
+            }
+        },
+        blur: () => {
+            if (rootRef.current) {
+                rootRef.current.blur();
+            }
+        }
+    }));
+    const dropdownStyle = {
+        width: '100%',
+        height: '100%'
+    };
+    return (jsx("div", { "aria-labelledby": ariaLabelledBy, className: mergedClasses, style: dropdownStyle, ...testIdProps, ...mergedStyles, children: jsx(Flex, { align: "center", children: jsx(SwatchFlexView, { ref: rootRef, "aria-label": ariaLabel ? ariaLabel : colorPaletteTranslated, focusBehavior: "content", data: palette ? convertPalette(sortPalette(palette)) : null, getRowKey: getRowKey, currentKey: current, onCurrentKeyChange: (detail) => {
+                    setCurrent(detail.value);
+                }, selectedKeys: selected, children: (context) => (jsx(ColorSwatch, { size: swatchSize, testId: testId + '_palette' + '_colorSwatch_' + context.data, "aria-hidden": true, value: context.data, onToggle: () => {
+                        onCommit?.({
+                            value: context.data,
+                            previousValue: selected.keys?.values().next().value
+                        });
+                        setSelected({ all: false, keys: new Set([context.data]) });
+                    }, isSelected: selected.keys?.has(context.data) })) }) }) }));
+});
+ColorPalette.displayName = 'ColorPalette';
+
+export { ColorPalette as C };
+//# sourceMappingURL=ColorPalette-765bbe22.js.map

package/es/ColorPalette-765bbe22.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette-765bbe22.js","sources":["../../src/UNSAFE_ColorPalette/ColorPalette.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { useState, useEffect, forwardRef, useImperativeHandle } from 'preact/compat';\nimport { useRef } from 'preact/hooks';\nimport { Ref } from 'preact';\nimport { SwatchFlexView } from '#PRIVATE_SwatchFlexView';\nimport { ColorSwatch } from '#UNSAFE_ColorSwatch';\nimport { parseColorValue, type ColorValue } from '#utils/UNSAFE_color';\nimport { Flex } from '#UNSAFE_Flex/Flex';\nimport { Keys } from '#utils/UNSAFE_keys';\nimport { ListItemRendererContext } from '#UNSAFE_Collection';\nimport { TestIdProps, useTestId } from '../hooks/UNSAFE_useTestId';\nimport { DimensionProps, dimensionInterpolations } from '../utils/UNSAFE_interpolations/dimensions';\nimport { PaddingProps, paddingInterpolations } from '../utils/UNSAFE_interpolations/padding';\nimport { ColorProps, colorInterpolations } from '../utils/UNSAFE_interpolations/colors';\nimport { AriaProps, ariaInterpolations } from '../utils/UNSAFE_interpolations/aria';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { sortPalette, convertPalette } from '#utils/UNSAFE_color';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport translations from '#resources/nls/en/bundle';\nexport type FocusableHandle = {\n  focus: () => void;\n  blur: () => void;\n};\n\ntype StyleProps = DimensionProps & PaddingProps & ColorProps & AriaProps;\n\nexport type ColorPaletteProps = StyleProps &\n  TestIdProps & {\n    /**\n     * The selected color of the palette\n     */\n    value?: ColorValue;\n\n    /**\n     * The swatch size indicates how large the color swatches are rendered.\n     */\n    swatchSize?: 'xs' | 'sm';\n\n    /**\n     * An array of colors for the palette\n     */\n    palette?: Array<ColorValue>;\n\n    /**\n     * Invoked when a swatch is toggled\n     */\n    onCommit?: (details: ValueUpdateDetail<ColorValue>) => void;\n  };\n\nconst interpolations = [\n  ...Object.values(dimensionInterpolations),\n  ...Object.values(colorInterpolations),\n  ...Object.values(ariaInterpolations),\n  ...Object.values(paddingInterpolations)\n];\n\nconst mergedInterpolations = mergeInterpolations<ColorPaletteProps>(interpolations);\n\n/**\n * A Color Palette is an interface that displays a variety of color swatches allowing\n * users to select a color value.\n *\n * @param {ColorPaletteProps} props ColorPalette component props.\n * @returns {JSX.Element} ColorPalette component element.\n */\nexport const ColorPalette = forwardRef(\n  (\n    { value, swatchSize = 'sm', palette, onCommit, testId, ...props }: ColorPaletteProps,\n    focusHandleRef?: Ref<FocusableHandle>\n  ) => {\n    const {\n      class: mergedClasses,\n      ariaLabel,\n      ariaLabelledBy,\n      ...mergedStyles\n    } = mergedInterpolations(props);\n\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const testIdProps = useTestId(testId);\n    const colorPaletteTranslated = translations.accColorPalette();\n\n    const [current, setCurrent] = useState<string | undefined>(undefined);\n    const [selected, setSelected] = useState<Keys<string | number>>({\n      all: false,\n      keys: new Set([(value as string) ?? undefined])\n    });\n\n    useEffect(() => {\n      setSelected({\n        all: false,\n        keys: new Set([parseColorValue(value ?? undefined)])\n      });\n    }, [value]);\n\n    useEffect(() => {}, [selected]); // redraw when selection occurs\n\n    const getRowKey = (data: unknown) => {\n      return data as string;\n    };\n\n    //Allows to call focus on rootRef without having to expose it\n    useImperativeHandle(focusHandleRef!, () => ({\n      focus: () => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      },\n      blur: () => {\n        if (rootRef.current) {\n          rootRef.current.blur();\n        }\n      }\n    }));\n\n    const dropdownStyle = {\n      width: '100%',\n      height: '100%'\n    };\n\n    return (\n      <div\n        aria-labelledby={ariaLabelledBy}\n        className={mergedClasses}\n        style={dropdownStyle}\n        {...testIdProps}\n        {...mergedStyles}>\n        <Flex align=\"center\">\n          <SwatchFlexView\n            ref={rootRef}\n            aria-label={ariaLabel ? ariaLabel : colorPaletteTranslated}\n            focusBehavior=\"content\"\n            data={palette ? convertPalette(sortPalette(palette)) : null}\n            getRowKey={getRowKey}\n            currentKey={current}\n            onCurrentKeyChange={(detail) => {\n              setCurrent(detail.value as string);\n            }}\n            selectedKeys={selected}>\n            {(context: ListItemRendererContext<string | number, unknown>) => (\n              <ColorSwatch\n                size={swatchSize}\n                testId={testId + '_palette' + '_colorSwatch_' + context.data}\n                aria-hidden={true}\n                value={context.data as ColorValue}\n                onToggle={() => {\n                  onCommit?.({\n                    value: context.data as ColorValue,\n                    previousValue: selected.keys?.values().next().value as ColorValue\n                  });\n                  setSelected({ all: false, keys: new Set([context.data as string]) });\n                }}\n                isSelected={selected.keys?.has(context.data as string)}></ColorSwatch>\n            )}\n          </SwatchFlexView>\n        </Flex>\n      </div>\n    );\n  }\n);\n\nColorPalette.displayName = 'ColorPalette';\n"],"names":["translations","_jsx"],"mappings":"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"}

package/es/ColorPicker-c603ebc6.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useTestId } from './useTestId-7f8e69e7.js';
+import { colorPickerPropVars } from './UNSAFE_ColorPicker/themes/ColorPickerContract.css.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { ColorPickerRedwoodTheme } from './UNSAFE_ColorPicker/themes/redwood/ColorPickerTheme.js';
+import { forwardRef } from 'preact/compat';
+import { F as Flex } from './Flex-97b023db.js';
+import { i as isMobile } from './clientUtils-71f2dbaf.js';
+import { C as ColorPalette } from './ColorPalette-765bbe22.js';
+
+/**
+ * A ColorPicker is a component that allows users to select a single color.
+ */
+const ColorPicker = forwardRef(({ swatchSize = 'xs', palette, height, maxWidth, value, testId, width, onCommit }, pickerRef) => {
+    // we need to render the baseTheme on the root dom element so that the CSS vars in colorPickerPropVars will be defined.
+    const { classes } = useComponentTheme(ColorPickerRedwoodTheme);
+    const testIdProps = useTestId(testId);
+    return (jsx("div", { ref: pickerRef, class: classes, ...testIdProps, children: jsx(Flex, { direction: "column", height: height === 'auto' ? undefined : isMobile() ? undefined : colorPickerPropVars.maxHeight, maxWidth: maxWidth !== undefined ? maxWidth : isMobile() ? '100%' : colorPickerPropVars.maxWidth, width: width !== undefined ? width : colorPickerPropVars.width, children: jsx(ColorPalette, { palette: palette, swatchSize: swatchSize, value: value, testId: testId ? testId + '_picker' : undefined, onCommit: onCommit }) }) }));
+});
+
+export { ColorPicker as C };
+//# sourceMappingURL=ColorPicker-c603ebc6.js.map

package/es/ColorPicker-c603ebc6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-c603ebc6.js","sources":["../../src/UNSAFE_ColorPicker/ColorPicker.tsx"],"sourcesContent":["// import { Flex } from '#UNSAFE_Flex';\nimport { useTestId, type TestIdProps } from '#hooks/UNSAFE_useTestId';\nimport type { ValueUpdateDetail } from '#utils/UNSAFE_valueUpdateDetail';\nimport { colorPickerPropVars } from './themes/ColorPickerContract.css';\nimport { useComponentTheme } from '#hooks/UNSAFE_useComponentTheme';\nimport { ColorPickerRedwoodTheme } from './themes/redwood/ColorPickerTheme';\nimport { ColorPalette } from '#UNSAFE_ColorPalette';\nimport { Size } from '#utils/UNSAFE_size';\nimport { ComponentProps } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { type ColorValue } from '#utils/UNSAFE_color';\nimport { Flex } from '#UNSAFE_Flex';\nimport { isMobile } from '#utils/UNSAFE_clientUtils';\n\ntype ColorPaletteProps = ComponentProps<typeof ColorPalette>;\ntype PickedPropsFromColorPalette = Pick<ColorPaletteProps, 'swatchSize' | 'palette'>;\n\ntype Props = TestIdProps &\n  PickedPropsFromColorPalette & {\n    /**\n     * The selected color\n     */\n    value?: ColorValue;\n\n    /**\n     * When property is set to \"auto\", the color picker will automatically adjust to the height of the palette.\n     * This is mainly to be used in conjunction with InputColor.\n     * <p>If not specified, defaults to the theme specified height.<br/>\n     */\n    height?: 'auto';\n\n    /**\n     * Specifies the component style maxWidth.\n     * <p>If not specified, defaults to the theme specified maxWidth.<br/>\n     * This attribute accepts values of type:<br/>\n     * 0 | `${number}${CssUnits}` | `${number}x` | `--${string}` | `var($string})` | `${number}%`</p>\n     * <p>When this component is used in composition and the component should take up 100% of the parent container's\n     * width, set maxWidth to '100%'.<br/>\n     * Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n     * set the maxWidth property to the same value.</p>\n     */\n    maxWidth?: Size;\n\n    /**\n     * Specifies the component style width.\n     * <p>If not specified, defaults to '100%'.</p>\n     * <p>This attribute accepts values of type:</p>\n     * <p>0 | `${number}${CssUnits}` | `${number}x` | `--${string}`  | `var($string})` | `${number}%`</p>\n     * <br/>\n     * <p>Because there is a theme default value for maxWidth, when setting the width property to achieve a fixed width,\n     * set the maxWidth property to the same value.</p>\n     */\n    width?: Size;\n\n    /**\n     * Callback invoked when the user selects a color in the Palette. This callback is called even when the previous\n     * value and the value are the same, that is, when the user selects an already selected color.\n     * The app needs to handle this to write back the controlled 'value' property, or else no color will be shown\n     * to be selected.\n     */\n    onCommit: (detail: ValueUpdateDetail<ColorValue>) => void;\n  };\n\n/**\n * A ColorPicker is a component that allows users to select a single color.\n */\nexport const ColorPicker = forwardRef(\n  (\n    { swatchSize = 'xs', palette, height, maxWidth, value, testId, width, onCommit }: Props,\n    pickerRef?: ForwardedRef<HTMLDivElement>\n  ) => {\n    // we need to render the baseTheme on the root dom element so that the CSS vars in colorPickerPropVars will be defined.\n    const { classes } = useComponentTheme(ColorPickerRedwoodTheme);\n\n    const testIdProps = useTestId(testId);\n\n    return (\n      <div ref={pickerRef} class={classes} {...testIdProps}>\n        <Flex\n          direction=\"column\"\n          height={\n            height === 'auto' ? undefined : isMobile() ? undefined : colorPickerPropVars.maxHeight\n          }\n          maxWidth={\n            maxWidth !== undefined ? maxWidth : isMobile() ? '100%' : colorPickerPropVars.maxWidth\n          }\n          width={width !== undefined ? width : colorPickerPropVars.width}>\n          <ColorPalette\n            palette={palette}\n            swatchSize={swatchSize}\n            value={value}\n            testId={testId ? testId + '_picker' : undefined}\n            onCommit={onCommit}></ColorPalette>\n        </Flex>\n      </div>\n    );\n  }\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AA+DA;;AAEG;AACI,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAAE,UAAU,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAS,EACvF,SAAwC,KACtC;;IAEF,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,uBAAuB,CAAC,CAAC;AAE/D,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IAEtC,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAM,GAAA,WAAW,EAClD,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAC,QAAQ,EAClB,MAAM,EACJ,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,QAAQ,EAAE,GAAG,SAAS,GAAG,mBAAmB,CAAC,SAAS,EAExF,QAAQ,EACN,QAAQ,KAAK,SAAS,GAAG,QAAQ,GAAG,QAAQ,EAAE,GAAG,MAAM,GAAG,mBAAmB,CAAC,QAAQ,EAExF,KAAK,EAAE,KAAK,KAAK,SAAS,GAAG,KAAK,GAAG,mBAAmB,CAAC,KAAK,EAAA,QAAA,EAC9DA,GAAC,CAAA,YAAY,EACX,EAAA,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,EAC/C,QAAQ,EAAE,QAAQ,EAAiB,CAAA,EAAA,CAChC,EACH,CAAA,EACN;AACJ,CAAC;;;;"}

package/es/ColorSwatch-e98ed8ec.js

@@ -0,0 +1,127 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { Fragment } from 'preact';
+import { useCallback, useState, useEffect } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { B as BareButton } from './BareButton-2df3f3eb.js';
+import { I as IconButton } from './IconButton-e7787aeb.js';
+import { u as useToggleAction } from './useToggleAction-fc0f5399.js';
+import { u as useTooltip } from './useTooltip-4c8e3803.js';
+import { u as useHover } from './useHover-85077adb.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import './LayerHost-a54158ef.js';
+import { u as useColorScheme } from './useColorScheme-14c5c7ab.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-a4b02dcc.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { g as getClientHints } from './clientHints-a42b510c.js';
+import { ColorSwatchRedwoodTheme } from './UNSAFE_ColorSwatch/themes/redwood/ColorSwatchTheme.js';
+import { p as processGlobals } from './buttonUtils-55fb1df7.js';
+import { i as isEightDigitHex, p as parseColorValue, g as getSixDigitHex } from './swatchData-64959ad2.js';
+import bundle from './resources/nls/en/bundle.js';
+import { S as SvgCheckboxCrossed } from './CheckboxCrossed-d1f25f09.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * The NoFill image
+ */
+const NoFill = () => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48", preserveAspectRatio: "none", width: "100%", height: "100%", children: jsx("path", { "stroke-width": "2", "vector-effect": "non-scaling-stroke", d: "M0 0L48 48" }) }));
+
+/**
+ * ColorSwatches render a color, showing focus, hover, and selection variations.
+ */
+const ColorSwatch = forwardRef(({ size = 'sm', isSelected = false, isButton = false, onToggle, isDisabled = false, isTooltipDisabled = false, testId, value, ...props }, ref) => {
+    const clientHints = getClientHints();
+    const isHybrid = clientHints.hoverSupport === 'events';
+    const valueText = value;
+    const hasValue = valueText && valueText.length;
+    const lowerValueText = hasValue ? valueText?.toLocaleLowerCase() : value;
+    const isNoFill = hasValue ? lowerValueText === 'transparent' : false;
+    const hasAlpha = value && hasValue ? isEightDigitHex(value) : false;
+    // const isSmallButton = isButton && size === 'xs'; // if used as xs button, the icon is 20x20, while the target size is 24x24
+    const selectedTranslated = bundle.vis_stateSelected();
+    const noneTranslated = bundle.labelNone();
+    const colorSwatchTranslated = bundle.accColorSwatch();
+    const { globalEventProps, ariaProps: { 'aria-label': ariaLabel, 'aria-hidden': ariaHidden, 'aria-roledescription': ariaRoleDescription, ...swatchAriaProps } } = processGlobals(props);
+    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });
+    const { activeProps, isActive } = useActive({ isDisabled: isDisabled });
+    // Cope with rgb or palette colors or illegal colors
+    const getHexValue = useCallback((raw) => {
+        if (raw?.toLowerCase() === 'transparent') {
+            return noneTranslated;
+        }
+        return parseColorValue(raw);
+    }, [noneTranslated]);
+    const [accessibleLabel, setAccessibleLabel] = useState(ariaLabel
+        ? ariaLabel
+        : getHexValue(value) + isSelected
+            ? ' ' + selectedTranslated
+            : '');
+    const colorScheme = useColorScheme();
+    const { classes, styles: { alphaHalfStyles, swatchStyles, buttonStyles, noFillStyles, noFillDisabledStyles, noFillHoverStyles, smallButtonContainerStyles } } = useComponentTheme(ColorSwatchRedwoodTheme, {
+        size: size,
+        selected: isSelected ? 'isSelected' : 'notSelected',
+        active: isActive ? 'isActive' : 'notActive',
+        disabled: isDisabled ? 'isDisabled' : 'notDisabled',
+        hover: isHover ? 'isHover' : 'notHover',
+        noFill: isNoFill ? 'isNoFill' : 'notNoFill',
+        hasValue: hasValue ? 'hasValue' : 'notHasValue',
+        button: isButton ? 'isButton' : 'notButton',
+        colorScheme
+    });
+    useEffect(() => {
+        if (!ariaLabel) {
+            setAccessibleLabel((isSelected ? selectedTranslated + ' ' : '') + getHexValue(value));
+        }
+    }, [isSelected, value, getHexValue, selectedTranslated, ariaLabel]);
+    const { triggerProps } = useToggleAction({
+        onToggle: onToggle
+    });
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: accessibleLabel,
+        isDisabled: isDisabled || isTooltipDisabled
+    });
+    const elementDetails = {
+        type: 'div'
+    };
+    const splitSwatch = () => {
+        return (jsxs(Fragment, { children: [jsx("div", { className: alphaHalfStyles, style: isDisabled ? {} : { backgroundColor: getSixDigitHex(value) } }), jsx("div", { className: alphaHalfStyles, style: isDisabled ? {} : { backgroundColor: value } })] }));
+    };
+    const noFill = () => {
+        return (jsx("div", { className: isDisabled ? noFillDisabledStyles : noFillStyles, children: jsx(NoFill, {}) }));
+    };
+    const valueSwatch = () => {
+        return (jsx("div", { className: classNames([
+                smallButtonContainerStyles,
+                isButton && buttonStyles,
+                !isButton && swatchStyles
+            ]), style: isNoFill || isDisabled || hasAlpha ? {} : { backgroundColor: value }, children: isNoFill ? noFill() : hasAlpha ? splitSwatch() : undefined }));
+    };
+    const noValueSwatch = () => {
+        return (jsx("div", { className: classNames([
+                !isButton && swatchStyles,
+                isDisabled ? noFillDisabledStyles : noFillHoverStyles
+            ]), children: jsx(SvgCheckboxCrossed, {}) }));
+    };
+    const swatchContents = () => {
+        return hasValue ? valueSwatch() : noValueSwatch();
+    };
+    const buttonContents = () => {
+        return (jsx(IconButton, { "aria-label": accessibleLabel, "aria-roledescription": ariaRoleDescription ?? colorSwatchTranslated, ...swatchAriaProps, isDisabled: isDisabled, ref: ref, size: "sm", testId: testId, variant: "ghost", onAction: () => onToggle?.({ value: isSelected }), children: swatchContents() }));
+    };
+    return isButton ? (buttonContents()) : (jsxs(Fragment, { children: [jsx(BareButton, { ref: ref, elementDetails: elementDetails, ...mergeProps(triggerProps, globalEventProps, hoverProps, activeProps, globalEventProps, tooltipProps), testId: testId, isDisabled: isDisabled, "aria-label": accessibleLabel, "aria-roledescription": ariaRoleDescription ?? colorSwatchTranslated, ...swatchAriaProps, classNames: classes, onAction: () => onToggle?.({ value: isSelected }), children: swatchContents() }), tooltipContent] }));
+});
+ColorSwatch.displayName = 'ColorSwatch';
+
+export { ColorSwatch as C };
+//# sourceMappingURL=ColorSwatch-e98ed8ec.js.map

package/es/ColorSwatch-e98ed8ec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch-e98ed8ec.js","sources":["../../src/UNSAFE_ColorSwatch/NoFill.tsx","../../src/UNSAFE_ColorSwatch/ColorSwatch.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\n/**\n * The NoFill image\n */\nexport const NoFill = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 48 48\"\n    preserveAspectRatio=\"none\"\n    width=\"100%\"\n    height=\"100%\">\n    <path stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" d=\"M0 0L48 48\" />\n  </svg>\n);\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { Fragment, Ref } from 'preact';\nimport { useEffect, useState, useCallback } from 'preact/hooks';\nimport { forwardRef, ElementRef } from 'preact/compat';\n\nimport { BareButton } from '../UNSAFE_BareButton';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { useToggleAction, ToggleDetail } from '../hooks/UNSAFE_useToggleAction';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useTooltip } from '../hooks/UNSAFE_useTooltip';\nimport { useHover } from '../hooks/UNSAFE_useHover';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { useColorScheme } from '../hooks/UNSAFE_useColorScheme';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { ColorSwatchVariantOptions } from './themes/ColorSwatchStyles.css';\nimport { ColorSwatchRedwoodTheme } from './themes/redwood/ColorSwatchTheme';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { NoFill } from './NoFill';\nimport { processGlobals } from '../utils/UNSAFE_buttonUtils';\nimport type { ButtonIntrinsicProps, ButtonIntrinsicAriaProps } from '../utils/UNSAFE_buttonUtils';\nimport {\n  parseColorValue,\n  type ColorValue,\n  isEightDigitHex,\n  getSixDigitHex\n} from '../utils/UNSAFE_color';\nimport translations from '#resources/nls/en/bundle';\nimport { CheckboxCrossed } from '#PRIVATE_Icons/CheckboxCrossed';\nimport { classNames } from '#utils/UNSAFE_classNames';\n\ntype SwatchHandle = ElementRef<typeof BareButton>;\n\nexport type ColorSwatchProps = Partial<ButtonIntrinsicProps> &\n  Partial<ButtonIntrinsicAriaProps> &\n  TestIdProps & {\n    /**\n     * color of the swatch\n     */\n    value?: ColorValue;\n\n    /**\n     * The size indicates how large the color swatch is rendered.\n     */\n    size?: 'xs' | 'sm';\n\n    /**\n     * Specifies if the color swatch is selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Specifies if the color swatch has role = button.  By default, the color swatch is used in a\n     * palette whereby it is not a button, but just a color swatch inside a grid cell.  However,\n     * it can be used as a stand-alone button, in which case this property should be set to true.  For\n     * example, inside inputColor, the color swatch is a button.\n     */\n    isButton?: boolean;\n\n    /**\n     * Specifies if the color swatch is disabled\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifies if the color swatch tooltip is disabled\n     */\n    isTooltipDisabled?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of isSelected property should be updated\n     */\n    onToggle?: (details: ToggleDetail) => void;\n  };\n\n/**\n * ColorSwatches render a color, showing focus, hover, and selection variations.\n */\nexport const ColorSwatch = forwardRef(\n  (\n    {\n      size = 'sm',\n      isSelected = false,\n      isButton = false,\n      onToggle,\n      isDisabled = false,\n      isTooltipDisabled = false,\n      testId,\n      value,\n      ...props\n    }: ColorSwatchProps,\n    ref: Ref<SwatchHandle>\n  ) => {\n    const clientHints = getClientHints();\n    const isHybrid = clientHints.hoverSupport === 'events';\n    const valueText = value as string;\n    const hasValue = valueText && valueText.length;\n    const lowerValueText = hasValue ? valueText?.toLocaleLowerCase() : value;\n    const isNoFill = hasValue ? lowerValueText === 'transparent' : false;\n    const hasAlpha = value && hasValue ? isEightDigitHex(value) : false;\n    // const isSmallButton = isButton && size === 'xs'; // if used as xs button, the icon is 20x20, while the target size is 24x24\n\n    const selectedTranslated = translations.vis_stateSelected();\n    const noneTranslated = translations.labelNone();\n    const colorSwatchTranslated = translations.accColorSwatch();\n\n    const {\n      globalEventProps,\n      ariaProps: {\n        'aria-label': ariaLabel,\n        'aria-hidden': ariaHidden,\n        'aria-roledescription': ariaRoleDescription,\n        ...swatchAriaProps\n      }\n    } = processGlobals(props);\n    const { hoverProps, isHover } = useHover({ isDisabled: !isHybrid });\n    const { activeProps, isActive } = useActive({ isDisabled: isDisabled });\n\n    // Cope with rgb or palette colors or illegal colors\n    const getHexValue = useCallback(\n      (raw?: string) => {\n        if (raw?.toLowerCase() === 'transparent') {\n          return noneTranslated;\n        }\n        return parseColorValue(raw);\n      },\n      [noneTranslated]\n    );\n\n    const [accessibleLabel, setAccessibleLabel] = useState<string>(\n      ariaLabel\n        ? ariaLabel\n        : getHexValue(value as string) + isSelected\n        ? ' ' + selectedTranslated\n        : ''\n    );\n\n    const colorScheme = useColorScheme();\n\n    const {\n      classes,\n      styles: {\n        alphaHalfStyles,\n        swatchStyles,\n        buttonStyles,\n        noFillStyles,\n        noFillDisabledStyles,\n        noFillHoverStyles,\n        smallButtonContainerStyles\n      }\n    } = useComponentTheme<ColorSwatchVariantOptions>(ColorSwatchRedwoodTheme, {\n      size: size,\n      selected: isSelected ? 'isSelected' : 'notSelected',\n      active: isActive ? 'isActive' : 'notActive',\n      disabled: isDisabled ? 'isDisabled' : 'notDisabled',\n      hover: isHover ? 'isHover' : 'notHover',\n      noFill: isNoFill ? 'isNoFill' : 'notNoFill',\n      hasValue: hasValue ? 'hasValue' : 'notHasValue',\n      button: isButton ? 'isButton' : 'notButton',\n      colorScheme\n    });\n\n    useEffect(() => {\n      if (!ariaLabel) {\n        setAccessibleLabel(\n          (isSelected ? selectedTranslated + ' ' : '') + getHexValue(value as string)\n        );\n      }\n    }, [isSelected, value, getHexValue, selectedTranslated, ariaLabel]);\n\n    const { triggerProps } = useToggleAction({\n      onToggle: onToggle\n    });\n\n    const { tooltipContent, tooltipProps } = useTooltip({\n      text: accessibleLabel,\n      isDisabled: isDisabled || isTooltipDisabled\n    });\n\n    const elementDetails = {\n      type: 'div' as const\n    };\n\n    const splitSwatch = () => {\n      return (\n        <Fragment>\n          <div\n            className={alphaHalfStyles}\n            style={isDisabled ? {} : { backgroundColor: getSixDigitHex(value!) as string }}\n          />\n          <div\n            className={alphaHalfStyles}\n            style={isDisabled ? {} : { backgroundColor: value as string }}\n          />\n        </Fragment>\n      );\n    };\n    const noFill = () => {\n      return (\n        <div className={isDisabled ? noFillDisabledStyles : noFillStyles}>\n          <NoFill />\n        </div>\n      );\n    };\n\n    const valueSwatch = () => {\n      return (\n        <div\n          className={classNames([\n            smallButtonContainerStyles,\n            isButton && buttonStyles,\n            !isButton && swatchStyles\n          ])}\n          style={isNoFill || isDisabled || hasAlpha ? {} : { backgroundColor: value as string }}>\n          {isNoFill ? noFill() : hasAlpha ? splitSwatch() : undefined}\n        </div>\n      );\n    };\n\n    const noValueSwatch = () => {\n      return (\n        <div\n          className={classNames([\n            !isButton && swatchStyles,\n            isDisabled ? noFillDisabledStyles : noFillHoverStyles\n          ])}>\n          <CheckboxCrossed />\n        </div>\n      );\n    };\n\n    const swatchContents = () => {\n      return hasValue ? valueSwatch() : noValueSwatch();\n    };\n\n    const buttonContents = () => {\n      return (\n        <IconButton\n          aria-label={accessibleLabel}\n          aria-roledescription={ariaRoleDescription ?? colorSwatchTranslated}\n          {...swatchAriaProps}\n          isDisabled={isDisabled}\n          ref={ref}\n          size=\"sm\"\n          testId={testId}\n          variant=\"ghost\"\n          onAction={() => onToggle?.({ value: isSelected })}>\n          {swatchContents()}\n        </IconButton>\n      );\n    };\n\n    return isButton ? (\n      buttonContents()\n    ) : (\n      <Fragment>\n        <BareButton\n          ref={ref}\n          elementDetails={elementDetails}\n          {...mergeProps(\n            triggerProps,\n            globalEventProps,\n            hoverProps,\n            activeProps,\n            globalEventProps,\n            tooltipProps\n          )}\n          testId={testId}\n          isDisabled={isDisabled}\n          aria-label={accessibleLabel}\n          aria-roledescription={ariaRoleDescription ?? colorSwatchTranslated}\n          {...swatchAriaProps}\n          classNames={classes}\n          onAction={() => onToggle?.({ value: isSelected })}>\n          {swatchContents()}\n        </BareButton>\n        {tooltipContent}\n      </Fragment>\n    );\n  }\n);\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["_jsx","translations","_jsxs","CheckboxCrossed"],"mappings":"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"}

package/es/CompactLabelAssistance-89c305c6.js

@@ -0,0 +1,92 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
+import { u as useTooltip } from './useTooltip-4c8e3803.js';
+import { useRef, useCallback, useState } from 'preact/hooks';
+import './logger-c92f309c.js';
+import './LayerHost-a54158ef.js';
+import 'preact/compat';
+import { c as classNames } from './classNames-4e12b00d.js';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-a4b02dcc.js';
+import { u as useTranslationBundle } from './useTranslationBundle-38db1e3c.js';
+import './TabbableModeContext-7d8ad946.js';
+import { u as useTabbableMode } from './useTabbableMode-a2fdbb06.js';
+import { S as SvgHelp } from './Help-2b3a3ccf.js';
+import { P as Popup } from './Popup-8962c960.js';
+import { u as useFocusWithin } from './useFocusWithin-30b1e2d8.js';
+import { helpIconBase, helpIconLabelEdgeStart, helpContentStyles, requiredIconBase, requiredIconLabelEdgeStart } from './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { LabelRedwoodTheme } from './UNSAFE_Label/themes/redwood/LabelTheme.js';
+
+function usePopupFocusWithin() {
+    const ref = useRef(null);
+    const { focusProps, isFocused } = useFocusWithin();
+    const onTransitionEnd = useCallback((isAfterOpen) => {
+        if (isAfterOpen) {
+            if (focusProps.onFocusIn) {
+                ref.current?.addEventListener('focusin', focusProps.onFocusIn, false);
+            }
+            if (focusProps.onFocusOut) {
+                ref.current?.addEventListener('focusout', focusProps.onFocusOut, false);
+            }
+        }
+        else {
+            if (focusProps.onFocusIn) {
+                ref.current?.removeEventListener('focusin', focusProps.onFocusIn, false);
+            }
+            if (focusProps.onFocusOut) {
+                ref.current?.removeEventListener('focusout', focusProps.onFocusOut, false);
+            }
+        }
+    }, [focusProps.onFocusIn, focusProps.onFocusOut, ref]);
+    return {
+        isFocused,
+        popupProps: {
+            onTransitionEnd,
+            ref
+        }
+    };
+}
+
+function CompactHelpSource({ children, id, labelEdge, source }) {
+    const [isOver, setOver] = useState(false);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const userAssistance_learnMoreStr = translations.userAssistance_learnMore();
+    const { isTabbable, tabbableModeProps } = useTabbableMode();
+    const flip = { mainAxis: true, crossAxis: false };
+    // TODO: Implement and use a preact Link component instead of using an anchor tag
+    const anchorRef = useRef(null);
+    const text = children ?? userAssistance_learnMoreStr;
+    // helpIconBase references 'Label' vars, so we need to get the baseTheme for 'Label' and include it in the class list
+    // so that we pick up the definitions for the labelVars we are using.
+    const { baseTheme: labelBaseTheme } = useComponentTheme(LabelRedwoodTheme);
+    const styles = classNames([
+        labelBaseTheme,
+        helpIconBase,
+        labelEdge === 'start' && helpIconLabelEdgeStart
+    ]);
+    const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();
+    const isOpen = isOver === true || isPopupFocused === true;
+    return (jsxs(Fragment, { children: [jsx("a", { target: "_blank", ...(source && { href: source }), "aria-label": text, class: styles, id: id, ref: anchorRef, role: "link", onMouseEnter: () => setOver(true), onMouseLeave: () => setOver(false), onFocus: () => setOver(true), onBlur: () => setOver(false), ...(!isTabbable ? tabbableModeProps : { tabIndex: 0 }), children: jsx(SvgHelp, {}) }), jsx(Popup, { ...popupProps, placement: "end-top-corner", isOpen: isOpen, anchorRef: anchorRef, flipOptions: flip, role: "tooltip", maxWidth: '296px', children: jsx("div", { class: helpContentStyles, children: text }) })] }));
+}
+
+const CompactLabelAssistance = ({ helpIconId, helpSourceLink, helpSourceText, isRequiredShown, labelEdge }) => {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const requiredStr = translations.userAssistance_required();
+    const { tooltipContent, tooltipProps } = useTooltip({
+        text: requiredStr,
+        offset: { mainAxis: 8 }
+    });
+    const requiredStyles = classNames([
+        requiredIconBase,
+        labelEdge === 'start' && requiredIconLabelEdgeStart
+    ]);
+    const requiredIndicator = isRequiredShown && (jsxs("span", { children: [jsx("span", { class: requiredStyles, ...tooltipProps }), tooltipContent] }));
+    const helpIndicator = (helpSourceLink || helpSourceText) && (jsx(CompactHelpSource, { id: helpIconId, labelEdge: labelEdge, source: helpSourceLink, children: helpSourceText }));
+    return (jsxs(Fragment, { children: [labelEdge !== 'start' && requiredIndicator, helpIndicator, labelEdge === 'start' && requiredIndicator] }));
+};
+
+export { CompactLabelAssistance as C, usePopupFocusWithin as u };
+//# sourceMappingURL=CompactLabelAssistance-89c305c6.js.map

package/es/CompactLabelAssistance-89c305c6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactLabelAssistance-89c305c6.js","sources":["../../src/UNSAFE_UserAssistance/usePopupFocusWithin.ts","../../src/UNSAFE_UserAssistance/CompactHelpSource.tsx","../../src/UNSAFE_UserAssistance/CompactLabelAssistance.tsx"],"sourcesContent":["import { useCallback, useRef } from 'preact/hooks';\n\nimport { useFocusWithin } from '../hooks/UNSAFE_useFocusWithin';\n\nexport function usePopupFocusWithin() {\n  const ref = useRef<HTMLElement | null>(null);\n  const { focusProps, isFocused } = useFocusWithin();\n\n  const onTransitionEnd = useCallback(\n    (isAfterOpen?: boolean) => {\n      if (isAfterOpen) {\n        if (focusProps.onFocusIn) {\n          ref.current?.addEventListener('focusin', focusProps.onFocusIn, false);\n        }\n        if (focusProps.onFocusOut) {\n          ref.current?.addEventListener('focusout', focusProps.onFocusOut, false);\n        }\n      } else {\n        if (focusProps.onFocusIn) {\n          ref.current?.removeEventListener('focusin', focusProps.onFocusIn, false);\n        }\n        if (focusProps.onFocusOut) {\n          ref.current?.removeEventListener('focusout', focusProps.onFocusOut, false);\n        }\n      }\n    },\n    [focusProps.onFocusIn, focusProps.onFocusOut, ref]\n  );\n\n  return {\n    isFocused,\n    popupProps: {\n      onTransitionEnd,\n      ref\n    }\n  };\n}\n","import { useState, useRef } from 'preact/hooks';\n\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { HelpIcon } from '../PRIVATE_ThemedIcons/HelpIcon';\nimport { Popup } from '../UNSAFE_Popup';\nimport { usePopupFocusWithin } from './usePopupFocusWithin';\nimport {\n  helpIconBase,\n  helpIconLabelEdgeStart,\n  helpContentStyles\n} from './themes/UserAssistanceStyles.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { LabelRedwoodTheme } from '../UNSAFE_Label/themes/redwood/LabelTheme';\n\ntype Props = {\n  children?: string;\n  id?: string;\n  labelEdge?: 'inside' | 'start' | 'top';\n  source?: string;\n};\n\nexport function CompactHelpSource({ children, id, labelEdge, source }: Props) {\n  const [isOver, setOver] = useState(false);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const userAssistance_learnMoreStr = translations.userAssistance_learnMore();\n  const { isTabbable, tabbableModeProps } = useTabbableMode();\n  const flip = { mainAxis: true, crossAxis: false };\n  // TODO: Implement and use a preact Link component instead of using an anchor tag\n  const anchorRef = useRef<HTMLAnchorElement>(null);\n\n  const text = children ?? userAssistance_learnMoreStr;\n\n  // helpIconBase references 'Label' vars, so we need to get the baseTheme for 'Label' and include it in the class list\n  // so that we pick up the definitions for the labelVars we are using.\n  const { baseTheme: labelBaseTheme } = useComponentTheme(LabelRedwoodTheme);\n\n  const styles = classNames([\n    labelBaseTheme,\n    helpIconBase,\n    labelEdge === 'start' && helpIconLabelEdgeStart\n  ]);\n\n  const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();\n\n  const isOpen = isOver === true || isPopupFocused === true;\n\n  return (\n    <>\n      <a\n        target=\"_blank\"\n        {...(source && { href: source })}\n        aria-label={text}\n        class={styles}\n        id={id}\n        ref={anchorRef}\n        role=\"link\"\n        onMouseEnter={() => setOver(true)}\n        onMouseLeave={() => setOver(false)}\n        onFocus={() => setOver(true)}\n        onBlur={() => setOver(false)}\n        {...(!isTabbable ? tabbableModeProps : { tabIndex: 0 })}>\n        <HelpIcon />\n      </a>\n      <Popup\n        {...popupProps}\n        placement=\"end-top-corner\"\n        isOpen={isOpen}\n        anchorRef={anchorRef}\n        flipOptions={flip}\n        role=\"tooltip\"\n        maxWidth={'296px'}>\n        <div class={helpContentStyles}>{text}</div>\n      </Popup>\n    </>\n  );\n}\n","import { useTooltip } from '../hooks/UNSAFE_useTooltip';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { CompactHelpSource } from './CompactHelpSource';\nimport { requiredIconBase, requiredIconLabelEdgeStart } from './themes/UserAssistanceStyles.css';\n\ntype Props = {\n  helpIconId?: string;\n  helpSourceLink?: string;\n  helpSourceText?: string;\n  isRequiredShown?: boolean;\n  labelEdge?: 'inside' | 'start' | 'top';\n};\n\nconst CompactLabelAssistance = ({\n  helpIconId,\n  helpSourceLink,\n  helpSourceText,\n  isRequiredShown,\n  labelEdge\n}: Props) => {\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const requiredStr = translations.userAssistance_required();\n\n  const { tooltipContent, tooltipProps } = useTooltip({\n    text: requiredStr,\n    offset: { mainAxis: 8 }\n  });\n\n  const requiredStyles = classNames([\n    requiredIconBase,\n    labelEdge === 'start' && requiredIconLabelEdgeStart\n  ]);\n  const requiredIndicator = isRequiredShown && (\n    <span>\n      <span class={requiredStyles} {...tooltipProps} />\n      {tooltipContent}\n    </span>\n  );\n\n  const helpIndicator = (helpSourceLink || helpSourceText) && (\n    <CompactHelpSource id={helpIconId} labelEdge={labelEdge} source={helpSourceLink}>\n      {helpSourceText}\n    </CompactHelpSource>\n  );\n\n  return (\n    <>\n      {labelEdge !== 'start' && requiredIndicator}\n      {helpIndicator}\n      {labelEdge === 'start' && requiredIndicator}\n    </>\n  );\n};\n\nexport { CompactLabelAssistance };\n"],"names":["_jsxs","_Fragment","_jsx","HelpIcon"],"mappings":"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"}

package/es/CompactUserAssistance-308c2ad3.js

@@ -0,0 +1,47 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import 'preact/hooks';
+import './Flex-97b023db.js';
+import './MessageBannerStyles.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerBaseTheme.styles.css';
+import './UNSAFE_MessageBanner/themes/redwood/MessageBannerVariants.css.js';
+import 'preact';
+import './LayerHost-a54158ef.js';
+import 'preact/compat';
+import './TooltipContentStyles.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
+import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
+import './tooltipUtils-a4b02dcc.js';
+import './IconStyle.styles.css';
+import './IconButton-e7787aeb.js';
+import './MessageStyles.styles.css';
+import './MessageFormattingUtils-cdb25115.js';
+import './logger-c92f309c.js';
+import './TransitionGroup-5fd80dc9.js';
+import './MessagesContext-76544845.js';
+import './HiddenAccessibleStyles.styles.css';
+import './ComponentMessageStyles.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageBaseTheme.styles.css';
+import './UNSAFE_ComponentMessage/themes/redwood/ComponentMessageVariants.css.js';
+import { UserAssistanceRedwoodTheme } from './UNSAFE_UserAssistance/themes/redwood/UserAssistanceTheme.js';
+import { C as ComponentMessageContainer } from './ComponentMessageContainer-dc2b5f81.js';
+import './FormFieldContext-47ca0c20.js';
+import { u as useFormFieldContext } from './useFormFieldContext-daf7a676.js';
+import { P as Popup } from './Popup-8962c960.js';
+import { S as Separator } from './Separator-93c70737.js';
+import { u as usePopupFocusWithin } from './CompactLabelAssistance-89c305c6.js';
+import { dividerStyle, assistiveStyles } from './UNSAFE_UserAssistance/themes/UserAssistanceStyles.css.js';
+
+function CompactUserAssistance({ anchorRef, assistiveText, fieldLabel, id, messages = [] }) {
+    const { isInputFocused, isReadonly } = useFormFieldContext();
+    const flip = { mainAxis: true, crossAxis: false };
+    const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();
+    const isOpen = isInputFocused === true || isPopupFocused === true;
+    const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);
+    const uaCompactContent = isReadonly !== true && (messages.length > 0 || assistiveText) ? (jsx(Popup, { ...popupProps, placement: "end-top-corner", isOpen: isOpen, anchorRef: anchorRef, flipOptions: flip, tail: "simple", role: "tooltip", maxWidth: '296px', children: jsxs("div", { id: id, class: baseTheme, children: [messages.length > 0 && (jsx(ComponentMessageContainer, { fieldLabel: fieldLabel, messages: messages })), messages.length > 0 && assistiveText && (jsx("span", { class: dividerStyle, children: jsx(Separator, {}) })), assistiveText && jsx("span", { class: assistiveStyles, children: assistiveText })] }) })) : null;
+    return uaCompactContent;
+}
+
+export { CompactUserAssistance as C };
+//# sourceMappingURL=CompactUserAssistance-308c2ad3.js.map

package/es/CompactUserAssistance-308c2ad3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactUserAssistance-308c2ad3.js","sources":["../../src/UNSAFE_UserAssistance/CompactUserAssistance.tsx"],"sourcesContent":["import { RefObject } from 'preact/compat';\n\nimport { ComponentMessageContainer, ComponentMessageItem } from '../UNSAFE_ComponentMessage';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { Popup } from '../UNSAFE_Popup';\nimport { Coords } from '../UNSAFE_Floating';\nimport { Separator } from '../UNSAFE_Separator';\nimport { usePopupFocusWithin } from './usePopupFocusWithin';\nimport { assistiveStyles, dividerStyle } from './themes/UserAssistanceStyles.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { UserAssistanceRedwoodTheme } from './themes/redwood/UserAssistanceTheme';\n\ntype Props = {\n  anchorRef: RefObject<HTMLElement | Coords>;\n  assistiveText?: string;\n  fieldLabel?: string;\n  id?: string;\n  messages?: ComponentMessageItem[];\n};\n\nexport function CompactUserAssistance({\n  anchorRef,\n  assistiveText,\n  fieldLabel,\n  id,\n  messages = []\n}: Props) {\n  const { isInputFocused, isReadonly } = useFormFieldContext();\n  const flip = { mainAxis: true, crossAxis: false };\n  const { isFocused: isPopupFocused, popupProps } = usePopupFocusWithin();\n  const isOpen = isInputFocused === true || isPopupFocused === true;\n\n  const { baseTheme } = useComponentTheme(UserAssistanceRedwoodTheme);\n\n  const uaCompactContent =\n    isReadonly !== true && (messages.length > 0 || assistiveText) ? (\n      <Popup\n        {...popupProps}\n        placement=\"end-top-corner\"\n        isOpen={isOpen}\n        anchorRef={anchorRef}\n        flipOptions={flip}\n        tail=\"simple\"\n        role=\"tooltip\"\n        maxWidth={'296px'}>\n        <div id={id} class={baseTheme}>\n          {messages.length > 0 && (\n            <ComponentMessageContainer fieldLabel={fieldLabel} messages={messages} />\n          )}\n          {messages.length > 0 && assistiveText && (\n            <span class={dividerStyle}>\n              <Separator />\n            </span>\n          )}\n          {assistiveText && <span class={assistiveStyles}>{assistiveText}</span>}\n        </div>\n      </Popup>\n    ) : null;\n\n  return uaCompactContent;\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBgB,SAAA,qBAAqB,CAAC,EACpC,SAAS,EACT,aAAa,EACb,UAAU,EACV,EAAE,EACF,QAAQ,GAAG,EAAE,EACP,EAAA;IACN,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC7D,MAAM,IAAI,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;IAClD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACxE,MAAM,MAAM,GAAG,cAAc,KAAK,IAAI,IAAI,cAAc,KAAK,IAAI,CAAC;IAElE,MAAM,EAAE,SAAS,EAAE,GAAG,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IAEpE,MAAM,gBAAgB,GACpB,UAAU,KAAK,IAAI,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC,IAC3DA,GAAA,CAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,gBAAgB,EAC1B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,OAAO,EAAA,QAAA,EACjBC,IAAK,CAAA,KAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAA,QAAA,EAAA,CAC1B,QAAQ,CAAC,MAAM,GAAG,CAAC,KAClBD,GAAA,CAAC,yBAAyB,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC1E,EACA,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,KACnCA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,YAAY,EAAA,QAAA,EACvBA,GAAC,CAAA,SAAS,EAAG,EAAA,CAAA,EAAA,CACR,CACR,EACA,aAAa,IAAIA,GAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,eAAe,EAAG,QAAA,EAAA,aAAa,EAAQ,CAAA,CAAA,EAAA,CAClE,EACA,CAAA,IACN,IAAI,CAAC;AAEX,IAAA,OAAO,gBAAgB,CAAC;AAC1B;;;;"}