/* @oracle/oraclejet-preact: undefined */
'use strict';

var jsxRuntime = require('preact/jsx-runtime');
var useTestId = require('./useTestId-4f53d561.js');
var UNSAFE_ColorPicker_themes_ColorPickerContract_css = require('./UNSAFE_ColorPicker/themes/ColorPickerContract.css.js');
var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
var UNSAFE_ColorPicker_themes_redwood_ColorPickerTheme = require('./UNSAFE_ColorPicker/themes/redwood/ColorPickerTheme.js');
var compat = require('preact/compat');
var Flex = require('./Flex-3a257bc3.js');
var clientUtils = require('./clientUtils-ef5e20ce.js');
var ColorPalette = require('./ColorPalette-b14114d8.js');

/**
 * A ColorPicker is a component that allows users to select a single color.
 */
const ColorPicker = compat.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.useComponentTheme(UNSAFE_ColorPicker_themes_redwood_ColorPickerTheme.ColorPickerRedwoodTheme);
    const testIdProps = useTestId.useTestId(testId);
    return (jsxRuntime.jsx("div", { ref: pickerRef, class: classes, ...testIdProps, children: jsxRuntime.jsx(Flex.Flex, { direction: "column", height: height === 'auto' ? undefined : clientUtils.isMobile() ? undefined : UNSAFE_ColorPicker_themes_ColorPickerContract_css.colorPickerPropVars.maxHeight, maxWidth: maxWidth !== undefined ? maxWidth : clientUtils.isMobile() ? '100%' : UNSAFE_ColorPicker_themes_ColorPickerContract_css.colorPickerPropVars.maxWidth, width: width !== undefined ? width : UNSAFE_ColorPicker_themes_ColorPickerContract_css.colorPickerPropVars.width, children: jsxRuntime.jsx(ColorPalette.ColorPalette, { palette: palette, swatchSize: swatchSize, value: value, testId: testId ? testId + '_picker' : undefined, onCommit: onCommit }) }) }));
});

exports.ColorPicker = ColorPicker;
//# sourceMappingURL=ColorPicker-8f0b6000.js.map
