@northlight/ui 2.35.0 → 2.35.2

package/dist/es/northlight.d.ts

@@ -700,7 +700,7 @@ declare const ColorPicker: ({ onChange, clearable, colors, expandedColors, value
 declare const ColorPickerField: ({ name, label, direction, isRequired, validate, ...rest }: ColorPickerFieldProps) => JSX.Element;
 
 type FlipButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-type FlipButtonVariant = 'default' | 'brand';
+type FlipButtonVariant = 'default' | 'brand' | 'light';
 type StyleType = {
     opacity: '0';
     width: '0';
@@ -3265,7 +3265,7 @@ interface PresetOptions {
     thousandSeparator: string;
     decimalSeparator: string;
 }
-interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange' | 'max' | 'min'> {
+interface FormattedNumberInputProps extends Omit<NumericFormatProps, 'onChange' | 'max' | 'min'>, Omit<InputProps, 'color' | 'defaultValue' | 'value' | 'height' | 'size' | 'type' | 'width' | 'values' | 'events' | 'onChange'> {
     max?: number;
     min?: number;
     /** Changes thousand and decimal separators */

package/dist/es/northlight.js

@@ -2148,6 +2148,24 @@ const FlipButton$1 = {
         }
       }
     }),
+    light: ({ theme: { colors: color }, sx }) => ({
+      container: merge({
+        bgColor: color["base-alt"]
+      }, sx),
+      button: {
+        bgColor: "mono.transparent",
+        _hover: {
+          bgColor: color.background.button["ghost-hover"]
+        },
+        _checked: {
+          color: color.text["flip-button"].default,
+          bgColor: "bg.base",
+          _hover: {
+            bgColor: "bg.base"
+          }
+        }
+      }
+    }),
     ai: ({ theme: { colors: color }, sx }) => ({
       container: merge({
         bgColor: color.background["flip-button"]["default-deselected-brand"]
@@ -14519,7 +14537,7 @@ const ComboPicker = (_a) => {
     "max",
     "min"
   ]);
-  var _a2;
+  var _a2, _b2, _c;
   const { isOpen, onToggle, onClose } = useDisclosure();
   const [inputValueState, setInputValueState] = useState(valueProp == null ? void 0 : valueProp.input);
   const [selectOptionState, setselectOptionState] = useState(valueProp == null ? void 0 : valueProp.option);
@@ -14581,9 +14599,10 @@ const ComboPicker = (_a) => {
       onChange == null ? void 0 : onChange(getNewValue(option, input));
     }
   }, [inputValue, defaultToZeroIfEmpty]);
+  const buttonWidth = (_b2 = (_a2 = buttonRef.current) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0;
   return /* @__PURE__ */ React.createElement(InputGroup, null, /* @__PURE__ */ React.createElement(
     FormattedNumberInput,
-    __spreadValues$1({
+    __spreadProps(__spreadValues$1({
       width: "100%",
       onChange: (values) => handleInputChange(values.floatValue),
       value: inputValue,
@@ -14595,7 +14614,9 @@ const ComboPicker = (_a) => {
       readOnly: isReadOnly,
       min,
       max
-    }, rest)
+    }, rest), {
+      pr: `${buttonWidth >= 0 ? buttonWidth + 10 : 0}px`
+    })
   ), /* @__PURE__ */ React.createElement(
     InputRightElement,
     {
@@ -14613,7 +14634,7 @@ const ComboPicker = (_a) => {
         flexShrink: "0",
         height: "100%"
       },
-      (_a2 = selectOption == null ? void 0 : selectOption.label) != null ? _a2 : ""
+      (_c = selectOption == null ? void 0 : selectOption.label) != null ? _c : ""
     )
   ), /* @__PURE__ */ React.createElement(Box, { position: "absolute", width: "100%" }, /* @__PURE__ */ React.createElement(
     Select,