@nulogy/components 16.2.0 → 17.0.0

package/dist/esm/Alert/Alert.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { styled } from "styled-components";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import CloseButton from "./CloseButton.js";
+import Flex from "../Flex/Flex.js";
+import Icon from "../Icon/Icon.js";
+import Text from "../Type/Text.js";
+import Box from "../Box/Box.js";
+const NotificationTypes = {
+  danger: "danger",
+  informative: "informative",
+  success: "success",
+  warning: "warning"
+};
+const styles = ({ theme }) => ({
+  a: {
+    color: theme.colors.black
+  }
+});
+const alertColours = {
+  danger: {
+    borderColor: "red",
+    backgroundColor: "lightRed"
+  },
+  informative: {
+    borderColor: "blue",
+    backgroundColor: "lightBlue"
+  },
+  success: {
+    borderColor: "green",
+    backgroundColor: "lightGreen"
+  },
+  warning: {
+    borderColor: "yellow",
+    backgroundColor: "lightYellow"
+  }
+};
+const Alert = ({
+  children,
+  isCloseable = false,
+  title,
+  type = "informative",
+  closeAriaLabel,
+  onClose,
+  controlled = false,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const componentVariant = useComponentVariant();
+  const hideAlert = () => {
+    if (onClose) onClose();
+    if (!controlled) {
+      setIsVisible(false);
+    }
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      bg: alertColours[type].backgroundColor,
+      p: "x2",
+      borderRadius: "medium",
+      borderLeftWidth: "4px",
+      borderLeftColor: alertColours[type].borderColor,
+      borderLeftStyle: "solid",
+      role: "alert",
+      alignItems: children ? "flex-start" : void 0,
+      ...props,
+      children: [
+        type === "danger" && /* @__PURE__ */ jsx(Icon, { size: "x3", icon: "error", mr: "x1", color: alertColours[type].borderColor }),
+        type === "success" && /* @__PURE__ */ jsx(Icon, { size: "x3", icon: "check", mr: "x1", color: alertColours[type].borderColor }),
+        /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: componentVariant === "touch" ? "half" : "none", mr: "auto", children: [
+          title && /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: title }),
+          /* @__PURE__ */ jsx(Box, { children })
+        ] }),
+        isCloseable && /* @__PURE__ */ jsx(CloseButton, { onClick: hideAlert, "aria-label": closeAriaLabel })
+      ]
+    }
+  );
+};
+const Alert$1 = styled(Alert)(styles);
+export {
+  NotificationTypes,
+  Alert$1 as default
+};
+//# sourceMappingURL=Alert.js.map

package/dist/esm/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../src/Alert/Alert.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { styled } from \"styled-components\";\nimport { FlexProps } from \"../Flex/Flex\";\nimport { useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { Box } from \"../Box\";\nimport { Icon } from \"../Icon\";\nimport { Flex } from \"../Flex\";\nimport { Text } from \"../Type\";\nimport CloseButton from \"./CloseButton\";\n\nexport const NotificationTypes = {\n  danger: \"danger\",\n  informative: \"informative\",\n  success: \"success\",\n  warning: \"warning\",\n} as const;\n\nexport type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];\n\nexport type AlertProps = FlexProps & {\n  isCloseable?: boolean;\n  closeAriaLabel?: string;\n  title?: string;\n  type?: NotificationType;\n  onClose?: any;\n  controlled?: boolean;\n};\n\nconst styles = ({ theme }) => ({\n  a: {\n    color: theme.colors.black,\n  },\n});\n\ntype ColoursConfig = {\n  borderColor: string;\n  backgroundColor: string;\n};\n\nconst alertColours: Record<NotificationType, ColoursConfig> = {\n  danger: {\n    borderColor: \"red\",\n    backgroundColor: \"lightRed\",\n  },\n  informative: {\n    borderColor: \"blue\",\n    backgroundColor: \"lightBlue\",\n  },\n  success: {\n    borderColor: \"green\",\n    backgroundColor: \"lightGreen\",\n  },\n  warning: {\n    borderColor: \"yellow\",\n    backgroundColor: \"lightYellow\",\n  },\n};\n\nconst Alert = ({\n  children,\n  isCloseable = false,\n  title,\n  type = \"informative\",\n  closeAriaLabel,\n  onClose,\n  controlled = false,\n  ...props\n}: AlertProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n  const componentVariant = useComponentVariant();\n\n  const hideAlert = () => {\n    if (onClose) onClose();\n    if (!controlled) {\n      setIsVisible(false);\n    }\n  };\n\n  if (!isVisible) return null;\n\n  return (\n    <Flex\n      bg={alertColours[type].backgroundColor}\n      p=\"x2\"\n      borderRadius=\"medium\"\n      borderLeftWidth=\"4px\"\n      borderLeftColor={alertColours[type].borderColor}\n      borderLeftStyle=\"solid\"\n      role=\"alert\"\n      alignItems={children ? \"flex-start\" : undefined}\n      {...props}\n    >\n      {type === \"danger\" && <Icon size=\"x3\" icon=\"error\" mr=\"x1\" color={alertColours[type].borderColor} />}\n      {type === \"success\" && <Icon size=\"x3\" icon=\"check\" mr=\"x1\" color={alertColours[type].borderColor} />}\n      <Flex flexDirection=\"column\" gap={componentVariant === \"touch\" ? \"half\" : \"none\"} mr=\"auto\">\n        {title && <Text fontWeight=\"bold\">{title}</Text>}\n        <Box>{children}</Box>\n      </Flex>\n      {isCloseable && <CloseButton onClick={hideAlert} aria-label={closeAriaLabel} />}\n    </Flex>\n  );\n};\n\nexport default styled(Alert)(styles);\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,oBAAoB;AAAA,EAC/B,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AACX;AAaA,MAAM,SAAS,CAAC,EAAE,aAAa;AAAA,EAC7B,GAAG;AAAA,IACD,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB;AAOA,MAAM,eAAwD;AAAA,EAC5D,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,iBAAiB;AAAA,EAAA;AAAA,EAEnB,aAAa;AAAA,IACX,aAAa;AAAA,IACb,iBAAiB;AAAA,EAAA;AAAA,EAEnB,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB;AAAA,EAAA;AAAA,EAEnB,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB;AAAA,EAAA;AAErB;AAEA,MAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAkB;AAChB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,mBAAmB,oBAAA;AAEzB,QAAM,YAAY,MAAM;AACtB,QAAI,QAAS,SAAA;AACb,QAAI,CAAC,YAAY;AACf,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,MAAI,CAAC,UAAW,QAAO;AAEvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,aAAa,IAAI,EAAE;AAAA,MACvB,GAAE;AAAA,MACF,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,iBAAiB,aAAa,IAAI,EAAE;AAAA,MACpC,iBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,YAAY,WAAW,eAAe;AAAA,MACrC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,SAAS,YAAY,oBAAC,MAAA,EAAK,MAAK,MAAK,MAAK,SAAQ,IAAG,MAAK,OAAO,aAAa,IAAI,EAAE,aAAa;AAAA,QACjG,SAAS,aAAa,oBAAC,MAAA,EAAK,MAAK,MAAK,MAAK,SAAQ,IAAG,MAAK,OAAO,aAAa,IAAI,EAAE,aAAa;AAAA,QACnG,qBAAC,MAAA,EAAK,eAAc,UAAS,KAAK,qBAAqB,UAAU,SAAS,QAAQ,IAAG,QAClF,UAAA;AAAA,UAAA,SAAS,oBAAC,MAAA,EAAK,YAAW,QAAQ,UAAA,OAAM;AAAA,UACzC,oBAAC,OAAK,SAAA,CAAS;AAAA,QAAA,GACjB;AAAA,QACC,eAAe,oBAAC,aAAA,EAAY,SAAS,WAAW,cAAY,eAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnF;AAEA,MAAA,UAAe,OAAO,KAAK,EAAE,MAAM;"}

package/dist/esm/Alert/CloseButton.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Flex from "../Flex/Flex.js";
+import ControlIcon from "../Button/ControlIcon.js";
+const CloseButton = ({ onClick, "aria-label": ariaLabel }) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Flex, { ml: "x2", height: "x3", children: /* @__PURE__ */ jsx(ControlIcon, { size: "x3", icon: "close", onClick, "aria-label": ariaLabel || t("close"), label: t("close") }) });
+};
+export {
+  CloseButton as default
+};
+//# sourceMappingURL=CloseButton.js.map

package/dist/esm/Alert/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","sources":["../../../src/Alert/CloseButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Flex } from \"../Flex\";\nimport { ControlIcon } from \"../Button\";\n\ntype CloseButtonProps = {\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  \"aria-label\": string;\n};\n\nconst CloseButton = ({ onClick, \"aria-label\": ariaLabel }: CloseButtonProps) => {\n  const { t } = useTranslation();\n  return (\n    <Flex ml=\"x2\" height=\"x3\">\n      <ControlIcon size=\"x3\" icon=\"close\" onClick={onClick} aria-label={ariaLabel || t(\"close\")} label={t(\"close\")} />\n    </Flex>\n  );\n};\n\nexport default CloseButton;\n"],"names":[],"mappings":";;;;AAUA,MAAM,cAAc,CAAC,EAAE,SAAS,cAAc,gBAAkC;AAC9E,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,SACE,oBAAC,QAAK,IAAG,MAAK,QAAO,MACnB,UAAA,oBAAC,aAAA,EAAY,MAAK,MAAK,MAAK,SAAQ,SAAkB,cAAY,aAAa,EAAE,OAAO,GAAG,OAAO,EAAE,OAAO,EAAA,CAAG,EAAA,CAChH;AAEJ;"}

package/dist/esm/AppTag/AppTag.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme, styled } from "styled-components";
+import { APP_DISPLAY_NAMES, APP_ABBREVIATIONS } from "../types/NulogyApp.js";
+import { MiniTooltip } from "../MiniTooltip/index.js";
+import { LogoWrapper } from "./components/LogoWrapper.js";
+import NulogyLogo from "./components/NulogyLogo.js";
+import { appTagColors } from "./constants.js";
+import Text from "../Type/Text.js";
+function AppTag({ app, type = "active", hideTooltip = false }) {
+  const theme = useTheme();
+  const abbreviation = APP_ABBREVIATIONS[app];
+  const displayName = APP_DISPLAY_NAMES[app];
+  return /* @__PURE__ */ jsx(MiniTooltip, { content: displayName, hideTooltip, children: /* @__PURE__ */ jsxs(Wrapper, { $type: type, children: [
+    /* @__PURE__ */ jsx(LogoWrapper, { $type: type, children: /* @__PURE__ */ jsx(NulogyLogo, { width: theme.space.x1, height: theme.space.x1 }) }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: "smaller",
+        fontWeight: "bold",
+        color: theme.colors[appTagColors[type].primary],
+        px: "x0_75",
+        pl: "x0_5",
+        lineHeight: "smallerText",
+        letterSpacing: ".05em",
+        children: abbreviation
+      }
+    )
+  ] }) });
+}
+const Wrapper = styled.span(({ theme, $type }) => {
+  const color = theme.colors[appTagColors[$type].secondary];
+  return {
+    margin: theme.space.none,
+    paddingTop: theme.space.none,
+    paddingBottom: theme.space.none,
+    fontSize: theme.fontSizes.smaller,
+    lineHeight: theme.lineHeights.smallerText,
+    alignSelf: "center",
+    display: "inline-flex",
+    fontWeight: theme.fontWeights.bold,
+    userSelect: "none",
+    boxShadow: `inset 0 0 0 1px ${color}`,
+    borderRadius: theme.radii.rounded,
+    backgroundColor: theme.colors.white,
+    transition: "background-color 0.3s ease-in-out",
+    "&:hover, a:hover &": {
+      backgroundColor: color
+    }
+  };
+});
+export {
+  AppTag as default
+};
+//# sourceMappingURL=AppTag.js.map

package/dist/esm/AppTag/AppTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTag.js","sources":["../../../src/AppTag/AppTag.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport { Text } from \"../Type\";\nimport { APP_ABBREVIATIONS, APP_DISPLAY_NAMES, NulogyAppName } from \"../types/NulogyApp\";\nimport { MiniTooltip } from \"../MiniTooltip\";\nimport { LogoWrapper } from \"./components/LogoWrapper\";\nimport NulogyLogo from \"./components/NulogyLogo\";\nimport { appTagColors } from \"./constants\";\nimport { AppTagType } from \"./types\";\n\nexport type AppTagProps = {\n  app: NulogyAppName;\n  type?: AppTagType;\n  hideTooltip?: boolean;\n};\n\nexport default function AppTag({ app, type = \"active\", hideTooltip = false }: AppTagProps) {\n  const theme = useTheme();\n  const abbreviation = APP_ABBREVIATIONS[app];\n  const displayName = APP_DISPLAY_NAMES[app];\n\n  return (\n    <MiniTooltip content={displayName} hideTooltip={hideTooltip}>\n      <Wrapper $type={type}>\n        <LogoWrapper $type={type}>\n          <NulogyLogo width={theme.space.x1} height={theme.space.x1} />\n        </LogoWrapper>\n        <Text\n          fontSize=\"smaller\"\n          fontWeight=\"bold\"\n          color={theme.colors[appTagColors[type].primary]}\n          px=\"x0_75\"\n          pl=\"x0_5\"\n          lineHeight=\"smallerText\"\n          letterSpacing=\".05em\"\n        >\n          {abbreviation}\n        </Text>\n      </Wrapper>\n    </MiniTooltip>\n  );\n}\n\nconst Wrapper = styled.span<{ $type?: AppTagType }>(({ theme, $type }) => {\n  const color = theme.colors[appTagColors[$type].secondary];\n\n  return {\n    margin: theme.space.none,\n    paddingTop: theme.space.none,\n    paddingBottom: theme.space.none,\n    fontSize: theme.fontSizes.smaller,\n    lineHeight: theme.lineHeights.smallerText,\n    alignSelf: \"center\",\n    display: \"inline-flex\",\n    fontWeight: theme.fontWeights.bold,\n    userSelect: \"none\",\n    boxShadow: `inset 0 0 0 1px ${color}`,\n    borderRadius: theme.radii.rounded,\n    backgroundColor: theme.colors.white,\n    transition: \"background-color 0.3s ease-in-out\",\n\n    \"&:hover, a:hover &\": {\n      backgroundColor: color,\n    },\n  };\n});\n"],"names":[],"mappings":";;;;;;;;AAgBA,SAAwB,OAAO,EAAE,KAAK,OAAO,UAAU,cAAc,SAAsB;AACzF,QAAM,QAAQ,SAAA;AACd,QAAM,eAAe,kBAAkB,GAAG;AAC1C,QAAM,cAAc,kBAAkB,GAAG;AAEzC,SACE,oBAAC,eAAY,SAAS,aAAa,aACjC,UAAA,qBAAC,SAAA,EAAQ,OAAO,MACd,UAAA;AAAA,IAAA,oBAAC,aAAA,EAAY,OAAO,MAClB,UAAA,oBAAC,YAAA,EAAW,OAAO,MAAM,MAAM,IAAI,QAAQ,MAAM,MAAM,IAAI,GAC7D;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX,OAAO,MAAM,OAAO,aAAa,IAAI,EAAE,OAAO;AAAA,QAC9C,IAAG;AAAA,QACH,IAAG;AAAA,QACH,YAAW;AAAA,QACX,eAAc;AAAA,QAEb,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAM,UAAU,OAAO,KAA6B,CAAC,EAAE,OAAO,YAAY;AACxE,QAAM,QAAQ,MAAM,OAAO,aAAa,KAAK,EAAE,SAAS;AAExD,SAAO;AAAA,IACL,QAAQ,MAAM,MAAM;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,IAC3B,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY,MAAM,YAAY;AAAA,IAC9B,YAAY;AAAA,IACZ,WAAW,mBAAmB,KAAK;AAAA,IACnC,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IAEZ,sBAAsB;AAAA,MACpB,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ,CAAC;"}

package/dist/esm/AppTag/components/LogoWrapper.js

@@ -0,0 +1,16 @@
+import { styled } from "styled-components";
+import { appTagColors } from "../constants.js";
+const LogoWrapper = styled.span(({ theme, $type }) => {
+  const color = theme.colors[appTagColors[$type].primary];
+  return {
+    background: color,
+    display: "inline-block",
+    padding: theme.space.half,
+    borderRadius: theme.radii.circle,
+    lineHeight: 0
+  };
+});
+export {
+  LogoWrapper
+};
+//# sourceMappingURL=LogoWrapper.js.map

package/dist/esm/AppTag/components/LogoWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoWrapper.js","sources":["../../../../src/AppTag/components/LogoWrapper.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { AppTagType } from \"../types\";\nimport { appTagColors } from \"../constants\";\n\nexport const LogoWrapper = styled.span<{ $type?: AppTagType }>(({ theme, $type }) => {\n  const color = theme.colors[appTagColors[$type].primary];\n\n  return {\n    background: color,\n    display: \"inline-block\",\n    padding: theme.space.half,\n    borderRadius: theme.radii.circle,\n    lineHeight: 0,\n  };\n});\n"],"names":[],"mappings":";;AAIO,MAAM,cAAc,OAAO,KAA6B,CAAC,EAAE,OAAO,YAAY;AACnF,QAAM,QAAQ,MAAM,OAAO,aAAa,KAAK,EAAE,OAAO;AAEtD,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS,MAAM,MAAM;AAAA,IACrB,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,EAAA;AAEhB,CAAC;"}

package/dist/esm/AppTag/components/NulogyLogo.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+function NulogyLogo({ width = 8, height = 8, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { width, height, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z",
+      fill: "white"
+    }
+  ) });
+}
+export {
+  NulogyLogo as default
+};
+//# sourceMappingURL=NulogyLogo.js.map

package/dist/esm/AppTag/components/NulogyLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NulogyLogo.js","sources":["../../../../src/AppTag/components/NulogyLogo.tsx"],"sourcesContent":["import React from \"react\";\n\nexport default function NulogyLogo({ width = 8, height = 8, ...props }: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M6.75004 0.290783L8 0.872348V6.10892C8 7.23335 6.80591 7.43084 5.99989 7.56333C6.4609 7.43084 6.7526 7.28197 6.75004 6.10892V1.45441L5.50008 0.872348L6.75004 0.290783ZM1.49987 7.27255V4.07344C1.49987 3.7514 1.70755 3.38717 1.95959 3.26163L3.25007 2.61655V4.65104L4.50003 5.52785C4.75207 5.67671 5.25017 5.68019 5.25017 5.23657V4.36373L4.74951 4.07245V0L0.938216 1.63404C0.420065 1.85585 0 2.55502 0 3.2001V8L1.49987 7.27255Z\"\n        fill=\"white\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";AAEA,SAAwB,WAAW,EAAE,QAAQ,GAAG,SAAS,GAAG,GAAG,SAAwC;AACrG,SACE,oBAAC,OAAA,EAAI,OAAc,QAAgB,SAAQ,WAAU,MAAK,QAAO,OAAM,8BAA8B,GAAG,OACtG,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ;"}

package/dist/esm/AppTag/constants.js

@@ -0,0 +1,18 @@
+const appTagColors = {
+  active: {
+    primary: "darkGrey",
+    secondary: "lightGrey"
+  },
+  inactive: {
+    primary: "midGrey",
+    secondary: "whiteGrey"
+  },
+  interactive: {
+    primary: "blue",
+    secondary: "lightBlue"
+  }
+};
+export {
+  appTagColors
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/AppTag/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/AppTag/constants.ts"],"sourcesContent":["import { AppTagType, ColorName } from \"./types\";\n\nexport const appTagColors: Record<AppTagType, { primary: ColorName; secondary: ColorName }> = {\n  active: {\n    primary: \"darkGrey\",\n    secondary: \"lightGrey\",\n  },\n  inactive: {\n    primary: \"midGrey\",\n    secondary: \"whiteGrey\",\n  },\n  interactive: {\n    primary: \"blue\",\n    secondary: \"lightBlue\",\n  },\n};\n"],"names":[],"mappings":"AAEO,MAAM,eAAiF;AAAA,EAC5F,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAAA,EAEb,aAAa;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf;"}

package/dist/esm/AsyncSelect/AsyncSelect.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import AsyncSelect$1 from "../node_modules/.pnpm/react-select@5.10.2_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-select/async/dist/react-select-async.esm.js";
+import { useTheme } from "styled-components";
+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 customStyles from "../Select/customReactSelectStyles.js";
+import { getSubset } from "../utils/subset.js";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import { SelectInput, SelectMenu, SelectContainer, SelectDropdownIndicator, SelectClearIndicator, SelectMultiValue, SelectControl, SelectOption } from "./AsyncSelectComponents.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Field from "../Form/Field.js";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel.js";
+import InlineValidation from "../Validation/InlineValidation.js";
+const AsyncSelect = forwardRef(
+  ({
+    autocomplete,
+    labelText,
+    required,
+    requirementText,
+    helpText,
+    noOptionsMessage,
+    disabled,
+    errorMessage,
+    errorList,
+    id,
+    initialIsOpen,
+    maxHeight,
+    menuPosition,
+    multiselect,
+    name,
+    onChange,
+    placeholder,
+    value,
+    defaultValue,
+    className,
+    classNamePrefix,
+    onBlur,
+    menuIsOpen,
+    onMenuOpen,
+    onMenuClose,
+    onInputChange,
+    components,
+    "aria-label": ariaLabel,
+    cacheOptions = false,
+    defaultOptions,
+    loadOptions,
+    isClearable,
+    ...props
+  }, ref) => {
+    const { t } = useTranslation();
+    const variant = useComponentVariant();
+    const theme = useTheme();
+    const spaceProps = getSubset(props, propTypes.space);
+    const error = !!(errorMessage || errorList);
+    const componentVariant = useComponentVariant(variant);
+    noOptionsMessage || (noOptionsMessage = () => t("no options"));
+    return /* @__PURE__ */ jsx(Field, { ...spaceProps, children: /* @__PURE__ */ jsxs(MaybeFieldLabel, { labelText, requirementText, helpText, children: [
+      /* @__PURE__ */ jsx(
+        AsyncSelect$1,
+        {
+          className,
+          classNamePrefix,
+          noOptionsMessage: noOptionsMessage || t("no options"),
+          value,
+          ref,
+          defaultInputValue: defaultValue,
+          placeholder: placeholder || t("start typing"),
+          styles: customStyles({
+            hasIcon: Boolean(props.iconLeft),
+            theme,
+            error,
+            variant,
+            maxHeight,
+            windowed: false,
+            hasDefaultOptions: Boolean(defaultOptions)
+          }),
+          isDisabled: disabled,
+          isSearchable: autocomplete,
+          "aria-required": required,
+          required,
+          "aria-invalid": error,
+          defaultMenuIsOpen: initialIsOpen,
+          inputId: id,
+          onBlur,
+          onChange,
+          name,
+          isMulti: multiselect,
+          menuIsOpen,
+          onMenuOpen,
+          onMenuClose,
+          menuPosition,
+          onInputChange,
+          components: {
+            Option: (props2) => /* @__PURE__ */ jsx(SelectOption, { variant: componentVariant, ...props2, children: props2.children }),
+            Control: SelectControl,
+            MultiValue: SelectMultiValue,
+            ClearIndicator: SelectClearIndicator,
+            DropdownIndicator: SelectDropdownIndicator,
+            SelectContainer,
+            Menu: SelectMenu,
+            Input: SelectInput,
+            ...components
+          },
+          "aria-label": ariaLabel,
+          cacheOptions,
+          defaultOptions,
+          loadOptions,
+          isClearable,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(InlineValidation, { mt: "x1", errorMessage, errorList })
+    ] }) });
+  }
+);
+export {
+  AsyncSelect as default
+};
+//# sourceMappingURL=AsyncSelect.js.map

package/dist/esm/AsyncSelect/AsyncSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelect.js","sources":["../../../src/AsyncSelect/AsyncSelect.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, MutableRefObject } from \"react\";\nimport { IconName } from \"@nulogy/icons\";\nimport Select from \"react-select/base\";\nimport AsyncReactSelect from \"react-select/async\";\nimport { AsyncProps } from \"react-select/async\";\nimport { GroupBase } from \"react-select\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport propTypes from \"@styled-system/prop-types\";\nimport { Field } from \"../Form\";\nimport { MaybeFieldLabel } from \"../FieldLabel\";\nimport { InlineValidation } from \"../Validation\";\nimport customStyles from \"../Select/customReactSelectStyles\";\nimport { getSubset } from \"../utils/subset\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport {\n  SelectControl,\n  SelectMultiValue,\n  SelectClearIndicator,\n  SelectContainer,\n  SelectInput,\n  SelectDropdownIndicator,\n  SelectMenu,\n  SelectOption,\n} from \"./AsyncSelectComponents\";\n\ntype AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {\n  autocomplete?: AsyncProps<Option, IsMulti, Group>[\"isSearchable\"];\n  labelText?: string;\n  variant?: ComponentVariant;\n  requirementText?: string;\n  helpText?: ReactNode;\n  disabled?: AsyncProps<Option, IsMulti, Group>[\"isDisabled\"];\n  errorMessage?: string;\n  errorList?: string[];\n  initialIsOpen?: AsyncProps<Option, IsMulti, Group>[\"defaultMenuIsOpen\"];\n  multiselect?: AsyncProps<Option, IsMulti, Group>[\"isMulti\"];\n  maxHeight?: string;\n  defaultValue?: AsyncProps<Option, IsMulti, Group>[\"defaultInputValue\"];\n  iconLeft?: IconName | \"loading\";\n};\n\nexport type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<\n  AsyncProps<Option, IsMulti, Group>,\n  \"isSearchable\" | \"isDisabled\" | \"isMulti\" | \"defaultMenuIsOpen\" | \"defaultInputValue\"\n> &\n  AsyncCustomProps<Option, IsMulti, Group>;\n\nconst AsyncSelect = forwardRef(\n  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n    {\n      autocomplete,\n      labelText,\n      required,\n      requirementText,\n      helpText,\n      noOptionsMessage,\n      disabled,\n      errorMessage,\n      errorList,\n      id,\n      initialIsOpen,\n      maxHeight,\n      menuPosition,\n      multiselect,\n      name,\n      onChange,\n      placeholder,\n      value,\n      defaultValue,\n      className,\n      classNamePrefix,\n      onBlur,\n      menuIsOpen,\n      onMenuOpen,\n      onMenuClose,\n      onInputChange,\n      components,\n      \"aria-label\": ariaLabel,\n      cacheOptions = false,\n      defaultOptions,\n      loadOptions,\n      isClearable,\n      ...props\n    }: AsyncSelectProps<Option, IsMulti, Group>,\n    ref:\n      | ((instance: Select<Option, IsMulti, Group> | null) => void)\n      | MutableRefObject<Select<Option, IsMulti, Group> | null>\n      | null\n  ) => {\n    const { t } = useTranslation();\n    const variant = useComponentVariant();\n    const theme = useTheme();\n    const spaceProps = getSubset(props, propTypes.space);\n    const error = !!(errorMessage || errorList);\n    const componentVariant = useComponentVariant(variant);\n    noOptionsMessage ||= () => t(\"no options\");\n\n    return (\n      <Field {...spaceProps}>\n        <MaybeFieldLabel labelText={labelText} requirementText={requirementText} helpText={helpText}>\n          <AsyncReactSelect\n            className={className}\n            classNamePrefix={classNamePrefix}\n            noOptionsMessage={noOptionsMessage || t(\"no options\")}\n            value={value}\n            ref={ref}\n            defaultInputValue={defaultValue}\n            placeholder={placeholder || t(\"start typing\")}\n            styles={customStyles<Option, IsMulti, Group>({\n              hasIcon: Boolean(props.iconLeft),\n              theme,\n              error,\n              variant,\n              maxHeight,\n              windowed: false,\n              hasDefaultOptions: Boolean(defaultOptions),\n            })}\n            isDisabled={disabled}\n            isSearchable={autocomplete}\n            aria-required={required}\n            required={required}\n            aria-invalid={error}\n            defaultMenuIsOpen={initialIsOpen}\n            inputId={id}\n            onBlur={onBlur}\n            onChange={onChange}\n            name={name}\n            isMulti={multiselect}\n            menuIsOpen={menuIsOpen}\n            onMenuOpen={onMenuOpen}\n            onMenuClose={onMenuClose}\n            menuPosition={menuPosition}\n            onInputChange={onInputChange}\n            components={{\n              Option: (props) => (\n                <SelectOption variant={componentVariant} {...props}>\n                  {props.children}\n                </SelectOption>\n              ),\n              Control: SelectControl,\n              MultiValue: SelectMultiValue,\n              ClearIndicator: SelectClearIndicator,\n              DropdownIndicator: SelectDropdownIndicator,\n              SelectContainer: SelectContainer,\n              Menu: SelectMenu,\n              Input: SelectInput,\n              ...components,\n            }}\n            aria-label={ariaLabel}\n            cacheOptions={cacheOptions}\n            defaultOptions={defaultOptions}\n            loadOptions={loadOptions}\n            isClearable={isClearable}\n            {...props}\n          />\n          <InlineValidation mt=\"x1\" errorMessage={errorMessage} errorList={errorList} />\n        </MaybeFieldLabel>\n      </Field>\n    );\n  }\n);\n\nexport default AsyncSelect;\n"],"names":["AsyncReactSelect","props"],"mappings":";;;;;;;;;;;;;AAgDA,MAAM,cAAc;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAIG;AACH,UAAM,EAAE,EAAA,IAAM,eAAA;AACd,UAAM,UAAU,oBAAA;AAChB,UAAM,QAAQ,SAAA;AACd,UAAM,aAAa,UAAU,OAAO,UAAU,KAAK;AACnD,UAAM,QAAQ,CAAC,EAAE,gBAAgB;AACjC,UAAM,mBAAmB,oBAAoB,OAAO;AACpD,4CAAqB,MAAM,EAAE,YAAY;AAEzC,WACE,oBAAC,SAAO,GAAG,YACT,+BAAC,iBAAA,EAAgB,WAAsB,iBAAkC,UACvE,UAAA;AAAA,MAAA;AAAA,QAACA;AAAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,kBAAkB,oBAAoB,EAAE,YAAY;AAAA,UACpD;AAAA,UACA;AAAA,UACA,mBAAmB;AAAA,UACnB,aAAa,eAAe,EAAE,cAAc;AAAA,UAC5C,QAAQ,aAAqC;AAAA,YAC3C,SAAS,QAAQ,MAAM,QAAQ;AAAA,YAC/B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,mBAAmB,QAAQ,cAAc;AAAA,UAAA,CAC1C;AAAA,UACD,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,iBAAe;AAAA,UACf;AAAA,UACA,gBAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY;AAAA,YACV,QAAQ,CAACC,WACP,oBAAC,cAAA,EAAa,SAAS,kBAAmB,GAAGA,QAC1C,UAAAA,OAAM,SAAA,CACT;AAAA,YAEF,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAChB,mBAAmB;AAAA,YACnB;AAAA,YACA,MAAM;AAAA,YACN,OAAO;AAAA,YACP,GAAG;AAAA,UAAA;AAAA,UAEL,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,oBAAC,kBAAA,EAAiB,IAAG,MAAK,cAA4B,UAAA,CAAsB;AAAA,IAAA,EAAA,CAC9E,EAAA,CACF;AAAA,EAEJ;AACF;"}

package/dist/esm/AsyncSelect/AsyncSelectComponents.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { StyledOption } from "../Select/SelectOption.js";
+import { InputIcon } from "../Icon/Icon.js";
+import { c as components } from "../node_modules/.pnpm/react-select@5.10.2_@types_react@18.3.28_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-select/dist/index-641ee5b8.esm.js";
+const SelectControl = ({
+  isFocused,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-control", children: /* @__PURE__ */ jsxs(
+    components.Control,
+    {
+      className: isFocused ? "nds-select--is-focused" : null,
+      isFocused,
+      ...props,
+      children: [
+        props.selectProps.iconLeft && /* @__PURE__ */ jsx(InputIcon, { left: "x1", icon: props.selectProps.iconLeft, size: "x3" }),
+        children
+      ]
+    }
+  ) });
+};
+const SelectMultiValue = (props) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-multivalue", children: /* @__PURE__ */ jsx(components.MultiValue, { ...props, children: props.children }) });
+};
+const SelectClearIndicator = (props) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-clear", children: /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: props.children }) });
+};
+const SelectDropdownIndicator = (props) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-arrow", children: /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: props.children }) });
+};
+const SelectContainer = (props) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-container", children: /* @__PURE__ */ jsx(components.SelectContainer, { ...props, children: props.children }) });
+};
+const SelectInput = (props) => {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-input", children: /* @__PURE__ */ jsx(components.Input, { ...props, children: props.children }) });
+};
+const SelectMenu = (props) => {
+  if (!props.selectProps.inputValue && props.options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { "data-testid": "select-dropdown", children: /* @__PURE__ */ jsx(components.Menu, { ...props, children: props.children }) });
+};
+function SelectOption(props) {
+  return /* @__PURE__ */ jsx(StyledOption, { isSelected: props.isSelected, isFocused: props.isFocused, "data-testid": "select-option", children: /* @__PURE__ */ jsx(components.Option, { ...props, children: props.children }) });
+}
+export {
+  SelectClearIndicator,
+  SelectContainer,
+  SelectControl,
+  SelectDropdownIndicator,
+  SelectInput,
+  SelectMenu,
+  SelectMultiValue,
+  SelectOption
+};
+//# sourceMappingURL=AsyncSelectComponents.js.map

package/dist/esm/AsyncSelect/AsyncSelectComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelectComponents.js","sources":["../../../src/AsyncSelect/AsyncSelectComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ClearIndicatorProps,\n  components as selectComponents,\n  ContainerProps,\n  ControlProps,\n  DropdownIndicatorProps,\n  InputProps,\n  MenuProps,\n  MultiValueProps,\n  Props,\n} from \"react-select\";\nimport { components, GroupBase } from \"react-select\";\nimport { OptionProps } from \"react-select\";\nimport { IconName } from \"@nulogy/icons\";\nimport type { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport { StyledOption } from \"../Select/SelectOption\";\nimport { InputIcon } from \"../Icon/Icon\";\n\ninterface CustomSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends Props<\n  Option,\n  IsMulti,\n  Group\n> {\n  iconLeft?: IconName | \"loading\";\n}\n\nexport const SelectControl = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({\n  isFocused,\n  children,\n  ...props\n}: ControlProps<Option, IsMulti, Group> & {\n  selectProps: CustomSelectProps<Option, IsMulti, Group>;\n}) => {\n  return (\n    <div data-testid=\"select-control\">\n      <selectComponents.Control\n        className={isFocused ? \"nds-select--is-focused\" : null}\n        isFocused={isFocused}\n        {...props}\n      >\n        {props.selectProps.iconLeft && <InputIcon left=\"x1\" icon={props.selectProps.iconLeft} size=\"x3\" />}\n        {children}\n      </selectComponents.Control>\n    </div>\n  );\n};\n\nexport const SelectMultiValue = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: MultiValueProps<Option, IsMulti, Group>\n) => {\n  return (\n    <div data-testid=\"select-multivalue\">\n      <selectComponents.MultiValue {...props}>{props.children}</selectComponents.MultiValue>\n    </div>\n  );\n};\n\nexport const SelectClearIndicator = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: ClearIndicatorProps<Option, IsMulti, Group>\n) => {\n  return (\n    <div data-testid=\"select-clear\">\n      <selectComponents.ClearIndicator {...props}>{props.children}</selectComponents.ClearIndicator>\n    </div>\n  );\n};\n\nexport const SelectDropdownIndicator = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: DropdownIndicatorProps<Option, IsMulti, Group>\n) => {\n  return (\n    <div data-testid=\"select-arrow\">\n      <selectComponents.DropdownIndicator {...props}>{props.children}</selectComponents.DropdownIndicator>\n    </div>\n  );\n};\n\nexport const SelectContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: ContainerProps<Option, IsMulti, Group>\n) => {\n  return (\n    <div data-testid=\"select-container\">\n      <selectComponents.SelectContainer {...props}>{props.children}</selectComponents.SelectContainer>\n    </div>\n  );\n};\n\nexport const SelectInput = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: InputProps<Option, IsMulti, Group>\n) => {\n  return (\n    <div data-testid=\"select-input\">\n      <selectComponents.Input {...props}>{props.children}</selectComponents.Input>\n    </div>\n  );\n};\n\nexport const SelectMenu = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: MenuProps<Option, IsMulti, Group>\n) => {\n  if (!props.selectProps.inputValue && props.options.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-testid=\"select-dropdown\">\n      <components.Menu {...props}>{props.children}</components.Menu>\n    </div>\n  );\n};\n\nexport function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(\n  props: OptionProps<Option, IsMulti, Group> & { variant?: ComponentVariant }\n) {\n  return (\n    <StyledOption isSelected={props.isSelected} isFocused={props.isFocused} data-testid=\"select-option\">\n      <components.Option {...props}>{props.children}</components.Option>\n    </StyledOption>\n  );\n}\n"],"names":["selectComponents"],"mappings":";;;;AA2BO,MAAM,gBAAgB,CAAmE;AAAA,EAC9F;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAEM;AACJ,SACE,oBAAC,OAAA,EAAI,eAAY,kBACf,UAAA;AAAA,IAACA,WAAiB;AAAA,IAAjB;AAAA,MACC,WAAW,YAAY,2BAA2B;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,MAAM,YAAY,YAAY,oBAAC,WAAA,EAAU,MAAK,MAAK,MAAM,MAAM,YAAY,UAAU,MAAK,KAAA,CAAK;AAAA,QAC/F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEO,MAAM,mBAAmB,CAC9B,UACG;AACH,SACE,oBAAC,OAAA,EAAI,eAAY,qBACf,UAAA,oBAACA,WAAiB,YAAjB,EAA6B,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC1D;AAEJ;AAEO,MAAM,uBAAuB,CAClC,UACG;AACH,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAACA,WAAiB,gBAAjB,EAAiC,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC9D;AAEJ;AAEO,MAAM,0BAA0B,CACrC,UACG;AACH,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAACA,WAAiB,mBAAjB,EAAoC,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GACjE;AAEJ;AAEO,MAAM,kBAAkB,CAC7B,UACG;AACH,SACE,oBAAC,OAAA,EAAI,eAAY,oBACf,UAAA,oBAACA,WAAiB,iBAAjB,EAAkC,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC/D;AAEJ;AAEO,MAAM,cAAc,CACzB,UACG;AACH,SACE,oBAAC,OAAA,EAAI,eAAY,gBACf,UAAA,oBAACA,WAAiB,OAAjB,EAAwB,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GACrD;AAEJ;AAEO,MAAM,aAAa,CACxB,UACG;AACH,MAAI,CAAC,MAAM,YAAY,cAAc,MAAM,QAAQ,WAAW,GAAG;AAC/D,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,OAAA,EAAI,eAAY,mBACf,UAAA,oBAAC,WAAW,MAAX,EAAiB,GAAG,OAAQ,UAAA,MAAM,SAAA,CAAS,GAC9C;AAEJ;AAEO,SAAS,aACd,OACA;AACA,6BACG,cAAA,EAAa,YAAY,MAAM,YAAY,WAAW,MAAM,WAAW,eAAY,iBAClF,UAAA,oBAAC,WAAW,QAAX,EAAmB,GAAG,OAAQ,UAAA,MAAM,UAAS,GAChD;AAEJ;"}

package/dist/esm/Banner/Banner.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import Alert from "../Alert/Alert.js";
+const Banner = ({ ...props }) => /* @__PURE__ */ jsx(Alert, { borderStyle: "none", borderRadius: "0", px: "x3", ...props });
+export {
+  Banner as default
+};
+//# sourceMappingURL=Banner.js.map

package/dist/esm/Banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import React, { ComponentProps } from \"react\";\nimport { Alert } from \"../Alert\";\n\nconst Banner = ({ ...props }: ComponentProps<typeof Alert>) => (\n  <Alert borderStyle=\"none\" borderRadius=\"0\" px=\"x3\" {...props} />\n);\n\nexport default Banner;\n"],"names":[],"mappings":";;AAGA,MAAM,SAAS,CAAC,EAAE,GAAG,YACnB,oBAAC,OAAA,EAAM,aAAY,QAAO,cAAa,KAAI,IAAG,MAAM,GAAG,MAAA,CAAO;"}

package/dist/esm/BottomSheet/BottomSheet.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "styled-components";
+import { noop } from "../utils/noop.js";
+import { BottomSheetParts } from "./BottomSheet.parts.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Box from "../Box/Box.js";
+import Flex from "../Flex/Flex.js";
+import QuietButton from "../Button/QuietButton.js";
+function BottomSheet({
+  title,
+  helpText,
+  closeButtonLabel,
+  secondaryAction,
+  primaryAction,
+  isOpen = false,
+  onClose = noop,
+  sheetWidth = "100%",
+  contentWidth = { small: "100%", medium: 704 },
+  disableCloseOnOverlayClick = false,
+  hideCloseButton = false,
+  children,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  closeButtonLabel || (closeButtonLabel = t("close"));
+  const closeOnClick = !disableCloseOnOverlayClick;
+  const footerHeight = `calc(${theme.space.x5} + (${theme.space.x2} * 2) + ${theme.space.x4})`;
+  return /* @__PURE__ */ jsx(BottomSheetParts.Root, { isOpen, onClose, children: /* @__PURE__ */ jsx(BottomSheetParts.Overlay, { closeOnClick, children: /* @__PURE__ */ jsx(
+    BottomSheetParts.Sheet,
+    {
+      width: sheetWidth,
+      maxWidth: { small: `calc(100% - ${theme.space.x8})` },
+      maxHeight: { small: `calc(100dvh - ${theme.space.x7})`, medium: "85.4dvh" },
+      "aria-label": props["aria-label"] ?? title,
+      children: /* @__PURE__ */ jsxs(BottomSheetParts.ContentContainer, { children: [
+        /* @__PURE__ */ jsxs(Box, { width: contentWidth, margin: "0 auto", children: [
+          /* @__PURE__ */ jsxs(BottomSheetParts.Header, { children: [
+            title && /* @__PURE__ */ jsx(BottomSheetParts.Title, { children: title }),
+            helpText && (typeof helpText === "string" ? /* @__PURE__ */ jsx(BottomSheetParts.HelpText, { children: helpText }) : helpText)
+          ] }),
+          /* @__PURE__ */ jsx(Box, { px: "x3", pt: "x4", pb: footerHeight, children })
+        ] }),
+        /* @__PURE__ */ jsx(BottomSheetParts.Footer, { children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", justifyContent: "space-between", gap: "x2", children: [
+          !hideCloseButton && /* @__PURE__ */ jsx(QuietButton, { onClick: onClose, children: closeButtonLabel }),
+          /* @__PURE__ */ jsxs(Flex, { gap: "x2", alignItems: "center", ml: "auto", children: [
+            secondaryAction && secondaryAction({ onClose }),
+            primaryAction && primaryAction({ onClose })
+          ] })
+        ] }) })
+      ] })
+    }
+  ) }) });
+}
+export {
+  BottomSheet as default
+};
+//# sourceMappingURL=BottomSheet.js.map

package/dist/esm/BottomSheet/BottomSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport { WidthProps } from \"styled-system\";\nimport { Box } from \"../Box\";\nimport { QuietButton } from \"../Button\";\nimport { Flex } from \"../Flex\";\nimport { noop } from \"../utils/noop\";\nimport { BottomSheetParts } from \"./BottomSheet.parts\";\n\nexport interface Props {\n  isOpen?: boolean;\n  \"aria-label\"?: string;\n  onClose?: () => void;\n  title?: string;\n  helpText?: React.ReactNode;\n  closeButtonLabel?: string;\n  hideCloseButton?: boolean;\n  secondaryAction?: (props: { onClose: () => void }) => React.ReactElement;\n  primaryAction?: (props: { onClose: () => void }) => React.ReactElement;\n  disableCloseOnOverlayClick?: boolean;\n  sheetWidth?: WidthProps[\"width\"];\n  contentWidth?: WidthProps[\"width\"];\n  children?: React.ReactNode;\n}\n\nexport default function BottomSheet({\n  title,\n  helpText,\n  closeButtonLabel,\n  secondaryAction,\n  primaryAction,\n  isOpen = false,\n  onClose = noop,\n  sheetWidth = \"100%\",\n  contentWidth = { small: \"100%\", medium: 704 },\n  disableCloseOnOverlayClick = false,\n  hideCloseButton = false,\n  children,\n  ...props\n}: Props) {\n  const { t } = useTranslation();\n  const theme = useTheme();\n\n  closeButtonLabel ||= t(\"close\");\n  const closeOnClick = !disableCloseOnOverlayClick;\n\n  /* \n    x5: The footer buttons are x5 in height\n    x2: The footer has a padding top and bottom of x2\n    x4: To match the top padding of the content\n  */\n  const footerHeight = `calc(${theme.space.x5} + (${theme.space.x2} * 2) + ${theme.space.x4})`;\n\n  return (\n    <BottomSheetParts.Root isOpen={isOpen} onClose={onClose}>\n      <BottomSheetParts.Overlay closeOnClick={closeOnClick}>\n        <BottomSheetParts.Sheet\n          width={sheetWidth}\n          maxWidth={{ small: `calc(100% - ${theme.space.x8})` }}\n          maxHeight={{ small: `calc(100dvh - ${theme.space.x7})`, medium: \"85.4dvh\" }}\n          aria-label={props[\"aria-label\"] ?? title}\n        >\n          <BottomSheetParts.ContentContainer>\n            <Box width={contentWidth} margin=\"0 auto\">\n              <BottomSheetParts.Header>\n                {title && <BottomSheetParts.Title>{title}</BottomSheetParts.Title>}\n                {helpText &&\n                  (typeof helpText === \"string\" ? (\n                    <BottomSheetParts.HelpText>{helpText}</BottomSheetParts.HelpText>\n                  ) : (\n                    helpText\n                  ))}\n              </BottomSheetParts.Header>\n              <Box px=\"x3\" pt=\"x4\" pb={footerHeight}>\n                {children}\n              </Box>\n            </Box>\n            <BottomSheetParts.Footer>\n              <Flex alignItems=\"center\" justifyContent=\"space-between\" gap=\"x2\">\n                {!hideCloseButton && <QuietButton onClick={onClose}>{closeButtonLabel}</QuietButton>}\n                <Flex gap=\"x2\" alignItems=\"center\" ml=\"auto\">\n                  {secondaryAction && secondaryAction({ onClose })}\n                  {primaryAction && primaryAction({ onClose })}\n                </Flex>\n              </Flex>\n            </BottomSheetParts.Footer>\n          </BottomSheetParts.ContentContainer>\n        </BottomSheetParts.Sheet>\n      </BottomSheetParts.Overlay>\n    </BottomSheetParts.Root>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AA0BA,SAAwB,YAAY;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AAAA,EACV,aAAa;AAAA,EACb,eAAe,EAAE,OAAO,QAAQ,QAAQ,IAAA;AAAA,EACxC,6BAA6B;AAAA,EAC7B,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,QAAQ,SAAA;AAEd,0CAAqB,EAAE,OAAO;AAC9B,QAAM,eAAe,CAAC;AAOtB,QAAM,eAAe,QAAQ,MAAM,MAAM,EAAE,OAAO,MAAM,MAAM,EAAE,WAAW,MAAM,MAAM,EAAE;AAEzF,SACE,oBAAC,iBAAiB,MAAjB,EAAsB,QAAgB,SACrC,UAAA,oBAAC,iBAAiB,SAAjB,EAAyB,cACxB,UAAA;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO;AAAA,MACP,UAAU,EAAE,OAAO,eAAe,MAAM,MAAM,EAAE,IAAA;AAAA,MAChD,WAAW,EAAE,OAAO,iBAAiB,MAAM,MAAM,EAAE,KAAK,QAAQ,UAAA;AAAA,MAChE,cAAY,MAAM,YAAY,KAAK;AAAA,MAEnC,UAAA,qBAAC,iBAAiB,kBAAjB,EACC,UAAA;AAAA,QAAA,qBAAC,KAAA,EAAI,OAAO,cAAc,QAAO,UAC/B,UAAA;AAAA,UAAA,qBAAC,iBAAiB,QAAjB,EACE,UAAA;AAAA,YAAA,SAAS,oBAAC,iBAAiB,OAAjB,EAAwB,UAAA,OAAM;AAAA,YACxC,aACE,OAAO,aAAa,+BAClB,iBAAiB,UAAjB,EAA2B,UAAA,SAAA,CAAS,IAErC;AAAA,UAAA,GAEN;AAAA,UACA,oBAAC,OAAI,IAAG,MAAK,IAAG,MAAK,IAAI,cACtB,SAAA,CACH;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,iBAAiB,QAAjB,EACC,UAAA,qBAAC,MAAA,EAAK,YAAW,UAAS,gBAAe,iBAAgB,KAAI,MAC1D,UAAA;AAAA,UAAA,CAAC,mBAAmB,oBAAC,aAAA,EAAY,SAAS,SAAU,UAAA,kBAAiB;AAAA,+BACrE,MAAA,EAAK,KAAI,MAAK,YAAW,UAAS,IAAG,QACnC,UAAA;AAAA,YAAA,mBAAmB,gBAAgB,EAAE,SAAS;AAAA,YAC9C,iBAAiB,cAAc,EAAE,QAAA,CAAS;AAAA,UAAA,EAAA,CAC7C;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;"}

package/dist/esm/BottomSheet/BottomSheet.parts.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { ContentContainer, Header, Title, HelpText, Footer, OverlayDialog, Overlay, SheetDialog, Sheet } from "./BottomSheet.styled.js";
+import { BottomSheetProvider, useBottomSheet } from "./BottomSheetProvider.js";
+import { AnimatePresence } from "../node_modules/.pnpm/framer-motion@12.35.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+const overlayVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 }
+};
+const sheetVariants = {
+  hidden: { y: "100%" },
+  visible: { y: 0 }
+};
+const transition = {
+  duration: 0.5,
+  ease: [0.32, 0.72, 0, 1]
+};
+function Root({ isOpen, onClose, children, ...props }) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { ...props, children: isOpen && /* @__PURE__ */ jsx(BottomSheetProvider, { isOpen, onClose, children }, "bottom-sheet") });
+}
+function OverlayPart({ closeOnClick, children, ...props }) {
+  const { onClose, isOpen } = useBottomSheet();
+  const [isAnimationComplete, setAnimationComplete] = React__default.useState(false);
+  return /* @__PURE__ */ jsx(OverlayDialog, { isOpen, ...props, children: /* @__PURE__ */ jsx(
+    Overlay,
+    {
+      "data-testid": "bottom-sheet-overlay",
+      "data-visible": isAnimationComplete ? true : void 0,
+      variants: overlayVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      transition,
+      onAnimationComplete: () => {
+        if (isOpen) {
+          setAnimationComplete(true);
+        }
+      },
+      onClick: closeOnClick ? onClose : void 0,
+      children
+    }
+  ) });
+}
+function SheetPart({ children, "aria-label": ariaLabel, ...props }) {
+  const { isOpen } = useBottomSheet();
+  const [isAnimationComplete, setAnimationComplete] = React__default.useState(false);
+  function handleSheetClick(e) {
+    e.stopPropagation();
+  }
+  return /* @__PURE__ */ jsx(SheetDialog, { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      "data-testid": "bottom-sheet-body",
+      "data-visible": isAnimationComplete ? true : void 0,
+      variants: sheetVariants,
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      transition,
+      onAnimationComplete: () => {
+        if (isOpen) {
+          setAnimationComplete(true);
+        }
+      },
+      onClick: handleSheetClick,
+      ...props,
+      children
+    }
+  ) });
+}
+const BottomSheetParts = {
+  Root,
+  Overlay: OverlayPart,
+  Sheet: SheetPart,
+  ContentContainer,
+  Header,
+  Title,
+  HelpText,
+  Footer
+};
+export {
+  BottomSheetParts
+};
+//# sourceMappingURL=BottomSheet.parts.js.map