@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Flex/Flex.story.js

@@ -0,0 +1,200 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Box, Flex as NDSFlex } from "../index";
+import styled from "styled-components";
+const Flex = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(NDSFlex, Object.assign({ padding: "x3", bg: "whiteGrey", minHeight: "400px", style: {
+            boxSizing: "content-box",
+        } }, props), children));
+};
+const StyledBox = styled(Box)(({ theme }) => ({
+    padding: theme.space.x6,
+    background: theme.colors.grey,
+    outline: `2px dotted ${theme.colors.darkGrey}`,
+}));
+export default {
+    title: "Components/Flex",
+};
+export const _Flex = () => (React.createElement(Flex, { style: {
+        boxSizing: "content-box",
+    }, padding: "x3", bg: "whiteGrey" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+export const FlexDirectionSetToRowReverse = () => (React.createElement(Flex, { style: {
+        boxSizing: "content-box",
+    }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+FlexDirectionSetToRowReverse.story = {
+    name: "flexDirection set to row-reverse",
+};
+export const FlexDirectionSetToColumn = () => (React.createElement(Flex, { flexDirection: "column" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+FlexDirectionSetToColumn.story = {
+    name: "flexDirection set to column",
+};
+export const FlexDirectionSetToColumnReverse = () => (React.createElement(Flex, { flexDirection: "column-reverse" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+FlexDirectionSetToColumnReverse.story = {
+    name: "flexDirection set to column-reverse",
+};
+export const FlexWrapSetToNoWrapDefault = () => (React.createElement(Box, { width: 500 },
+    React.createElement(Flex, { flexWrap: "nowrap" },
+        React.createElement(StyledBox, null, "1"),
+        React.createElement(StyledBox, null, "2"),
+        React.createElement(StyledBox, null, "3"),
+        React.createElement(StyledBox, null, "4"),
+        React.createElement(StyledBox, null, "5"),
+        React.createElement(StyledBox, null, "6"),
+        React.createElement(StyledBox, null, "7"))));
+FlexWrapSetToNoWrapDefault.story = {
+    name: "flexWrap set to no-wrap (default)",
+};
+export const FlexWrapSetToWrap = () => (React.createElement(Box, { width: 500 },
+    React.createElement(Flex, { flexWrap: "wrap" },
+        React.createElement(StyledBox, null, "1"),
+        React.createElement(StyledBox, null, "2"),
+        React.createElement(StyledBox, null, "3"),
+        React.createElement(StyledBox, null, "4"),
+        React.createElement(StyledBox, null, "5"),
+        React.createElement(StyledBox, null, "6"),
+        React.createElement(StyledBox, null, "7"))));
+FlexWrapSetToWrap.story = {
+    name: "flexWrap set to wrap",
+};
+export const FlexWrapSetToWrapReverse = () => (React.createElement(Box, { width: 500 },
+    React.createElement(Flex, { flexWrap: "wrap-reverse" },
+        React.createElement(StyledBox, null, "1"),
+        React.createElement(StyledBox, null, "2"),
+        React.createElement(StyledBox, null, "3"),
+        React.createElement(StyledBox, null, "4"),
+        React.createElement(StyledBox, null, "5"),
+        React.createElement(StyledBox, null, "6"),
+        React.createElement(StyledBox, null, "7"))));
+FlexWrapSetToWrapReverse.story = {
+    name: "flexWrap set to wrap-reverse",
+};
+export const JustifyContentSetToFlexStartDefault = () => (React.createElement(Flex, { justifyContent: "flex-start" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToFlexStartDefault.story = {
+    name: "justifyContent set to flex-start (default)",
+};
+export const JustifyContentSetToFlexEnd = () => (React.createElement(Flex, { justifyContent: "flex-end" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToFlexEnd.story = {
+    name: "justifyContent set to flex-end",
+};
+export const JustifyContentSetToCenter = () => (React.createElement(Flex, { justifyContent: "center" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToCenter.story = {
+    name: "justifyContent set to center",
+};
+export const JustifyContentSetToSpaceBetween = () => (React.createElement(Flex, { justifyContent: "space-between" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToSpaceBetween.story = {
+    name: "justifyContent set to space-between",
+};
+export const JustifyContentSetToSpaceAround = () => (React.createElement(Flex, { justifyContent: "space-around" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToSpaceAround.story = {
+    name: "justifyContent set to space-around",
+};
+export const JustifyContentSetToSpaceEvenly = () => (React.createElement(Flex, { justifyContent: "space-evenly" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+JustifyContentSetToSpaceEvenly.story = {
+    name: "justifyContent set to space-evenly",
+};
+export const AlignItemsSetToStretchDefault = () => (React.createElement(Flex, { alignItems: "stretch" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+AlignItemsSetToStretchDefault.story = {
+    name: "alignItems set to stretch (default)",
+};
+export const AlignItemsSetToFlexStart = () => (React.createElement(Flex, { alignItems: "flex-start" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+AlignItemsSetToFlexStart.story = {
+    name: "alignItems set to flex-start",
+};
+export const AlignItemsSetToCenter = () => (React.createElement(Flex, { alignItems: "center" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+AlignItemsSetToCenter.story = {
+    name: "alignItems set to center",
+};
+export const AlignItemsSetToFlexEnd = () => (React.createElement(Flex, { alignItems: "flex-end" },
+    React.createElement(StyledBox, null, "1"),
+    React.createElement(StyledBox, null, "2"),
+    React.createElement(StyledBox, null, "3"),
+    React.createElement(StyledBox, null, "4"),
+    React.createElement(StyledBox, null, "5")));
+AlignItemsSetToFlexEnd.story = {
+    name: "alignItems set to flex-end",
+};
+export const WithCustomOrder = () => (React.createElement(Flex, null,
+    React.createElement(StyledBox, { order: 1 }, "1"),
+    React.createElement(StyledBox, { order: 3 }, "2"),
+    React.createElement(StyledBox, { order: 2 }, "3"),
+    React.createElement(StyledBox, { order: 5 }, "4"),
+    React.createElement(StyledBox, { order: 4 }, "5")));
+WithCustomOrder.story = {
+    name: "With custom order",
+};

package/dist/src/Flex/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Flex } from "./Flex";
-export { InlineFlex } from "./Flex";
+export { default as Flex } from "./Flex";
+export { InlineFlex } from "./Flex";

package/dist/src/Flex/index.js

@@ -0,0 +1,2 @@
+export { default as Flex } from "./Flex";
+export { InlineFlex } from "./Flex";

package/dist/src/Form/Field.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { BoxProps } from "../Box/Box";
-export type FieldProps = BoxProps;
-declare const Field: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, never>> & string;
-export default Field;
+/// <reference types="react" />
+import { BoxProps } from "../Box/Box";
+export type FieldProps = BoxProps;
+declare const Field: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, never>> & string;
+export default Field;

package/dist/src/Form/Field.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { Box } from "../Box";
+import { addStyledProps } from "../StyledProps";
+const Field = styled(Box)({
+    width: "100%",
+}, addStyledProps);
+export default Field;

package/dist/src/Form/Fieldset.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
-export default Fieldset;
+/// <reference types="react" />
+declare const Fieldset: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, never>> & string;
+export default Fieldset;

package/dist/src/Form/Fieldset.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { space } from "styled-system";
+const Fieldset = styled.fieldset({
+    padding: 0,
+    border: 0,
+    margin: 0,
+    legend: {
+        padding: 0,
+    },
+    width: "100%",
+}, space);
+export default Fieldset;

package/dist/src/Form/Form.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
-import type { SpaceProps } from "styled-system";
-interface FormProps extends SpaceProps, React.HTMLProps<HTMLFormElement> {
-}
-declare const Form: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<FormProps, "ref"> & {
-    ref?: React.Ref<HTMLFormElement>;
-}, never>> & string & Omit<({ title, children, ...props }: FormProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export default Form;
+import * as React from "react";
+import type { SpaceProps } from "styled-system";
+interface FormProps extends SpaceProps, React.HTMLProps<HTMLFormElement> {
+}
+declare const Form: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<FormProps, "ref"> & {
+    ref?: React.Ref<HTMLFormElement>;
+}, never>> & string & Omit<({ title, children, ...props }: FormProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export default Form;

package/dist/src/Form/Form.js

@@ -0,0 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import styled from "styled-components";
+import { space } from "styled-system";
+import { Heading2 } from "../Type";
+import { Alert } from "../Alert";
+import Field from "./Field";
+import Fieldset from "./Fieldset";
+import FormSection from "./FormSection";
+const FormStyles = ({ title, theme }) => ({
+    width: "100%",
+    [`${Heading2}`]: {
+        marginBottom: title ? theme.space.x6 : 0,
+    },
+    [`${Alert}`]: {
+        marginBottom: theme.space.x6,
+    },
+    [`${Field},${Fieldset}`]: {
+        marginBottom: theme.space.x3,
+        "&:last-child": {
+            marginBottom: 0,
+        },
+    },
+    [`${FormSection}`]: {
+        marginBottom: theme.space.x6,
+        "&:last-child": {
+            marginBottom: 0,
+        },
+    },
+});
+const Form = styled((_a) => {
+    var { title, children } = _a, props = __rest(_a, ["title", "children"]);
+    return (React.createElement("form", Object.assign({}, props),
+        title && React.createElement(Heading2, null, title),
+        children));
+})(space, FormStyles);
+export default Form;

package/dist/src/Form/Form.story.d.ts

@@ -1,31 +1,31 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Form: () => React.JSX.Element;
-export declare const WithoutTitle: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFormSections: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithFormSectionsWithoutTitles: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const DemoForm: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAnAction: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Form: () => React.JSX.Element;
+export declare const WithoutTitle: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithFormSections: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithFormSectionsWithoutTitles: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const DemoForm: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAnAction: () => React.JSX.Element;

package/dist/src/Form/Form.story.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { Alert, Input, Form, FormSection, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle, List, ListItem, Select, Text, Button, } from "../index";
+const options = [
+    { value: "planned", label: "Planned" },
+    { value: "booked", label: "Booked" },
+];
+export default {
+    title: "Components/Form",
+};
+export const _Form = () => (React.createElement(Form, { title: "New Profile" },
+    React.createElement(Input, { id: "name", labelText: "Name" }),
+    React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
+    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
+export const WithoutTitle = () => (React.createElement(Form, null,
+    React.createElement(Input, { id: "name", labelText: "Name" }),
+    React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
+    React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })));
+WithoutTitle.story = {
+    name: "Without title",
+};
+export const WithFormSections = () => (React.createElement(Form, { title: "New Profile" },
+    React.createElement(FormSection, { title: "Personal Information" },
+        React.createElement(Input, { id: "name", labelText: "Name" }),
+        React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
+        React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
+    React.createElement(FormSection, { title: "General Information" },
+        React.createElement(Input, { id: "gender", labelText: "Gender" }),
+        React.createElement(Input, { id: "occupation", labelText: "Occupation" }))));
+WithFormSections.story = {
+    name: "With form sections",
+};
+export const WithFormSectionsWithoutTitles = () => (React.createElement(Form, { title: "New Profile" },
+    React.createElement(FormSection, null,
+        React.createElement(Input, { id: "name", labelText: "Name" }),
+        React.createElement(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }),
+        React.createElement(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })),
+    React.createElement(FormSection, null,
+        React.createElement(Input, { id: "gender", labelText: "Gender" }),
+        React.createElement(Input, { id: "occupation", labelText: "Occupation" }))));
+WithFormSectionsWithoutTitles.story = {
+    name: "With form sections without titles",
+};
+export const DemoForm = () => (React.createElement(React.Fragment, null,
+    React.createElement(Form, { title: "Job 324400" },
+        React.createElement(Alert, { type: "danger", title: "Errors have occured ..." },
+            React.createElement(Text, null, "Instructions and description of errors"),
+            React.createElement(List, { compact: true },
+                React.createElement(ListItem, null, "Affected field"),
+                React.createElement(ListItem, null, "Unmet criteria"),
+                React.createElement(ListItem, null,
+                    React.createElement("a", { href: "https://nulogy.design/" }, "Affected field")))),
+        React.createElement(FormSection, { title: "Job Information" },
+            React.createElement(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }),
+            React.createElement(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }),
+            React.createElement(Select, { id: "project-status", labelText: "Project status", options: options }),
+            React.createElement(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }),
+            React.createElement(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }),
+            React.createElement(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }),
+            React.createElement(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }),
+            React.createElement(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }),
+            React.createElement(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)" },
+                React.createElement(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }),
+                React.createElement(Checkbox, { value: "matt", labelText: "Matt Dunn" }),
+                React.createElement(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }),
+                React.createElement(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })),
+            React.createElement(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile" },
+                React.createElement(Radio, { value: "yes", labelText: "Yes" }),
+                React.createElement(Radio, { value: "no", labelText: "No" }),
+                React.createElement(Radio, { value: "maybe", labelText: "Maybe", disabled: true })),
+            React.createElement(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })),
+        React.createElement(FormSection, { title: "Rejects" },
+            React.createElement(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }),
+            React.createElement(Input, { id: "quantity", labelText: "Quantity" }),
+            React.createElement(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })))));
+DemoForm.story = {
+    name: "Demo form",
+};
+export const WithAnAction = () => {
+    function handleSubmit(event) {
+        event.preventDefault();
+        alert("Hello!");
+    }
+    return (React.createElement(Form, { onSubmit: handleSubmit },
+        React.createElement(Button, { type: "submit" }, "Click me")));
+};

package/dist/src/Form/FormSection.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-interface BaseFormSectionProps extends React.ComponentPropsWithRef<"fieldset"> {
-    title?: string;
-}
-declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseFormSectionProps, never>> & string & Omit<({ title, children, ...props }: BaseFormSectionProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export default FormSection;
+import React from "react";
+interface BaseFormSectionProps extends React.ComponentPropsWithRef<"fieldset"> {
+    title?: string;
+}
+declare const FormSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseFormSectionProps, never>> & string & Omit<({ title, children, ...props }: BaseFormSectionProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export default FormSection;

package/dist/src/Form/FormSection.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { Heading3 } from "../Type";
+import Field from "./Field";
+import Fieldset from "./Fieldset";
+const BaseFormSection = (_a) => {
+    var { title, children } = _a, props = __rest(_a, ["title", "children"]);
+    return (React.createElement("fieldset", Object.assign({}, props),
+        title != null && React.createElement(FormSectionTitle, null, title),
+        children));
+};
+const FormSectionTitle = styled(Heading3).attrs({
+    as: "legend",
+})({});
+const FormSection = styled(BaseFormSection)(({ title, theme }) => ({
+    width: "100%",
+    padding: 0,
+    margin: 0,
+    border: "none",
+    [`${FormSectionTitle}`]: {
+        padding: 0,
+        marginBottom: title ? theme.space.x3 : 0,
+    },
+    [`${Field},${Fieldset}`]: {
+        marginBottom: theme.space.x3,
+        "&:last-child": {
+            marginBottom: 0,
+        },
+    },
+}));
+export default FormSection;

package/dist/src/Form/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Field } from "./Field";
-export { default as Fieldset } from "./Fieldset";
-export { default as Form } from "./Form";
-export { default as FormSection } from "./FormSection";
+export { default as Field } from "./Field";
+export { default as Fieldset } from "./Fieldset";
+export { default as Form } from "./Form";
+export { default as FormSection } from "./FormSection";

package/dist/src/Form/index.js

@@ -0,0 +1,4 @@
+export { default as Field } from "./Field";
+export { default as Fieldset } from "./Fieldset";
+export { default as Form } from "./Form";
+export { default as FormSection } from "./FormSection";

package/dist/src/Icon/Icon.d.ts

@@ -1,16 +1,16 @@
-import React from "react";
-import { PositionProps, SpaceProps } from "styled-system";
-import { IconName } from "@nulogy/icons";
-export interface IconProps extends SpaceProps {
-    icon: IconName | "loading";
-    className?: string;
-    size?: string;
-    title?: string;
-    color?: string;
-    focusable?: boolean;
-    style?: React.CSSProperties;
-}
-declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
-export declare const InlineIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
-export default Icon;
+import React from "react";
+import { PositionProps, SpaceProps } from "styled-system";
+import { IconName } from "@nulogy/icons";
+export interface IconProps extends SpaceProps {
+    icon: IconName | "loading";
+    className?: string;
+    size?: string;
+    title?: string;
+    color?: string;
+    focusable?: boolean;
+    style?: React.CSSProperties;
+}
+declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
+export declare const InlineIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
+export default Icon;

package/dist/src/Icon/Icon.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { position, space } from "styled-system";
+import icons from "@nulogy/icons";
+import LoadingIcon from "./LoadingIcon";
+const getPathElements = (icon) => (React.createElement(React.Fragment, null, icon.path.map((path, index) => (React.createElement("path", { key: index, d: path })))));
+const ICON_SIZE_RATIO = 1.25;
+const Svg = React.forwardRef((_a, ref) => {
+    var { color: fillColor = "currentColor", className = undefined, title = undefined, size, focusable = false, icon } = _a, props = __rest(_a, ["color", "className", "title", "size", "focusable", "icon"]);
+    const theme = useTheme();
+    size || (size = theme.sizes.x3);
+    if (icon === "loading") {
+        return (React.createElement(LoadingIcon, Object.assign({ ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, focusable: focusable, className: `${className} nds-icon--${icon}` }, props)));
+    }
+    return (icons[icon] && (React.createElement("svg", Object.assign({ ref: ref, "aria-hidden": title == null, width: theme.space[size] || size, height: theme.space[size] || size, fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor, viewBox: icons[icon].viewBox, focusable: focusable, className: `${className} nds-icon--${icon}` }, props), getPathElements(icons[icon]))));
+});
+const Icon = styled(Svg)(space, ({ theme, color = "currentColor", size }) => {
+    var _a, _b;
+    return ({
+        minWidth: (_b = (_a = theme.sizes[size]) !== null && _a !== void 0 ? _a : size) !== null && _b !== void 0 ? _b : theme.sizes.x3,
+        color: color,
+    });
+});
+const CenteredIcon = styled(Svg)({
+    position: "absolute",
+    inset: 0,
+    margin: "auto",
+});
+const IconContainer = styled.span(space, {
+    display: "inline-flex",
+    alignSelf: "center",
+    position: "relative",
+    height: "1em",
+    width: `${ICON_SIZE_RATIO}em`,
+});
+export const InlineIcon = React.forwardRef((props, ref) => {
+    return (React.createElement(IconContainer, Object.assign({ ref: ref }, props),
+        React.createElement(CenteredIcon, Object.assign({ size: `${ICON_SIZE_RATIO}em` }, props))));
+});
+export const InputIcon = styled(Icon)(({ theme }) => ({
+    position: "absolute",
+    color: theme.colors.midGrey,
+    bottom: "50%",
+    transform: "translateY(50%)",
+}), position);
+export default Icon;