@persona/design-system 0.1.5-pre.4

package/dist/components/Banner/index.cjs

@@ -0,0 +1,100 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
+const require_mixins_text = require("../../mixins/text.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+require("../Button/index.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _persona_icons = require("@persona/icons");
+let react_aria = require("react-aria");
+//#region components/Banner/Banner.tsx
+const StyledBanner = (0, styled_components.default)("div")`
+  ${require_mixins_text.paragraphMixins.sm};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: ${_persona_design_tokens.Spacing[2]};
+  border-radius: 4px;
+  background: ${({ variant }) => {
+	switch (variant) {
+		case "success": return _persona_design_tokens.Color.CoreGreen100;
+		case "warning": return _persona_design_tokens.Color.CoreYellow100;
+		case "alert": return _persona_design_tokens.Color.CoreRed100;
+		default: return _persona_design_tokens.Color.CorePurple100;
+	}
+}};
+`;
+const BannerContent = styled_components.default.div`
+  display: flex;
+  align-items: center;
+
+  > svg:first-child {
+    margin-right: ${_persona_design_tokens.Spacing[2]};
+    flex-shrink: 0;
+  }
+
+  ${({ extendContentWidth }) => extendContentWidth && styled_components.css`
+      width: 100%;
+    `}
+`;
+const ActionButton = (0, styled_components.default)(require_IconButton.Button)`
+  background-color: transparent;
+  justify-self: space-between;
+
+  &${require_lib_pseudoClass.isActive}${require_lib_pseudoClass.isNotDisabled}, &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: unset;
+  }
+
+  ${({ isFocusVisible }) => !isFocusVisible && styled_components.css`
+      &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+        box-shadow: none;
+      }
+      &${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+        box-shadow: none;
+      }
+    `}
+`;
+const Banner = ({ children, variant, action, onClose, extendContentWidth, ...elemProps }) => {
+	const { isFocusVisible } = (0, react_aria.useFocusVisible)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledBanner, {
+		variant,
+		role: "alert",
+		...elemProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BannerContent, {
+				extendContentWidth,
+				children
+			}),
+			typeof action === "string" ? onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+				variant: "basic",
+				width: "auto",
+				size: "sm",
+				onClick: onClose,
+				children: action
+			}) : action,
+			!action && onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+				variant: "basic",
+				width: "icon",
+				size: "sm",
+				"aria-label": "Close",
+				title: "Close",
+				onClick: onClose,
+				isFocusVisible,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.XIcon, {})
+			})
+		]
+	});
+};
+//#endregion
+exports.Banner = Banner;
+exports.default = Banner;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/Banner/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["paragraphMixins","Spacing","Color","Button","isActive","isNotDisabled","isHovered","isFocused","XIcon"],"sources":["../../../components/Banner/Banner.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport Button from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ variant }) => {\n    switch (variant) {\n      case 'success':\n        return Color.CoreGreen100;\n      case 'warning':\n        return Color.CoreYellow100;\n      case 'alert':\n        return Color.CoreRed100;\n      case 'informational':\n      default:\n        return Color.CorePurple100;\n    }\n  }};\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;;;;;;;AAgDA,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,MAAM;IAC9BA,oBAAAA,gBAAgB,GAAG;;;;;;aAMVC,uBAAAA,QAAQ,GAAG;;iBAEP,EAAE,cAAc;AAC7B,SAAQ,SAAR;EACE,KAAK,UACH,QAAOC,uBAAAA,MAAM;EACf,KAAK,UACH,QAAOA,uBAAAA,MAAM;EACf,KAAK,QACH,QAAOA,uBAAAA,MAAM;EAEf,QACE,QAAOA,uBAAAA,MAAM;;EAEjB;;AAGJ,MAAM,gBAAgB,kBAAA,QAAO,GAAqC;;;;;oBAK9CD,uBAAAA,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,kBAAA,GAAG;;MAED;;AAGN,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAOE,mBAAAA,OAAO;;;;KAI9BC,wBAAAA,WAAWC,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,kBAAA,GAAG;SACEC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;SAGtCE,wBAAAA,YAAYF,wBAAAA,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,oBAAA,GAAA,WAAA,kBAAoC;AAE5C,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,iBAAA,GAAA,kBAAA,KAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,iBAAA,GAAA,kBAAA,KAACG,eAAAA,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}

package/dist/components/Banner/index.d.cts

@@ -0,0 +1,2 @@
+import { Banner, BannerProps } from "../../Banner.cjs";
+export { Banner, Banner as default, BannerProps };

package/dist/components/Banner/index.d.mts

@@ -0,0 +1,2 @@
+import { Banner, BannerProps } from "../../Banner.mjs";
+export { Banner, Banner as default, BannerProps };

package/dist/components/Banner/index.mjs

@@ -0,0 +1,93 @@
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { n as Button } from "../../IconButton-C28qxOdi.mjs";
+import "../Button/index.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "@persona/icons";
+import { useFocusVisible } from "react-aria";
+//#region components/Banner/Banner.tsx
+const StyledBanner = styled("div")`
+  ${paragraphMixins.sm};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: ${Spacing[2]};
+  border-radius: 4px;
+  background: ${({ variant }) => {
+	switch (variant) {
+		case "success": return Color.CoreGreen100;
+		case "warning": return Color.CoreYellow100;
+		case "alert": return Color.CoreRed100;
+		default: return Color.CorePurple100;
+	}
+}};
+`;
+const BannerContent = styled.div`
+  display: flex;
+  align-items: center;
+
+  > svg:first-child {
+    margin-right: ${Spacing[2]};
+    flex-shrink: 0;
+  }
+
+  ${({ extendContentWidth }) => extendContentWidth && css`
+      width: 100%;
+    `}
+`;
+const ActionButton = styled(Button)`
+  background-color: transparent;
+  justify-self: space-between;
+
+  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {
+    background-color: unset;
+  }
+
+  ${({ isFocusVisible }) => !isFocusVisible && css`
+      &${isHovered}${isFocused}${isNotDisabled} {
+        box-shadow: none;
+      }
+      &${isFocused}${isNotDisabled} {
+        box-shadow: none;
+      }
+    `}
+`;
+const Banner = ({ children, variant, action, onClose, extendContentWidth, ...elemProps }) => {
+	const { isFocusVisible } = useFocusVisible();
+	return /* @__PURE__ */ jsxs(StyledBanner, {
+		variant,
+		role: "alert",
+		...elemProps,
+		children: [
+			/* @__PURE__ */ jsx(BannerContent, {
+				extendContentWidth,
+				children
+			}),
+			typeof action === "string" ? onClose && /* @__PURE__ */ jsx(ActionButton, {
+				variant: "basic",
+				width: "auto",
+				size: "sm",
+				onClick: onClose,
+				children: action
+			}) : action,
+			!action && onClose && /* @__PURE__ */ jsx(ActionButton, {
+				variant: "basic",
+				width: "icon",
+				size: "sm",
+				"aria-label": "Close",
+				title: "Close",
+				onClick: onClose,
+				isFocusVisible,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+};
+//#endregion
+export { Banner, Banner as default };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/Banner/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/Banner/Banner.tsx"],"sourcesContent":["import { Color, Spacing } from '@persona/design-tokens';\nimport { XIcon } from '@persona/icons';\nimport type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';\nimport { useFocusVisible } from 'react-aria';\nimport styled, { css } from 'styled-components';\n\nimport Button from 'design-system/components/Button';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nexport interface BannerProps extends ComponentPropsWithoutRef<'div'> {\n  children: ReactNode;\n\n  /**\n   * Semantic colour theme for the banner background.\n   *\n   * - `informational` – purple, for general tips or announcements (default).\n   * - `success` – green, for confirmations or completed actions.\n   * - `warning` – yellow, for non-blocking cautions.\n   * - `alert` – red, for errors or destructive warnings.\n   *\n   * @defaultValue 'informational'\n   */\n  variant?: 'informational' | 'success' | 'warning' | 'alert';\n\n  /**\n   * Action affordance rendered to the right of the content.\n   *\n   * - Pass a `string` together with `onClose` to show a text button that calls `onClose`.\n   * - Pass a `ReactElement` to render a fully custom action (e.g. a link or icon button).\n   *   In this case `onClose` is ignored for the action slot; wire dismissal inside the element.\n   */\n  action?: string | ReactElement;\n\n  /**\n   * Called when the user clicks the close (×) button.\n   * When provided and `action` is absent, a close icon button is rendered automatically.\n   * When `action` is a string, clicking that string-labelled button calls this handler.\n   */\n  onClose?: VoidFunction;\n\n  /**\n   * When true, the content area stretches to fill the full banner width.\n   * Useful when `children` contains a layout that needs to span the entire space.\n   */\n  extendContentWidth?: boolean;\n}\n\nconst StyledBanner = styled('div')<BannerProps>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  min-height: 40px;\n  padding: ${Spacing[2]};\n  border-radius: 4px;\n  background: ${({ variant }) => {\n    switch (variant) {\n      case 'success':\n        return Color.CoreGreen100;\n      case 'warning':\n        return Color.CoreYellow100;\n      case 'alert':\n        return Color.CoreRed100;\n      case 'informational':\n      default:\n        return Color.CorePurple100;\n    }\n  }};\n`;\n\nconst BannerContent = styled.div<{ extendContentWidth?: boolean }>`\n  display: flex;\n  align-items: center;\n\n  > svg:first-child {\n    margin-right: ${Spacing[2]};\n    flex-shrink: 0;\n  }\n\n  ${({ extendContentWidth }) =>\n    extendContentWidth &&\n    css`\n      width: 100%;\n    `}\n`;\n\nconst ActionButton = styled(Button)<{ isFocusVisible?: boolean }>`\n  background-color: transparent;\n  justify-self: space-between;\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: unset;\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nexport const Banner = ({\n  children,\n  variant,\n  action,\n  onClose,\n  extendContentWidth,\n  ...elemProps\n}: BannerProps) => {\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <StyledBanner variant={variant} role='alert' {...elemProps}>\n      <BannerContent extendContentWidth={extendContentWidth}>{children}</BannerContent>\n      {typeof action === 'string'\n        ? onClose && (\n            <ActionButton variant='basic' width='auto' size='sm' onClick={onClose}>\n              {action}\n            </ActionButton>\n          )\n        : action}\n      {!action && onClose && (\n        <ActionButton\n          variant='basic'\n          width='icon'\n          size='sm'\n          aria-label='Close'\n          title='Close'\n          onClick={onClose}\n          isFocusVisible={isFocusVisible}\n        >\n          <XIcon />\n        </ActionButton>\n      )}\n    </StyledBanner>\n  );\n};\n\nexport default Banner;\n"],"mappings":";;;;;;;;;;AAgDA,MAAM,eAAe,OAAO,MAAM;IAC9B,gBAAgB,GAAG;;;;;;aAMV,QAAQ,GAAG;;iBAEP,EAAE,cAAc;AAC7B,SAAQ,SAAR;EACE,KAAK,UACH,QAAO,MAAM;EACf,KAAK,UACH,QAAO,MAAM;EACf,KAAK,QACH,QAAO,MAAM;EAEf,QACE,QAAO,MAAM;;EAEjB;;AAGJ,MAAM,gBAAgB,OAAO,GAAqC;;;;;oBAK9C,QAAQ,GAAG;;;;KAI1B,EAAE,yBACH,sBACA,GAAG;;MAED;;AAGN,MAAM,eAAe,OAAO,OAAO;;;;KAI9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAa,UAAU,EACrB,UACA,SACA,QACA,SACA,oBACA,GAAG,gBACc;CACjB,MAAM,EAAE,mBAAmB,iBAAiB;AAE5C,QACE,qBAAC,cAAD;EAAuB;EAAS,MAAK;EAAQ,GAAI;YAAjD;GACE,oBAAC,eAAD;IAAmC;IAAqB;IAAyB,CAAA;GAChF,OAAO,WAAW,WACf,WACE,oBAAC,cAAD;IAAc,SAAQ;IAAQ,OAAM;IAAO,MAAK;IAAK,SAAS;cAC3D;IACY,CAAA,GAEjB;GACH,CAAC,UAAU,WACV,oBAAC,cAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAW;IACX,OAAM;IACN,SAAS;IACO;cAEhB,oBAAC,OAAD,EAAS,CAAA;IACI,CAAA;GAEJ"}

package/dist/components/Button/index.cjs

@@ -0,0 +1,12 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+exports.Button = require_IconButton.Button;
+exports.ButtonChildren = require_IconButton.ButtonChildren;
+exports.IconButton = require_IconButton.IconButton;
+exports.StyledButton = require_IconButton.StyledButton;
+exports.SuffixIconContainer = require_IconButton.SuffixIconContainer;
+exports.default = require_IconButton.Button;

package/dist/components/Button/index.d.cts

@@ -0,0 +1,3 @@
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-C_3p5Xfi.cjs";
+import { t as IconButton } from "../../IconButton-ZcyTFjPn.cjs";
+export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.d.mts

@@ -0,0 +1,3 @@
+import { a as SuffixIconContainer, i as StyledButton, n as ButtonChildren, r as ButtonProps, t as Button } from "../../Button-DqDLGURJ.mjs";
+import { t as IconButton } from "../../IconButton-DsXbc3nQ.mjs";
+export { Button, Button as default, ButtonChildren, ButtonProps, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/Button/index.mjs

@@ -0,0 +1,2 @@
+import { a as SuffixIconContainer, i as StyledButton, n as Button, r as ButtonChildren, t as IconButton } from "../../IconButton-C28qxOdi.mjs";
+export { Button, Button as default, ButtonChildren, IconButton, StyledButton, SuffixIconContainer };

package/dist/components/ButtonGroup/index.cjs

@@ -0,0 +1,112 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+const require_useFormField = require("../../useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _radix_ui_react_toggle_group = require("@radix-ui/react-toggle-group");
+_radix_ui_react_toggle_group = require_chunk.__toESM(_radix_ui_react_toggle_group);
+//#region components/ButtonGroup/ButtonGroup.tsx
+const OptionItem = (0, styled_components.default)(require_IconButton.IconButton)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  width: 32px;
+  height: 32px;
+  background-color: ${({ theme }) => theme.color.variants.basic.default};
+  white-space: nowrap;
+
+  // radix-toggle-group adds a wrapping div to the options, so this is to
+  // make sure the content is always center-aligned
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &[data-state='on'] {
+    background-color: ${({ theme }) => theme.color.variants.basic.active};
+  }
+
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  &[tabindex='0'] {
+    z-index: 1;
+  }
+`;
+const ButtonGroupContainer = styled_components.default.div`
+  display: inline-flex;
+  justify-content: space-between;
+  border-radius: 4px;
+  width: ${({ fullWidth }) => fullWidth ? `100%` : `max-content`};
+  gap: 1px;
+
+  > * {
+    ${({ fullWidth }) => fullWidth && styled_components.css`
+        flex: 1;
+      `}
+  }
+`;
+const ButtonGroup = ({ children, fullWidth, ...props }) => {
+	const { disabled } = props;
+	const field = require_useFormField.useFormField({
+		inputId: props.id,
+		disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Root, {
+		...props,
+		disabled: field.disabled,
+		"aria-describedby": field.helperTextId,
+		"aria-errormessage": field.hasError ? field.helperTextId : void 0,
+		"aria-invalid": field.hasError,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonGroupContainer, {
+			fullWidth,
+			...props,
+			children
+		})
+	});
+};
+const ButtonItem = (0, react.forwardRef)(function ButtonItem(props, forwardedRef) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionItem, {
+		ref: forwardedRef,
+		...props
+	});
+});
+const ButtonGroupItem = (0, react.forwardRef)(function ButtonGroupItem({ children, ...props }, forwardedRef) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_toggle_group.Item, {
+		...props,
+		ref: forwardedRef,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonItem, {
+			...props,
+			children
+		})
+	});
+});
+//#endregion
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupItem = ButtonGroupItem;
+exports.default = ButtonGroup;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/ButtonGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["IconButton","BorderRadius","useFormField","ToggleGroupPrimitive"],"sources":["../../../components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { BorderRadius } from '@persona/design-tokens';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n  ToggleGroupMultipleProps,\n  ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport IconButton from 'design-system/components/Button/IconButton';\nimport useFormField from 'design-system/components/FormControl/useFormField';\n\nexport interface ButtonGroupProps {\n  id?: string;\n  className?: string;\n  fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  flex: 1;\n  border-radius: ${BorderRadius.Md};\n  width: 32px;\n  height: 32px;\n  background-color: ${({ theme }) => theme.color.variants.basic.default};\n  white-space: nowrap;\n\n  // radix-toggle-group adds a wrapping div to the options, so this is to\n  // make sure the content is always center-aligned\n  & > div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-state='on'] {\n    background-color: ${({ theme }) => theme.color.variants.basic.active};\n  }\n\n  &:first-child {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:not(:first-child):not(:last-child) {\n    border-radius: 0;\n  }\n\n  &[tabindex='0'] {\n    z-index: 1;\n  }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n  display: inline-flex;\n  justify-content: space-between;\n  border-radius: 4px;\n  width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n  gap: 1px;\n\n  > * {\n    ${({ fullWidth }) =>\n      fullWidth &&\n      css`\n        flex: 1;\n      `}\n  }\n`;\n\nexport const ButtonGroup = ({\n  children,\n  fullWidth,\n  ...props\n}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => {\n  const { disabled } = props;\n  const field = useFormField({ inputId: props.id, disabled });\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      disabled={field.disabled}\n      aria-describedby={field.helperTextId}\n      aria-errormessage={field.hasError ? field.helperTextId : undefined}\n      aria-invalid={field.hasError}\n    >\n      <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n        {children}\n      </ButtonGroupContainer>\n    </ToggleGroupPrimitive.Root>\n  );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n  function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n    return <OptionItem ref={forwardedRef} {...props} />;\n  },\n);\n\nexport const ButtonGroupItem = forwardRef<\n  HTMLButtonElement,\n  ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n  return (\n    <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n      <ButtonItem {...props}>{children}</ButtonItem>\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOA,mBAAAA,WAAW;;;;;;mBAMlBC,uBAAAA,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,QAAQ;;;;;;;;;;;;yBAY/C,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;AAsBzE,MAAM,uBAAuB,kBAAA,QAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,kBAAA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,6BAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,cAAA,GAAA,MAAA,YACJ,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,iBAAA,GAAA,kBAAA,KAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,mBAAA,GAAA,MAAA,YAGX,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,iBAAA,GAAA,kBAAA,KAACA,6BAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,iBAAA,GAAA,kBAAA,KAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}

package/dist/components/ButtonGroup/index.d.cts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupItem, ButtonGroupProps } from "../../ButtonGroup.cjs";
+export { ButtonGroup, ButtonGroup as default, ButtonGroupItem, ButtonGroupProps };

package/dist/components/ButtonGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { ButtonGroup, ButtonGroupItem, ButtonGroupProps } from "../../ButtonGroup.mjs";
+export { ButtonGroup, ButtonGroup as default, ButtonGroupItem, ButtonGroupProps };

package/dist/components/ButtonGroup/index.mjs

@@ -0,0 +1,103 @@
+import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
+import { n as useFormField } from "../../useFormField-eftOPiXj.mjs";
+import { BorderRadius } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+//#region components/ButtonGroup/ButtonGroup.tsx
+const OptionItem = styled(IconButton)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  flex: 1;
+  border-radius: ${BorderRadius.Md};
+  width: 32px;
+  height: 32px;
+  background-color: ${({ theme }) => theme.color.variants.basic.default};
+  white-space: nowrap;
+
+  // radix-toggle-group adds a wrapping div to the options, so this is to
+  // make sure the content is always center-aligned
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &[data-state='on'] {
+    background-color: ${({ theme }) => theme.color.variants.basic.active};
+  }
+
+  &:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  &[tabindex='0'] {
+    z-index: 1;
+  }
+`;
+const ButtonGroupContainer = styled.div`
+  display: inline-flex;
+  justify-content: space-between;
+  border-radius: 4px;
+  width: ${({ fullWidth }) => fullWidth ? `100%` : `max-content`};
+  gap: 1px;
+
+  > * {
+    ${({ fullWidth }) => fullWidth && css`
+        flex: 1;
+      `}
+  }
+`;
+const ButtonGroup = ({ children, fullWidth, ...props }) => {
+	const { disabled } = props;
+	const field = useFormField({
+		inputId: props.id,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
+		...props,
+		disabled: field.disabled,
+		"aria-describedby": field.helperTextId,
+		"aria-errormessage": field.hasError ? field.helperTextId : void 0,
+		"aria-invalid": field.hasError,
+		children: /* @__PURE__ */ jsx(ButtonGroupContainer, {
+			fullWidth,
+			...props,
+			children
+		})
+	});
+};
+const ButtonItem = forwardRef(function ButtonItem(props, forwardedRef) {
+	return /* @__PURE__ */ jsx(OptionItem, {
+		ref: forwardedRef,
+		...props
+	});
+});
+const ButtonGroupItem = forwardRef(function ButtonGroupItem({ children, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
+		...props,
+		ref: forwardedRef,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(ButtonItem, {
+			...props,
+			children
+		})
+	});
+});
+//#endregion
+export { ButtonGroup, ButtonGroup as default, ButtonGroupItem };
+
+//# sourceMappingURL=index.mjs.map

package/dist/components/ButtonGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { BorderRadius } from '@persona/design-tokens';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport type {\n  ToggleGroupMultipleProps,\n  ToggleGroupSingleProps,\n} from '@radix-ui/react-toggle-group';\nimport { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport IconButton from 'design-system/components/Button/IconButton';\nimport useFormField from 'design-system/components/FormControl/useFormField';\n\nexport interface ButtonGroupProps {\n  id?: string;\n  className?: string;\n  fullWidth?: boolean;\n}\n\nconst OptionItem = styled(IconButton)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  flex: 1;\n  border-radius: ${BorderRadius.Md};\n  width: 32px;\n  height: 32px;\n  background-color: ${({ theme }) => theme.color.variants.basic.default};\n  white-space: nowrap;\n\n  // radix-toggle-group adds a wrapping div to the options, so this is to\n  // make sure the content is always center-aligned\n  & > div {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-state='on'] {\n    background-color: ${({ theme }) => theme.color.variants.basic.active};\n  }\n\n  &:first-child {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &:last-child {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:not(:first-child):not(:last-child) {\n    border-radius: 0;\n  }\n\n  &[tabindex='0'] {\n    z-index: 1;\n  }\n`;\n\nconst ButtonGroupContainer = styled.div<{ fullWidth?: boolean }>`\n  display: inline-flex;\n  justify-content: space-between;\n  border-radius: 4px;\n  width: ${({ fullWidth }) => (fullWidth ? `100%` : `max-content`)};\n  gap: 1px;\n\n  > * {\n    ${({ fullWidth }) =>\n      fullWidth &&\n      css`\n        flex: 1;\n      `}\n  }\n`;\n\nexport const ButtonGroup = ({\n  children,\n  fullWidth,\n  ...props\n}: (ToggleGroupSingleProps | ToggleGroupMultipleProps) & ButtonGroupProps) => {\n  const { disabled } = props;\n  const field = useFormField({ inputId: props.id, disabled });\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      disabled={field.disabled}\n      aria-describedby={field.helperTextId}\n      aria-errormessage={field.hasError ? field.helperTextId : undefined}\n      aria-invalid={field.hasError}\n    >\n      <ButtonGroupContainer fullWidth={fullWidth} {...props}>\n        {children}\n      </ButtonGroupContainer>\n    </ToggleGroupPrimitive.Root>\n  );\n};\n\nexport default ButtonGroup;\n\nconst ButtonItem = forwardRef<HTMLButtonElement, ToggleGroupPrimitive.ToggleGroupItemProps>(\n  function ButtonItem(props: ToggleGroupPrimitive.ToggleGroupItemProps, forwardedRef) {\n    return <OptionItem ref={forwardedRef} {...props} />;\n  },\n);\n\nexport const ButtonGroupItem = forwardRef<\n  HTMLButtonElement,\n  ToggleGroupPrimitive.ToggleGroupItemProps\n>(function ButtonGroupItem({ children, ...props }, forwardedRef) {\n  return (\n    <ToggleGroupPrimitive.Item {...props} ref={forwardedRef} asChild>\n      <ButtonItem {...props}>{children}</ButtonItem>\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;AAkBA,MAAM,aAAa,OAAO,WAAW;;;;;;mBAMlB,aAAa,GAAG;;;uBAGZ,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,QAAQ;;;;;;;;;;;;yBAY/C,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;AAsBzE,MAAM,uBAAuB,OAAO,GAA4B;;;;YAIpD,EAAE,gBAAiB,YAAY,SAAS,cAAe;;;;OAI5D,EAAE,gBACH,aACA,GAAG;;QAED;;;AAIR,MAAa,eAAe,EAC1B,UACA,WACA,GAAG,YACyE;CAC5E,MAAM,EAAE,aAAa;CACrB,MAAM,QAAQ,aAAa;EAAE,SAAS,MAAM;EAAI;EAAU,CAAC;AAE3D,QACE,oBAAC,qBAAqB,MAAtB;EACE,GAAI;EACJ,UAAU,MAAM;EAChB,oBAAkB,MAAM;EACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;EACzD,gBAAc,MAAM;YAEpB,oBAAC,sBAAD;GAAiC;GAAW,GAAI;GAC7C;GACoB,CAAA;EACG,CAAA;;AAMhC,MAAM,aAAa,WACjB,SAAS,WAAW,OAAkD,cAAc;AAClF,QAAO,oBAAC,YAAD;EAAY,KAAK;EAAc,GAAI;EAAS,CAAA;EAEtD;AAED,MAAa,kBAAkB,WAG7B,SAAS,gBAAgB,EAAE,UAAU,GAAG,SAAS,cAAc;AAC/D,QACE,oBAAC,qBAAqB,MAAtB;EAA2B,GAAI;EAAO,KAAK;EAAc,SAAA;YACvD,oBAAC,YAAD;GAAY,GAAI;GAAQ;GAAsB,CAAA;EACpB,CAAA;EAE9B"}

package/dist/components/Card/index.cjs

@@ -0,0 +1,13 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Card = require("../../Card-CyCKL-M5.cjs");
+exports.ActionsContainer = require_Card.ActionsContainer;
+exports.Header = require_Card.Header;
+exports.HeaderContainer = require_Card.HeaderContainer;
+exports.Root = require_Card.Root;
+exports.Title = require_Card.Title;
+exports.TitleContainer = require_Card.TitleContainer;
+exports.default = require_Card.Card_default;

package/dist/components/Card/index.d.cts

@@ -0,0 +1,3 @@
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-D8oDtnIL.cjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CrQL0hXm.cjs";
+export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.d.mts

@@ -0,0 +1,3 @@
+import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "../../Header-t1plnZc0.mjs";
+import { n as SectionProps, r as _default, t as CardProps } from "../../Card-CcU9cKCd.mjs";
+export { ActionsContainer, CardProps, Header, HeaderContainer, HeaderProps, Root, SectionProps, Title, TitleContainer, _default as default };

package/dist/components/Card/index.mjs

@@ -0,0 +1,2 @@
+import { a as Root, i as HeaderContainer, n as ActionsContainer, o as Title, r as Header, s as TitleContainer, t as Card_default } from "../../Card-DeJSt5ys.mjs";
+export { ActionsContainer, Header, HeaderContainer, Root, Title, TitleContainer, Card_default as default };