@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Breadcrumbs/BreadcrumbsListItem.js

@@ -0,0 +1,55 @@
+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";
+import layout from "../node_modules/.pnpm/@styled-system_layout@5.1.2/node_modules/@styled-system/layout/dist/index.esm.js";
+import { color } from "../node_modules/.pnpm/@styled-system_color@5.1.2/node_modules/@styled-system/color/dist/index.esm.js";
+import flexbox from "../node_modules/.pnpm/@styled-system_flexbox@5.1.2/node_modules/@styled-system/flexbox/dist/index.esm.js";
+const BreadcrumbsListSeparator = styled.li(
+  ({ theme }) => ({
+    margin: 0,
+    listStyle: "none",
+    display: "inline-flex",
+    alignSelf: "center",
+    color: theme.colors.midGrey,
+    "a, p": {
+      fontSize: theme.fontSizes.base
+    },
+    "a:visited": {
+      color: theme.colors.darkBlue
+    }
+  }),
+  space,
+  layout,
+  color,
+  flexbox
+);
+const BreadcrumbsListItem = styled.li(
+  ({ theme }) => ({
+    margin: 0,
+    listStyle: "none",
+    display: "inline-flex",
+    alignSelf: "center",
+    color: theme.colors.midGrey,
+    a: {
+      color: theme.colors.darkBlue,
+      textDecorationLine: "none"
+    },
+    "a:visited": {
+      color: theme.colors.darkBlue
+    },
+    "a, p": {
+      padding: theme.space.none,
+      fontSize: theme.fontSizes.small,
+      lineHeight: theme.lineHeights.smallTextBase
+    }
+  }),
+  space,
+  layout,
+  color,
+  flexbox
+);
+export {
+  BreadcrumbsListItem,
+  BreadcrumbsListSeparator
+};
+//# sourceMappingURL=BreadcrumbsListItem.js.map

package/dist/esm/Breadcrumbs/BreadcrumbsListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsListItem.js","sources":["../../../src/Breadcrumbs/BreadcrumbsListItem.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { space, color, flexbox, layout } from \"styled-system\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\nexport const BreadcrumbsListSeparator = styled.li(\n  ({ theme }) => ({\n    margin: 0,\n    listStyle: \"none\",\n    display: \"inline-flex\",\n    alignSelf: \"center\",\n    color: theme.colors.midGrey,\n    \"a, p\": {\n      fontSize: theme.fontSizes.base,\n    },\n    \"a:visited\": {\n      color: theme.colors.darkBlue,\n    },\n  }),\n  space,\n  layout,\n  color,\n  flexbox\n);\n\nexport const BreadcrumbsListItem = styled.li<{ variant: ComponentVariant }>(\n  ({ theme }) => ({\n    margin: 0,\n    listStyle: \"none\",\n    display: \"inline-flex\",\n    alignSelf: \"center\",\n    color: theme.colors.midGrey,\n    a: {\n      color: theme.colors.darkBlue,\n      textDecorationLine: \"none\",\n    },\n    \"a:visited\": {\n      color: theme.colors.darkBlue,\n    },\n    \"a, p\": {\n      padding: theme.space.none,\n      fontSize: theme.fontSizes.small,\n      lineHeight: theme.lineHeights.smallTextBase,\n    },\n  }),\n  space,\n  layout,\n  color,\n  flexbox\n);\n"],"names":[],"mappings":";;;;;;AAIO,MAAM,2BAA2B,OAAO;AAAA,EAC7C,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO,MAAM,OAAO;AAAA,IACpB,QAAQ;AAAA,MACN,UAAU,MAAM,UAAU;AAAA,IAAA;AAAA,IAE5B,aAAa;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EACtB;AAAA,EAEF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,sBAAsB,OAAO;AAAA,EACxC,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO,MAAM,OAAO;AAAA,IACpB,GAAG;AAAA,MACD,OAAO,MAAM,OAAO;AAAA,MACpB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,aAAa;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,IAEtB,QAAQ;AAAA,MACN,SAAS,MAAM,MAAM;AAAA,MACrB,UAAU,MAAM,UAAU;AAAA,MAC1B,YAAY,MAAM,YAAY;AAAA,IAAA;AAAA,EAChC;AAAA,EAEF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/Button/Button.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default 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 { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import Icon from "../Icon/Icon.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 WrapperButton = styled.button(
+  ({ fullWidth }) => ({
+    width: fullWidth ? "100%" : "auto"
+  }),
+  ({ disabled, theme }) => ({
+    userSelect: "none",
+    touchAction: "none",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: theme.fontSizes.medium,
+    fontWeight: theme.fontWeights.medium,
+    textDecoration: "none",
+    verticalAlign: "middle",
+    lineHeight: theme.lineHeights.base,
+    cursor: disabled ? "default" : "pointer",
+    color: theme.colors.blue,
+    backgroundColor: theme.colors.white,
+    border: `1px solid ${theme.colors.blue}`,
+    borderRadius: theme.radii.medium,
+    margin: theme.space.none,
+    transition: "background-color .2s, transform .2s ease-in",
+    "&:hover": {
+      backgroundColor: disabled ? null : theme.colors.lightBlue
+    },
+    "&:focus": {
+      outline: "none",
+      borderColor: theme.colors.blue,
+      boxShadow: theme.shadows.focus,
+      backgroundColor: theme.colors.white,
+      "&:hover": {
+        backgroundColor: theme.colors.lightBlue
+      }
+    },
+    "&:active": {
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      opacity: ".5"
+    },
+    padding: `${subPx(theme.space.x1)} ${theme.space.x2}`
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  }),
+  ({ theme }) => variant({
+    prop: "size",
+    variants: {
+      small: {
+        fontSize: "small",
+        lineHeight: "smallTextCompressed",
+        padding: `${subPx(theme.space.half)} ${theme.space.x1}`
+      },
+      medium: {
+        fontSize: "base",
+        padding: `${subPx(theme.space.x1)} ${theme.space.x2}`
+      }
+    }
+  }),
+  space
+);
+const Button = React__default.forwardRef(
+  ({ children, iconSide = "right", icon, className, asLink, variant: variant2, size, ...props }, ref) => {
+    const {
+      lineHeights: { smallTextCompressed }
+    } = useTheme();
+    const componentVariant = useComponentVariant(variant2);
+    return /* @__PURE__ */ jsxs(
+      WrapperButton,
+      {
+        as: asLink ? "a" : "button",
+        ref,
+        className,
+        variant: componentVariant,
+        size,
+        ...props,
+        children: [
+          icon && iconSide === "left" && /* @__PURE__ */ jsx(Icon, { size: `${smallTextCompressed}em`, mr: "half", icon }),
+          children,
+          icon && iconSide === "right" && /* @__PURE__ */ jsx(Icon, { size: `${smallTextCompressed}em`, ml: "half", icon })
+        ]
+      }
+    );
+  }
+);
+export {
+  Button as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/esm/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport type { IconName } from \"@nulogy/icons\";\nimport { space, SpaceProps, variant } from \"styled-system\";\nimport { Icon } from \"../Icon\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport {\n  useComponentVariant,\n  ComponentVariant as ContextComponentSize,\n  ComponentVariant,\n} from \"../NDSProvider/ComponentVariantContext\";\nimport { subPx } from \"../utils\";\n\nexport type ButtonProps = SpaceProps &\n  React.ComponentPropsWithRef<\"button\"> & {\n    className?: string;\n    icon?: IconName | \"loading\";\n    iconSide?: \"left\" | \"right\";\n    size?: \"small\" | \"medium\";\n    variant?: ComponentVariant;\n    fullWidth?: boolean;\n    asLink?: boolean;\n    children?: React.ReactNode;\n    theme?: DefaultNDSThemeType;\n    href?: string;\n  };\n\nconst WrapperButton = styled.button<ButtonProps>(\n  ({ fullWidth }) => ({\n    width: fullWidth ? \"100%\" : \"auto\",\n  }),\n  ({ disabled, theme }) => ({\n    userSelect: \"none\",\n    touchAction: \"none\",\n    display: \"inline-flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    fontSize: theme.fontSizes.medium,\n    fontWeight: theme.fontWeights.medium,\n    textDecoration: \"none\",\n    verticalAlign: \"middle\",\n    lineHeight: theme.lineHeights.base,\n    cursor: disabled ? \"default\" : \"pointer\",\n    color: theme.colors.blue,\n    backgroundColor: theme.colors.white,\n    border: `1px solid ${theme.colors.blue}`,\n    borderRadius: theme.radii.medium,\n    margin: theme.space.none,\n    transition: \"background-color .2s, transform .2s ease-in\",\n    \"&:hover\": {\n      backgroundColor: disabled ? null : theme.colors.lightBlue,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n      borderColor: theme.colors.blue,\n      boxShadow: theme.shadows.focus,\n      backgroundColor: theme.colors.white,\n      \"&:hover\": {\n        backgroundColor: theme.colors.lightBlue,\n      },\n    },\n    \"&:active\": {\n      transform: \"scale(0.98)\",\n    },\n    \"&:disabled\": {\n      opacity: \".5\",\n    },\n    padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  }),\n  ({ theme }) =>\n    variant({\n      prop: \"size\",\n      variants: {\n        small: {\n          fontSize: \"small\",\n          lineHeight: \"smallTextCompressed\",\n          padding: `${subPx(theme.space.half)} ${theme.space.x1}`,\n        },\n\n        medium: {\n          fontSize: \"base\",\n          padding: `${subPx(theme.space.x1)} ${theme.space.x2}`,\n        },\n      },\n    }),\n  space\n);\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, iconSide = \"right\", icon, className, asLink, variant, size, ...props }: ButtonProps, ref) => {\n    const {\n      lineHeights: { smallTextCompressed },\n    } = useTheme();\n\n    const componentVariant = useComponentVariant(variant as ContextComponentSize);\n\n    return (\n      <WrapperButton\n        as={asLink ? \"a\" : \"button\"}\n        ref={ref}\n        className={className}\n        variant={componentVariant}\n        size={size}\n        {...props}\n      >\n        {icon && iconSide === \"left\" && <Icon size={`${smallTextCompressed}em`} mr=\"half\" icon={icon} />}\n        {children}\n        {icon && iconSide === \"right\" && <Icon size={`${smallTextCompressed}em`} ml=\"half\" icon={icon} />}\n      </WrapperButton>\n    );\n  }\n);\n\nexport default Button;\n"],"names":["React","variant"],"mappings":";;;;;;;;;AA2BA,MAAM,gBAAgB,OAAO;AAAA,EAC3B,CAAC,EAAE,UAAA,OAAiB;AAAA,IAClB,OAAO,YAAY,SAAS;AAAA,EAAA;AAAA,EAE9B,CAAC,EAAE,UAAU,aAAa;AAAA,IACxB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,YAAY,MAAM,YAAY;AAAA,IAC9B,QAAQ,WAAW,YAAY;AAAA,IAC/B,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ,aAAa,MAAM,OAAO,IAAI;AAAA,IACtC,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,MAAM,MAAM;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,MACT,iBAAiB,WAAW,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,IAElD,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,MAC1B,WAAW,MAAM,QAAQ;AAAA,MACzB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,QACT,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAChC;AAAA,IAEF,YAAY;AAAA,MACV,WAAW;AAAA,IAAA;AAAA,IAEb,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS,GAAG,MAAM,MAAM,MAAM,EAAE,CAAC,IAAI,MAAM,MAAM,EAAE;AAAA,EAAA;AAAA,EAErD,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAAA,EACD,CAAC,EAAE,MAAA,MACD,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,SAAS,GAAG,MAAM,MAAM,MAAM,IAAI,CAAC,IAAI,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,MAGvD,QAAQ;AAAA,QACN,UAAU;AAAA,QACV,SAAS,GAAG,MAAM,MAAM,MAAM,EAAE,CAAC,IAAI,MAAM,MAAM,EAAE;AAAA,MAAA;AAAA,IACrD;AAAA,EACF,CACD;AAAA,EACH;AACF;AAEA,MAAM,SAASA,eAAM;AAAA,EACnB,CAAC,EAAE,UAAU,WAAW,SAAS,MAAM,WAAW,QAAQ,SAAAC,UAAS,MAAM,GAAG,MAAA,GAAsB,QAAQ;AACxG,UAAM;AAAA,MACJ,aAAa,EAAE,oBAAA;AAAA,IAAoB,IACjC,SAAA;AAEJ,UAAM,mBAAmB,oBAAoBA,QAA+B;AAE5E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,SAAS,MAAM;AAAA,QACnB;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,aAAa,UAAU,oBAAC,MAAA,EAAK,MAAM,GAAG,mBAAmB,MAAM,IAAG,QAAO,KAAA,CAAY;AAAA,UAC7F;AAAA,UACA,QAAQ,aAAa,WAAW,oBAAC,MAAA,EAAK,MAAM,GAAG,mBAAmB,MAAM,IAAG,QAAO,KAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrG;AACF;"}

package/dist/esm/Button/CloseButton.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { useTheme, styled } from "styled-components";
+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 Icon from "../Icon/Icon.js";
+const WrapperButton = styled.button(({ disabled, theme }) => ({
+  background: "transparent",
+  border: "none",
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  padding: 0,
+  color: theme.colors.black,
+  cursor: disabled ? "arrow" : "pointer",
+  [`${Icon}`]: {
+    borderRadius: theme.radii.rounded,
+    transition: ".2s"
+  },
+  "&:hover": {
+    [`${Icon}`]: {
+      backgroundColor: theme.colors.lightGrey
+    }
+  },
+  "&:active": {
+    [`${Icon}`]: {
+      transform: "scale(0.875)",
+      transition: ".2s ease-in"
+    }
+  },
+  "&:disabled": {
+    opacity: ".5",
+    "&:hover, &:active": {
+      [`${Icon}`]: {
+        background: "none",
+        transform: "none"
+      }
+    }
+  },
+  "&:focus": {
+    outline: "none",
+    [`${Icon}`]: {
+      boxShadow: theme.shadows.focus
+    }
+  }
+}));
+const CloseButton = React__default.forwardRef((props, ref) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(WrapperButton, { "aria-label": t("close"), ref, ...props, children: /* @__PURE__ */ jsx(Icon, { size: theme.space.x4, icon: "close", p: "half" }) });
+});
+export {
+  CloseButton as default
+};
+//# sourceMappingURL=CloseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","sources":["../../../src/Button/CloseButton.tsx"],"sourcesContent":["import React, { ComponentPropsWithRef } from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport { useTranslation } from \"react-i18next\";\nimport { Icon } from \"../Icon\";\n\nconst WrapperButton = styled.button(({ disabled, theme }) => ({\n  background: \"transparent\",\n  border: \"none\",\n  position: \"relative\",\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  padding: 0,\n  color: theme.colors.black,\n  cursor: disabled ? \"arrow\" : \"pointer\",\n  [`${Icon}`]: {\n    borderRadius: theme.radii.rounded,\n    transition: \".2s\",\n  },\n  \"&:hover\": {\n    [`${Icon}`]: {\n      backgroundColor: theme.colors.lightGrey,\n    },\n  },\n  \"&:active\": {\n    [`${Icon}`]: {\n      transform: \"scale(0.875)\",\n      transition: \".2s ease-in\",\n    },\n  },\n  \"&:disabled\": {\n    opacity: \".5\",\n    \"&:hover, &:active\": {\n      [`${Icon}`]: {\n        background: \"none\",\n        transform: \"none\",\n      },\n    },\n  },\n  \"&:focus\": {\n    outline: \"none\",\n    [`${Icon}`]: {\n      boxShadow: theme.shadows.focus,\n    },\n  },\n}));\n\nconst CloseButton = React.forwardRef<HTMLButtonElement, ComponentPropsWithRef<\"button\">>((props, ref) => {\n  const { t } = useTranslation();\n  const theme = useTheme();\n\n  return (\n    <WrapperButton aria-label={t(\"close\")} ref={ref} {...props}>\n      <Icon size={theme.space.x4} icon=\"close\" p=\"half\" />\n    </WrapperButton>\n  );\n});\n\nexport default CloseButton;\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,gBAAgB,OAAO,OAAO,CAAC,EAAE,UAAU,aAAa;AAAA,EAC5D,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO,MAAM,OAAO;AAAA,EACpB,QAAQ,WAAW,UAAU;AAAA,EAC7B,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,IACX,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,EAAA;AAAA,EAEd,WAAW;AAAA,IACT,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,MACX,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAAA,EAEF,YAAY;AAAA,IACV,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,qBAAqB;AAAA,MACnB,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,QACX,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EACF;AAAA,EAEF,WAAW;AAAA,IACT,SAAS;AAAA,IACT,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,MACX,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B;AAEJ,EAAE;AAEF,MAAM,cAAcA,eAAM,WAA+D,CAAC,OAAO,QAAQ;AACvG,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,QAAQ,SAAA;AAEd,6BACG,eAAA,EAAc,cAAY,EAAE,OAAO,GAAG,KAAW,GAAG,OACnD,8BAAC,MAAA,EAAK,MAAM,MAAM,MAAM,IAAI,MAAK,SAAQ,GAAE,QAAO,GACpD;AAEJ,CAAC;"}

package/dist/esm/Button/ControlIcon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import Icon from "../Icon/Icon.js";
+import { space } from "../node_modules/.pnpm/@styled-system_space@5.1.2/node_modules/@styled-system/space/dist/index.esm.js";
+import layout from "../node_modules/.pnpm/@styled-system_layout@5.1.2/node_modules/@styled-system/layout/dist/index.esm.js";
+const getIconColorByState = ({ toggled, disabled, theme }) => {
+  if (toggled) return theme.colors.darkBlue;
+  if (disabled) return theme.colors.grey;
+  return theme.colors.darkGrey;
+};
+const StyledButton = styled.button(
+  ({ toggled, disabled, theme }) => ({
+    background: "transparent",
+    border: "none",
+    display: "flex",
+    alignItems: "center",
+    padding: theme.space.half,
+    borderRadius: theme.radii.rounded,
+    color: getIconColorByState({ toggled, disabled, theme }),
+    "&:focus": {
+      outline: "none",
+      boxShadow: theme.shadows.focus
+    },
+    "&:hover:enabled": {
+      cursor: "pointer",
+      color: theme.colors.blackBlue,
+      backgroundColor: theme.colors.lightGrey
+    }
+  }),
+  space,
+  layout
+);
+const ControlIcon = React__default.forwardRef(
+  ({ icon, toggled, disabled, label, size = "x4", type = "button", ...props }, ref) => /* @__PURE__ */ jsx(StyledButton, { "aria-label": label, ref, disabled, toggled, type, ...props, children: /* @__PURE__ */ jsx(Icon, { size, icon }) })
+);
+export {
+  ControlIcon as default
+};
+//# sourceMappingURL=ControlIcon.js.map

package/dist/esm/Button/ControlIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlIcon.js","sources":["../../../src/Button/ControlIcon.tsx"],"sourcesContent":["import type { IconName } from \"@nulogy/icons\";\nimport React from \"react\";\nimport { styled } from \"styled-components\";\nimport { layout, LayoutProps, space, SpaceProps } from \"styled-system\";\nimport { Icon } from \"../Icon\";\n\ntype ControlIconProps = React.ComponentPropsWithRef<\"button\"> &\n  SpaceProps &\n  LayoutProps & {\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    icon: IconName | \"loading\";\n    toggled?: boolean;\n    disabled?: boolean;\n    size?: string;\n    type?: string;\n    label?: string;\n  };\n\nconst getIconColorByState = ({ toggled, disabled, theme }) => {\n  if (toggled) return theme.colors.darkBlue;\n\n  if (disabled) return theme.colors.grey;\n\n  return theme.colors.darkGrey;\n};\n\nconst StyledButton = styled.button<{\n  toggled?: ControlIconProps[\"toggled\"];\n  disabled?: ControlIconProps[\"disabled\"];\n}>(\n  ({ toggled, disabled, theme }) => ({\n    background: \"transparent\",\n    border: \"none\",\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: theme.space.half,\n    borderRadius: theme.radii.rounded,\n    color: getIconColorByState({ toggled, disabled, theme }),\n    \"&:focus\": {\n      outline: \"none\",\n      boxShadow: theme.shadows.focus,\n    },\n    \"&:hover:enabled\": {\n      cursor: \"pointer\",\n      color: theme.colors.blackBlue,\n      backgroundColor: theme.colors.lightGrey,\n    },\n  }),\n  space,\n  layout\n);\n\nconst ControlIcon = React.forwardRef<HTMLButtonElement, ControlIconProps>(\n  ({ icon, toggled, disabled, label, size = \"x4\", type = \"button\", ...props }, ref) => (\n    <StyledButton aria-label={label} ref={ref} disabled={disabled} toggled={toggled} type={type} {...props}>\n      <Icon size={size} icon={icon} />\n    </StyledButton>\n  )\n);\nexport default ControlIcon;\n"],"names":["React"],"mappings":";;;;;;;AAkBA,MAAM,sBAAsB,CAAC,EAAE,SAAS,UAAU,YAAY;AAC5D,MAAI,QAAS,QAAO,MAAM,OAAO;AAEjC,MAAI,SAAU,QAAO,MAAM,OAAO;AAElC,SAAO,MAAM,OAAO;AACtB;AAEA,MAAM,eAAe,OAAO;AAAA,EAI1B,CAAC,EAAE,SAAS,UAAU,aAAa;AAAA,IACjC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS,MAAM,MAAM;AAAA,IACrB,cAAc,MAAM,MAAM;AAAA,IAC1B,OAAO,oBAAoB,EAAE,SAAS,UAAU,OAAO;AAAA,IACvD,WAAW;AAAA,MACT,SAAS;AAAA,MACT,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE3B,mBAAmB;AAAA,MACjB,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAAA,EAEF;AAAA,EACA;AACF;AAEA,MAAM,cAAcA,eAAM;AAAA,EACxB,CAAC,EAAE,MAAM,SAAS,UAAU,OAAO,OAAO,MAAM,OAAO,UAAU,GAAG,MAAA,GAAS,QAC3E,oBAAC,cAAA,EAAa,cAAY,OAAO,KAAU,UAAoB,SAAkB,MAAa,GAAG,OAC/F,UAAA,oBAAC,MAAA,EAAK,MAAY,KAAA,CAAY,EAAA,CAChC;AAEJ;"}

package/dist/esm/Button/DangerButton.js

@@ -0,0 +1,25 @@
+import { styled } from "styled-components";
+import { darken as curriedDarken$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import Button from "./Button.js";
+const DangerButton = styled(Button)(({ disabled, theme }) => ({
+  color: theme.colors.white,
+  borderColor: theme.colors.red,
+  backgroundColor: theme.colors.red,
+  "&:hover": {
+    backgroundColor: disabled ? void 0 : curriedDarken$1(0.1, theme.colors.red),
+    borderColor: disabled ? void 0 : curriedDarken$1(0.1, theme.colors.red)
+  },
+  "&:focus": {
+    outline: "none",
+    backgroundColor: theme.colors.red,
+    borderColor: theme.colors.red,
+    boxShadow: theme.shadows.error,
+    "&:hover": {
+      backgroundColor: curriedDarken$1(0.1, theme.colors.red)
+    }
+  }
+}));
+export {
+  DangerButton as default
+};
+//# sourceMappingURL=DangerButton.js.map

package/dist/esm/Button/DangerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DangerButton.js","sources":["../../../src/Button/DangerButton.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { darken } from \"polished\";\nimport Button, { ButtonProps } from \"./Button\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\ntype DangerButtonProps = ButtonProps & {\n  disabled?: boolean;\n  theme?: DefaultNDSThemeType;\n};\nconst DangerButton = styled(Button)(({ disabled, theme }: DangerButtonProps) => ({\n  color: theme.colors.white,\n  borderColor: theme.colors.red,\n  backgroundColor: theme.colors.red,\n  \"&:hover\": {\n    backgroundColor: disabled ? undefined : darken(0.1, theme.colors.red),\n    borderColor: disabled ? undefined : darken(0.1, theme.colors.red),\n  },\n  \"&:focus\": {\n    outline: \"none\",\n    backgroundColor: theme.colors.red,\n    borderColor: theme.colors.red,\n    boxShadow: theme.shadows.error,\n    \"&:hover\": {\n      backgroundColor: darken(0.1, theme.colors.red),\n    },\n  },\n}));\nexport default DangerButton;\n"],"names":["darken"],"mappings":";;;AASA,MAAM,eAAe,OAAO,MAAM,EAAE,CAAC,EAAE,UAAU,aAAgC;AAAA,EAC/E,OAAO,MAAM,OAAO;AAAA,EACpB,aAAa,MAAM,OAAO;AAAA,EAC1B,iBAAiB,MAAM,OAAO;AAAA,EAC9B,WAAW;AAAA,IACT,iBAAiB,WAAW,SAAYA,gBAAO,KAAK,MAAM,OAAO,GAAG;AAAA,IACpE,aAAa,WAAW,SAAYA,gBAAO,KAAK,MAAM,OAAO,GAAG;AAAA,EAAA;AAAA,EAElE,WAAW;AAAA,IACT,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,MAAM,QAAQ;AAAA,IACzB,WAAW;AAAA,MACT,iBAAiBA,gBAAO,KAAK,MAAM,OAAO,GAAG;AAAA,IAAA;AAAA,EAC/C;AAEJ,EAAE;"}

package/dist/esm/Button/IconicButton.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { transparentize as curriedTransparentize$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import "@nulogy/icons";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import Icon from "../Icon/Icon.js";
+import Text from "../Type/Text.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 IconWrapper = styled.span(({ theme, size }) => ({
+  display: "inline-flex",
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: theme.radii.rounded,
+  height: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
+  width: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
+  transition: ".2s"
+}));
+const HoverText = styled.div(({ theme }) => ({
+  whiteSpace: "nowrap",
+  fontSize: theme.fontSizes.small,
+  lineHeight: theme.lineHeights.smallTextCompressed,
+  color: theme.colors.whiteGrey,
+  backgroundColor: curriedTransparentize$1(0.15, theme.colors.blackBlue),
+  borderRadius: theme.radii.medium,
+  marginTop: theme.space.half,
+  padding: `${theme.space.half} ${theme.space.x1}`,
+  pointerEvents: "none",
+  position: "absolute",
+  top: "100%",
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 1
+}));
+const WrapperButton = styled.button(
+  ({ disabled, hoverBackgroundColor, theme }) => ({
+    background: "transparent",
+    border: "none",
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    cursor: disabled ? "default" : "pointer",
+    [`${Text}`]: {
+      display: "block",
+      fontWeight: theme.fontWeights.medium,
+      textAlign: "left"
+    },
+    [`${HoverText}`]: {
+      opacity: "0"
+    },
+    "&:hover": {
+      [`${IconWrapper}`]: {
+        backgroundColor: theme.colors[hoverBackgroundColor] ?? hoverBackgroundColor
+      },
+      [`${HoverText}`]: {
+        opacity: "1"
+      }
+    },
+    "&:active": {
+      [`${IconWrapper}`]: {
+        transform: "scale(0.875)",
+        transition: ".2s ease-in"
+      }
+    },
+    "&:disabled": {
+      opacity: ".5",
+      "&:hover, &:active": {
+        [`${IconWrapper}`]: {
+          background: "none",
+          transform: "none"
+        }
+      }
+    },
+    "&:focus": {
+      outline: "none",
+      [`${IconWrapper}`]: {
+        boxShadow: theme.shadows.focus
+      },
+      [`${HoverText}`]: {
+        opacity: "1"
+      }
+    },
+    paddingTop: theme.space.half,
+    paddingBottom: theme.space.half,
+    paddingLeft: theme.space.none,
+    paddingRight: theme.space.none
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  }),
+  space
+);
+const IconicButton = React__default.forwardRef(
+  ({
+    children,
+    color = "darkBlue",
+    hoverBackgroundColor = "lightBlue",
+    icon,
+    labelHidden,
+    className,
+    iconSize = "x3",
+    fontSize,
+    tooltip,
+    variant: variant2,
+    ...props
+  }, forwardedRef) => {
+    const componentVariant = useComponentVariant(variant2);
+    return /* @__PURE__ */ jsxs(
+      WrapperButton,
+      {
+        ref: forwardedRef,
+        "aria-label": props["aria-label"] ? props["aria-label"] : typeof children === "string" ? children : void 0,
+        className,
+        hoverBackgroundColor,
+        variant: componentVariant,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(IconWrapper, { size: iconSize, children: /* @__PURE__ */ jsx(Icon, { size: iconSize, icon, color }) }),
+          (labelHidden || tooltip) && /* @__PURE__ */ jsx(HoverText, { children: tooltip ?? children }),
+          children && !labelHidden && (typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { fontSize, mr: "half", ml: "half", color, children }) : children)
+        ]
+      }
+    );
+  }
+);
+export {
+  IconicButton as default
+};
+//# sourceMappingURL=IconicButton.js.map

package/dist/esm/Button/IconicButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconicButton.js","sources":["../../../src/Button/IconicButton.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport { space, SpaceProps, variant } from \"styled-system\";\nimport { transparentize } from \"polished\";\nimport icons from \"@nulogy/icons\";\nimport { IconName } from \"@nulogy/icons\";\nimport { Icon } from \"../Icon\";\nimport { Text } from \"../Type\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\ninterface BaseProps {\n  variant?: ComponentVariant;\n  color?: string;\n  labelHidden?: boolean;\n  icon?: IconName | \"loading\";\n  iconSize?: string;\n  hoverBackgroundColor?: string;\n  fontSize?: string;\n  tooltip?: React.ReactNode;\n}\n\ninterface IconicButtonProps\n  extends BaseProps, SpaceProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> {}\n\nconst IconWrapper = styled.span<{ size: string }>(({ theme, size }) => ({\n  display: \"inline-flex\",\n  flexShrink: 0,\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderRadius: theme.radii.rounded,\n  height: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,\n  width: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,\n  transition: \".2s\",\n}));\n\nconst HoverText = styled.div(({ theme }) => ({\n  whiteSpace: \"nowrap\",\n  fontSize: theme.fontSizes.small,\n  lineHeight: theme.lineHeights.smallTextCompressed,\n  color: theme.colors.whiteGrey,\n  backgroundColor: transparentize(0.15, theme.colors.blackBlue),\n  borderRadius: theme.radii.medium,\n  marginTop: theme.space.half,\n  padding: `${theme.space.half} ${theme.space.x1}`,\n  pointerEvents: \"none\",\n  position: \"absolute\",\n  top: \"100%\",\n  left: \"50%\",\n  transform: \"translateX(-50%)\",\n  zIndex: 1,\n}));\n\nconst WrapperButton = styled.button<IconicButtonProps>(\n  ({ disabled, hoverBackgroundColor, theme }) => ({\n    background: \"transparent\",\n    border: \"none\",\n    position: \"relative\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    cursor: disabled ? \"default\" : \"pointer\",\n\n    [`${Text}`]: {\n      display: \"block\",\n      fontWeight: theme.fontWeights.medium,\n      textAlign: \"left\",\n    },\n    [`${HoverText}`]: {\n      opacity: \"0\",\n    },\n    \"&:hover\": {\n      [`${IconWrapper}`]: {\n        backgroundColor: theme.colors[hoverBackgroundColor] ?? hoverBackgroundColor,\n      },\n      [`${HoverText}`]: {\n        opacity: \"1\",\n      },\n    },\n    \"&:active\": {\n      [`${IconWrapper}`]: {\n        transform: \"scale(0.875)\",\n        transition: \".2s ease-in\",\n      },\n    },\n    \"&:disabled\": {\n      opacity: \".5\",\n      \"&:hover, &:active\": {\n        [`${IconWrapper}`]: {\n          background: \"none\",\n          transform: \"none\",\n        },\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n      [`${IconWrapper}`]: {\n        boxShadow: theme.shadows.focus,\n      },\n      [`${HoverText}`]: {\n        opacity: \"1\",\n      },\n    },\n    paddingTop: theme.space.half,\n    paddingBottom: theme.space.half,\n    paddingLeft: theme.space.none,\n    paddingRight: theme.space.none,\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  }),\n  space\n);\n\nconst IconicButton = React.forwardRef<HTMLButtonElement, IconicButtonProps>(\n  (\n    {\n      children,\n      color = \"darkBlue\",\n      hoverBackgroundColor = \"lightBlue\",\n      icon,\n      labelHidden,\n      className,\n      iconSize = \"x3\",\n      fontSize,\n      tooltip,\n      variant,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const componentVariant = useComponentVariant(variant);\n\n    return (\n      <WrapperButton\n        ref={forwardedRef}\n        aria-label={props[\"aria-label\"] ? props[\"aria-label\"] : typeof children === \"string\" ? children : undefined}\n        className={className}\n        hoverBackgroundColor={hoverBackgroundColor}\n        variant={componentVariant}\n        {...props}\n      >\n        <IconWrapper size={iconSize}>\n          <Icon size={iconSize} icon={icon} color={color} />\n        </IconWrapper>\n        {(labelHidden || tooltip) && <HoverText>{tooltip ?? children}</HoverText>}\n        {children &&\n          !labelHidden &&\n          (typeof children === \"string\" || typeof children === \"number\" ? (\n            <Text fontSize={fontSize} mr=\"half\" ml=\"half\" color={color}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n      </WrapperButton>\n    );\n  }\n);\n\nexport const iconNames = Object.keys(icons);\n\nexport default IconicButton;\n"],"names":["transparentize","React","variant"],"mappings":";;;;;;;;;;;AAwBA,MAAM,cAAc,OAAO,KAAuB,CAAC,EAAE,OAAO,YAAY;AAAA,EACtE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ,QAAQ,MAAM,MAAM,IAAI,KAAK,IAAI,MAAM,MAAM,MAAM,EAAE;AAAA,EAC7D,OAAO,QAAQ,MAAM,MAAM,IAAI,KAAK,IAAI,MAAM,MAAM,MAAM,EAAE;AAAA,EAC5D,YAAY;AACd,EAAE;AAEF,MAAM,YAAY,OAAO,IAAI,CAAC,EAAE,aAAa;AAAA,EAC3C,YAAY;AAAA,EACZ,UAAU,MAAM,UAAU;AAAA,EAC1B,YAAY,MAAM,YAAY;AAAA,EAC9B,OAAO,MAAM,OAAO;AAAA,EACpB,iBAAiBA,wBAAe,MAAM,MAAM,OAAO,SAAS;AAAA,EAC5D,cAAc,MAAM,MAAM;AAAA,EAC1B,WAAW,MAAM,MAAM;AAAA,EACvB,SAAS,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,EAAE;AAAA,EAC9C,eAAe;AAAA,EACf,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AACV,EAAE;AAEF,MAAM,gBAAgB,OAAO;AAAA,EAC3B,CAAC,EAAE,UAAU,sBAAsB,aAAa;AAAA,IAC9C,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ,WAAW,YAAY;AAAA,IAE/B,CAAC,GAAG,IAAI,EAAE,GAAG;AAAA,MACX,SAAS;AAAA,MACT,YAAY,MAAM,YAAY;AAAA,MAC9B,WAAW;AAAA,IAAA;AAAA,IAEb,CAAC,GAAG,SAAS,EAAE,GAAG;AAAA,MAChB,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,CAAC,GAAG,WAAW,EAAE,GAAG;AAAA,QAClB,iBAAiB,MAAM,OAAO,oBAAoB,KAAK;AAAA,MAAA;AAAA,MAEzD,CAAC,GAAG,SAAS,EAAE,GAAG;AAAA,QAChB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,YAAY;AAAA,MACV,CAAC,GAAG,WAAW,EAAE,GAAG;AAAA,QAClB,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,qBAAqB;AAAA,QACnB,CAAC,GAAG,WAAW,EAAE,GAAG;AAAA,UAClB,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEF,WAAW;AAAA,MACT,SAAS;AAAA,MACT,CAAC,GAAG,WAAW,EAAE,GAAG;AAAA,QAClB,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,MAE3B,CAAC,GAAG,SAAS,EAAE,GAAG;AAAA,QAChB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,IAC3B,aAAa,MAAM,MAAM;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAAA;AAAA,EAE5B,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AAAA,EACD;AACF;AAEA,MAAM,eAAeC,eAAM;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,uBAAuB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,SAAAC;AAAAA,IACA,GAAG;AAAA,EAAA,GAEL,iBACG;AACH,UAAM,mBAAmB,oBAAoBA,QAAO;AAEpD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAY,MAAM,YAAY,IAAI,MAAM,YAAY,IAAI,OAAO,aAAa,WAAW,WAAW;AAAA,QAClG;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY,MAAM,UACjB,UAAA,oBAAC,QAAK,MAAM,UAAU,MAAY,MAAA,CAAc,EAAA,CAClD;AAAA,WACE,eAAe,YAAY,oBAAC,WAAA,EAAW,qBAAW,UAAS;AAAA,UAC5D,YACC,CAAC,gBACA,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,oBAAC,MAAA,EAAK,UAAoB,IAAG,QAAO,IAAG,QAAO,OAC3C,UACH,IAEA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIV;AACF;"}

package/dist/esm/Button/PrimaryButton.js

@@ -0,0 +1,27 @@
+import { styled } from "styled-components";
+import { darken as curriedDarken$1 } from "../node_modules/.pnpm/polished@4.3.1/node_modules/polished/dist/polished.esm.js";
+import Button from "./Button.js";
+const PrimaryButton = styled(Button)(
+  ({ disabled, theme }) => ({
+    color: theme.colors.white,
+    borderColor: theme.colors.blue,
+    backgroundColor: theme.colors.blue,
+    "&:hover": {
+      backgroundColor: disabled ? void 0 : curriedDarken$1(0.1, theme.colors.blue),
+      borderColor: disabled ? void 0 : curriedDarken$1(0.1, theme.colors.blue)
+    },
+    "&:focus": {
+      outline: "none",
+      borderColor: theme.colors.blue,
+      boxShadow: theme.shadows.focus,
+      backgroundColor: theme.colors.blue,
+      "&:hover": {
+        backgroundColor: curriedDarken$1(0.1, theme.colors.blue)
+      }
+    }
+  })
+);
+export {
+  PrimaryButton as default
+};
+//# sourceMappingURL=PrimaryButton.js.map

package/dist/esm/Button/PrimaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.js","sources":["../../../src/Button/PrimaryButton.tsx"],"sourcesContent":["import { styled, CSSObject } from \"styled-components\";\nimport { darken } from \"polished\";\nimport Button, { ButtonProps } from \"./Button\";\n\nconst PrimaryButton = styled(Button)(\n  ({ disabled, theme }: ButtonProps): CSSObject => ({\n    color: theme.colors.white,\n    borderColor: theme.colors.blue,\n    backgroundColor: theme.colors.blue,\n    \"&:hover\": {\n      backgroundColor: disabled ? undefined : darken(0.1, theme.colors.blue),\n      borderColor: disabled ? undefined : darken(0.1, theme.colors.blue),\n    },\n    \"&:focus\": {\n      outline: \"none\",\n      borderColor: theme.colors.blue,\n      boxShadow: theme.shadows.focus,\n      backgroundColor: theme.colors.blue,\n      \"&:hover\": {\n        backgroundColor: darken(0.1, theme.colors.blue),\n      },\n    },\n  })\n);\nexport default PrimaryButton;\n"],"names":["darken"],"mappings":";;;AAIA,MAAM,gBAAgB,OAAO,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,aAAqC;AAAA,IAChD,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW;AAAA,MACT,iBAAiB,WAAW,SAAYA,gBAAO,KAAK,MAAM,OAAO,IAAI;AAAA,MACrE,aAAa,WAAW,SAAYA,gBAAO,KAAK,MAAM,OAAO,IAAI;AAAA,IAAA;AAAA,IAEnE,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aAAa,MAAM,OAAO;AAAA,MAC1B,WAAW,MAAM,QAAQ;AAAA,MACzB,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,QACT,iBAAiBA,gBAAO,KAAK,MAAM,OAAO,IAAI;AAAA,MAAA;AAAA,IAChD;AAAA,EACF;AAEJ;"}

package/dist/esm/Button/QuietButton.js

@@ -0,0 +1,11 @@
+import { styled } from "styled-components";
+import Button from "./Button.js";
+const QuietButton = styled(Button)(({ theme }) => ({
+  color: theme.colors.blue,
+  borderColor: "transparent",
+  backgroundColor: "transparent"
+}));
+export {
+  QuietButton as default
+};
+//# sourceMappingURL=QuietButton.js.map

package/dist/esm/Button/QuietButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuietButton.js","sources":["../../../src/Button/QuietButton.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport Button, { ButtonProps } from \"./Button\";\nconst QuietButton = styled(Button)(({ theme }: ButtonProps) => ({\n  color: theme.colors.blue,\n  borderColor: \"transparent\",\n  backgroundColor: \"transparent\",\n}));\nexport default QuietButton;\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc,OAAO,MAAM,EAAE,CAAC,EAAE,aAA0B;AAAA,EAC9D,OAAO,MAAM,OAAO;AAAA,EACpB,aAAa;AAAA,EACb,iBAAiB;AACnB,EAAE;"}

package/dist/esm/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,39 @@
+import { styled } from "styled-components";
+import Flex from "../Flex/Flex.js";
+const alignments = {
+  left: "flex-start",
+  spaced: "space-between",
+  right: "flex-end"
+};
+const buttonSpacings = (theme) => ({
+  left: {
+    "button:not(:last-child)": {
+      marginRight: theme.space.x1
+    }
+  },
+  spaced: {
+    "button:not(:last-child)": {
+      marginRight: theme.space.x1
+    }
+  },
+  right: {
+    "button:not(:first-child)": {
+      marginLeft: theme.space.x1
+    }
+  }
+});
+const getAlignment = (alignment) => alignments[alignment] || alignments.left;
+const getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left;
+const ButtonGroup = styled(Flex)(({ alignment = "left", theme }) => ({
+  flexWrap: "wrap",
+  marginBottom: `-${theme.space.x1}`,
+  justifyContent: getAlignment(alignment),
+  button: {
+    marginBottom: theme.space.x1
+  },
+  ...getButtonSpacing(alignment, theme)
+}));
+export {
+  ButtonGroup as default
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/esm/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../src/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { Flex } from \"../Flex\";\nimport { FlexProps } from \"../Flex/Flex\";\n\ntype ButtonGroupProps = FlexProps & {\n  children?: React.ReactNode;\n  alignment?: \"left\" | \"spaced\" | \"right\";\n  className?: string;\n};\n\nconst alignments = {\n  left: \"flex-start\",\n  spaced: \"space-between\",\n  right: \"flex-end\",\n};\n\nconst buttonSpacings = (theme) => ({\n  left: {\n    \"button:not(:last-child)\": {\n      marginRight: theme.space.x1,\n    },\n  },\n  spaced: {\n    \"button:not(:last-child)\": {\n      marginRight: theme.space.x1,\n    },\n  },\n  right: {\n    \"button:not(:first-child)\": {\n      marginLeft: theme.space.x1,\n    },\n  },\n});\n\nconst getAlignment = (alignment) => alignments[alignment] || alignments.left;\nconst getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left;\n\nconst ButtonGroup = styled(Flex)<ButtonGroupProps>(({ alignment = \"left\", theme }) => ({\n  flexWrap: \"wrap\",\n  marginBottom: `-${theme.space.x1}`,\n  justifyContent: getAlignment(alignment),\n  button: {\n    marginBottom: theme.space.x1,\n  },\n  ...getButtonSpacing(alignment, theme),\n}));\n\nexport default ButtonGroup;\n"],"names":[],"mappings":";;AAUA,MAAM,aAAa;AAAA,EACjB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,iBAAiB,CAAC,WAAW;AAAA,EACjC,MAAM;AAAA,IACJ,2BAA2B;AAAA,MACzB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,QAAQ;AAAA,IACN,2BAA2B;AAAA,MACzB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,OAAO;AAAA,IACL,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ;AAEA,MAAM,eAAe,CAAC,cAAc,WAAW,SAAS,KAAK,WAAW;AACxE,MAAM,mBAAmB,CAAC,WAAW,UAAU,eAAe,KAAK,EAAE,SAAS,KAAK,eAAe,KAAK,EAAE;AAEzG,MAAM,cAAc,OAAO,IAAI,EAAoB,CAAC,EAAE,YAAY,QAAQ,aAAa;AAAA,EACrF,UAAU;AAAA,EACV,cAAc,IAAI,MAAM,MAAM,EAAE;AAAA,EAChC,gBAAgB,aAAa,SAAS;AAAA,EACtC,QAAQ;AAAA,IACN,cAAc,MAAM,MAAM;AAAA,EAAA;AAAA,EAE5B,GAAG,iBAAiB,WAAW,KAAK;AACtC,EAAE;"}

package/dist/esm/Card/Card.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "../Box/Box.js";
+function Card({
+  borderRadius = "medium",
+  boxShadow = "small",
+  py = "x2",
+  px = "x2",
+  position = "relative",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      border: "1px solid",
+      borderColor: "lightGrey",
+      borderRadius,
+      boxShadow,
+      py,
+      px,
+      position,
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Card as default
+};
+//# sourceMappingURL=Card.js.map

package/dist/esm/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"../Box\";\nimport { BoxProps } from \"../Box/Box\";\n\nexport default function Card({\n  borderRadius = \"medium\",\n  boxShadow = \"small\",\n  py = \"x2\",\n  px = \"x2\",\n  position = \"relative\",\n  children,\n  ...props\n}: BoxProps) {\n  return (\n    <Box\n      border=\"1px solid\"\n      borderColor=\"lightGrey\"\n      borderRadius={borderRadius}\n      boxShadow={boxShadow}\n      py={py}\n      px={px}\n      position={position}\n      {...props}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;AAIA,SAAwB,KAAK;AAAA,EAC3B,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAa;AACX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,aAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Card/CardSet.js

@@ -0,0 +1,14 @@
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import Flex from "../Flex/Flex.js";
+const CardSet = styled(Flex)(
+  ({ theme }) => ({
+    flexDirection: "column",
+    gap: theme.space.x1
+  }),
+  addStyledProps
+);
+export {
+  CardSet as default
+};
+//# sourceMappingURL=CardSet.js.map

package/dist/esm/Card/CardSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSet.js","sources":["../../../src/Card/CardSet.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { addStyledProps } from \"../StyledProps\";\nimport { Flex } from \"../Flex\";\n\nconst CardSet = styled(Flex)(\n  ({ theme }) => ({\n    flexDirection: \"column\",\n    gap: theme.space.x1,\n  }),\n  addStyledProps\n);\n\nexport default CardSet;\n"],"names":[],"mappings":";;;AAIA,MAAM,UAAU,OAAO,IAAI;AAAA,EACzB,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,EAAA;AAAA,EAEnB;AACF;"}