Changes to lcp button and icon selector

includes/blocks/lcp-button/components/DimensionValueControl.js

@@ -0,0 +1,47 @@
+import { __ } from '@wordpress/i18n';
+import { BaseControl, NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
+ */
+export function NumberWithUnitControl() {
+    // Example options for select control (CSS units)
+    const unitOptions = [
+        { label: __('px'), value: 'px' },
+        { label: __('rem'), value: 'rem' },
+        { label: __('em'), value: 'em' },
+        { label: __('%'), value: '%' },
+        { label: __('vh'), value: 'vh' },
+        { label: __('vw'), value: 'vw' },
+        { label: __('pt'), value: 'pt' },
+        { label: __('cm'), value: 'cm' },
+        { label: __('mm'), value: 'mm' },
+    ];
+
+    // State to manage the number and unit values
+    const [value, setValue] = React.useState(10);
+    const [unit, setUnit] = React.useState('px');
+
+    return (
+        <BaseControl label={__('Padding with Unit')}>
+            <HStack>
+                {/* Number input control */}
+                <NumberControl
+                    value={value}
+                    onChange={(newValue) => setValue(newValue)}
+                    min={0}
+                    step={1}
+                    label={__('Value')}
+                />
+
+                {/* Select dropdown control for units */}
+                <SelectControl
+                    value={unit}
+                    options={unitOptions}
+                    onChange={(newUnit) => setUnit(newUnit)}
+                    label={__('Unit')}
+                />
+            </HStack>
+        </BaseControl>
+    );
+}