newskit 7.3.0 → 7.4.0

package/esm/stories/form.stories.js

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Form, FormInput, FormInputAssistiveText, FormInputCheckbox, FormInputLabel, FormInputRadioButton, FormInputSelect, FormInputTextField, } from '..';
+import { Button } from '../button';
+import { Block } from '../block';
+import { IconFilledRemoveRedEye, IconFilledStop } from '../icons';
+import { IconButton } from '../icon-button';
+import { Fieldset } from '../fieldset';
+import { SelectOption } from '../select';
+import { RadioGroup } from '../radio-button';
+import { StorybookPage } from '../test/storybook-comps';
+export default {
+    title: 'Composed/Form',
+    component: function () { return 'None'; },
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': { index: -1 },
+            'storybook/docs/panel': { hidden: true },
+        },
+        viewMode: 'story',
+        docs: {
+            page: null,
+        },
+    },
+};
+var ShowPasswordButton = function (_a) {
+    var onClick = _a.onClick, isVisible = _a.isVisible;
+    return (React.createElement(IconButton, { "aria-label": "toggle password", onClick: onClick, size: "small", overrides: { stylePreset: 'iconButtonMinimalPrimary' } }, isVisible ? (React.createElement(IconFilledStop, { overrides: { size: 'iconSize010' } })) : (React.createElement(IconFilledRemoveRedEye, { overrides: { size: 'iconSize010' } }))));
+};
+export var StoryFormComplete = function () {
+    var _a = React.useState(false), showPassword = _a[0], toggleShowPassword = _a[1];
+    return (React.createElement(StorybookPage, null,
+        React.createElement(Form, { onSubmit: console.log },
+            React.createElement(Fieldset, { legend: "Personal" },
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "first-name", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 2,
+                                message: 'Name must be at least 2 characters long',
+                            },
+                        } },
+                        React.createElement(FormInputLabel, null, "First name"),
+                        React.createElement(FormInputTextField, null),
+                        React.createElement(FormInputAssistiveText, null, "Enter your first name"))),
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "last-name", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 2,
+                                message: 'Name must be at least 2 characters long',
+                            },
+                        } },
+                        React.createElement(FormInputLabel, null, "Last name"),
+                        React.createElement(FormInputTextField, null),
+                        React.createElement(FormInputAssistiveText, null, "Enter your last name"))),
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "country", rules: {
+                            required: 'Required field',
+                        } },
+                        React.createElement(FormInputLabel, null, "Country"),
+                        React.createElement(FormInputSelect, null,
+                            React.createElement(SelectOption, { value: "BG" }, "Bulgaria"),
+                            React.createElement(SelectOption, { value: "UK" }, "United Kingdom"),
+                            React.createElement(SelectOption, { value: "NL" }, "The Netherlands"),
+                            React.createElement(SelectOption, { value: "DE" }, "Germany")),
+                        React.createElement(FormInputAssistiveText, null, "Enter your last name")))),
+            React.createElement(Fieldset, { legend: "Login information" },
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "email", rules: {
+                            required: 'Required field',
+                            pattern: /^\S+@\S+$/i,
+                        } },
+                        React.createElement(FormInputLabel, null, "Email"),
+                        React.createElement(FormInputTextField, { type: "email" }),
+                        React.createElement(FormInputAssistiveText, null, "Enter your email"))),
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "password", rules: {
+                            required: 'Required field',
+                            minLength: {
+                                value: 8,
+                                message: 'Name must be at least 8 characters long',
+                            },
+                        } },
+                        React.createElement(FormInputLabel, null, "Password"),
+                        React.createElement(FormInputTextField, { type: showPassword ? 'text' : 'password', endEnhancer: React.createElement(ShowPasswordButton, { onClick: function () { return toggleShowPassword(!showPassword); }, isVisible: showPassword }) }),
+                        React.createElement(FormInputAssistiveText, null, "Enter your password")))),
+            React.createElement(Fieldset, { legend: "Subscription type" },
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "subscription", rules: {
+                            required: 'Required field',
+                        } },
+                        React.createElement(RadioGroup, null,
+                            React.createElement(FormInputRadioButton, { id: "subscription-online", value: "online", label: "Online", overrides: { marginBlockEnd: 'space020' } }),
+                            React.createElement(FormInputRadioButton, { id: "subscription-print", value: "print", label: "Print", overrides: { marginBlockEnd: 'space020' } }),
+                            React.createElement(FormInputRadioButton, { id: "subscription-both", value: "both", label: "Online and print", overrides: { marginBlockEnd: 'space020' } })),
+                        React.createElement(FormInputAssistiveText, null, "Make your choice")))),
+            React.createElement(Fieldset, { legend: "Interests" },
+                React.createElement(Block, { marginBlockStart: "space020", marginBlockEnd: "space050" },
+                    React.createElement(FormInput, { name: "interests", rules: {
+                            required: 'Required field',
+                            validate: function (value) {
+                                if (value.length < 3) {
+                                    return 'Select at least 3 interests';
+                                }
+                                return true;
+                            },
+                        } },
+                        React.createElement(FormInputCheckbox, { id: "interests-politics", value: "politics", label: "Politics", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputCheckbox, { id: "interests-business", value: "Business", label: "Business", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputCheckbox, { id: "interests-society", value: "Society", label: "Society", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputCheckbox, { id: "interests-technology", value: "Technology", label: "Technology", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputCheckbox, { id: "interests-sport", value: "Sport", label: "Sport", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputCheckbox, { id: "interests-science", value: "Science", label: "Science", overrides: { marginBlockEnd: 'space020' } }),
+                        React.createElement(FormInputAssistiveText, null, "Make your choice")))),
+            React.createElement(Button, { type: "submit" }, "Register"))));
+};
+StoryFormComplete.storyName = 'Complete';
+//# sourceMappingURL=form.stories.js.map

package/esm/stories/form.stories.js.map

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

package/esm/stories/slices.stories.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { Story as StoryType } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: () => string;
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': {
+                index: number;
+            };
+            'storybook/docs/panel': {
+                hidden: boolean;
+            };
+        };
+        viewMode: string;
+        docs: {
+            page: null;
+        };
+    };
+    decorators: ((Story: StoryType, context: {
+        name: string;
+        globals: {
+            backgrounds: {
+                value: string;
+            };
+        };
+    }) => JSX.Element)[];
+};
+export default _default;
+export declare const TheSunStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+export declare const TheTimesStory: {
+    (): JSX.Element;
+    storyName: string;
+};
+//# sourceMappingURL=slices.stories.d.ts.map

package/esm/stories/slices.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slices.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/slices.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,KAAK,IAAI,SAAS,EAAC,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;yBA+EvC,SAAS,WACP;QAAC,MAAM,MAAM,CAAC;QAAC,OAAO,EAAE;YAAC,WAAW,EAAE;gBAAC,KAAK,EAAE,MAAM,CAAA;aAAC,CAAA;SAAC,CAAA;KAAC;;AAhBtE,wBA6BE;AAEF,eAAO,MAAM,WAAW;;;CAyBvB,CAAC;AAiFF,eAAO,MAAM,aAAa;;;CAmEzB,CAAC"}

package/esm/stories/slices.stories.js

@@ -0,0 +1,141 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { Divider, GridLayout, GridLayoutItem, IconButton, ThemeProvider, TitleBar, } from '..';
+import { createCustomThemeWithBaseThemeSwitch } from '../test/theme-select-object';
+import { IconFilledChevronRight } from '../icons';
+import { CardVerticalResponsive, CardHorizontalResponsive, stylePresets as stylePresetsTheSun, } from '../card-composable/__tests__/the-sun-cards';
+import { LeadCard as TheTimesLeadCard, SecondLevelCard as TheTimesSecondLevelCard, ThirdLevelCard as TheTimesThirdLevelCard, } from '../card-composable/__tests__/the-times-cards';
+import { defaultFocusVisible } from '../utils/default-focus-visible';
+var themeOverrides = {
+    overrides: {
+        stylePresets: __assign({ divider: {
+                base: {
+                    borderStyle: 'solid',
+                    borderColor: '{{colors.interface030}}',
+                    borderWidth: '{{borders.borderWidthDefault}}',
+                },
+            }, cardContainer: {
+                base: {
+                    backgroundColor: '{{colors.transparent}}',
+                },
+            }, cardHeadline: {
+                base: {
+                    color: 'currentColor',
+                },
+            }, cardLink: {
+                base: {
+                    textDecoration: 'none',
+                    color: '{{colors.inkContrast}}',
+                },
+                hover: {
+                    color: '{{colors.interactiveLink020}}',
+                },
+                'focus-visible': defaultFocusVisible,
+            } }, stylePresetsTheSun),
+        componentDefaults: {
+            cardLink: {
+                stylePreset: 'cardLink',
+            },
+        },
+    },
+};
+export default {
+    title: 'Composed/Slices',
+    component: function () { return 'None'; },
+    parameters: {
+        previewTabs: {
+            'storybook/canvas/panel': { index: -1 },
+            'storybook/docs/panel': { hidden: true },
+        },
+        viewMode: 'story',
+        docs: {
+            page: null,
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var _a, _b;
+            return (React.createElement(ThemeProvider, { theme: createCustomThemeWithBaseThemeSwitch((_b = (_a = context === null || context === void 0 ? void 0 : context.globals) === null || _a === void 0 ? void 0 : _a.backgrounds) === null || _b === void 0 ? void 0 : _b.value, themeOverrides, context === null || context === void 0 ? void 0 : context.name) },
+                React.createElement(Story, null)));
+        },
+    ],
+};
+export var TheSunStory = function () { return (React.createElement(GridLayout, { overrides: {
+        maxWidth: { xs: '340px', md: '620px', lg: '940px' },
+        marginInline: 'auto',
+    }, columns: { xs: '1fr', lg: '2fr 1fr' }, columnGap: "space040", rowGap: "space050" },
+    React.createElement(GridLayoutItem, null,
+        React.createElement(CardVerticalResponsive, null)),
+    React.createElement(GridLayout, { columns: { xs: '1fr', md: '1fr 1fr', lg: '1fr' }, columnGap: "space040", rowGap: "space050", alignContent: "space-between" },
+        React.createElement(CardHorizontalResponsive, null),
+        React.createElement(CardHorizontalResponsive, null),
+        React.createElement(CardHorizontalResponsive, null),
+        React.createElement(CardHorizontalResponsive, null)))); };
+TheSunStory.storyName = 'The Sun';
+var SecondLevelArticlesGroup = function () {
+    var areas = {
+        xs: "\n      p1 d1 p2\n      d2 d1 d3\n      p3 d1 p4\n    ",
+        md: "\n      p1 d1 p2 d2 p3 d3 p4\n    ",
+        lg: "\n      p1\n      d1\n      p2\n      d2\n      p3\n      d3\n      p4\n    ",
+        xl: "\n      p1 d1 p2\n      d2 d1 d3\n      p3 d1 p4\n    ",
+    };
+    return (React.createElement(GridLayout, { areas: areas, columns: {
+            xs: '1fr auto 1fr',
+            md: '1fr auto 1fr auto 1fr auto 1fr',
+            lg: '1fr',
+            xl: '1fr auto 1fr',
+        }, columnGap: "space040", rowGap: "space040" },
+        React.createElement(GridLayoutItem, { area: "p1" },
+            React.createElement(TheTimesSecondLevelCard, null)),
+        React.createElement(GridLayoutItem, { area: "d1" },
+            React.createElement(Divider, { vertical: { xs: true, lg: false, xl: true } })),
+        React.createElement(GridLayoutItem, { area: "p2" },
+            React.createElement(TheTimesSecondLevelCard, null)),
+        React.createElement(GridLayoutItem, { area: "d2" },
+            React.createElement(Divider, { vertical: { xs: false, md: true, lg: false } })),
+        React.createElement(GridLayoutItem, { area: "p3" },
+            React.createElement(TheTimesSecondLevelCard, null)),
+        React.createElement(GridLayoutItem, { area: "d3" },
+            React.createElement(Divider, { vertical: { xs: false, md: true, lg: false } })),
+        React.createElement(GridLayoutItem, { area: "p4" },
+            React.createElement(TheTimesSecondLevelCard, null))));
+};
+var ThirdLevelArticlesGroup = function () { return (React.createElement(GridLayout, { columns: {
+        xs: '1fr',
+        md: '1fr auto 1fr',
+    }, columnGap: "space040", rowGap: "space040" },
+    React.createElement(TheTimesThirdLevelCard, null),
+    React.createElement(Divider, { vertical: { xs: false, md: true } }),
+    React.createElement(TheTimesThirdLevelCard, null))); };
+export var TheTimesStory = function () {
+    var button = function () { return (React.createElement(IconButton, { href: "/", size: "medium", title: "more articles" },
+        React.createElement(IconFilledChevronRight, null))); };
+    var mainAreas = {
+        xs: "\n      lead\n      d1\n      second\n      d2\n      third\n    ",
+        lg: "\n      lead  d1 second\n      d2    d1 second\n      third d1 second\n    ",
+    };
+    return (React.createElement(GridLayout, { overrides: { maxWidth: '1300px', marginInline: 'auto' }, rowGap: "space040" },
+        React.createElement(TitleBar, { headingAs: "h2", actionItem: button, overrides: {
+                paddingInline: 'space000',
+                heading: {
+                    typographyPreset: 'editorialHeadline040',
+                },
+            } }, "Title bar"),
+        React.createElement(GridLayout, { areas: mainAreas, columnGap: "space040", rowGap: "space040", columns: {
+                xs: '1fr',
+                lg: '1fr auto 232px',
+                xl: '1fr auto 402px',
+            } },
+            React.createElement(GridLayoutItem, { area: "lead" },
+                React.createElement(TheTimesLeadCard, null)),
+            React.createElement(GridLayoutItem, { area: "d1" },
+                React.createElement(Divider, { vertical: { xs: false, lg: true } })),
+            React.createElement(GridLayoutItem, { area: "second" },
+                React.createElement(SecondLevelArticlesGroup, null)),
+            React.createElement(GridLayoutItem, { area: "d2" },
+                React.createElement(Divider, null)),
+            React.createElement(GridLayoutItem, { area: "third" },
+                React.createElement(ThirdLevelArticlesGroup, null)))));
+};
+TheTimesStory.storyName = 'The Times';
+//# sourceMappingURL=slices.stories.js.map

package/esm/stories/slices.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slices.stories.js","sourceRoot":"","sources":["../../../src/stories/slices.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,OAAO,EACP,UAAU,EACV,cAAc,EACd,UAAU,EACV,aAAa,EACb,QAAQ,GACT,MAAM,IAAI,CAAC;AACZ,OAAO,EAAC,oCAAoC,EAAC,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,UAAU,CAAC;AAEhD,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,YAAY,IAAI,kBAAkB,GACnC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,eAAe,IAAI,uBAAuB,EAC1C,cAAc,IAAI,sBAAsB,GACzC,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAAC,mBAAmB,EAAC,MAAM,gCAAgC,CAAC;AAEnE,IAAM,cAAc,GAAG;IACrB,SAAS,EAAE;QACT,YAAY,aACV,OAAO,EAAE;gBACP,IAAI,EAAE;oBACJ,WAAW,EAAE,OAAO;oBACpB,WAAW,EAAE,yBAAyB;oBACtC,WAAW,EAAE,gCAAgC;iBAC9C;aACF,EACD,aAAa,EAAE;gBACb,IAAI,EAAE;oBACJ,eAAe,EAAE,wBAAwB;iBAC1C;aACF,EACD,YAAY,EAAE;gBACZ,IAAI,EAAE;oBACJ,KAAK,EAAE,cAAc;iBACtB;aACF,EACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,cAAc,EAAE,MAAM;oBACtB,KAAK,EAAE,wBAAwB;iBAChC;gBACD,KAAK,EAAE;oBACL,KAAK,EAAE,+BAA+B;iBACvC;gBACD,eAAe,EAAE,mBAAmB;aACrC,IACE,kBAAkB,CACtB;QACD,iBAAiB,EAAE;YACjB,QAAQ,EAAE;gBACR,WAAW,EAAE,UAAU;aACxB;SACF;KACF;CACF,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,cAAM,OAAA,MAAM,EAAN,CAAM;IACvB,UAAU,EAAE;QACV,WAAW,EAAE;YACX,wBAAwB,EAAE,EAAC,KAAK,EAAE,CAAC,CAAC,EAAC;YACrC,sBAAsB,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC;SACvC;QACD,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,UAAU,EAAE;QACV,UACE,KAAgB,EAChB,OAAgE;;YAC7D,OAAA,CACH,oBAAC,aAAa,IACZ,KAAK,EAAE,oCAAoC,CACzC,MAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,0CAAE,WAAW,0CAAE,KAAK,EACpC,cAAc,EACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CACd;gBAED,oBAAC,KAAK,OAAG,CACK,CACjB,CAAA;SAAA;KACF;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,CAC/B,oBAAC,UAAU,IACT,SAAS,EAAE;QACT,QAAQ,EAAE,EAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAC;QACjD,YAAY,EAAE,MAAM;KACrB,EACD,OAAO,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAC,EACnC,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,UAAU;IAEjB,oBAAC,cAAc;QACb,oBAAC,sBAAsB,OAAG,CACX;IACjB,oBAAC,UAAU,IACT,OAAO,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAC,EAC9C,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,UAAU,EACjB,YAAY,EAAC,eAAe;QAE5B,oBAAC,wBAAwB,OAAG;QAC5B,oBAAC,wBAAwB,OAAG;QAC5B,oBAAC,wBAAwB,OAAG;QAC5B,oBAAC,wBAAwB,OAAG,CACjB,CACF,CACd,EAzBgC,CAyBhC,CAAC;AACF,WAAW,CAAC,SAAS,GAAG,SAAS,CAAC;AAElC,IAAM,wBAAwB,GAAG;IAC/B,IAAM,KAAK,GAAG;QACZ,EAAE,EAAE,wDAIH;QACD,EAAE,EAAE,oCAEH;QACD,EAAE,EAAE,8EAQH;QACD,EAAE,EAAE,wDAIH;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE;YACP,EAAE,EAAE,cAAc;YAClB,EAAE,EAAE,gCAAgC;YACpC,EAAE,EAAE,KAAK;YACT,EAAE,EAAE,cAAc;SACnB,EACD,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,UAAU;QAEjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,uBAAuB,OAAG,CACZ;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,OAAO,IAAC,QAAQ,EAAE,EAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAC,GAAI,CACvC;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,uBAAuB,OAAG,CACZ;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,OAAO,IAAC,QAAQ,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,GAAI,CACxC;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,uBAAuB,OAAG,CACZ;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,OAAO,IAAC,QAAQ,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,GAAI,CACxC;QACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;YACvB,oBAAC,uBAAuB,OAAG,CACZ,CACN,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,uBAAuB,GAAG,cAAM,OAAA,CACpC,oBAAC,UAAU,IACT,OAAO,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,cAAc;KACnB,EACD,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,UAAU;IAEjB,oBAAC,sBAAsB,OAAG;IAC1B,oBAAC,OAAO,IAAC,QAAQ,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAC,GAAI;IAC5C,oBAAC,sBAAsB,OAAG,CACf,CACd,EAbqC,CAarC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAM,MAAM,GAAG,cAAM,OAAA,CACnB,oBAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe;QACtD,oBAAC,sBAAsB,OAAG,CACf,CACd,EAJoB,CAIpB,CAAC;IAEF,IAAM,SAAS,GAAG;QAChB,EAAE,EAAE,mEAMH;QACD,EAAE,EAAE,6EAIH;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,EAAC,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAC,EACrD,MAAM,EAAC,UAAU;QAEjB,oBAAC,QAAQ,IACP,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE;gBACT,aAAa,EAAE,UAAU;gBACzB,OAAO,EAAE;oBACP,gBAAgB,EAAE,sBAAsB;iBACzC;aACF,gBAGQ;QACX,oBAAC,UAAU,IACT,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,UAAU,EACpB,MAAM,EAAC,UAAU,EACjB,OAAO,EAAE;gBACP,EAAE,EAAE,KAAK;gBACT,EAAE,EAAE,gBAAgB;gBACpB,EAAE,EAAE,gBAAgB;aACrB;YAED,oBAAC,cAAc,IAAC,IAAI,EAAC,MAAM;gBACzB,oBAAC,gBAAgB,OAAG,CACL;YACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;gBACvB,oBAAC,OAAO,IAAC,QAAQ,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAC,GAAI,CAC7B;YACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,QAAQ;gBAC3B,oBAAC,wBAAwB,OAAG,CACb;YACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,IAAI;gBACvB,oBAAC,OAAO,OAAG,CACI;YACjB,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO;gBAC1B,oBAAC,uBAAuB,OAAG,CACZ,CACN,CACF,CACd,CAAC;AACJ,CAAC,CAAC;AACF,aAAa,CAAC,SAAS,GAAG,WAAW,CAAC"}

package/esm/text-field/types.d.ts

@@ -26,6 +26,7 @@ declare type FormEntryChildrenProps = {
     ref: UseFormRegisterReturn['ref'];
     refObject: React.RefObject<HTMLInputElement>;
     error?: string;
+    hasContent: boolean;
 };
 declare type FormValidationRules = Record<string, string | object>;
 export declare type FormEntryProps = {

package/esm/text-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,GAAG;QAC9B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACvB,KAAK,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACnB,gBAAgB,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAC9B,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACxB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,uBAAuB,EAAE,SAAS;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D,oBAAY,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAAC;CACjE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,qBAAqB,EAAC,MAAM,iCAAiC,CAAC;AACtE,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAElC,oBAAY,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,iBAAiB,GAAG;QAC9B,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACzB,SAAS,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACvB,KAAK,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACnB,gBAAgB,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAC9B,UAAU,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QACxB,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;KAC1B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,uBAAuB,EAAE,SAAS;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,aAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,GAAG,EAAE,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,aAAK,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAE3D,oBAAY,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,YAAY,CAAC;CACjE,CAAC"}