@razorpay/blade 12.98.0 → 12.110.0

package/build/lib/web/production/components/Input/ColorInput/ColorInput.web.js

@@ -0,0 +1,403 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import { ColorSwatch } from './ColorSwatch.web.js';
+import { StyledColorInput, COLOR_INPUT_ROW_CLASSNAME as CLASSNAME } from './StyledColorInput.js';
+import { DEFAULT_COLOR_VALUE, isValidHex, isPartialHex, isValidOpacity } from './ColorInput.utils.js';
+import { formHintLeftLabelMarginLeft } from '../BaseInput/baseInputTokens.js';
+import { BaseInput, getHintType } from '../BaseInput/BaseInput.js';
+import { FormLabel } from '../../Form/FormLabel.js';
+import { FormHint } from '../../Form/FormHint.js';
+import { useFormId } from '../../Form/useFormId.js';
+import { useControllableState } from '../../../utils/useControllable.js';
+import { useId } from '../../../utils/useId.js';
+import '../../BladeProvider/index.js';
+import '../../../utils/index.js';
+import '../../Box/BaseBox/index.js';
+import '../../Box/styledProps/index.js';
+import '../../../utils/makeAnalyticsAttribute/index.js';
+import '../../../utils/metaAttribute/index.js';
+import '../../../utils/makeSize/index.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
+import '../../../utils/logger/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
+import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
+import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["label", "accessibilityLabel", "labelPosition", "size", "name", "value", "defaultValue", "onChange", "onFocus", "onBlur", "showOpacity", "validationState", "helpText", "errorText", "successText", "necessityIndicator", "isRequired", "isDisabled", "autoFocus", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _ColorInput = function _ColorInput(_ref, ref) {
+  var _ref7;
+  var label = _ref.label,
+    accessibilityLabel = _ref.accessibilityLabel,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    name = _ref.name,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$showOpacity = _ref.showOpacity,
+    showOpacity = _ref$showOpacity === void 0 ? true : _ref$showOpacity,
+    _ref$validationState = _ref.validationState,
+    validationState = _ref$validationState === void 0 ? 'none' : _ref$validationState,
+    helpText = _ref.helpText,
+    errorText = _ref.errorText,
+    successText = _ref.successText,
+    necessityIndicator = _ref.necessityIndicator,
+    isRequired = _ref.isRequired,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    autoFocus = _ref.autoFocus,
+    testID = _ref.testID,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (false) {
+    var _value$opacity;
+    var initialOpacity = (_value$opacity = value === null || value === void 0 ? void 0 : value.opacity) !== null && _value$opacity !== void 0 ? _value$opacity : defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.opacity;
+    if (initialOpacity !== undefined && (!Number.isInteger(initialOpacity) || initialOpacity < 0 || initialOpacity > 100)) {
+      throwBladeError({
+        message: "ColorInput: opacity must be an integer between 0 and 100, received ".concat(initialOpacity),
+        moduleName: 'ColorInput'
+      });
+    }
+  }
+  var _useControllableState = useControllableState({
+      value: value,
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : DEFAULT_COLOR_VALUE,
+      onChange: function onChange(newValue) {
+        _onChange === null || _onChange === void 0 || _onChange({
+          name: name,
+          value: newValue
+        });
+      },
+      shouldUpdate: function shouldUpdate(prev, next) {
+        return prev.hex !== next.hex || prev.opacity !== next.opacity;
+      }
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    colorValue = _useControllableState2[0],
+    setColorValue = _useControllableState2[1];
+  var _useState = useState(function () {
+      var _ref2, _value$opacity2;
+      return String((_ref2 = (_value$opacity2 = value === null || value === void 0 ? void 0 : value.opacity) !== null && _value$opacity2 !== void 0 ? _value$opacity2 : defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.opacity) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_COLOR_VALUE.opacity);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    opacityDisplayValue = _useState2[0],
+    setOpacityDisplayValue = _useState2[1];
+
+  // Local display state for the hex input so partial typing (1–5 chars) stays local
+  // and doesn't corrupt the color model until exactly 6 valid chars are present.
+  var _useState3 = useState(function () {
+      var _ref3, _value$hex;
+      return ((_ref3 = (_value$hex = value === null || value === void 0 ? void 0 : value.hex) !== null && _value$hex !== void 0 ? _value$hex : defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.hex) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_COLOR_VALUE.hex).replace(/^#/, '');
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hexDisplayValue = _useState4[0],
+    setHexDisplayValue = _useState4[1];
+
+  // Focus boundary tracking: fire onFocus/onBlur once when focus enters/leaves
+  // the composite widget, not on each internal input transition.
+  var isFocusedRef = useRef(false);
+  var blurTimeoutRef = useRef(null);
+
+  // Store callbacks and current values in refs so handlers stay referentially stable
+  // and never capture stale closures across async timeouts.
+  var onFocusRef = useRef(onFocus);
+  useEffect(function () {
+    onFocusRef.current = onFocus;
+  }, [onFocus]);
+  var onBlurRef = useRef(onBlur);
+  useEffect(function () {
+    onBlurRef.current = onBlur;
+  }, [onBlur]);
+  var colorValueRef = useRef(colorValue);
+  useEffect(function () {
+    colorValueRef.current = colorValue;
+  }, [colorValue]);
+  var nameRef = useRef(name);
+  useEffect(function () {
+    nameRef.current = name;
+  }, [name]);
+
+  // Sync display value when the color model changes from an external source.
+  // Skip while focused so a controlled parent updating value mid-edit doesn't clobber partial input.
+  useEffect(function () {
+    if (!isFocusedRef.current) {
+      setHexDisplayValue(colorValue.hex.replace(/^#/, ''));
+    }
+  }, [colorValue.hex]);
+  useEffect(function () {
+    return function () {
+      if (blurTimeoutRef.current !== null) clearTimeout(blurTimeoutRef.current);
+    };
+  }, []);
+
+  // Stable focus handler — reads from refs so it delivers the current colorValue to onFocus.
+  var handleInputFocus = useCallback(function () {
+    if (blurTimeoutRef.current !== null) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+    if (!isFocusedRef.current) {
+      var _onFocusRef$current;
+      isFocusedRef.current = true;
+      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 || _onFocusRef$current.call(onFocusRef, {
+        name: nameRef.current,
+        value: colorValueRef.current
+      });
+    }
+  }, []);
+
+  // Stable blur handler — accepts the committed ColorInputValue to pass to onBlur.
+  var handleInputBlur = useCallback(function (blurValue) {
+    blurTimeoutRef.current = setTimeout(function () {
+      var _onBlurRef$current;
+      blurTimeoutRef.current = null;
+      isFocusedRef.current = false;
+      (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 || _onBlurRef$current.call(onBlurRef, {
+        name: nameRef.current,
+        value: blurValue
+      });
+    }, 0);
+  }, []);
+  var hexInputRef = useRef(null);
+  var swatchRef = useRef(null);
+  var _useFormId = useFormId('color-input'),
+    inputId = _useFormId.inputId,
+    helpTextId = _useFormId.helpTextId,
+    errorTextId = _useFormId.errorTextId,
+    successTextId = _useFormId.successTextId;
+  var idBase = useId('color-input');
+  var labelId = "".concat(idBase, "-label");
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useBreakpoint = useBreakpoint({
+      breakpoints: theme.breakpoints
+    }),
+    matchedDeviceType = _useBreakpoint.matchedDeviceType;
+  var isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';
+  var handleHexChange = useCallback(function (_ref4) {
+    var inputValue = _ref4.value;
+    // Strip a leading '#' and trim whitespace so pasting '#FF5733 ' or typing '#' works naturally.
+    var raw = (inputValue !== null && inputValue !== void 0 ? inputValue : '').replace(/^#/, '').trim().toUpperCase();
+    if (raw === '') {
+      setHexDisplayValue('');
+      return;
+    }
+    if (isValidHex(raw) || isPartialHex(raw)) {
+      setHexDisplayValue(raw);
+    }
+    if (isValidHex(raw)) {
+      setColorValue(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          hex: "#".concat(raw)
+        });
+      });
+    }
+  }, [setColorValue]);
+  var handleOpacityChange = useCallback(function (_ref5) {
+    var inputValue = _ref5.value;
+    var raw = inputValue !== null && inputValue !== void 0 ? inputValue : '';
+    setOpacityDisplayValue(raw);
+    if (raw === '') {
+      return;
+    }
+
+    // Reject strings with non-digit characters (e.g. '5a', '100x') so parseInt
+    // can't silently truncate and commit a partial value.
+    if (!/^\d+$/.test(raw)) {
+      return;
+    }
+    var num = parseInt(raw, 10);
+    if (!Number.isNaN(num) && isValidOpacity(num)) {
+      setColorValue(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          opacity: num
+        });
+      });
+    }
+  }, [setColorValue]);
+  var handleOpacityBlur = useCallback(function (args) {
+    var _args$value;
+    var raw = (_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '';
+    var num = parseInt(raw, 10);
+    if (raw === '' || !/^\d+$/.test(raw) || Number.isNaN(num) || !isValidOpacity(num)) {
+      setOpacityDisplayValue(String(colorValue.opacity));
+    }
+    handleInputBlur(colorValue);
+  }, [colorValue, handleInputBlur]);
+  var handleOpacityKeyDown = useCallback(function (_ref6) {
+    var key = _ref6.key,
+      event = _ref6.event;
+    if (key === 'ArrowUp') {
+      event.preventDefault();
+      setColorValue(function (prev) {
+        var next = Math.min(prev.opacity + 1, 100);
+        if (next !== prev.opacity) {
+          setOpacityDisplayValue(String(next));
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            opacity: next
+          });
+        }
+        return prev;
+      });
+    } else if (key === 'ArrowDown') {
+      event.preventDefault();
+      setColorValue(function (prev) {
+        var next = Math.max(prev.opacity - 1, 0);
+        if (next !== prev.opacity) {
+          setOpacityDisplayValue(String(next));
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            opacity: next
+          });
+        }
+        return prev;
+      });
+    }
+  }, [setColorValue]);
+  var handleSwatchChange = useCallback(function (hex) {
+    // hex arrives with '#' prefix from ColorSwatch; strip for display, keep for model.
+    setHexDisplayValue(hex.replace(/^#/, ''));
+    setColorValue(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        hex: hex
+      });
+    });
+  }, [setColorValue]);
+
+  // Hex-specific blur: reset partial display to last committed valid value.
+  var handleHexInputBlur = useCallback(function () {
+    setHexDisplayValue(colorValue.hex.replace(/^#/, ''));
+    handleInputBlur(colorValue);
+  }, [colorValue, handleInputBlur]);
+
+  // Sync opacityDisplayValue when controlled value changes externally.
+  // Skip while focused so a controlled parent updating value mid-edit doesn't clobber partial input.
+  useEffect(function () {
+    if (!isFocusedRef.current) {
+      setOpacityDisplayValue(String(colorValue.opacity));
+    }
+  }, [colorValue.opacity]);
+  var willRenderHintText = Boolean(helpText) || validationState === 'success' && Boolean(successText) || validationState === 'error' && Boolean(errorText);
+  return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  }, metaAttribute({
+    name: MetaConstants.ColorInput,
+    testID: testID
+  })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
+      display: "flex",
+      flexDirection: isLabelLeftPositioned ? 'row' : 'column',
+      alignItems: isLabelLeftPositioned ? 'center' : undefined,
+      children: [label && /*#__PURE__*/jsx(FormLabel, {
+        as: "label",
+        position: labelPosition,
+        id: labelId,
+        htmlFor: inputId,
+        size: size,
+        necessityIndicator: necessityIndicator,
+        children: label
+      }), /*#__PURE__*/jsxs(StyledColorInput, {
+        children: [/*#__PURE__*/jsx(BaseBox, {
+          flex: "1",
+          minWidth: "0px",
+          className: CLASSNAME,
+          children: /*#__PURE__*/jsx(BaseInput, {
+            ref: hexInputRef,
+            id: inputId,
+            label: label,
+            hideLabelText: true,
+            accessibilityLabel: (_ref7 = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label) !== null && _ref7 !== void 0 ? _ref7 : 'Color hex code',
+            labelId: labelId,
+            size: size,
+            placeholder: "000000",
+            value: hexDisplayValue,
+            onChange: handleHexChange,
+            onFocus: handleInputFocus,
+            onBlur: handleHexInputBlur,
+            isDisabled: isDisabled,
+            isRequired: isRequired,
+            validationState: validationState
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            ,
+            autoFocus: autoFocus,
+            maxCharacters: 6,
+            hideFormHint: true,
+            textAlign: "left",
+            leadingInteractionElement: /*#__PURE__*/jsx(ColorSwatch, {
+              ref: swatchRef,
+              color: colorValue.hex,
+              size: size,
+              isDisabled: isDisabled,
+              onChange: handleSwatchChange,
+              onFocus: handleInputFocus,
+              onBlur: function onBlur() {
+                return handleInputBlur(colorValue);
+              }
+            })
+          })
+        }), showOpacity && /*#__PURE__*/jsx(BaseBox, {
+          width: "80px",
+          flexShrink: 0,
+          className: CLASSNAME,
+          children: /*#__PURE__*/jsx(BaseInput, {
+            id: "".concat(inputId, "-opacity"),
+            label: "Opacity",
+            hideLabelText: true,
+            accessibilityLabel: "Color opacity percentage",
+            size: size,
+            placeholder: "100",
+            value: opacityDisplayValue,
+            onChange: handleOpacityChange,
+            onKeyDown: handleOpacityKeyDown,
+            onFocus: handleInputFocus,
+            onBlur: handleOpacityBlur,
+            isDisabled: isDisabled,
+            validationState: validationState,
+            suffix: "%",
+            textAlign: "right",
+            hideFormHint: true
+          })
+        })]
+      })]
+    }), willRenderHintText && /*#__PURE__*/jsx(BaseBox, {
+      marginLeft: makeSize(label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0),
+      children: /*#__PURE__*/jsx(FormHint, {
+        type: getHintType({
+          validationState: validationState,
+          hasHelpText: Boolean(helpText)
+        }),
+        helpText: helpText,
+        errorText: errorText,
+        successText: successText,
+        helpTextId: helpTextId,
+        errorTextId: errorTextId,
+        successTextId: successTextId,
+        size: size
+      })
+    })]
+  }));
+};
+var ColorInput = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_ColorInput), {
+  displayName: 'ColorInput',
+  componentId: 'ColorInput'
+});
+
+export { ColorInput };
+//# sourceMappingURL=ColorInput.web.js.map

package/build/lib/web/production/components/Input/ColorInput/ColorInput.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.web.js","sources":["../../../../../../../src/components/Input/ColorInput/ColorInput.web.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ColorInputProps, ColorInputValue } from './types';\nimport { ColorSwatch } from './ColorSwatch.web';\nimport type { ColorSwatchRef } from './ColorSwatch.web';\nimport { StyledColorInput, COLOR_INPUT_ROW_CLASSNAME } from './StyledColorInput';\nimport { DEFAULT_COLOR_VALUE, isValidHex, isPartialHex, isValidOpacity } from './ColorInput.utils';\nimport { formHintLeftLabelMarginLeft } from '~components/Input/BaseInput/baseInputTokens';\nimport { BaseInput, getHintType } from '~components/Input/BaseInput/BaseInput';\nimport { FormLabel } from '~components/Form/FormLabel';\nimport { FormHint } from '~components/Form/FormHint';\nimport { useFormId } from '~components/Form/useFormId';\nimport { useControllableState } from '~utils/useControllable';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport { useBreakpoint } from '~utils';\nimport BaseBox from '~components/Box/BaseBox';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeSize } from '~utils/makeSize';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { BladeElementRef } from '~utils/types';\nimport type { FormInputOnEvent } from '~components/Form';\nimport type { FormInputOnKeyDownEvent } from '~components/Form/FormTypes';\nimport { throwBladeError } from '~utils/logger';\n\nconst _ColorInput: React.ForwardRefRenderFunction<BladeElementRef, ColorInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    size = 'medium',\n    name,\n    value,\n    defaultValue,\n    onChange,\n    onFocus,\n    onBlur,\n    showOpacity = true,\n    validationState = 'none',\n    helpText,\n    errorText,\n    successText,\n    necessityIndicator,\n    isRequired,\n    isDisabled = false,\n    autoFocus,\n    testID,\n    ...rest\n  },\n  ref,\n) => {\n  if (__DEV__) {\n    const initialOpacity = value?.opacity ?? defaultValue?.opacity;\n    if (\n      initialOpacity !== undefined &&\n      (!Number.isInteger(initialOpacity) || initialOpacity < 0 || initialOpacity > 100)\n    ) {\n      throwBladeError({\n        message: `ColorInput: opacity must be an integer between 0 and 100, received ${initialOpacity}`,\n        moduleName: 'ColorInput',\n      });\n    }\n  }\n\n  const [colorValue, setColorValue] = useControllableState<ColorInputValue>({\n    value,\n    defaultValue: defaultValue ?? DEFAULT_COLOR_VALUE,\n    onChange: (newValue) => {\n      onChange?.({ name, value: newValue });\n    },\n    shouldUpdate: (prev, next) => prev.hex !== next.hex || prev.opacity !== next.opacity,\n  });\n\n  const [opacityDisplayValue, setOpacityDisplayValue] = useState<string>(() =>\n    String(value?.opacity ?? defaultValue?.opacity ?? DEFAULT_COLOR_VALUE.opacity),\n  );\n\n  // Local display state for the hex input so partial typing (1–5 chars) stays local\n  // and doesn't corrupt the color model until exactly 6 valid chars are present.\n  const [hexDisplayValue, setHexDisplayValue] = useState<string>(() =>\n    (value?.hex ?? defaultValue?.hex ?? DEFAULT_COLOR_VALUE.hex).replace(/^#/, ''),\n  );\n\n  // Focus boundary tracking: fire onFocus/onBlur once when focus enters/leaves\n  // the composite widget, not on each internal input transition.\n  const isFocusedRef = useRef(false);\n  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Store callbacks and current values in refs so handlers stay referentially stable\n  // and never capture stale closures across async timeouts.\n  const onFocusRef = useRef(onFocus);\n  useEffect(() => {\n    onFocusRef.current = onFocus;\n  }, [onFocus]);\n  const onBlurRef = useRef(onBlur);\n  useEffect(() => {\n    onBlurRef.current = onBlur;\n  }, [onBlur]);\n  const colorValueRef = useRef(colorValue);\n  useEffect(() => {\n    colorValueRef.current = colorValue;\n  }, [colorValue]);\n  const nameRef = useRef(name);\n  useEffect(() => {\n    nameRef.current = name;\n  }, [name]);\n\n  // Sync display value when the color model changes from an external source.\n  // Skip while focused so a controlled parent updating value mid-edit doesn't clobber partial input.\n  useEffect(() => {\n    if (!isFocusedRef.current) {\n      setHexDisplayValue(colorValue.hex.replace(/^#/, ''));\n    }\n  }, [colorValue.hex]);\n\n  useEffect(() => {\n    return () => {\n      if (blurTimeoutRef.current !== null) clearTimeout(blurTimeoutRef.current);\n    };\n  }, []);\n\n  // Stable focus handler — reads from refs so it delivers the current colorValue to onFocus.\n  const handleInputFocus = useCallback(() => {\n    if (blurTimeoutRef.current !== null) {\n      clearTimeout(blurTimeoutRef.current);\n      blurTimeoutRef.current = null;\n    }\n    if (!isFocusedRef.current) {\n      isFocusedRef.current = true;\n      onFocusRef.current?.({ name: nameRef.current, value: colorValueRef.current });\n    }\n  }, []);\n\n  // Stable blur handler — accepts the committed ColorInputValue to pass to onBlur.\n  const handleInputBlur = useCallback((blurValue: ColorInputValue) => {\n    blurTimeoutRef.current = setTimeout(() => {\n      blurTimeoutRef.current = null;\n      isFocusedRef.current = false;\n      onBlurRef.current?.({ name: nameRef.current, value: blurValue });\n    }, 0);\n  }, []);\n\n  const hexInputRef = useRef<BladeElementRef>(null);\n  const swatchRef = useRef<ColorSwatchRef>(null);\n  const { inputId, helpTextId, errorTextId, successTextId } = useFormId('color-input');\n  const idBase = useId('color-input');\n  const labelId = `${idBase}-label`;\n  const { theme } = useTheme();\n  const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n  const isLabelLeftPositioned = labelPosition === 'left' && matchedDeviceType === 'desktop';\n\n  const handleHexChange = useCallback(\n    ({ value: inputValue }: { name?: string; value?: string }) => {\n      // Strip a leading '#' and trim whitespace so pasting '#FF5733 ' or typing '#' works naturally.\n      const raw = (inputValue ?? '').replace(/^#/, '').trim().toUpperCase();\n      if (raw === '') {\n        setHexDisplayValue('');\n        return;\n      }\n      if (isValidHex(raw) || isPartialHex(raw)) {\n        setHexDisplayValue(raw);\n      }\n      if (isValidHex(raw)) {\n        setColorValue((prev) => ({ ...prev, hex: `#${raw}` }));\n      }\n    },\n    [setColorValue],\n  );\n\n  const handleOpacityChange = useCallback(\n    ({ value: inputValue }: { name?: string; value?: string }) => {\n      const raw = inputValue ?? '';\n      setOpacityDisplayValue(raw);\n\n      if (raw === '') {\n        return;\n      }\n\n      // Reject strings with non-digit characters (e.g. '5a', '100x') so parseInt\n      // can't silently truncate and commit a partial value.\n      if (!/^\\d+$/.test(raw)) {\n        return;\n      }\n\n      const num = parseInt(raw, 10);\n      if (!Number.isNaN(num) && isValidOpacity(num)) {\n        setColorValue((prev) => ({ ...prev, opacity: num }));\n      }\n    },\n    [setColorValue],\n  );\n\n  const handleOpacityBlur = useCallback<FormInputOnEvent>(\n    (args) => {\n      const raw = args.value ?? '';\n      const num = parseInt(raw, 10);\n      if (raw === '' || !/^\\d+$/.test(raw) || Number.isNaN(num) || !isValidOpacity(num)) {\n        setOpacityDisplayValue(String(colorValue.opacity));\n      }\n      handleInputBlur(colorValue);\n    },\n    [colorValue, handleInputBlur],\n  );\n\n  const handleOpacityKeyDown = useCallback(\n    ({ key, event }: FormInputOnKeyDownEvent) => {\n      if (key === 'ArrowUp') {\n        event.preventDefault();\n        setColorValue((prev) => {\n          const next = Math.min(prev.opacity + 1, 100);\n          if (next !== prev.opacity) {\n            setOpacityDisplayValue(String(next));\n            return { ...prev, opacity: next };\n          }\n          return prev;\n        });\n      } else if (key === 'ArrowDown') {\n        event.preventDefault();\n        setColorValue((prev) => {\n          const next = Math.max(prev.opacity - 1, 0);\n          if (next !== prev.opacity) {\n            setOpacityDisplayValue(String(next));\n            return { ...prev, opacity: next };\n          }\n          return prev;\n        });\n      }\n    },\n    [setColorValue],\n  );\n\n  const handleSwatchChange = useCallback(\n    (hex: string) => {\n      // hex arrives with '#' prefix from ColorSwatch; strip for display, keep for model.\n      setHexDisplayValue(hex.replace(/^#/, ''));\n      setColorValue((prev) => ({ ...prev, hex }));\n    },\n    [setColorValue],\n  );\n\n  // Hex-specific blur: reset partial display to last committed valid value.\n  const handleHexInputBlur = useCallback(() => {\n    setHexDisplayValue(colorValue.hex.replace(/^#/, ''));\n    handleInputBlur(colorValue);\n  }, [colorValue, handleInputBlur]);\n\n  // Sync opacityDisplayValue when controlled value changes externally.\n  // Skip while focused so a controlled parent updating value mid-edit doesn't clobber partial input.\n  useEffect(() => {\n    if (!isFocusedRef.current) {\n      setOpacityDisplayValue(String(colorValue.opacity));\n    }\n  }, [colorValue.opacity]);\n\n  const willRenderHintText =\n    Boolean(helpText) ||\n    (validationState === 'success' && Boolean(successText)) ||\n    (validationState === 'error' && Boolean(errorText));\n\n  return (\n    <BaseBox\n      ref={ref as React.Ref<HTMLDivElement>}\n      display=\"flex\"\n      flexDirection=\"column\"\n      width=\"100%\"\n      {...metaAttribute({ name: MetaConstants.ColorInput, testID })}\n      {...getStyledProps(rest)}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <BaseBox\n        display=\"flex\"\n        flexDirection={isLabelLeftPositioned ? 'row' : 'column'}\n        alignItems={isLabelLeftPositioned ? 'center' : undefined}\n      >\n        {label && (\n          <FormLabel\n            as=\"label\"\n            position={labelPosition}\n            id={labelId}\n            htmlFor={inputId}\n            size={size}\n            necessityIndicator={necessityIndicator}\n          >\n            {label}\n          </FormLabel>\n        )}\n\n        <StyledColorInput>\n          <BaseBox flex=\"1\" minWidth=\"0px\" className={COLOR_INPUT_ROW_CLASSNAME}>\n            <BaseInput\n              ref={hexInputRef}\n              id={inputId}\n              label={label}\n              hideLabelText\n              accessibilityLabel={accessibilityLabel ?? label ?? 'Color hex code'}\n              labelId={labelId}\n              size={size}\n              placeholder=\"000000\"\n              value={hexDisplayValue}\n              onChange={handleHexChange}\n              onFocus={handleInputFocus}\n              onBlur={handleHexInputBlur}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              validationState={validationState}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              maxCharacters={6}\n              hideFormHint\n              textAlign=\"left\"\n              leadingInteractionElement={\n                <ColorSwatch\n                  ref={swatchRef}\n                  color={colorValue.hex}\n                  size={size}\n                  isDisabled={isDisabled}\n                  onChange={handleSwatchChange}\n                  onFocus={handleInputFocus}\n                  onBlur={() => handleInputBlur(colorValue)}\n                />\n              }\n            />\n          </BaseBox>\n\n          {showOpacity && (\n            <BaseBox width=\"80px\" flexShrink={0} className={COLOR_INPUT_ROW_CLASSNAME}>\n              <BaseInput\n                id={`${inputId}-opacity`}\n                label=\"Opacity\"\n                hideLabelText\n                accessibilityLabel=\"Color opacity percentage\"\n                size={size}\n                placeholder=\"100\"\n                value={opacityDisplayValue}\n                onChange={handleOpacityChange}\n                onKeyDown={handleOpacityKeyDown}\n                onFocus={handleInputFocus}\n                onBlur={handleOpacityBlur}\n                isDisabled={isDisabled}\n                validationState={validationState}\n                suffix=\"%\"\n                textAlign=\"right\"\n                hideFormHint\n              />\n            </BaseBox>\n          )}\n        </StyledColorInput>\n      </BaseBox>\n\n      {willRenderHintText && (\n        <BaseBox\n          marginLeft={makeSize(\n            label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0,\n          )}\n        >\n          <FormHint\n            type={getHintType({ validationState, hasHelpText: Boolean(helpText) })}\n            helpText={helpText}\n            errorText={errorText}\n            successText={successText}\n            helpTextId={helpTextId}\n            errorTextId={errorTextId}\n            successTextId={successTextId}\n            size={size}\n          />\n        </BaseBox>\n      )}\n    </BaseBox>\n  );\n};\n\nconst ColorInput = assignWithoutSideEffects(React.forwardRef(_ColorInput), {\n  displayName: 'ColorInput',\n  componentId: 'ColorInput',\n});\n\nexport { ColorInput };\n"],"names":["_ColorInput","_ref","ref","_ref7","label","accessibilityLabel","_ref$labelPosition","labelPosition","_ref$size","size","name","value","defaultValue","onChange","onFocus","onBlur","_ref$showOpacity","showOpacity","_ref$validationState","validationState","helpText","errorText","successText","necessityIndicator","isRequired","_ref$isDisabled","isDisabled","autoFocus","testID","rest","_objectWithoutProperties","_excluded","_value$opacity","initialOpacity","opacity","undefined","Number","isInteger","throwBladeError","message","concat","moduleName","_useControllableState","useControllableState","DEFAULT_COLOR_VALUE","newValue","shouldUpdate","prev","next","hex","_useControllableState2","_slicedToArray","colorValue","setColorValue","_useState","useState","_ref2","_value$opacity2","String","_useState2","opacityDisplayValue","setOpacityDisplayValue","_useState3","_ref3","_value$hex","replace","_useState4","hexDisplayValue","setHexDisplayValue","isFocusedRef","useRef","blurTimeoutRef","onFocusRef","useEffect","current","onBlurRef","colorValueRef","nameRef","clearTimeout","handleInputFocus","useCallback","_onFocusRef$current","call","handleInputBlur","blurValue","setTimeout","_onBlurRef$current","hexInputRef","swatchRef","_useFormId","useFormId","inputId","helpTextId","errorTextId","successTextId","idBase","useId","labelId","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","isLabelLeftPositioned","handleHexChange","_ref4","inputValue","raw","trim","toUpperCase","isValidHex","isPartialHex","_objectSpread","handleOpacityChange","_ref5","test","num","parseInt","isNaN","isValidOpacity","handleOpacityBlur","args","_args$value","handleOpacityKeyDown","_ref6","key","event","preventDefault","Math","min","max","handleSwatchChange","handleHexInputBlur","willRenderHintText","Boolean","_jsxs","BaseBox","display","flexDirection","width","metaAttribute","MetaConstants","ColorInput","getStyledProps","makeAnalyticsAttribute","children","alignItems","_jsx","FormLabel","as","position","id","htmlFor","StyledColorInput","flex","minWidth","className","COLOR_INPUT_ROW_CLASSNAME","BaseInput","hideLabelText","placeholder","maxCharacters","hideFormHint","textAlign","leadingInteractionElement","ColorSwatch","color","flexShrink","onKeyDown","suffix","marginLeft","makeSize","formHintLeftLabelMarginLeft","FormHint","type","getHintType","hasHelpText","assignWithoutSideEffects","React","forwardRef","displayName","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Input/ColorInput/ColorSwatch.web.js

@@ -0,0 +1,103 @@
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import '../../Box/BaseBox/index.js';
+import '../../BladeProvider/index.js';
+import '../../../utils/makeSize/index.js';
+import '../../../tokens/global/index.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
+import { padHexForPicker } from './ColorInput.utils.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { size } from '../../../tokens/global/size.js';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeSize } from '../../../utils/makeSize/makeSize.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var swatchSizeTokens = {
+  xsmall: size['20'],
+  small: size['24'],
+  medium: size['28'],
+  large: size['40']
+};
+var _ColorSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var color = _ref.color,
+    inputSize = _ref.size,
+    isDisabled = _ref.isDisabled,
+    onChange = _ref.onChange,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur;
+  var colorInputRef = useRef(null);
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var borderColor = getIn(theme.colors, 'interactive.border.gray.default');
+  useImperativeHandle(ref, function () {
+    return {
+      openPicker: function openPicker() {
+        if (!isDisabled) {
+          var _colorInputRef$curren;
+          (_colorInputRef$curren = colorInputRef.current) === null || _colorInputRef$curren === void 0 || _colorInputRef$curren.click();
+        }
+      }
+    };
+  });
+  var handleChange = function handleChange(e) {
+    // Keep '#' prefix so the value matches ColorInputValue.hex format (e.g. '#FF5733').
+    var hexValue = e.target.value.toUpperCase();
+    onChange(hexValue);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      var _colorInputRef$curren2;
+      e.preventDefault();
+      (_colorInputRef$curren2 = colorInputRef.current) === null || _colorInputRef$curren2 === void 0 || _colorInputRef$curren2.click();
+    }
+  };
+  var dimension = swatchSizeTokens[inputSize];
+  return /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    role: "button",
+    "aria-label": "Open color picker",
+    tabIndex: isDisabled ? -1 : 0,
+    onKeyDown: handleKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    children: [/*#__PURE__*/jsx(BaseBox, {
+      as: "div",
+      width: makeSize(dimension),
+      height: makeSize(dimension),
+      borderRadius: "xsmall",
+      flexShrink: 0,
+      style: {
+        backgroundColor: padHexForPicker(color),
+        border: "1px solid ".concat(borderColor),
+        opacity: isDisabled ? 0.5 : 1
+      }
+    }), /*#__PURE__*/jsx("input", {
+      ref: colorInputRef,
+      type: "color",
+      value: padHexForPicker(color).toLowerCase(),
+      onChange: handleChange,
+      disabled: isDisabled,
+      tabIndex: -1,
+      "aria-hidden": "true",
+      style: {
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0,
+        cursor: isDisabled ? 'not-allowed' : 'pointer'
+      }
+    })]
+  });
+});
+var ColorSwatch = /*#__PURE__*/assignWithoutSideEffects(_ColorSwatch, {
+  displayName: 'ColorSwatch'
+});
+
+export { ColorSwatch };
+//# sourceMappingURL=ColorSwatch.web.js.map

package/build/lib/web/production/components/Input/ColorInput/ColorSwatch.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.web.js","sources":["../../../../../../../src/components/Input/ColorInput/ColorSwatch.web.tsx"],"sourcesContent":["import React, { useRef, useImperativeHandle, forwardRef } from 'react';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { BaseInputProps } from '~components/Input/BaseInput';\nimport { useTheme } from '~components/BladeProvider';\nimport { makeSize } from '~utils/makeSize';\nimport { size } from '~tokens/global';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { padHexForPicker } from './ColorInput.utils';\nimport getIn from '~utils/lodashButBetter/get';\n\ntype ColorSwatchProps = {\n  color: string;\n  size: NonNullable<BaseInputProps['size']>;\n  isDisabled?: boolean;\n  onChange: (hex: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n};\n\ntype ColorSwatchRef = {\n  openPicker: () => void;\n};\n\nconst swatchSizeTokens = {\n  xsmall: size['20'],\n  small: size['24'],\n  medium: size['28'],\n  large: size['40'],\n} as const;\n\nconst _ColorSwatch = forwardRef<ColorSwatchRef, ColorSwatchProps>(\n  ({ color, size: inputSize, isDisabled, onChange, onFocus, onBlur }, ref) => {\n    const colorInputRef = useRef<HTMLInputElement>(null);\n    const { theme } = useTheme();\n    const borderColor = getIn(theme.colors, 'interactive.border.gray.default');\n\n    useImperativeHandle(ref, () => ({\n      openPicker: () => {\n        if (!isDisabled) {\n          colorInputRef.current?.click();\n        }\n      },\n    }));\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n      // Keep '#' prefix so the value matches ColorInputValue.hex format (e.g. '#FF5733').\n      const hexValue = e.target.value.toUpperCase();\n      onChange(hexValue);\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        colorInputRef.current?.click();\n      }\n    };\n\n    const dimension = swatchSizeTokens[inputSize];\n\n    return (\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        position=\"relative\"\n        role=\"button\"\n        aria-label=\"Open color picker\"\n        tabIndex={isDisabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        cursor={isDisabled ? 'not-allowed' : 'pointer'}\n      >\n        <BaseBox\n          as=\"div\"\n          width={makeSize(dimension)}\n          height={makeSize(dimension)}\n          borderRadius=\"xsmall\"\n          flexShrink={0}\n          style={{\n            backgroundColor: padHexForPicker(color),\n            border: `1px solid ${borderColor}`,\n            opacity: isDisabled ? 0.5 : 1,\n          }}\n        />\n        {/* Positioned over the swatch so clicks go directly to the input — avoids\n            programmatic .click() which does not open the picker on Firefox/Safari iOS. */}\n        <input\n          ref={colorInputRef}\n          type=\"color\"\n          value={padHexForPicker(color).toLowerCase()}\n          onChange={handleChange}\n          disabled={isDisabled}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          style={{\n            position: 'absolute',\n            inset: 0,\n            width: '100%',\n            height: '100%',\n            opacity: 0,\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n          }}\n        />\n      </BaseBox>\n    );\n  },\n);\n\nconst ColorSwatch = assignWithoutSideEffects(_ColorSwatch, {\n  displayName: 'ColorSwatch',\n});\n\nexport { ColorSwatch };\nexport type { ColorSwatchRef };\n"],"names":["swatchSizeTokens","xsmall","size","small","medium","large","_ColorSwatch","forwardRef","_ref","ref","color","inputSize","isDisabled","onChange","onFocus","onBlur","colorInputRef","useRef","_useTheme","useTheme","theme","borderColor","getIn","colors","useImperativeHandle","openPicker","_colorInputRef$curren","current","click","handleChange","e","hexValue","target","value","toUpperCase","handleKeyDown","key","_colorInputRef$curren2","preventDefault","dimension","_jsxs","BaseBox","display","alignItems","justifyContent","position","role","tabIndex","onKeyDown","cursor","children","_jsx","as","width","makeSize","height","borderRadius","flexShrink","style","backgroundColor","padHexForPicker","border","concat","opacity","type","toLowerCase","disabled","inset","ColorSwatch","assignWithoutSideEffects","displayName"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAMA,gBAAgB,GAAG;AACvBC,EAAAA,MAAM,EAAEC,IAAI,CAAC,IAAI,CAAC;AAClBC,EAAAA,KAAK,EAAED,IAAI,CAAC,IAAI,CAAC;AACjBE,EAAAA,MAAM,EAAEF,IAAI,CAAC,IAAI,CAAC;EAClBG,KAAK,EAAEH,IAAI,CAAC,IAAI,CAAA;AAClB,CAAU,CAAA;AAEV,IAAMI,YAAY,gBAAGC,UAAU,CAC7B,UAAAC,IAAA,EAAoEC,GAAG,EAAK;AAAA,EAAA,IAAzEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAQC,SAAS,GAAAH,IAAA,CAAfN,IAAI;IAAaU,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IAAEC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IAAEC,OAAO,GAAAN,IAAA,CAAPM,OAAO;IAAEC,MAAM,GAAAP,IAAA,CAANO,MAAM,CAAA;AAC9D,EAAA,IAAMC,aAAa,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;AACpD,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;EACb,IAAMC,WAAW,GAAGC,KAAK,CAACF,KAAK,CAACG,MAAM,EAAE,iCAAiC,CAAC,CAAA;EAE1EC,mBAAmB,CAACf,GAAG,EAAE,YAAA;IAAA,OAAO;AAC9BgB,MAAAA,UAAU,EAAE,SAAZA,UAAUA,GAAQ;QAChB,IAAI,CAACb,UAAU,EAAE;AAAA,UAAA,IAAAc,qBAAA,CAAA;AACf,UAAA,CAAAA,qBAAA,GAAAV,aAAa,CAACW,OAAO,MAAA,IAAA,IAAAD,qBAAA,KAAA,KAAA,CAAA,IAArBA,qBAAA,CAAuBE,KAAK,EAAE,CAAA;AAChC,SAAA;AACF,OAAA;KACD,CAAA;AAAA,GAAC,CAAC,CAAA;AAEH,EAAA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,CAAsC,EAAW;AACrE;IACA,IAAMC,QAAQ,GAAGD,CAAC,CAACE,MAAM,CAACC,KAAK,CAACC,WAAW,EAAE,CAAA;IAC7CrB,QAAQ,CAACkB,QAAQ,CAAC,CAAA;GACnB,CAAA;AAED,EAAA,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAIL,CAAsC,EAAW;IACtE,IAAIA,CAAC,CAACM,GAAG,KAAK,OAAO,IAAIN,CAAC,CAACM,GAAG,KAAK,GAAG,EAAE;AAAA,MAAA,IAAAC,sBAAA,CAAA;MACtCP,CAAC,CAACQ,cAAc,EAAE,CAAA;AAClB,MAAA,CAAAD,sBAAA,GAAArB,aAAa,CAACW,OAAO,MAAA,IAAA,IAAAU,sBAAA,KAAA,KAAA,CAAA,IAArBA,sBAAA,CAAuBT,KAAK,EAAE,CAAA;AAChC,KAAA;GACD,CAAA;AAED,EAAA,IAAMW,SAAS,GAAGvC,gBAAgB,CAACW,SAAS,CAAC,CAAA;EAE7C,oBACE6B,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,UAAU,EAAC,QAAQ;AACnBC,IAAAA,cAAc,EAAC,QAAQ;AACvBC,IAAAA,QAAQ,EAAC,UAAU;AACnBC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,YAAA,EAAW,mBAAmB;AAC9BC,IAAAA,QAAQ,EAAEnC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAE;AAC9BoC,IAAAA,SAAS,EAAEb,aAAc;AACzBrB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,MAAM,EAAEA,MAAO;AACfkC,IAAAA,MAAM,EAAErC,UAAU,GAAG,aAAa,GAAG,SAAU;IAAAsC,QAAA,EAAA,cAE/CC,GAAA,CAACV,OAAO,EAAA;AACNW,MAAAA,EAAE,EAAC,KAAK;AACRC,MAAAA,KAAK,EAAEC,QAAQ,CAACf,SAAS,CAAE;AAC3BgB,MAAAA,MAAM,EAAED,QAAQ,CAACf,SAAS,CAAE;AAC5BiB,MAAAA,YAAY,EAAC,QAAQ;AACrBC,MAAAA,UAAU,EAAE,CAAE;AACdC,MAAAA,KAAK,EAAE;AACLC,QAAAA,eAAe,EAAEC,eAAe,CAAClD,KAAK,CAAC;AACvCmD,QAAAA,MAAM,EAAAC,YAAAA,CAAAA,MAAA,CAAezC,WAAW,CAAE;AAClC0C,QAAAA,OAAO,EAAEnD,UAAU,GAAG,GAAG,GAAG,CAAA;AAC9B,OAAA;KACD,CAAC,eAGFuC,GAAA,CAAA,OAAA,EAAA;AACE1C,MAAAA,GAAG,EAAEO,aAAc;AACnBgD,MAAAA,IAAI,EAAC,OAAO;MACZ/B,KAAK,EAAE2B,eAAe,CAAClD,KAAK,CAAC,CAACuD,WAAW,EAAG;AAC5CpD,MAAAA,QAAQ,EAAEgB,YAAa;AACvBqC,MAAAA,QAAQ,EAAEtD,UAAW;MACrBmC,QAAQ,EAAE,CAAC,CAAE;AACb,MAAA,aAAA,EAAY,MAAM;AAClBW,MAAAA,KAAK,EAAE;AACLb,QAAAA,QAAQ,EAAE,UAAU;AACpBsB,QAAAA,KAAK,EAAE,CAAC;AACRd,QAAAA,KAAK,EAAE,MAAM;AACbE,QAAAA,MAAM,EAAE,MAAM;AACdQ,QAAAA,OAAO,EAAE,CAAC;AACVd,QAAAA,MAAM,EAAErC,UAAU,GAAG,aAAa,GAAG,SAAA;AACvC,OAAA;AAAE,KACH,CAAC,CAAA;AAAA,GACK,CAAC,CAAA;AAEd,CACF,CAAC,CAAA;AAED,IAAMwD,WAAW,gBAAGC,wBAAwB,CAAC/D,YAAY,EAAE;AACzDgE,EAAAA,WAAW,EAAE,aAAA;AACf,CAAC;;;;"}

package/build/lib/web/production/components/Input/ColorInput/StyledColorInput.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import '../../Box/BaseBox/index.js';
+import '../../../utils/index.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
+
+var CLASSNAME = '__blade-color-input-row';
+var StyledColorInput = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "StyledColorInput",
+  componentId: "sc-1gdzo5z-0"
+})(["", ""], function (_ref) {
+  var theme = _ref.theme;
+  var radius = makeBorderSize(theme.border.radius.small);
+  return "\n      display: flex;\n      flex-direction: row;\n      align-items: stretch;\n\n      /* Reset border-radius on all inputs */\n      & .".concat(CLASSNAME, " .__blade-base-input-wrapper,\n      & .").concat(CLASSNAME, " .focus-ring-wrapper {\n        border-radius: 0;\n      }\n\n      /* Elevate hovered/focused input above siblings */\n      & .").concat(CLASSNAME, " .__blade-base-input-wrapper {\n        position: relative;\n        z-index: 0;\n      }\n\n      & .").concat(CLASSNAME, " .__blade-base-input-wrapper:hover,\n      & .").concat(CLASSNAME, " .__blade-base-input-wrapper:focus-within {\n        z-index: 1;\n      }\n\n      /* First input: left border-radius */\n      & .").concat(CLASSNAME, ":first-child .__blade-base-input-wrapper,\n      & .").concat(CLASSNAME, ":first-child .focus-ring-wrapper {\n        border-top-left-radius: ").concat(radius, ";\n        border-bottom-left-radius: ").concat(radius, ";\n      }\n\n      /* Last input: right border-radius */\n      & .").concat(CLASSNAME, ":last-child .__blade-base-input-wrapper,\n      & .").concat(CLASSNAME, ":last-child .focus-ring-wrapper {\n        border-top-right-radius: ").concat(radius, ";\n        border-bottom-right-radius: ").concat(radius, ";\n      }\n\n      /* Only child: full border-radius */\n      & .").concat(CLASSNAME, ":only-child .__blade-base-input-wrapper,\n      & .").concat(CLASSNAME, ":only-child .focus-ring-wrapper {\n        border-radius: ").concat(radius, ";\n      }\n    ");
+});
+
+export { CLASSNAME as COLOR_INPUT_ROW_CLASSNAME, StyledColorInput };
+//# sourceMappingURL=StyledColorInput.js.map

package/build/lib/web/production/components/Input/ColorInput/StyledColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledColorInput.js","sources":["../../../../../../../src/components/Input/ColorInput/StyledColorInput.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize } from '~utils';\n\nconst CLASSNAME = '__blade-color-input-row';\n\nconst StyledColorInput = styled(BaseBox)`\n  ${({ theme }) => {\n    const radius = makeBorderSize(theme.border.radius.small);\n    return `\n      display: flex;\n      flex-direction: row;\n      align-items: stretch;\n\n      /* Reset border-radius on all inputs */\n      & .${CLASSNAME} .__blade-base-input-wrapper,\n      & .${CLASSNAME} .focus-ring-wrapper {\n        border-radius: 0;\n      }\n\n      /* Elevate hovered/focused input above siblings */\n      & .${CLASSNAME} .__blade-base-input-wrapper {\n        position: relative;\n        z-index: 0;\n      }\n\n      & .${CLASSNAME} .__blade-base-input-wrapper:hover,\n      & .${CLASSNAME} .__blade-base-input-wrapper:focus-within {\n        z-index: 1;\n      }\n\n      /* First input: left border-radius */\n      & .${CLASSNAME}:first-child .__blade-base-input-wrapper,\n      & .${CLASSNAME}:first-child .focus-ring-wrapper {\n        border-top-left-radius: ${radius};\n        border-bottom-left-radius: ${radius};\n      }\n\n      /* Last input: right border-radius */\n      & .${CLASSNAME}:last-child .__blade-base-input-wrapper,\n      & .${CLASSNAME}:last-child .focus-ring-wrapper {\n        border-top-right-radius: ${radius};\n        border-bottom-right-radius: ${radius};\n      }\n\n      /* Only child: full border-radius */\n      & .${CLASSNAME}:only-child .__blade-base-input-wrapper,\n      & .${CLASSNAME}:only-child .focus-ring-wrapper {\n        border-radius: ${radius};\n      }\n    `;\n  }}\n`;\n\nexport { StyledColorInput, CLASSNAME as COLOR_INPUT_ROW_CLASSNAME };\n"],"names":["CLASSNAME","StyledColorInput","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","radius","makeBorderSize","border","small","concat"],"mappings":";;;;;;AAIMA,IAAAA,SAAS,GAAG,0BAAyB;AAE3C,IAAMC,gBAAgB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACpC,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EAAA,UAAAC,IAAA,EAAe;AAAA,EAAA,IAAZC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;EACR,IAAMC,MAAM,GAAGC,cAAc,CAACF,KAAK,CAACG,MAAM,CAACF,MAAM,CAACG,KAAK,CAAC,CAAA;AACxD,EAAA,OAAA,6IAAA,CAAAC,MAAA,CAMOb,SAAS,EAAA,0CAAA,CAAA,CAAAa,MAAA,CACTb,SAAS,EAAA,mIAAA,CAAA,CAAAa,MAAA,CAKTb,SAAS,EAAA,wGAAA,CAAA,CAAAa,MAAA,CAKTb,SAAS,EAAA,gDAAA,CAAA,CAAAa,MAAA,CACTb,SAAS,EAAA,qIAAA,CAAA,CAAAa,MAAA,CAKTb,SAAS,EAAA,sDAAA,CAAA,CAAAa,MAAA,CACTb,SAAS,EAAA,sEAAA,CAAA,CAAAa,MAAA,CACcJ,MAAM,EAAAI,wCAAAA,CAAAA,CAAAA,MAAA,CACHJ,MAAM,EAAAI,sEAAAA,CAAAA,CAAAA,MAAA,CAIhCb,SAAS,EAAAa,qDAAAA,CAAAA,CAAAA,MAAA,CACTb,SAAS,EAAAa,sEAAAA,CAAAA,CAAAA,MAAA,CACeJ,MAAM,EAAAI,yCAAAA,CAAAA,CAAAA,MAAA,CACHJ,MAAM,EAAAI,qEAAAA,CAAAA,CAAAA,MAAA,CAIjCb,SAAS,EAAAa,qDAAAA,CAAAA,CAAAA,MAAA,CACTb,SAAS,EAAAa,4DAAAA,CAAAA,CAAAA,MAAA,CACKJ,MAAM,EAAA,kBAAA,CAAA,CAAA;AAG7B,CAAC;;;;"}

package/build/lib/web/production/components/Input/ColorInput/index.js

@@ -0,0 +1,2 @@
+export { ColorInput } from './ColorInput.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/production/components/Input/ColorInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/web/production/components/Input/PhoneNumberInput/CountrySelector.web.js

@@ -79,7 +79,8 @@ var CountrySelector = function CountrySelector(_ref) {
       accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
       isDisabled: isDisabled,
       size: size,
-      leading: flagImage
+      leading: flagImage,
+      showDisplayValue: false
     }), isMobile ? /*#__PURE__*/jsxs(BottomSheet, {
       children: [/*#__PURE__*/jsx(BottomSheetHeader, {
         title: "Select A Country"