@powerhousedao/document-engineering 1.38.0 → 1.39.0

package/dist/src/ui/components/data-entry/number-input/number-input.stories.js

@@ -0,0 +1,249 @@
+import { getDefaultArgTypes, getValidationArgTypes, PrebuiltArgTypes, StorybookControlCategory, } from '../../../../scalars/lib/storybook-arg-types.js';
+import { NumberInput } from './number-input.js';
+/**
+ * The `NumberField` component provides an input field for entering and selecting numbers.
+ * It supports multiple configuration properties like:
+ * - label
+ * - description
+ * - precision
+ * - step
+ *
+ * Features include:
+ * - Customizable decimal precision
+ * - Min/Max value restrictions
+ * - Negative value support
+ * - Trailing zeros option
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [NumberField](?path=/docs/scalars-number-field--readme)
+ * > component.
+ */
+const meta = {
+    title: 'Data Entry/Number Input',
+    component: NumberInput,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ...getDefaultArgTypes({
+            valueControlType: 'number',
+            valueType: 'number',
+        }),
+        step: {
+            control: 'number',
+            description: 'Step value for the input field',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '1' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        autoFocus: {
+            table: {
+                disable: true,
+            },
+        },
+        numericType: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                'PositiveInt',
+                'NegativeInt',
+                'NonNegativeInt',
+                'NonPositiveInt',
+                'PositiveFloat',
+                'NegativeFloat',
+                'NonNegativeFloat',
+                'NonPositiveFloat',
+                'BigInt',
+                'Int',
+                'Float',
+            ],
+            description: 'Specifies the numeric type of the input field. Possible values are:\n\n\n' +
+                '- PositiveInt: Positive whole numbers (1, 2, 3)\n' +
+                '- NegativeInt: Negative whole numbers (-1, -2, -3)\n' +
+                '- NonNegativeInt: Zero and positive whole numbers (0, 2)\n' +
+                '- NonPositiveInt: Zero and negative whole numbers ( 0, -2)\n' +
+                '- PositiveFloat: Positive decimals (1.0, 2.5)\n' +
+                '- NegativeFloat: Negative decimals (-1.0, -2.5)\n' +
+                '- NonNegativeFloat: Zero and positive decimals (0.0, 1.0)\n' +
+                '- NonPositiveFloat: Zero and negative decimals (0.0, -1.0)\n' +
+                '- BigInt: Large integers (9999999999999999)\n' +
+                '- Float: Any decimal number (1.0, 2.5, -1.0, -2.5)\n' +
+                '- Int: Any integer number, including positive (1, 2), negative (-1, -2), and zero\n',
+            table: {
+                defaultValue: { summary: 'Float' },
+                type: {
+                    summary: '"PositiveInt" | "NegativeInt" | "NonNegativeInt" | "NonPositiveInt" | "PositiveFloat" | "NegativeFloat" | "NonNegativeFloat" | "NonPositiveFloat" | "BigInt" | "Int" | "Float"',
+                },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        enableStepCarets: {
+            control: 'boolean',
+            description: 'Enable step carets',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        ...PrebuiltArgTypes.placeholder,
+        ...getValidationArgTypes({
+            enabledArgTypes: {
+                validators: false,
+                showErrorOnBlur: false,
+                showErrorOnChange: false,
+            },
+        }),
+        ...PrebuiltArgTypes.minValue,
+        ...PrebuiltArgTypes.maxValue,
+        ...PrebuiltArgTypes.precision,
+        ...PrebuiltArgTypes.trailingZeros,
+        ...PrebuiltArgTypes.viewMode,
+        ...PrebuiltArgTypes.baseValue,
+    },
+    args: {
+        name: 'number-field',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        placeholder: '0',
+    },
+};
+export const Active = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        autoFocus: true,
+        value: 45,
+        placeholder: 'Enter a number',
+    },
+    parameters: {
+        pseudo: { focus: true },
+    },
+};
+export const Disable = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 1234,
+        disabled: true,
+    },
+};
+export const Required = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 345,
+        required: true,
+        placeholder: 'A number is required',
+    },
+};
+export const WithWarning = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 23,
+        warnings: ['Warning message'],
+        placeholder: 'Enter  number',
+    },
+};
+export const WithError = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 23,
+        errors: ['Error message'],
+        placeholder: 'Enter a number',
+    },
+};
+export const WithMultipleErrors = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 23,
+        errors: ['Error message number 1', 'Error message number 2', 'Error message number 3', 'Error message number 4'],
+        placeholder: 'Enter a number',
+    },
+};
+export const WithValue = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 23,
+        placeholder: 'Enter a number',
+    },
+};
+export const WithDescription = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 0,
+        description: 'This is the field description',
+        placeholder: 'Enter a number',
+    },
+};
+// Float Stories
+export const WithFloatNumber = {
+    args: {
+        label: 'Label',
+        name: 'Label',
+        value: 0.0,
+        precision: 2,
+        trailingZeros: true,
+        placeholder: 'Enter a decimal number',
+    },
+};
+// BigInt Stories
+export const WithBigInt = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 99992342343299,
+        numericType: 'BigInt',
+        placeholder: 'Enter a large number',
+    },
+};
+// Step Stories
+export const WithStep = {
+    args: {
+        name: 'Label',
+        label: 'Label',
+        value: 456,
+        step: 10,
+        minValue: 20,
+        placeholder: 'Enter a number',
+    },
+};
+export const WithDifferencesAddition = {
+    args: {
+        label: 'Number difference addition',
+        value: 345,
+        baseValue: 1345,
+        viewMode: 'addition',
+    },
+};
+export const WithDifferencesRemoval = {
+    args: {
+        label: 'Date difference removal',
+        value: 454,
+        baseValue: 2024,
+        viewMode: 'removal',
+    },
+};
+export const WithDifferencesMixed = {
+    args: {
+        label: 'Date difference mixed',
+        value: 3345,
+        baseValue: 345,
+        viewMode: 'mixed',
+    },
+};
+//# sourceMappingURL=number-input.stories.js.map

package/dist/src/ui/components/data-entry/number-input/number-input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.stories.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/number-input/number-input.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/number-input/number-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=number-input.test.d.ts.map

package/dist/src/ui/components/data-entry/number-input/number-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/number-input/number-input.test.tsx"],"names":[],"mappings":""}

package/dist/src/ui/components/data-entry/number-input/number-input.test.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { NumberInput } from './number-input.js';
+import { userEvent } from '@testing-library/user-event';
+import { MAX_SAFE_INTEGER } from '@powerhousedao/document-engineering/scalars/components/number-field/number-field-validations.js';
+describe('NumberInput', () => {
+    const mockOnChange = vi.fn();
+    beforeEach(() => {
+        mockOnChange.mockClear();
+    });
+    it('should match snapshot', () => {
+        const { container } = render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 345, trailingZeros: true, precision: 2 }));
+        expect(container).toMatchSnapshot();
+    });
+    it('should render error messages when provided', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, errors: ['Error 1', 'Error 2'], name: "Label" }));
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+    });
+    it('should render label when label is provided', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, name: "Label" }));
+        expect(screen.getByLabelText('Test Label')).toBeInTheDocument();
+    });
+    it('should render the description when provided', () => {
+        render(_jsx(NumberInput, { label: "Test Label", description: "This is a description", onChange: mockOnChange, name: "Label" }));
+        expect(screen.getByText('This is a description')).toBeInTheDocument();
+    });
+    it('should render error messages when provided', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, errors: ['Error 1', 'Error 2'], name: "Label" }));
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+    });
+    it('should render warning messages when provided', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, warnings: ['Warning 1', 'Warning 2'], name: "Label" }));
+        expect(screen.getByText('Warning 1')).toBeInTheDocument();
+        expect(screen.getByText('Warning 2')).toBeInTheDocument();
+    });
+    it('should disable the input when disabled prop is true', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, disabled: true, name: "Label" }));
+        const input = screen.getByLabelText('Test Label');
+        expect(input).toBeDisabled();
+    });
+    it('should show the input as required when required prop is true', () => {
+        render(_jsx(NumberInput, { label: "Test Label", onChange: mockOnChange, required: true, name: "Label" }));
+        expect(screen.getByRole('spinbutton')).toHaveAttribute('required');
+    });
+    it('should decrement value when decrement button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 10, step: 2, onChange: mockOnChange, enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input);
+        // Ensure that the input has focus
+        expect(input).toHaveFocus();
+        const decrementButton = screen.getByRole('button', { name: /Decrement/i });
+        await user.click(decrementButton);
+        // Ensure that the input has focus
+        expect(mockOnChange).toHaveBeenCalledTimes(1);
+        const eventArg = mockOnChange.mock.calls[0][0];
+        expect(eventArg.target).toMatchObject({
+            value: 8,
+        });
+    });
+    it('should not exceed maxValue when increment button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 10, maxValue: 10, step: 1, onChange: mockOnChange, enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input);
+        // Ensure that the input has focus
+        expect(input).toHaveFocus();
+        const incrementButton = screen.getByRole('button', { name: /Increment/i });
+        await user.click(incrementButton);
+        // // Asegúrate de que el input tiene foco
+        expect(mockOnChange).toHaveBeenCalledTimes(1);
+        const eventArg = mockOnChange.mock.calls[0][0];
+        expect(eventArg.target.value).toBe('10');
+    });
+    it('should not go below minValue when decrement button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 1, minValue: 1, step: 1, onChange: mockOnChange, enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input);
+        // Ensure that the input has focus
+        expect(input).toHaveFocus();
+        const decrementButton = screen.getByRole('button', { name: /Decrement/i });
+        await user.click(decrementButton);
+        expect(mockOnChange).toHaveBeenCalledTimes(1);
+        const eventArg = mockOnChange.mock.calls[0][0];
+        expect(eventArg.target.value).toBe('1');
+    });
+    it('should show placeholder when value is empty', async () => {
+        const placeholder = 'Enter a number';
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Number Field", name: "numberField", placeholder: placeholder }));
+        const input = screen.getByLabelText('Number Field');
+        await user.clear(input);
+        expect(input).toHaveAttribute('placeholder', placeholder);
+        expect(input).toHaveValue('');
+    });
+    it('should show placeholder when value is empty', async () => {
+        const placeholder = 'Enter a number';
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Number Field", name: "numberField", placeholder: placeholder }));
+        const input = screen.getByLabelText('Number Field');
+        await user.clear(input);
+        expect(input).toHaveAttribute('placeholder', placeholder);
+    });
+    it('should increment by specified step using keyboard', async () => {
+        const user = userEvent.setup();
+        const mockOnChange = vi.fn();
+        render(_jsx(NumberInput, { label: "Step Field", name: "stepField", value: 10, step: 2, onChange: mockOnChange }));
+        const input = screen.getByLabelText('Step Field');
+        await user.click(input); // Focus the input first
+        // Simulate ArrowUp key press
+        fireEvent.keyDown(input, { key: 'ArrowUp' });
+        const upEvent = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+        expect(upEvent.target.value).toBe(12);
+    });
+    it('should decrement by specified step using keyboard', async () => {
+        const user = userEvent.setup();
+        const mockOnChange = vi.fn();
+        render(_jsx(NumberInput, { label: "Step Field", name: "stepField", value: 10, step: 2, onChange: mockOnChange }));
+        const input = screen.getByLabelText('Step Field');
+        await user.click(input); // Focus the input first
+        // Simulate ArrowDown key press
+        fireEvent.keyDown(input, { key: 'ArrowDown' });
+        const downEvent = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+        expect(downEvent.target.value).toBe(8);
+    });
+    it('should call onChange when the input value changes', async () => {
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label" }));
+        const input = screen.getByLabelText('Test Label');
+        await user.clear(input);
+        await user.type(input, '10');
+        await user.tab();
+        expect(input).toHaveValue('10');
+    });
+    // Test for step
+    it('should increment the value when increment arrow button is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 5, step: 1, onChange: mockOnChange, enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input); // Simula el clic en el input
+        // Ensure that the input has focus
+        expect(input).toHaveFocus();
+        const incrementButton = screen.getByRole('button', { name: /Increment/i });
+        await user.click(incrementButton);
+        // Verify that `mockOnChange` was called and that the input remains focused
+        expect(mockOnChange).toHaveBeenCalledTimes(1);
+        expect(input).toHaveFocus();
+        const eventArg = mockOnChange.mock.calls[0][0];
+        expect(eventArg.target).toMatchObject({
+            value: 6,
+        });
+    });
+    it('should disable increment button  and not call onChange when value exceeds MAX_SAFE_INTEGER and numericType is not BigInt', async () => {
+        const user = userEvent.setup();
+        const unsafeValue = MAX_SAFE_INTEGER + 1;
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: unsafeValue, step: 1, onChange: mockOnChange, numericType: "Float", enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input);
+        expect(input).toHaveFocus();
+        const incrementButton = screen.getByRole('button', { name: /Increment/i });
+        expect(incrementButton).toBeDisabled();
+        // Verify that clicking the disabled button doesn't trigger onChange
+        await user.click(incrementButton);
+        expect(mockOnChange).not.toHaveBeenCalled();
+    });
+    it('should disable decrement button  and not call onChange when value exceeds MAX_SAFE_INTEGER and numericType is not BigInt', async () => {
+        const user = userEvent.setup();
+        const unsafeValue = MAX_SAFE_INTEGER + 1;
+        render(_jsx(NumberInput, { label: "Test Label", name: "Label", value: unsafeValue, step: 1, onChange: mockOnChange, numericType: "Int", enableStepCarets: true }));
+        const input = screen.getByRole('spinbutton');
+        await user.click(input);
+        expect(input).toHaveFocus();
+        const decrementButton = screen.getByRole('button', { name: /Decrement/i });
+        expect(decrementButton).toBeDisabled();
+        // Verify that clicking the disabled button doesn't trigger onChange
+        await user.click(decrementButton);
+        expect(mockOnChange).toHaveBeenCalledTimes(0);
+    });
+    describe('NumberInput differences', () => {
+        it('should show value when viewMode is addition', () => {
+            render(_jsx(NumberInput, { value: 345, baseValue: 1345, viewMode: "addition", name: "Label" }));
+            const input = screen.getByTestId('number-input-diff');
+            expect(input).toBeInTheDocument();
+            expect(screen.getByText('345')).toBeInTheDocument();
+            expect(screen.queryByText('1345')).not.toBeInTheDocument();
+        });
+        it('should show baseValue when viewMode is removal', () => {
+            render(_jsx(NumberInput, { value: 454, baseValue: 2024, viewMode: "removal", name: "Label" }));
+            const input = screen.getByTestId('number-input-diff');
+            expect(input).toBeInTheDocument();
+            expect(screen.queryByText('454')).not.toBeInTheDocument();
+            expect(screen.getByText('2024')).toBeInTheDocument();
+        });
+        it('should show value and baseValue when viewMode is mixed', () => {
+            render(_jsx(NumberInput, { value: 878, baseValue: 454, viewMode: "mixed", name: "Label" }));
+            const input = screen.getByTestId('number-input-diff');
+            expect(input).toBeInTheDocument();
+            expect(screen.getByText('878')).toBeInTheDocument();
+            expect(screen.getByText('454')).toBeInTheDocument();
+        });
+    });
+    describe('Controlled and Uncontrolled Input Behavior', () => {
+        it('should display empty input when no value is provided', () => {
+            render(_jsx(NumberInput, { label: "Test Label", name: "Label", onChange: mockOnChange }));
+            const input = screen.getByRole('spinbutton');
+            expect(input).toHaveValue('');
+        });
+        it('should display defaultValue when value is undefined', () => {
+            render(_jsx(NumberInput, { label: "Test Label", name: "Label", defaultValue: 100, onChange: mockOnChange }));
+            const input = screen.getByRole('spinbutton');
+            expect(input).toHaveValue('100');
+        });
+        it('should switch between controlled and uncontrolled modes without warnings', () => {
+            const { rerender } = render(_jsx(NumberInput, { label: "Test Label", name: "Label", onChange: mockOnChange }));
+            const input = screen.getByRole('spinbutton');
+            expect(input).toHaveValue('');
+            rerender(_jsx(NumberInput, { label: "Test Label", name: "Label", value: 25, onChange: mockOnChange }));
+            expect(input).toHaveValue('25');
+            rerender(_jsx(NumberInput, { label: "Test Label", name: "Label", onChange: mockOnChange }));
+            expect(input).toHaveValue('');
+        });
+        it('should show carets when enableStepCarets is true', () => {
+            render(_jsx(NumberInput, { label: "Test Label", name: "Label", enableStepCarets: true }));
+            const incrementButton = screen.getByRole('button', { name: /Increment/i });
+            const decrementButton = screen.getByRole('button', { name: /Decrement/i });
+            expect(incrementButton).toBeInTheDocument();
+            expect(decrementButton).toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=number-input.test.js.map

package/dist/src/ui/components/data-entry/number-input/number-input.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.test.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/number-input/number-input.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/number-input/use-number-input.d.ts

@@ -19,7 +19,7 @@ export declare const useNumberInput: ({ value, maxValue, minValue, step, onChang
     preventLetterInput: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     isBigInt: boolean | undefined;
     handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
-    buttonRef: import("react").RefObject<HTMLButtonElement>;
+    buttonRef: import("react").RefObject<HTMLButtonElement | null>;
 };
 export {};
 //# sourceMappingURL=use-number-input.d.ts.map

package/dist/src/ui/components/data-entry/oid-input/oid-input.stories.d.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OIDInput } from './oid-input.js';
+/**
+ * ## Autocomplete input component
+ *
+ * `OIDInput` is a specialized input component for handling OIDs (Object Identifiers) with advanced
+ * autocomplete functionality. It allows users to search and select items intuitively as they type.
+ *
+ * ### Important configs:
+ *
+ * **1.`fetchOptionsCallback` (for dynamic autocomplete)**
+ * - Executes while the user types in the input field
+ * - Receives the user's input text as a parameter
+ * - Must return a list of options that match the search criteria
+ * - Enables real-time search from APIs, databases, or others external or internal data sources
+ *
+ * **2.`fetchSelectedOptionCallback` (to update the preview of the selected option)**
+ * - Called when the "refresh" button in the preview of the selected option is clicked
+ * - Receives the selected option's ID/value as a parameter
+ * - Must return the updated details of that specific option or undefined if the option is not found for some reason
+ * - As `fetchOptionsCallback` can be used synchronously or asynchronously
+ *
+ * ### Basic usage example:
+ *
+ * ```tsx
+ * <OIDInput
+ *   name="object-selector"
+ *   label="Select Object"
+ *   placeholder="uuid"
+ *   variant="withValueTitleAndDescription"
+ *
+ *   // search options as the user types
+ *   fetchOptionsCallback={async (userInput) => {
+ *     const results = await searchObjects(userInput)
+ *     return results.map(obj => ({
+ *       value: obj.id, // unique object ID
+ *       title: obj.title, // object title or name
+ *       path: obj.path, // object path or location
+ *       description: obj.description, // object description or summary
+ *       icon: obj.icon // object icon
+ *     }))
+ *   }}
+ *
+ *   // get details of a specific option by its ID/value
+ *   fetchSelectedOptionCallback={async (objectId) => {
+ *     const obj = await getObjectById(objectId)
+ *     return {
+ *       value: obj.id,
+ *       title: obj.title,
+ *       path: obj.path,
+ *       description: obj.description,
+ *       icon: obj.icon
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [OIDField](?path=/docs/scalars-oid-field--readme)
+ * > component.
+ */
+declare const meta: Meta<typeof OIDInput>;
+export default meta;
+type Story = StoryObj<typeof OIDInput>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Open: Story;
+export declare const Filled: Story;
+export declare const WithDifferencesAddition: Story;
+export declare const WithDifferencesRemoval: Story;
+export declare const WithDifferencesMixed: Story;
+//# sourceMappingURL=oid-input.stories.d.ts.map

package/dist/src/ui/components/data-entry/oid-input/oid-input.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oid-input.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/oid-input/oid-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAQtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA+JC,CAAA;AAEjC,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiDtC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAyBlB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAuBpB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAmCrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAmCpC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAmClC,CAAA"}