@persona/design-system 0.1.8 → 0.1.9

package/dist/FormField-idNLw5PW.d.cts

@@ -1,69 +0,0 @@
-import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-DFp_qcW1.cjs";
-import * as _$react from "react";
-import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
-
-//#region components/FormField/FormField.d.ts
-interface FormFieldBaseProps {
-  /**
-   * Renders `<Label>` above input
-   */
-  label?: ReactNode;
-  /**
-   * ID of the input element. Providing this will automatically link the label to the input.
-   */
-  inputId?: string;
-  /**
-   * Renders `<HelperText>` below input
-   */
-  helperText?: ReactNode;
-  /**
-   * Renders `<ErrorText>` below input and helper text.
-   */
-  errorText?: ReactNode;
-  /**
-   * Renders `<WarningText>` below input and helper text.
-   */
-  warningText?: ReactNode;
-  /**
-   * Should be an input of some sort
-   */
-  children?: ReactElement;
-  labelProps?: ComponentPropsWithRef<typeof FormLabel>;
-  helperProps?: ComponentPropsWithRef<typeof HelperText>;
-  warningProps?: ComponentPropsWithRef<typeof WarningText>;
-  errorProps?: ComponentPropsWithRef<typeof ErrorText>;
-  /**
-   * Whether to render the form field as a config field.
-   * This will render the helper text as a tooltip.
-   */
-  configField?: boolean;
-  /**
-   * Override the width of the input area when `configField` is true.
-   * Accepts any valid CSS width value (e.g. `'33%'`, `'66.67%'`).
-   * Defaults to `'50%'`.
-   */
-  configFieldInputWidth?: string;
-  /**
-   * Renders actions to the right of the label.
-   */
-  rightActions?: ReactNode;
-}
-interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBaseProps {}
-/**
- * > **Please do not use in production! This component is subject to API and style changes.**
- *
- * Helper components with preset slots for label, input, and helper texts.
- * Fully composed components with different form input types are available.
- * This is the recommended way to implement form elements.
- * You can use `<FormControl>` if you require more flexibility.
- *
- * ## Usage
- *
- * ```tsx
- * import FormField from 'design-system/components/FormField';
- * ```
- */
-declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
-//#endregion
-export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
-//# sourceMappingURL=FormField-idNLw5PW.d.cts.map

package/dist/FormField.d.cts

@@ -1,2 +0,0 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-idNLw5PW.cjs";
-export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/Header-C-WhPOin.d.cts

@@ -1,35 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
-import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Card/Header/Header.d.ts
-interface HeaderProps {
-  children: ReactNode;
-  subtitle?: ReactNode;
-  variant?: 'title' | 'section';
-  actions?: ReactNode;
-  $matchCardV2?: boolean;
-}
-declare const HeaderContainer: _$styled_components0.StyledComponent<"div", any, Pick<HeaderProps, "$matchCardV2" | "variant">, never>;
-declare const TitleContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
-declare const Title: _$styled_components0.StyledComponent<"h3", any, Pick<HeaderProps, "$matchCardV2" | "variant">, never>;
-declare const ActionsContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
-declare const Header: ({
-  children,
-  variant,
-  actions,
-  subtitle,
-  $matchCardV2,
-  ...elemProps
-}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
-declare const Root: ({
-  children,
-  variant,
-  actions,
-  subtitle,
-  $matchCardV2,
-  ...elemProps
-}: HeaderProps & ComponentPropsWithoutRef<"div">) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { Root as a, HeaderProps as i, Header as n, Title as o, HeaderContainer as r, TitleContainer as s, ActionsContainer as t };
-//# sourceMappingURL=Header-C-WhPOin.d.cts.map

package/dist/Header.d.cts

@@ -1,2 +0,0 @@
-import { a as Root, i as HeaderProps, n as Header, o as Title, r as HeaderContainer, s as TitleContainer, t as ActionsContainer } from "./Header-C-WhPOin.cjs";
-export { ActionsContainer, HeaderContainer, HeaderProps, Root, Title, TitleContainer, Header as default };

package/dist/HelperTooltip-T-sTGGLD.d.cts

@@ -1,20 +0,0 @@
-import { i as TooltipWithIconProps } from "./Tooltip--eDrrk2r.cjs";
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/Tooltip/HelperTooltip.d.ts
-interface HelperTooltipProps extends Omit<TooltipWithIconProps, 'iconTrigger'> {
-  children: ReactNode;
-  size?: 'md' | 'sm';
-}
-/**
- * Helper component for rendering help text via help icons.
- */
-declare const HelperTooltip: ({
-  children,
-  size,
-  ...props
-}: HelperTooltipProps) => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { HelperTooltipProps as n, HelperTooltip as t };
-//# sourceMappingURL=HelperTooltip-T-sTGGLD.d.cts.map

package/dist/HelperTooltip.d.cts

@@ -1,2 +0,0 @@
-import { n as HelperTooltipProps, t as HelperTooltip } from "./HelperTooltip-T-sTGGLD.cjs";
-export { HelperTooltipProps, HelperTooltip as default };

package/dist/HoverCopyableField-CRkM7o4B.cjs

@@ -1,110 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-require("./variables/transitions.cjs");
-const require_variables_keyframes = require("./variables/keyframes.cjs");
-const require_Card = require("./Card-Csz-PxX0.cjs");
-const require_Text = require("./Text-G9QmYf0P.cjs");
-const require_useToggle = require("./useToggle-DARO917w.cjs");
-const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
-const require_Popover = require("./Popover-BzgMAhsX.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");
-//#region components/HoverCopyableField/HoverCopyableField.tsx
-const copyToClipboard = async (text) => {
-	try {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(text);
-			return true;
-		} else return document.execCommand("copy", true, text);
-	} catch {
-		return false;
-	}
-};
-const CopyableFieldContainer = styled_components.default.div`
-  display: flex;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  align-items: center;
-`;
-const CopyButton = (0, styled_components.default)(require_IconButton.Button).attrs(() => ({
-	type: "button",
-	variant: "inverse",
-	width: "icon"
-}))`
-  height: ${_persona_design_tokens.Spacing[5]};
-  width: ${_persona_design_tokens.Spacing[5]};
-  visibility: ${({ isActive }) => isActive ? "visible" : "hidden"};
-  animation: ${require_variables_keyframes.fadeIn} ${"400ms"} ease-in-out;
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-`;
-const StyledCard = (0, styled_components.default)(require_Card.Card_default)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  animation: ${require_variables_keyframes.fadeIn} ${"400ms"} ease-in-out;
-  padding: 6px;
-  margin: 0;
-`;
-const HoverCopyableField = ({ copyValue, confirmationText = "Copied", children }) => {
-	const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = require_useToggle.useToggle(false);
-	const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] = require_useToggle.useToggle(false);
-	const copyTextToClipboard = async () => {
-		if (copyValue == null) return;
-		if (await copyToClipboard(copyValue)) {
-			showConfirmation();
-			setTimeout(() => {
-				hideCopyButton();
-				hideConfirmation();
-			}, 1200);
-		}
-	};
-	const copyField = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-		copyTextToClipboard();
-	};
-	return copyValue != null && copyValue.trim().length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CopyableFieldContainer, {
-		onMouseEnter: showCopyButton,
-		onMouseLeave: hideCopyButton,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default, {
-			open: confirmationActive,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Anchor, {
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyButton, {
-					id: "hover-copyable-field__copy-button",
-					isActive: copyButtonActive || confirmationActive,
-					onClick: copyField,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CopyIcon, {
-						width: 16,
-						height: 16
-					})
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default.Content, {
-				side: "top",
-				align: "center",
-				style: { zIndex: 2 },
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCard, {
-					elevated: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Paragraph, { children: confirmationText })
-				})
-			})]
-		})]
-	}) : null;
-};
-//#endregion
-//#region components/HoverCopyableField/index.ts
-var HoverCopyableField_default = HoverCopyableField;
-//#endregion
-Object.defineProperty(exports, "HoverCopyableField_default", {
-	enumerable: true,
-	get: function() {
-		return HoverCopyableField_default;
-	}
-});
-
-//# sourceMappingURL=HoverCopyableField-CRkM7o4B.cjs.map

package/dist/HoverCopyableField-CRkM7o4B.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"HoverCopyableField-CRkM7o4B.cjs","names":["Spacing","Button","fadeIn","Card","useToggle","Popover","CopyIcon","Paragraph"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx","../components/HoverCopyableField/index.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { CopyIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport Popover from 'design-system/components/Popover';\nimport { Paragraph } from 'design-system/components/Text';\nimport useToggle from 'design-system/lib/useToggle';\nimport { fadeIn } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst copyToClipboard = async (text: string): Promise<boolean> => {\n  try {\n    if ('clipboard' in navigator) {\n      await navigator.clipboard.writeText(text);\n      return true;\n    } else {\n      return document.execCommand('copy', true, text);\n    }\n  } catch {\n    return false;\n  }\n};\n\nconst CopyableFieldContainer = styled.div`\n  display: flex;\n  gap: ${Spacing[1]};\n  align-items: center;\n`;\n\nconst CopyButton = styled(Button).attrs(() => ({\n  type: 'button',\n  variant: 'inverse',\n  width: 'icon',\n}))<{ isActive: boolean }>`\n  height: ${Spacing[5]};\n  width: ${Spacing[5]};\n  visibility: ${({ isActive }) => (isActive ? 'visible' : 'hidden')};\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledCard = styled(Card)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  animation: ${fadeIn} ${TransitionDuration.Medium} ease-in-out;\n  padding: 6px;\n  margin: 0;\n`;\n\ninterface HoverCopyableFieldProps {\n  copyValue: string | undefined;\n  confirmationText?: string;\n  children: ReactNode;\n}\n\nconst HoverCopyableField = ({\n  copyValue,\n  confirmationText = 'Copied',\n  children,\n}: HoverCopyableFieldProps) => {\n  const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);\n  const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] =\n    useToggle(false);\n\n  const copyTextToClipboard = async () => {\n    if (copyValue == null) {\n      return;\n    }\n    const copyWasSuccessful = await copyToClipboard(copyValue);\n\n    if (copyWasSuccessful) {\n      showConfirmation();\n      setTimeout(() => {\n        hideCopyButton();\n        hideConfirmation();\n      }, 1200);\n    }\n  };\n\n  const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    copyTextToClipboard();\n  };\n\n  return copyValue != null && copyValue.trim().length > 0 ? (\n    <CopyableFieldContainer onMouseEnter={showCopyButton} onMouseLeave={hideCopyButton}>\n      {children}\n      <Popover open={confirmationActive}>\n        <Popover.Anchor asChild>\n          <CopyButton\n            id='hover-copyable-field__copy-button'\n            isActive={copyButtonActive || confirmationActive}\n            onClick={copyField}\n          >\n            <CopyIcon width={16} height={16} />\n          </CopyButton>\n        </Popover.Anchor>\n        <Popover.Content side='top' align='center' style={{ zIndex: 2 }}>\n          <StyledCard elevated>\n            <Paragraph>{confirmationText}</Paragraph>\n          </StyledCard>\n        </Popover.Content>\n      </Popover>\n    </CopyableFieldContainer>\n  ) : null;\n};\n\nexport default HoverCopyableField;\n","import HoverCopyableField from './HoverCopyableField';\n\nexport default HoverCopyableField;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,kBAAkB,OAAO,SAAmC;AAChE,KAAI;AACF,MAAI,eAAe,WAAW;AAC5B,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,UAAO;QAEP,QAAO,SAAS,YAAY,QAAQ,MAAM,KAAK;SAE3C;AACN,SAAO;;;AAIX,MAAM,yBAAyB,kBAAA,QAAO,GAAG;;SAEhCA,uBAAAA,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACSD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrDE,4BAAAA,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOC,aAAAA,aAAK;;;;;eAKhBD,4BAAAA,OAAO,GAAA,QAA6B;;;;AAWnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoBE,kBAAAA,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9DA,kBAAAA,UAAU,MAAM;CAElB,MAAM,sBAAsB,YAAY;AACtC,MAAI,aAAa,KACf;AAIF,MAAI,MAF4B,gBAAgB,UAAU,EAEnC;AACrB,qBAAkB;AAClB,oBAAiB;AACf,oBAAgB;AAChB,sBAAkB;MACjB,KAAK;;;CAIZ,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,uBAAqB;;AAGvB,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,iBAAA,GAAA,kBAAA,MAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,iBAAD;GAAS,MAAM;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,gBAAQ,QAAT;IAAgB,SAAA;cACd,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAACD,gBAAAA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,iBAAA,GAAA,kBAAA,KAAC,YAAD;KAAY,UAAA;eACV,iBAAA,GAAA,kBAAA,KAACE,aAAAA,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB;;;;AC/GN,IAAA,6BAAe"}

package/dist/HoverCopyableField.d.cts

@@ -1,16 +0,0 @@
-import { ReactNode } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
-
-//#region components/HoverCopyableField/HoverCopyableField.d.ts
-interface HoverCopyableFieldProps {
-  copyValue: string | undefined;
-  confirmationText?: string;
-  children: ReactNode;
-}
-declare const HoverCopyableField: ({
-  copyValue,
-  confirmationText,
-  children
-}: HoverCopyableFieldProps) => _$react_jsx_runtime0.JSX.Element | null;
-export = HoverCopyableField;
-//# sourceMappingURL=HoverCopyableField.d.cts.map

package/dist/IconButton-BSES_-6g.d.mts

@@ -1,24 +0,0 @@
-import { r as ButtonProps } from "./Button-9p469xA1.mjs";
-import * as _$react from "react";
-
-//#region components/Button/IconButton.d.ts
-declare const BUTTON_SIZE_MAP: {
-  xs: string;
-  sm: string;
-  md: string;
-};
-type IconBtnSize = keyof typeof BUTTON_SIZE_MAP;
-interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'prefixIconType' | 'suffixIcon' | 'variant' | 'size'> {
-  /**
-   * `xs` - 16px. `sm` - 24px. `md` - 32px.
-   * Pair with a PDS icon in the prescribed size.
-   */
-  size?: IconBtnSize;
-}
-/**
- * Use to render icon-only buttons. Ensure buttons have proper aria properties.
- */
-declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
-//#endregion
-export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-BSES_-6g.d.mts.map

package/dist/IconButton-nlgjJQCS.cjs

@@ -1,372 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-const require_mixins_focus = require("./mixins/focus.cjs");
-require("./variables/transitions.cjs");
-const require_mixins_print_index = require("./mixins/print/index.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_variables_keyframes = require("./variables/keyframes.cjs");
-const require_useToggle = require("./useToggle-DARO917w.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_router_dom = require("react-router-dom");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-let lodash_fp_js = require("lodash/fp.js");
-//#region components/Button/Button.tsx
-const noop = () => void 0;
-const isActive = ({ active }) => active ? "" : ":active:enabled";
-const sizeStyles = {
-	md: styled_components.css`
-    ${require_mixins_text.paragraphMixins.md}
-    height: ${({ theme }) => theme.button.height.md};
-    padding: ${_persona_design_tokens.Spacing[2]};
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  `,
-	sm: styled_components.css`
-    ${require_mixins_text.paragraphMixins.sm}
-    height: ${({ theme }) => theme.button.height.sm};
-    padding: ${_persona_design_tokens.Spacing[1]} 6px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  `
-};
-const widthStyles = {
-	full: styled_components.css`
-    width: 100%;
-  `,
-	auto: styled_components.css`
-    width: auto;
-  `,
-	button: styled_components.css`
-    width: ${({ theme }) => theme.element.width.md};
-  `,
-	icon: styled_components.css`
-    width: ${({ theme, size }) => {
-		return theme.button.height[size];
-	}};
-    padding: 0;
-    flex: none;
-  `
-};
-const StyledButton = styled_components.default.button.attrs(({ to, target }) => {
-	if ((0, lodash_fp_js.isEmpty)(to)) return "button";
-	else if (typeof to === "string" && to.startsWith("https://")) return {
-		as: "a",
-		href: to,
-		target: target ?? "_blank",
-		rel: "noreferrer"
-	};
-	else return { as: react_router_dom.Link };
-})`
-  cursor: pointer;
-  border: none;
-  box-sizing: border-box;
-  white-space: nowrap;
-  ${({ theme, variant }) => {
-	const palette = theme.color.variants[variant];
-	return styled_components.css`
-      &:disabled {
-        background-color: ${palette.disabled};
-        color: ${palette.textDisabled};
-        svg path {
-          stroke: ${palette.textDisabled};
-        }
-
-        /* For backwards compatibility with current coloring scheme (targeting stroke property) */
-        svg.pds-icon {
-          path {
-            stroke: unset;
-          }
-
-          /* Support icons with stroke */
-          path[stroke] {
-            stroke: currentColor;
-          }
-        }
-
-        user-select: none;
-      }
-    `;
-}}
-
-  ${({ variant }) => variant === "outline" && styled_components.css`
-      border: 1px solid ${({ theme }) => theme.color.border.input};
-    `}
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  /* To properly position loading spinner */
-  position: relative;
-
-  border-radius: ${({ theme }) => theme.button.borderRadius};
-
-  transition-duration: ${"200ms"};
-  transition-property: background-color, color, border-color, width, height;
-
-  ${({ size }) => {
-	return sizeStyles[size];
-}}
-  ${({ width }) => {
-	return widthStyles[width];
-}}
-
-  /* Variant styling */
-  ${({ theme, variant, $isPending, $onSecondaryBackground }) => {
-	let palette = theme.color.variants[variant];
-	if (variant === "basic" && $onSecondaryBackground) palette = {
-		...palette,
-		default: _persona_design_tokens.Color.CoreSlate300,
-		hover: _persona_design_tokens.Color.CoreSlate400,
-		active: _persona_design_tokens.Color.CoreSlate400,
-		disabled: _persona_design_tokens.Color.CoreSlate100
-	};
-	return styled_components.css`
-      background-color: ${palette.default};
-      color: ${palette.text};
-      svg path {
-        stroke: ${palette.text};
-      }
-
-      svg.pds-icon {
-        path {
-          stroke: unset;
-        }
-
-        path[stroke] {
-          stroke: currentColor;
-        }
-      }
-
-      &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
-        background-color: ${palette.hover};
-      }
-
-      &${require_lib_pseudoClass.isDisabled} {
-        cursor: not-allowed;
-      }
-
-      &${isActive} {
-        background-color: ${palette.active};
-      }
-
-      ${require_mixins_focus.focusOutlineControlled}
-
-      ${$isPending && styled_components.css`
-        cursor: default;
-        background-color: ${palette.active};
-        &:disabled {
-          background-color: ${({ theme }) => {
-		return theme.color.variants[variant].active;
-	}};
-          user-select: none;
-        }
-
-        svg path {
-          stroke: ${palette.highlightDark};
-        }
-
-        // For backwards compatibility with current coloring scheme (targeting stroke property)
-        svg.pds-icon {
-          path {
-            stroke: unset;
-          }
-
-          path[stroke] {
-            stroke: currentColor;
-          }
-        }
-      `}
-    `;
-}}
-
-
-  ${require_mixins_print_index.printMixins.hide}
-`;
-const LoaderContainer = styled_components.default.div`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 2s;
-  opacity: ${({ isPending }) => isPending ? "1" : "0"};
-`;
-const Loader = (0, styled_components.default)(_persona_icons.LoaderIcon)`
-  animation: ${require_variables_keyframes.rotate} linear 1s infinite;
-`;
-const ButtonChildren = (0, styled_components.default)("div").attrs(({ isPending }) => ({ ["aria-hidden"]: isPending }))`
-  width: 100%;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
-  transition: opacity ${"200ms"};
-  opacity: ${({ isPending }) => isPending ? "0" : "1"};
-  gap: ${_persona_design_tokens.Spacing[1]};
-`;
-const PrefixIconContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-`;
-const InheritPrefixIconContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-
-  & svg {
-    width: inherit;
-    height: inherit;
-  }
-`;
-const SuffixIconContainer = (0, styled_components.default)(PrefixIconContainer)`
-  margin-right: 0;
-  flex-grow: 1;
-  justify-content: flex-end;
-`;
-const ButtonText = styled_components.default.span`
-  position: relative;
-
-  /* Needed to align for browsers that don't support text-box yet
-  (which at this time, is firefox, and opera, and a few niche browsers)
-  This checks firefox. Otherwise, it will default back to the original
-  which is a slightly misaligned button
-  */
-
-  /* Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't
-  work */
-
-  line-height: ${({ width }) => width === "icon" ? "0" : "inherit"};
-  @-moz-document url-prefix() {
-    top: ${({ size }) => size === "md" ? "1px" : "0.5px"};
-  }
-
-  @supports (text-box: cap alphabetic) {
-    text-box: ${({ width }) => width === "icon" ? "normal" : "cap alphabetic"};
-  }
-`;
-const Button = (0, react.forwardRef)(function Button({ id, children, prefixIcon, suffixIcon, disabled, isPending, type = "button", prefixIconType = "basic", variant = "primary", size = "md", width = "full", onClick, onSecondaryBackground, ...props }, ref) {
-	const [isResolving, { enable, disable }] = require_useToggle.useToggle(false);
-	const innerOnClick = (0, lodash_fp_js.isFunction)(onClick) ? onClick : noop;
-	const loading = isPending || isResolving;
-	const handleClick = (0, react.useCallback)(async (e) => {
-		if (loading) return;
-		const maybePromise = innerOnClick(e);
-		if (maybePromise instanceof Promise) {
-			enable();
-			await maybePromise;
-			disable();
-		}
-	}, [loading, innerOnClick]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
-		id,
-		type,
-		"data-test": "button__" + variant,
-		variant,
-		size,
-		width,
-		disabled: disabled || loading,
-		$isPending: loading,
-		$onSecondaryBackground: onSecondaryBackground,
-		...props,
-		onClick: handleClick,
-		ref,
-		children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderContainer, {
-			isPending: loading,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loader, { "aria-label": `Loading ${props["aria-label"] || ""}` })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ButtonChildren, {
-			isPending: loading,
-			children: [
-				prefixIcon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [prefixIconType === "basic" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InheritPrefixIconContainer, { children: prefixIcon })] }),
-				children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonText, {
-					width,
-					size,
-					children
-				}),
-				suffixIcon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuffixIconContainer, { children: suffixIcon })
-			]
-		})]
-	});
-});
-//#endregion
-//#region components/Button/IconButton.tsx
-const BUTTON_SIZE_MAP = {
-	xs: "16px",
-	sm: "24px",
-	md: "32px"
-};
-const ICON_SIZE_MAP = {
-	xs: "12px",
-	sm: "16px",
-	md: "16px"
-};
-const IconBtn = (0, styled_components.default)(Button).attrs({
-	width: "icon",
-	variant: "basic"
-})`
-  background-color: transparent;
-  padding: 0;
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-
-  ${({ size }) => styled_components.css`
-    height: ${BUTTON_SIZE_MAP[size]};
-    width: ${BUTTON_SIZE_MAP[size]};
-
-    svg {
-      width: ${ICON_SIZE_MAP[size]};
-      height: ${ICON_SIZE_MAP[size]};
-    }
-  `}
-`;
-/**
-* Use to render icon-only buttons. Ensure buttons have proper aria properties.
-*/
-const IconButton = (0, react.forwardRef)(function IconButton({ size = "xs", ...props }, ref) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconBtn, {
-		size,
-		ref,
-		...props
-	});
-});
-//#endregion
-Object.defineProperty(exports, "Button", {
-	enumerable: true,
-	get: function() {
-		return Button;
-	}
-});
-Object.defineProperty(exports, "ButtonChildren", {
-	enumerable: true,
-	get: function() {
-		return ButtonChildren;
-	}
-});
-Object.defineProperty(exports, "IconButton", {
-	enumerable: true,
-	get: function() {
-		return IconButton;
-	}
-});
-Object.defineProperty(exports, "StyledButton", {
-	enumerable: true,
-	get: function() {
-		return StyledButton;
-	}
-});
-Object.defineProperty(exports, "SuffixIconContainer", {
-	enumerable: true,
-	get: function() {
-		return SuffixIconContainer;
-	}
-});
-
-//# sourceMappingURL=IconButton-nlgjJQCS.cjs.map