@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Flex/Flex.js

@@ -0,0 +1,20 @@
+import { styled } from "styled-components";
+import { gap } from "../StyledProps/index.js";
+import Box from "../Box/Box.js";
+const Flex = styled(Box)(
+  {
+    display: "flex"
+  },
+  gap
+);
+const InlineFlex = styled(Box)(
+  {
+    display: "inline-flex"
+  },
+  gap
+);
+export {
+  InlineFlex,
+  Flex as default
+};
+//# sourceMappingURL=Flex.js.map

package/dist/esm/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../src/Flex/Flex.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { Box } from \"../Box\";\nimport { BoxProps } from \"../Box/Box\";\nimport { gap } from \"../StyledProps\";\nimport type { GapProps } from \"../StyledProps\";\n\nexport interface FlexProps extends BoxProps, GapProps {}\n\nconst Flex = styled(Box)<FlexProps>(\n  {\n    display: \"flex\",\n  },\n  gap\n);\n\nconst InlineFlex = styled(Box)<FlexProps>(\n  {\n    display: \"inline-flex\",\n  },\n  gap\n);\n\nexport default Flex;\n\nexport { InlineFlex };\n"],"names":[],"mappings":";;;AAQA,MAAM,OAAO,OAAO,GAAG;AAAA,EACrB;AAAA,IACE,SAAS;AAAA,EAAA;AAAA,EAEX;AACF;AAEA,MAAM,aAAa,OAAO,GAAG;AAAA,EAC3B;AAAA,IACE,SAAS;AAAA,EAAA;AAAA,EAEX;AACF;"}

package/dist/esm/Form/Field.js

@@ -0,0 +1,13 @@
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import Box from "../Box/Box.js";
+const Field = styled(Box)(
+  {
+    width: "100%"
+  },
+  addStyledProps
+);
+export {
+  Field as default
+};
+//# sourceMappingURL=Field.js.map

package/dist/esm/Form/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../src/Form/Field.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { Box } from \"../Box\";\nimport { BoxProps } from \"../Box/Box\";\nimport { addStyledProps } from \"../StyledProps\";\n\nexport type FieldProps = BoxProps;\n\nconst Field = styled(Box)(\n  {\n    width: \"100%\",\n  },\n  addStyledProps\n);\n\nexport default Field;\n"],"names":[],"mappings":";;;AAOA,MAAM,QAAQ,OAAO,GAAG;AAAA,EACtB;AAAA,IACE,OAAO;AAAA,EAAA;AAAA,EAET;AACF;"}

package/dist/esm/Form/Fieldset.js

@@ -0,0 +1,19 @@
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+const Fieldset = styled.fieldset(
+  {
+    padding: 0,
+    border: 0,
+    margin: 0,
+    legend: {
+      padding: 0
+    },
+    width: "100%"
+  },
+  space
+);
+export {
+  Fieldset as default
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/esm/Form/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../src/Form/Fieldset.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { space } from \"styled-system\";\n\nconst Fieldset = styled.fieldset(\n  {\n    padding: 0,\n    border: 0,\n    margin: 0,\n    legend: {\n      padding: 0,\n    },\n    width: \"100%\",\n  },\n  space\n);\n\nexport default Fieldset;\n"],"names":[],"mappings":";;;AAGA,MAAM,WAAW,OAAO;AAAA,EACtB;AAAA,IACE,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,EAAA;AAAA,EAET;AACF;"}

package/dist/esm/Form/Form.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import Field from "./Field.js";
+import Fieldset from "./Fieldset.js";
+import FormSection from "./FormSection.js";
+import { Heading2 } from "../Type/Headings.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import Alert from "../Alert/Alert.js";
+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(({ title, children, ...props }) => /* @__PURE__ */ jsxs("form", { ...props, children: [
+  title && /* @__PURE__ */ jsx(Heading2, { children: title }),
+  children
+] }))(space, FormStyles);
+export {
+  Form as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/esm/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../src/Form/Form.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { styled } from \"styled-components\";\nimport { space } from \"styled-system\";\nimport type { SpaceProps } from \"styled-system\";\nimport { Heading2 } from \"../Type\";\nimport { Alert } from \"../Alert\";\nimport type { ThemeType } from \"../theme\";\nimport Field from \"./Field\";\nimport Fieldset from \"./Fieldset\";\nimport FormSection from \"./FormSection\";\n\ninterface FormProps extends SpaceProps, React.HTMLProps<HTMLFormElement> {}\n\ninterface FormStylesProps {\n  title?: FormProps[\"title\"];\n  theme: ThemeType;\n}\n\nconst FormStyles = ({ title, theme }: FormStylesProps) => ({\n  width: \"100%\",\n  [`${Heading2}`]: {\n    marginBottom: title ? theme.space.x6 : 0,\n  },\n  [`${Alert}`]: {\n    marginBottom: theme.space.x6,\n  },\n  [`${Field},${Fieldset}`]: {\n    marginBottom: theme.space.x3,\n    \"&:last-child\": {\n      marginBottom: 0,\n    },\n  },\n  [`${FormSection}`]: {\n    marginBottom: theme.space.x6,\n    \"&:last-child\": {\n      marginBottom: 0,\n    },\n  },\n});\n\nconst Form = styled(({ title, children, ...props }: FormProps) => (\n  <form {...props}>\n    {title && <Heading2>{title}</Heading2>}\n    {children}\n  </form>\n))(space, FormStyles);\n\nexport default Form;\n"],"names":[],"mappings":";;;;;;;;;AAkBA,MAAM,aAAa,CAAC,EAAE,OAAO,aAA8B;AAAA,EACzD,OAAO;AAAA,EACP,CAAC,GAAG,QAAQ,EAAE,GAAG;AAAA,IACf,cAAc,QAAQ,MAAM,MAAM,KAAK;AAAA,EAAA;AAAA,EAEzC,CAAC,GAAG,KAAK,EAAE,GAAG;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,EAAA;AAAA,EAE5B,CAAC,GAAG,KAAK,IAAI,QAAQ,EAAE,GAAG;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,gBAAgB;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,CAAC,GAAG,WAAW,EAAE,GAAG;AAAA,IAClB,cAAc,MAAM,MAAM;AAAA,IAC1B,gBAAgB;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,EAChB;AAEJ;AAEA,MAAM,OAAO,OAAO,CAAC,EAAE,OAAO,UAAU,GAAG,MAAA,MACzC,qBAAC,QAAA,EAAM,GAAG,OACP,UAAA;AAAA,EAAA,SAAS,oBAAC,YAAU,UAAA,MAAA,CAAM;AAAA,EAC1B;AAAA,GACH,CACD,EAAE,OAAO,UAAU;"}

package/dist/esm/Form/FormSection.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import Field from "./Field.js";
+import Fieldset from "./Fieldset.js";
+import { Heading3 } from "../Type/Headings.js";
+const BaseFormSection = ({ title, children, ...props }) => /* @__PURE__ */ jsxs("fieldset", { ...props, children: [
+  title != null && /* @__PURE__ */ jsx(FormSectionTitle, { children: 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 {
+  FormSection as default
+};
+//# sourceMappingURL=FormSection.js.map

package/dist/esm/Form/FormSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSection.js","sources":["../../../src/Form/FormSection.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { Heading3 } from \"../Type\";\nimport Field from \"./Field\";\nimport Fieldset from \"./Fieldset\";\n\ninterface BaseFormSectionProps extends React.ComponentPropsWithRef<\"fieldset\"> {\n  title?: string;\n}\n\nconst BaseFormSection = ({ title, children, ...props }: BaseFormSectionProps) => (\n  <fieldset {...props}>\n    {title != null && <FormSectionTitle>{title}</FormSectionTitle>}\n    {children}\n  </fieldset>\n);\n\nconst FormSectionTitle = styled(Heading3).attrs({\n  as: \"legend\",\n})({});\n\nconst FormSection = styled(BaseFormSection)(({ title, theme }) => ({\n  width: \"100%\",\n  padding: 0,\n  margin: 0,\n  border: \"none\",\n  [`${FormSectionTitle}`]: {\n    padding: 0,\n    marginBottom: title ? theme.space.x3 : 0,\n  },\n  [`${Field},${Fieldset}`]: {\n    marginBottom: theme.space.x3,\n    \"&:last-child\": {\n      marginBottom: 0,\n    },\n  },\n}));\n\nexport default FormSection;\n"],"names":[],"mappings":";;;;;AAUA,MAAM,kBAAkB,CAAC,EAAE,OAAO,UAAU,GAAG,YAC7C,qBAAC,YAAA,EAAU,GAAG,OACX,UAAA;AAAA,EAAA,SAAS,QAAQ,oBAAC,kBAAA,EAAkB,UAAA,OAAM;AAAA,EAC1C;AAAA,GACH;AAGF,MAAM,mBAAmB,OAAO,QAAQ,EAAE,MAAM;AAAA,EAC9C,IAAI;AACN,CAAC,EAAE,CAAA,CAAE;AAEL,MAAM,cAAc,OAAO,eAAe,EAAE,CAAC,EAAE,OAAO,aAAa;AAAA,EACjE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,CAAC,GAAG,gBAAgB,EAAE,GAAG;AAAA,IACvB,SAAS;AAAA,IACT,cAAc,QAAQ,MAAM,MAAM,KAAK;AAAA,EAAA;AAAA,EAEzC,CAAC,GAAG,KAAK,IAAI,QAAQ,EAAE,GAAG;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,gBAAgB;AAAA,MACd,cAAc;AAAA,IAAA;AAAA,EAChB;AAEJ,EAAE;"}

package/dist/esm/Icon/Icon.js

@@ -0,0 +1,88 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import { styled, useTheme } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import icons from "@nulogy/icons";
+import LoadingIcon from "./LoadingIcon.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import position from "../node_modules/.pnpm/@styled-system_position@5.1.2/node_modules/@styled-system/position/dist/index.esm.js";
+const getPathElements = (icon) => /* @__PURE__ */ jsx(Fragment, { children: icon.path.map((path, index) => /* @__PURE__ */ jsx("path", { d: path }, index)) });
+const ICON_SIZE_RATIO = 1.25;
+const Svg = React__default.forwardRef(
+  ({
+    color: fillColor = "currentColor",
+    className = void 0,
+    title = void 0,
+    size,
+    focusable = false,
+    icon,
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    size || (size = theme.sizes.x3);
+    if (icon === "loading") {
+      return /* @__PURE__ */ jsx(
+        LoadingIcon,
+        {
+          ref,
+          "aria-hidden": title == null,
+          width: theme.space[size] || size,
+          height: theme.space[size] || size,
+          fill: theme.colors[fillColor] ? theme.colors[fillColor] : fillColor,
+          focusable,
+          className: `${className} nds-icon--${icon}`,
+          ...props
+        }
+      );
+    }
+    return icons[icon] && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        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,
+        className: `${className} nds-icon--${icon}`,
+        ...props,
+        children: getPathElements(icons[icon])
+      }
+    );
+  }
+);
+const Icon = styled(Svg)(space, ({ theme, color = "currentColor", size }) => ({
+  minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,
+  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`
+});
+const InlineIcon = React__default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(IconContainer, { ref, ...props, children: /* @__PURE__ */ jsx(CenteredIcon, { size: `${ICON_SIZE_RATIO}em`, ...props }) });
+});
+const InputIcon = styled(Icon)(
+  ({ theme }) => ({
+    position: "absolute",
+    color: theme.colors.midGrey,
+    bottom: "50%",
+    transform: "translateY(50%)"
+  }),
+  position
+);
+export {
+  InlineIcon,
+  InputIcon,
+  Icon as default
+};
+//# sourceMappingURL=Icon.js.map

package/dist/esm/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/Icon/Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport { position, PositionProps, space, SpaceProps } from \"styled-system\";\nimport icons from \"@nulogy/icons\";\nimport { IconName } from \"@nulogy/icons\";\nimport LoadingIcon from \"./LoadingIcon\";\n\nexport interface IconProps extends SpaceProps {\n  icon: IconName | \"loading\";\n  className?: string;\n  size?: string;\n  title?: string;\n  color?: string;\n  focusable?: boolean;\n  style?: React.CSSProperties;\n}\n\nconst getPathElements = (icon: any) => (\n  <>\n    {icon.path.map((path: string, index: number) => (\n      <path key={index} d={path} />\n    ))}\n  </>\n);\n\nconst ICON_SIZE_RATIO = 1.25;\n\nconst Svg = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    {\n      color: fillColor = \"currentColor\",\n      className = undefined,\n      title = undefined,\n      size,\n      focusable = false,\n      icon,\n      ...props\n    }: IconProps,\n    ref\n  ) => {\n    const theme = useTheme();\n    size ||= theme.sizes.x3;\n\n    if (icon === \"loading\") {\n      return (\n        <LoadingIcon\n          ref={ref}\n          aria-hidden={title == null}\n          width={theme.space[size] || size}\n          height={theme.space[size] || size}\n          fill={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}\n          focusable={focusable}\n          className={`${className} nds-icon--${icon}`}\n          {...props}\n        />\n      );\n    }\n\n    return (\n      icons[icon] && (\n        <svg\n          ref={ref}\n          aria-hidden={title == null}\n          width={theme.space[size] || size}\n          height={theme.space[size] || size}\n          fill={theme.colors[fillColor] ? theme.colors[fillColor] : fillColor}\n          viewBox={icons[icon].viewBox}\n          focusable={focusable}\n          className={`${className} nds-icon--${icon}`}\n          {...props}\n        >\n          {getPathElements(icons[icon])}\n        </svg>\n      )\n    );\n  }\n);\n\nconst Icon = styled(Svg)<IconProps>(space, ({ theme, color = \"currentColor\", size }) => ({\n  minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,\n  color: color,\n}));\n\nconst CenteredIcon = styled(Svg)({\n  position: \"absolute\",\n  inset: 0,\n  margin: \"auto\",\n});\n\nconst IconContainer = styled.span(space, {\n  display: \"inline-flex\",\n  alignSelf: \"center\",\n  position: \"relative\",\n  height: \"1em\",\n  width: `${ICON_SIZE_RATIO}em`,\n});\n\nexport const InlineIcon = React.forwardRef<HTMLSpanElement, IconProps>((props, ref) => {\n  return (\n    <IconContainer ref={ref} {...props}>\n      <CenteredIcon size={`${ICON_SIZE_RATIO}em`} {...props} />\n    </IconContainer>\n  );\n});\n\nexport const InputIcon = styled(Icon)<PositionProps>(\n  ({ theme }) => ({\n    position: \"absolute\",\n    color: theme.colors.midGrey,\n    bottom: \"50%\",\n    transform: \"translateY(50%)\",\n  }),\n  position\n);\n\nexport default Icon;\n"],"names":["React"],"mappings":";;;;;;;;AAiBA,MAAM,kBAAkB,CAAC,SACvB,oBAAA,UAAA,EACG,UAAA,KAAK,KAAK,IAAI,CAAC,MAAc,8BAC3B,QAAA,EAAiB,GAAG,KAAA,GAAV,KAAgB,CAC5B,GACH;AAGF,MAAM,kBAAkB;AAExB,MAAM,MAAMA,eAAM;AAAA,EAChB,CACE;AAAA,IACE,OAAO,YAAY;AAAA,IACnB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,QAAQ,SAAA;AACd,oBAAS,MAAM,MAAM;AAErB,QAAI,SAAS,WAAW;AACtB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,eAAa,SAAS;AAAA,UACtB,OAAO,MAAM,MAAM,IAAI,KAAK;AAAA,UAC5B,QAAQ,MAAM,MAAM,IAAI,KAAK;AAAA,UAC7B,MAAM,MAAM,OAAO,SAAS,IAAI,MAAM,OAAO,SAAS,IAAI;AAAA,UAC1D;AAAA,UACA,WAAW,GAAG,SAAS,cAAc,IAAI;AAAA,UACxC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE,MAAM,IAAI,KACR;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa,SAAS;AAAA,QACtB,OAAO,MAAM,MAAM,IAAI,KAAK;AAAA,QAC5B,QAAQ,MAAM,MAAM,IAAI,KAAK;AAAA,QAC7B,MAAM,MAAM,OAAO,SAAS,IAAI,MAAM,OAAO,SAAS,IAAI;AAAA,QAC1D,SAAS,MAAM,IAAI,EAAE;AAAA,QACrB;AAAA,QACA,WAAW,GAAG,SAAS,cAAc,IAAI;AAAA,QACxC,GAAG;AAAA,QAEH,UAAA,gBAAgB,MAAM,IAAI,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIpC;AACF;AAEA,MAAM,OAAO,OAAO,GAAG,EAAa,OAAO,CAAC,EAAE,OAAO,QAAQ,gBAAgB,YAAY;AAAA,EACvF,UAAU,MAAM,MAAM,IAAI,KAAK,QAAQ,MAAM,MAAM;AAAA,EACnD;AACF,EAAE;AAEF,MAAM,eAAe,OAAO,GAAG,EAAE;AAAA,EAC/B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,CAAC;AAED,MAAM,gBAAgB,OAAO,KAAK,OAAO;AAAA,EACvC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO,GAAG,eAAe;AAC3B,CAAC;AAEM,MAAM,aAAaA,eAAM,WAAuC,CAAC,OAAO,QAAQ;AACrF,SACE,oBAAC,eAAA,EAAc,KAAW,GAAG,OAC3B,UAAA,oBAAC,cAAA,EAAa,MAAM,GAAG,eAAe,MAAO,GAAG,OAAO,GACzD;AAEJ,CAAC;AAEM,MAAM,YAAY,OAAO,IAAI;AAAA,EAClC,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA;AAAA,EAEb;AACF;"}

package/dist/esm/Icon/LoadingIcon.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { useTheme } from "styled-components";
+const LoadingIcon = React__default.forwardRef(({ size, ...props }, ref) => {
+  const theme = useTheme();
+  size || (size = theme.sizes.x3);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      preserveAspectRatio: "xMidYMid",
+      ...props,
+      children: /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsxs("circle", { cx: "3.5", cy: "12", fill: "#C0C8D1", "transform-origin": "3.5 3.5", children: [
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "r",
+              values: "3;3;3.5;3",
+              keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              id: "first",
+              attributeName: "fill",
+              values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+              keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("circle", { cx: "12", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "12 3.5", children: [
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "r",
+              begin: "0.2s; first.begin",
+              values: "3;3;3.5;3",
+              keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              id: "second",
+              attributeName: "fill",
+              begin: "0.2s; first.begin",
+              values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+              keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("circle", { cx: "20.5", cy: "12", r: "3", fill: "#C0C8D1", "transform-origin": "20.5 3.5", children: [
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "r",
+              begin: "0.3s; first.begin",
+              values: "3;3;3.5;3",
+              keySplines: "\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              id: "third",
+              attributeName: "fill",
+              begin: "0.3s; first.begin",
+              values: "#C0C8D1;#C0C8D1;#434D59;#C0C8D1",
+              keySplines: "\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1",
+              keyTimes: "0; 0.25;0.4; 1",
+              calcMode: "spline",
+              dur: "0.8s",
+              repeatCount: "indefinite"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  LoadingIcon as default
+};
+//# sourceMappingURL=LoadingIcon.js.map

package/dist/esm/Icon/LoadingIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIcon.js","sources":["../../../src/Icon/LoadingIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTheme } from \"styled-components\";\n\ninterface LoadingIconProps extends React.ComponentPropsWithRef<\"svg\"> {\n  size?: string;\n}\n\nconst LoadingIcon = React.forwardRef<SVGSVGElement, LoadingIconProps>(({ size, ...props }, ref) => {\n  const theme = useTheme();\n  size ||= theme.sizes.x3;\n\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      height={size}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      preserveAspectRatio=\"xMidYMid\"\n      {...props}\n    >\n      <g>\n        <circle cx=\"3.5\" cy=\"12\" fill=\"#C0C8D1\" transform-origin=\"3.5 3.5\">\n          <animate\n            attributeName=\"r\"\n            values=\"3;3;3.5;3\"\n            keySplines=\"\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n          <animate\n            id=\"first\"\n            attributeName=\"fill\"\n            values=\"#C0C8D1;#C0C8D1;#434D59;#C0C8D1\"\n            keySplines=\"\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n        <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"#C0C8D1\" transform-origin=\"12 3.5\">\n          <animate\n            attributeName=\"r\"\n            begin=\"0.2s; first.begin\"\n            values=\"3;3;3.5;3\"\n            keySplines=\"\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n          <animate\n            id=\"second\"\n            attributeName=\"fill\"\n            begin=\"0.2s; first.begin\"\n            values=\"#C0C8D1;#C0C8D1;#434D59;#C0C8D1\"\n            keySplines=\"\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n        <circle cx=\"20.5\" cy=\"12\" r=\"3\" fill=\"#C0C8D1\" transform-origin=\"20.5 3.5\">\n          <animate\n            attributeName=\"r\"\n            begin=\"0.3s; first.begin\"\n            values=\"3;3;3.5;3\"\n            keySplines=\"\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\n                0.1 0.8 0.2 1;\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n          <animate\n            id=\"third\"\n            attributeName=\"fill\"\n            begin=\"0.3s; first.begin\"\n            values=\"#C0C8D1;#C0C8D1;#434D59;#C0C8D1\"\n            keySplines=\"\n                .24 .1 .35 .8;\n                .24 .1 .35 .8;\n                0.1 0.8 0.2 1\"\n            keyTimes=\"0; 0.25;0.4; 1\"\n            calcMode=\"spline\"\n            dur=\"0.8s\"\n            repeatCount=\"indefinite\"\n          />\n        </circle>\n      </g>\n    </svg>\n  );\n});\n\nexport default LoadingIcon;\n"],"names":["React"],"mappings":";;;AAOA,MAAM,cAAcA,eAAM,WAA4C,CAAC,EAAE,MAAM,GAAG,MAAA,GAAS,QAAQ;AACjG,QAAM,QAAQ,SAAA;AACd,kBAAS,MAAM,MAAM;AAErB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,qBAAoB;AAAA,MACnB,GAAG;AAAA,MAEJ,+BAAC,KAAA,EACC,UAAA;AAAA,QAAA,qBAAC,UAAA,EAAO,IAAG,OAAM,IAAG,MAAK,MAAK,WAAU,oBAAiB,WACvD,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAc;AAAA,cACd,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,eAAc;AAAA,cACd,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd,GACF;AAAA,QACA,qBAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,MAAK,WAAU,oBAAiB,UAC5D,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAc;AAAA,cACd,OAAM;AAAA,cACN,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,eAAc;AAAA,cACd,OAAM;AAAA,cACN,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd,GACF;AAAA,QACA,qBAAC,UAAA,EAAO,IAAG,QAAO,IAAG,MAAK,GAAE,KAAI,MAAK,WAAU,oBAAiB,YAC9D,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAc;AAAA,cACd,OAAM;AAAA,cACN,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAEd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,eAAc;AAAA,cACd,OAAM;AAAA,cACN,QAAO;AAAA,cACP,YAAW;AAAA,cAIX,UAAS;AAAA,cACT,UAAS;AAAA,cACT,KAAI;AAAA,cACJ,aAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QACd,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/Input/Input.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import { getSubset, omitSubset } from "../utils/subset.js";
+import { InputField } from "./InputField.js";
+import Field from "../Form/Field.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+const Input = forwardRef(({ errorMessage, errorList, className, ...props }, ref) => {
+  const spaceProps = getSubset(props, propTypes.space);
+  const layoutProps = getSubset(props, propTypes.space);
+  const restProps = omitSubset(props, propTypes.space);
+  return /* @__PURE__ */ jsxs(Field, { className, ...spaceProps, ...layoutProps, children: [
+    /* @__PURE__ */ jsx(InputField, { ...restProps, error: !!(errorMessage || errorList), ref }),
+    /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+  ] });
+});
+export {
+  Input as default
+};
+//# sourceMappingURL=Input.js.map

package/dist/esm/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { LayoutProps, SpaceProps } from \"styled-system\";\nimport { getSubset, omitSubset } from \"../utils/subset\";\nimport { Field } from \"../Form\";\nimport { InlineValidation } from \"../Validation\";\nimport { InputField, InputFieldProps } from \"./InputField\";\n\ninterface InputProps extends InputFieldProps, SpaceProps, LayoutProps {\n  errorMessage?: string;\n  errorList?: string[];\n  className?: string;\n}\n\nconst Input = forwardRef<HTMLInputElement, InputProps>(({ errorMessage, errorList, className, ...props }, ref) => {\n  const spaceProps = getSubset(props, propTypes.space);\n  const layoutProps = getSubset(props, propTypes.space);\n  const restProps = omitSubset(props, propTypes.space);\n\n  return (\n    <Field className={className} {...spaceProps} {...layoutProps}>\n      <InputField {...restProps} error={!!(errorMessage || errorList)} ref={ref} />\n      <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n    </Field>\n  );\n});\n\nexport default Input;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,QAAQ,WAAyC,CAAC,EAAE,cAAc,WAAW,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChH,QAAM,aAAa,UAAU,OAAO,UAAU,KAAK;AACnD,QAAM,cAAc,UAAU,OAAO,UAAU,KAAK;AACpD,QAAM,YAAY,WAAW,OAAO,UAAU,KAAK;AAEnD,8BACG,OAAA,EAAM,WAAuB,GAAG,YAAa,GAAG,aAC/C,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAY,GAAG,WAAW,OAAO,CAAC,EAAE,gBAAgB,YAAY,KAAU;AAAA,IAC3E,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,EAAA,GAC9E;AAEJ,CAAC;"}

package/dist/esm/Input/InputField.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTheme, styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { InputIcon } from "../Icon/Icon.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import Prefix from "./Prefix.js";
+import Suffix from "./Suffix.js";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel.js";
+import Flex from "../Flex/Flex.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+import Box from "../Box/Box.js";
+import subPx from "../utils/subPx.js";
+import { variant } from "../node_modules/.pnpm/@styled-system_variant@5.1.5/node_modules/@styled-system/variant/dist/index.esm.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+const InputField = forwardRef(
+  ({
+    iconRight,
+    iconLeft,
+    iconRightSize = "x3",
+    iconLeftSize = "x3",
+    iconLeftTooltip,
+    iconRightTooltip,
+    iconLeftTooltipProps,
+    iconRightTooltipProps,
+    error,
+    required,
+    labelText,
+    requirementText,
+    helpText,
+    prefix,
+    prefixWidth,
+    prefixAlignment,
+    suffix,
+    suffixAlignment,
+    suffixWidth,
+    inputWidth,
+    variant: variant2,
+    htmlSize,
+    ...props
+  }, ref) => {
+    const componentVariant = useComponentVariant(variant2);
+    const theme = useTheme();
+    return /* @__PURE__ */ jsx(MaybeFieldLabel, { labelText, requirementText, helpText, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx(Prefix, { prefix, prefixWidth, textAlign: prefixAlignment }),
+      /* @__PURE__ */ jsxs(InputWrapper, { maxWidth: inputWidth, children: [
+        iconLeft && (iconLeftTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: iconLeftTooltip, ...iconLeftTooltipProps, children: /* @__PURE__ */ jsx(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize }) }) : /* @__PURE__ */ jsx(InputIcon, { left: "x1", icon: iconLeft, size: iconLeftSize })),
+        /* @__PURE__ */ jsx(
+          StyledInput,
+          {
+            paddingLeft: iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1,
+            paddingRight: iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1,
+            "aria-invalid": error,
+            "aria-required": required,
+            required,
+            error,
+            ref,
+            size: htmlSize,
+            variant: componentVariant,
+            inputWidth,
+            ...props
+          }
+        ),
+        iconRight && (iconRightTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: iconRightTooltip, ...iconRightTooltipProps, children: /* @__PURE__ */ jsx(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize }) }) : /* @__PURE__ */ jsx(InputIcon, { right: "x1", icon: iconRight, size: iconRightSize }))
+      ] }),
+      /* @__PURE__ */ jsx(Suffix, { suffix, suffixWidth, textAlign: suffixAlignment })
+    ] }) });
+  }
+);
+const InputWrapper = styled(Box)(({ theme }) => ({
+  position: "relative",
+  display: "flex",
+  flexGrow: 1,
+  "&:focus-within": {
+    svg: {
+      color: theme.colors.darkBlue
+    }
+  }
+}));
+const StyledInput = styled.input(
+  ({ theme, inputWidth }) => ({
+    display: "block",
+    flexGrow: 1,
+    border: "1px solid",
+    borderRadius: theme.radii.medium,
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    margin: theme.space.none,
+    minHeight: theme.space.x5,
+    maxWidth: inputWidth,
+    width: inputWidth,
+    "&:focus": {
+      outline: "none",
+      color: theme.colors.black,
+      borderColor: theme.colors.blue,
+      boxShadow: theme.shadows.focus,
+      "& svg": {
+        color: theme.colors.darkBlue
+      }
+    },
+    "::placeholder": {
+      color: theme.colors.midGrey
+    },
+    paddingTop: `${subPx(theme.space.x1)}`,
+    paddingBottom: `${subPx(theme.space.x1)}`
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  }),
+  ({ disabled, error, theme }) => cssForState({ disabled, error, theme }),
+  space
+);
+const cssForState = ({
+  disabled,
+  error,
+  theme
+}) => {
+  if (disabled)
+    return {
+      color: theme.colors.midGrey,
+      borderColor: theme.colors.lightGrey,
+      backgroundColor: theme.colors.whiteGrey
+    };
+  if (error)
+    return {
+      color: theme.colors.red,
+      borderColor: theme.colors.red
+    };
+  return {
+    color: theme.colors.black,
+    borderColor: theme.colors.grey
+  };
+};
+const InputFieldDefaultProps = {
+  disabled: false,
+  required: false,
+  error: false,
+  suffixAlignment: "left",
+  prefixAlignment: "left"
+};
+export {
+  InputField,
+  InputFieldDefaultProps
+};
+//# sourceMappingURL=InputField.js.map

package/dist/esm/Input/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sources":["../../../src/Input/InputField.tsx"],"sourcesContent":["import { IconName } from \"@nulogy/icons\";\nimport React, { forwardRef } from \"react\";\nimport { styled, CSSObject, useTheme } from \"styled-components\";\nimport { space, SpaceProps, variant } from \"styled-system\";\nimport { Box, BoxProps } from \"../Box\";\nimport { MaybeFieldLabel } from \"../FieldLabel\";\nimport { Flex } from \"../Flex\";\nimport { InputIcon } from \"../Icon/Icon\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport type { DefaultNDSThemeType } from \"../theme\";\nimport { Tooltip } from \"../Tooltip\";\nimport { TooltipProps } from \"../Tooltip/Tooltip\";\nimport { subPx } from \"../utils\";\nimport Prefix from \"./Prefix\";\nimport Suffix from \"./Suffix\";\n\ntype NativeInputProps = Omit<React.ComponentPropsWithRef<\"input\">, \"size\" | \"height\" | \"width\">;\n\nexport interface InputFieldProps extends NativeInputProps {\n  htmlSize?: number;\n  variant?: ComponentVariant;\n  iconRight?: IconName | \"loading\";\n  iconLeft?: IconName | \"loading\";\n  iconRightSize?: string;\n  iconLeftSize?: string;\n  iconLeftTooltip?: React.ReactNode;\n  iconRightTooltip?: React.ReactNode;\n  iconLeftTooltipProps?: Omit<TooltipProps, \"tooltip\">;\n  iconRightTooltipProps?: Omit<TooltipProps, \"tooltip\">;\n  error?: boolean;\n  labelText?: string;\n  requirementText?: string;\n  helpText?: React.ReactNode;\n  suffix?: string;\n  prefix?: string;\n  suffixWidth?: string;\n  prefixWidth?: string;\n  suffixAlignment?: \"left\" | \"right\";\n  prefixAlignment?: \"left\" | \"right\";\n  inputWidth?: string;\n}\n\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n  (\n    {\n      iconRight,\n      iconLeft,\n      iconRightSize = \"x3\",\n      iconLeftSize = \"x3\",\n      iconLeftTooltip,\n      iconRightTooltip,\n      iconLeftTooltipProps,\n      iconRightTooltipProps,\n      error,\n      required,\n      labelText,\n      requirementText,\n      helpText,\n      prefix,\n      prefixWidth,\n      prefixAlignment,\n      suffix,\n      suffixAlignment,\n      suffixWidth,\n      inputWidth,\n      variant,\n      htmlSize,\n      ...props\n    },\n    ref\n  ) => {\n    const componentVariant = useComponentVariant(variant);\n    const theme = useTheme();\n\n    return (\n      <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>\n        <Flex alignItems=\"flex-start\">\n          <Prefix prefix={prefix} prefixWidth={prefixWidth} textAlign={prefixAlignment} />\n          <InputWrapper maxWidth={inputWidth}>\n            {iconLeft &&\n              (iconLeftTooltip ? (\n                <Tooltip tooltip={iconLeftTooltip} {...iconLeftTooltipProps}>\n                  <InputIcon left=\"x1\" icon={iconLeft} size={iconLeftSize} />\n                </Tooltip>\n              ) : (\n                <InputIcon left=\"x1\" icon={iconLeft} size={iconLeftSize} />\n              ))}\n            <StyledInput\n              paddingLeft={iconLeft ? `calc(${theme.space[iconLeftSize]} + ${theme.space.x1_5})` : theme.space.x1}\n              paddingRight={iconRight ? `calc(${theme.space[iconRightSize]} + ${theme.space.x1_5})` : theme.space.x1}\n              aria-invalid={error}\n              aria-required={required}\n              required={required}\n              error={error}\n              ref={ref}\n              size={htmlSize}\n              variant={componentVariant}\n              inputWidth={inputWidth}\n              {...props}\n            />\n            {iconRight &&\n              (iconRightTooltip ? (\n                <Tooltip tooltip={iconRightTooltip} {...iconRightTooltipProps}>\n                  <InputIcon right=\"x1\" icon={iconRight} size={iconRightSize} />\n                </Tooltip>\n              ) : (\n                <InputIcon right=\"x1\" icon={iconRight} size={iconRightSize} />\n              ))}\n          </InputWrapper>\n          <Suffix suffix={suffix} suffixWidth={suffixWidth} textAlign={suffixAlignment} />\n        </Flex>\n      </MaybeFieldLabel>\n    );\n  }\n);\n\nconst InputWrapper = styled(Box)<BoxProps>(({ theme }) => ({\n  position: \"relative\",\n  display: \"flex\",\n  flexGrow: 1,\n\n  \"&:focus-within\": {\n    svg: {\n      color: theme.colors.darkBlue,\n    },\n  },\n}));\n\ntype StyledInputProps = Omit<InputFieldProps, \"htmlSize\" | \"size\"> & { variant: ComponentVariant } & SpaceProps;\n\nconst StyledInput = styled.input<StyledInputProps>(\n  ({ theme, inputWidth }): CSSObject => ({\n    display: \"block\",\n    flexGrow: 1,\n    border: \"1px solid\",\n    borderRadius: theme.radii.medium,\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    margin: theme.space.none,\n    minHeight: theme.space.x5,\n    maxWidth: inputWidth,\n    width: inputWidth,\n    \"&:focus\": {\n      outline: \"none\",\n      color: theme.colors.black,\n      borderColor: theme.colors.blue,\n      boxShadow: theme.shadows.focus,\n      \"& svg\": {\n        color: theme.colors.darkBlue,\n      },\n    },\n    \"::placeholder\": {\n      color: theme.colors.midGrey,\n    },\n    paddingTop: `${subPx(theme.space.x1)}`,\n    paddingBottom: `${subPx(theme.space.x1)}`,\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  }),\n  ({ disabled, error, theme }) => cssForState({ disabled, error, theme }),\n  space\n);\n\nconst cssForState = ({\n  disabled,\n  error,\n  theme,\n}: {\n  disabled: InputFieldProps[\"disabled\"];\n  error: InputFieldProps[\"error\"];\n  theme: DefaultNDSThemeType;\n}) => {\n  if (disabled)\n    return {\n      color: theme.colors.midGrey,\n      borderColor: theme.colors.lightGrey,\n      backgroundColor: theme.colors.whiteGrey,\n    };\n\n  if (error)\n    return {\n      color: theme.colors.red,\n      borderColor: theme.colors.red,\n    };\n\n  return {\n    color: theme.colors.black,\n    borderColor: theme.colors.grey,\n  };\n};\n\nexport const InputFieldDefaultProps: InputFieldProps = {\n  disabled: false,\n  required: false,\n  error: false,\n  suffixAlignment: \"left\",\n  prefixAlignment: \"left\",\n} as const;\n"],"names":["variant"],"mappings":"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"}

package/dist/esm/Input/Prefix.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "../Box/Box.js";
+import Text from "../Type/Text.js";
+const Prefix = ({ prefix, prefixWidth, ...props }) => prefix ? /* @__PURE__ */ jsx(Box, { width: prefixWidth, pt: "x1", pr: "x1", pb: "x1", children: /* @__PURE__ */ jsx(Text, { ...props, children: prefix }) }) : null;
+export {
+  Prefix as default
+};
+//# sourceMappingURL=Prefix.js.map

package/dist/esm/Input/Prefix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prefix.js","sources":["../../../src/Input/Prefix.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Type\";\nimport { TextProps } from \"../Type/Text\";\n\ntype PrefixProps = TextProps & {\n  prefix?: string;\n  prefixWidth?: string;\n};\n\nconst Prefix = ({ prefix, prefixWidth, ...props }: PrefixProps) =>\n  prefix ? (\n    <Box width={prefixWidth} pt=\"x1\" pr=\"x1\" pb=\"x1\">\n      <Text {...props}>{prefix}</Text>\n    </Box>\n  ) : null;\n\nexport default Prefix;\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,CAAC,EAAE,QAAQ,aAAa,GAAG,MAAA,MACxC,SACE,oBAAC,KAAA,EAAI,OAAO,aAAa,IAAG,MAAK,IAAG,MAAK,IAAG,MAC1C,UAAA,oBAAC,MAAA,EAAM,GAAG,OAAQ,UAAA,OAAA,CAAO,EAAA,CAC3B,IACE;"}

package/dist/esm/Input/Suffix.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "../Box/Box.js";
+import Text from "../Type/Text.js";
+function Suffix({ suffix, suffixWidth, ...props }) {
+  return suffix ? /* @__PURE__ */ jsx(Box, { width: suffixWidth, pt: "x1", pb: "x1", pl: "x1", children: /* @__PURE__ */ jsx(Text, { ...props, children: suffix }) }) : null;
+}
+export {
+  Suffix as default
+};
+//# sourceMappingURL=Suffix.js.map

package/dist/esm/Input/Suffix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suffix.js","sources":["../../../src/Input/Suffix.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Type\";\nimport { TextProps } from \"../Type/Text\";\n\ninterface SuffixProps extends TextProps {\n  suffix?: string;\n  suffixWidth?: string;\n}\n\nexport default function Suffix({ suffix, suffixWidth, ...props }: SuffixProps) {\n  return suffix ? (\n    <Box width={suffixWidth} pt=\"x1\" pb=\"x1\" pl=\"x1\">\n      <Text {...props}>{suffix}</Text>\n    </Box>\n  ) : null;\n}\n"],"names":[],"mappings":";;;AAUA,SAAwB,OAAO,EAAE,QAAQ,aAAa,GAAG,SAAsB;AAC7E,SAAO,SACL,oBAAC,KAAA,EAAI,OAAO,aAAa,IAAG,MAAK,IAAG,MAAK,IAAG,MAC1C,UAAA,oBAAC,MAAA,EAAM,GAAG,OAAQ,UAAA,OAAA,CAAO,GAC3B,IACE;AACN;"}

package/dist/esm/Layout/ApplicationFrame.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Box from "../Box/Box.js";
+import Flex from "../Flex/Flex.js";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner.js";
+const ApplicationFrame = ({ navBar, children, environment, ...props }) => {
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", minHeight: "100vh", ...props, children: [
+    /* @__PURE__ */ jsxs(Box, { position: "sticky", top: "0", zIndex: "navBar", children: [
+      environment && /* @__PURE__ */ jsx(EnvironmentBanner, { children: environment }),
+      navBar
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { flexDirection: "column", position: "relative", flexGrow: 1, children })
+  ] });
+};
+export {
+  ApplicationFrame as default
+};
+//# sourceMappingURL=ApplicationFrame.js.map

package/dist/esm/Layout/ApplicationFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationFrame.js","sources":["../../../src/Layout/ApplicationFrame.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { ZIndexProps } from \"styled-system\";\nimport Box from \"../Box/Box\";\nimport Flex, { FlexProps } from \"../Flex/Flex\";\nimport EnvironmentBanner from \"../Navigation/components/EnvironmentBanner/EnvironmentBanner\";\n\ninterface ApplicationFrameProps extends FlexProps {\n  navBar?: ReactNode;\n  environment?: string;\n  children?: ReactNode;\n}\n\nconst ApplicationFrame = ({ navBar, children, environment, ...props }: ApplicationFrameProps) => {\n  return (\n    <Flex flexDirection=\"column\" minHeight=\"100vh\" {...props}>\n      <Box position=\"sticky\" top=\"0\" zIndex={\"navBar\" as ZIndexProps[\"zIndex\"]}>\n        {environment && <EnvironmentBanner>{environment}</EnvironmentBanner>}\n        {navBar}\n      </Box>\n      <Flex flexDirection=\"column\" position=\"relative\" flexGrow={1}>\n        {children}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ApplicationFrame;\n"],"names":[],"mappings":";;;;AAYA,MAAM,mBAAmB,CAAC,EAAE,QAAQ,UAAU,aAAa,GAAG,YAAmC;AAC/F,8BACG,MAAA,EAAK,eAAc,UAAS,WAAU,SAAS,GAAG,OACjD,UAAA;AAAA,IAAA,qBAAC,OAAI,UAAS,UAAS,KAAI,KAAI,QAAQ,UACpC,UAAA;AAAA,MAAA,eAAe,oBAAC,qBAAmB,UAAA,YAAA,CAAY;AAAA,MAC/C;AAAA,IAAA,GACH;AAAA,IACA,oBAAC,QAAK,eAAc,UAAS,UAAS,YAAW,UAAU,GACxD,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}