npm - @persona/design-system - Versions diffs - 0.3.0 → 0.4.0 - Mend

@persona/design-system 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (507) hide show

package/dist/{HoverCopyableField-0Bzygbp9.mjs → HoverCopyableField-GMXeF-3J.mjs} RENAMED Viewed

@@ -1,12 +1,12 @@
-import "./variables/transitions.mjs";
-import { t as Card_default } from "./Card-BMCB9eFC.mjs";
-import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
+import { a as styled } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { t as Card_default } from "./Card-CKrJtn1f.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
 import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { fadeIn } from "./variables/keyframes.mjs";
-import { n as Button } from "./IconButton-BfDlic2K.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
+import "./variables/transitions.mjs";
+import { n as Button } from "./IconButton-BgL3QUVO.mjs";
+import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
 import { Spacing } from "@persona/design-tokens";
-import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon } from "@persona/icons";
 //#region components/HoverCopyableField/HoverCopyableField.tsx
@@ -20,6 +20,13 @@ const copyToClipboard = async (text) => {
 		return false;
 	}
 };
+const clickOrigin = (e) => {
+	const rect = e.currentTarget.getBoundingClientRect();
+	return {
+		clientX: e.clientX !== 0 || e.clientY !== 0 ? e.clientX : rect.left + rect.width / 2,
+		clientY: rect.top
+	};
+};
 const CopyableFieldContainer = styled.div`
   display: flex;
   gap: ${Spacing[1]};
@@ -48,23 +55,30 @@ const StyledCard = styled(Card_default)`
   padding: 6px;
   margin: 0;
 `;
-const HoverCopyableField = ({ copyValue, confirmationText = "Copied", children }) => {
+const HoverCopyableField = ({ copyValue, confirmationText = "Copied", onCopySuccess, children }) => {
 	const [copyButtonActive, { enable: showCopyButton, disable: hideCopyButton }] = useToggle(false);
 	const [confirmationActive, { enable: showConfirmation, disable: hideConfirmation }] = useToggle(false);
-	const copyTextToClipboard = async () => {
+	const copyTextToClipboard = async (origin) => {
 		if (copyValue == null) return;
-		if (await copyToClipboard(copyValue)) {
-			showConfirmation();
-			setTimeout(() => {
-				hideCopyButton();
-				hideConfirmation();
-			}, 1200);
+		if (!await copyToClipboard(copyValue)) return;
+		if (onCopySuccess) {
+			onCopySuccess({
+				text: copyValue,
+				...origin
+			});
+			hideCopyButton();
+			return;
 		}
+		showConfirmation();
+		setTimeout(() => {
+			hideCopyButton();
+			hideConfirmation();
+		}, 1200);
 	};
 	const copyField = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
-		copyTextToClipboard();
+		copyTextToClipboard(clickOrigin(e));
 	};
 	return copyValue != null && copyValue.trim().length > 0 ? /* @__PURE__ */ jsxs(CopyableFieldContainer, {
 		onMouseEnter: showCopyButton,
@@ -95,9 +109,6 @@ const HoverCopyableField = ({ copyValue, confirmationText = "Copied", children }
 	}) : null;
 };
 //#endregion
-//#region components/HoverCopyableField/index.ts
-var HoverCopyableField_default = HoverCopyableField;
-//#endregion
-export { HoverCopyableField_default as t };
+export { HoverCopyableField as t };
-//# sourceMappingURL=HoverCopyableField-0Bzygbp9.mjs.map
+//# sourceMappingURL=HoverCopyableField-GMXeF-3J.mjs.map

package/dist/HoverCopyableField-GMXeF-3J.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HoverCopyableField-GMXeF-3J.mjs","names":["Card","Popover"],"sources":["../components/HoverCopyableField/HoverCopyableField.tsx"],"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\nexport type CopySuccessDetail = {\n text: string;\n clientX: number;\n clientY: number;\n};\n\nexport type HoverCopyableFieldProps = {\n copyValue: string | undefined;\n confirmationText?: string;\n /**\n * Called after a successful clipboard write. When provided, the Copied\n * popover is skipped so the host can own post-copy UX.\n */\n onCopySuccess?: (detail: CopySuccessDetail) => void;\n children: ReactNode;\n};\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 clickOrigin = (e: MouseEvent<HTMLButtonElement>): { clientX: number; clientY: number } => {\n const rect = e.currentTarget.getBoundingClientRect();\n const hasPointer = e.clientX !== 0 || e.clientY !== 0;\n return {\n clientX: hasPointer ? e.clientX : rect.left + rect.width / 2,\n clientY: rect.top,\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\nconst HoverCopyableField = ({\n copyValue,\n confirmationText = 'Copied',\n onCopySuccess,\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 (origin: { clientX: number; clientY: number }) => {\n if (copyValue == null) {\n return;\n }\n const copyWasSuccessful = await copyToClipboard(copyValue);\n if (!copyWasSuccessful) {\n return;\n }\n if (onCopySuccess) {\n onCopySuccess({ text: copyValue, ...origin });\n hideCopyButton();\n return;\n }\n showConfirmation();\n setTimeout(() => {\n hideCopyButton();\n hideConfirmation();\n }, 1200);\n };\n\n const copyField = (e: MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n void copyTextToClipboard(clickOrigin(e));\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"],"mappings":";;;;;;;;;;;;AA8BA,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,eAAe,MAA2E;CAC9F,MAAM,OAAO,EAAE,cAAc,uBAAuB;AAEpD,QAAO;EACL,SAFiB,EAAE,YAAY,KAAK,EAAE,YAAY,IAE5B,EAAE,UAAU,KAAK,OAAO,KAAK,QAAQ;EAC3D,SAAS,KAAK;EACf;;AAGH,MAAM,yBAAyB,OAAO,GAAG;;SAEhC,QAAQ,GAAG;;;AAIpB,MAAM,aAAa,OAAO,OAAO,CAAC,aAAa;CAC7C,MAAM;CACN,SAAS;CACT,OAAO;CACR,EAAE;YACS,QAAQ,GAAG;WACZ,QAAQ,GAAG;iBACL,EAAE,eAAgB,WAAW,YAAY,SAAU;eACrD,OAAO,GAAA,QAA6B;;;;;;AAOnD,MAAM,aAAa,OAAOA,aAAK;;;;;eAKhB,OAAO,GAAA,QAA6B;;;;AAKnD,MAAM,sBAAsB,EAC1B,WACA,mBAAmB,UACnB,eACA,eAC6B;CAC7B,MAAM,CAAC,kBAAkB,EAAE,QAAQ,gBAAgB,SAAS,oBAAoB,UAAU,MAAM;CAChG,MAAM,CAAC,oBAAoB,EAAE,QAAQ,kBAAkB,SAAS,sBAC9D,UAAU,MAAM;CAElB,MAAM,sBAAsB,OAAO,WAAiD;AAClF,MAAI,aAAa,KACf;AAGF,MAAI,CAAC,MAD2B,gBAAgB,UAAU,CAExD;AAEF,MAAI,eAAe;AACjB,iBAAc;IAAE,MAAM;IAAW,GAAG;IAAQ,CAAC;AAC7C,mBAAgB;AAChB;;AAEF,oBAAkB;AAClB,mBAAiB;AACf,mBAAgB;AAChB,qBAAkB;KACjB,KAAK;;CAGV,MAAM,aAAa,MAAqC;AACtD,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACd,sBAAoB,YAAY,EAAE,CAAC;;AAG1C,QAAO,aAAa,QAAQ,UAAU,MAAM,CAAC,SAAS,IACpD,qBAAC,wBAAD;EAAwB,cAAc;EAAgB,cAAc;YAApE,CACG,UACD,qBAACC,iBAAD;GAAS,MAAM;aAAf,CACE,oBAACA,gBAAQ,QAAT;IAAgB,SAAA;cACd,oBAAC,YAAD;KACE,IAAG;KACH,UAAU,oBAAoB;KAC9B,SAAS;eAET,oBAAC,UAAD;MAAU,OAAO;MAAI,QAAQ;MAAM,CAAA;KACxB,CAAA;IACE,CAAA,EACjB,oBAACA,gBAAQ,SAAT;IAAiB,MAAK;IAAM,OAAM;IAAS,OAAO,EAAE,QAAQ,GAAG;cAC7D,oBAAC,YAAD;KAAY,UAAA;eACV,oBAAC,WAAD,EAAA,UAAY,kBAA6B,CAAA;KAC9B,CAAA;IACG,CAAA,CACV;KACa;MACvB"}

package/dist/HoverCopyableField.d.mts CHANGED Viewed

@@ -1,17 +1,28 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/HoverCopyableField/HoverCopyableField.d.ts
-interface HoverCopyableFieldProps {
+type CopySuccessDetail = {
+  text: string;
+  clientX: number;
+  clientY: number;
+};
+type HoverCopyableFieldProps = {
   copyValue: string | undefined;
   confirmationText?: string;
+  /**
+   * Called after a successful clipboard write. When provided, the Copied
+   * popover is skipped so the host can own post-copy UX.
+   */
+  onCopySuccess?: (detail: CopySuccessDetail) => void;
   children: ReactNode;
-}
+};
 declare const HoverCopyableField: ({
   copyValue,
   confirmationText,
+  onCopySuccess,
   children
 }: HoverCopyableFieldProps) => _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
-export { HoverCopyableField as default };
+export { CopySuccessDetail, HoverCopyableFieldProps, HoverCopyableField as default };
 //# sourceMappingURL=HoverCopyableField.d.mts.map

package/dist/{IconButton-BfDlic2K.mjs → IconButton-BgL3QUVO.mjs} RENAMED Viewed

@@ -1,16 +1,16 @@
-import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { focusOutlineControlled } from "./mixins/focus.mjs";
-import "./variables/transitions.mjs";
-import { printMixins } from "./mixins/print/index.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { paragraphMixins } from "./mixins/text.mjs";
 import { t as useToggle } from "./useToggle-Bo3yd14Y.mjs";
 import { rotate } from "./variables/keyframes.mjs";
+import "./variables/transitions.mjs";
+import { isDisabled, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { focusOutlineControlled } from "./mixins/focus.mjs";
+import { printMixins } from "./mixins/print/index.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "react-router-dom";
 import { forwardRef, useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { LoaderIcon } from "@persona/icons";
+import { Link } from "react-router-dom";
 import { isEmpty, isFunction } from "lodash-es";
 //#region components/Button/Button.tsx
 const noop$1 = () => void 0;
@@ -284,7 +284,7 @@ const Button = forwardRef(function Button({ id, children, prefixIcon, suffixIcon
 		}), /* @__PURE__ */ jsxs(ButtonChildren, {
 			isPending: loading,
 			children: [
-				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
+				prefixIcon != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [prefixIconType === "basic" && /* @__PURE__ */ jsx(PrefixIconContainer, { children: prefixIcon }), prefixIconType === "inherit" && /* @__PURE__ */ jsx(InheritPrefixIconContainer, { children: prefixIcon })] }),
 				children && /* @__PURE__ */ jsx(ButtonText, {
 					width,
 					size,
@@ -338,4 +338,4 @@ const IconButton = forwardRef(function IconButton({ size = "xs", ...props }, ref
 //#endregion
 export { SuffixIconContainer as a, StyledButton as i, Button as n, ButtonChildren as r, IconButton as t };
-//# sourceMappingURL=IconButton-BfDlic2K.mjs.map
+//# sourceMappingURL=IconButton-BgL3QUVO.mjs.map

package/dist/{IconButton-BfDlic2K.mjs.map → IconButton-BgL3QUVO.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton-BfDlic2K.mjs","names":["noop"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"IconButton-BgL3QUVO.mjs","names":["noop"],"sources":["../components/Button/Button.tsx","../components/Button/IconButton.tsx"],"sourcesContent":["import { isEmpty, isFunction } from 'lodash-es';\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n type ReactNode,\n type Ref,\n useCallback,\n} from 'react';\nimport { Link, type LinkProps } from 'react-router-dom';\nimport styled, {\n css,\n type DefaultTheme,\n type FlattenInterpolation,\n type ThemeProps,\n} from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { LoaderIcon } from '@persona/icons';\nimport { isDisabled, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport useToggle from 'design-system/lib/useToggle';\nimport { focusOutlineControlled } from 'design-system/mixins/focus';\nimport { printMixins } from 'design-system/mixins/print';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\nimport { rotate } from 'design-system/variables/keyframes';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst noop = (): void => undefined;\n\n// TODO(joseph): Bring this fix back to pseudoClass\nconst isActive = ({ active }: PseudoClassProps) => (active ? '' : ':active:enabled');\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst sizeStyles: Record<ButtonProps['size'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n md: css`\n ${paragraphMixins.md}\n height: ${({ theme }) => theme.button.height.md};\n padding: ${Spacing[2]};\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n sm: css`\n ${paragraphMixins.sm}\n height: ${({ theme }) => theme.button.height.sm};\n padding: ${Spacing[1]} 6px;\n svg {\n height: 16px;\n width: 16px;\n }\n `,\n};\n\n/ @ts-expect-error [strict-migration] The following line is not strict; please fix! /\nconst widthStyles: Record<ButtonProps['width'], FlattenInterpolation<ThemeProps<DefaultTheme>>> = {\n full: css`\n width: 100%;\n `,\n auto: css`\n width: auto;\n `,\n // TODO: rename this prop to 'element' as a standard unresponsive element width\n button: css`\n width: ${({ theme }) => theme.element.width.md};\n `,\n icon: css<ButtonProps>`\n width: ${({ theme, size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.button.height[size];\n }};\n padding: 0;\n flex: none;\n `,\n};\n\ninterface ButtonPropsWithTransientProps extends Omit<ButtonProps, 'isPending'> {\n $isPending: boolean;\n $onSecondaryBackground?: boolean;\n}\n\nexport const StyledButton = styled.button.attrs<ButtonPropsWithTransientProps>(({ to, target }) => {\n if (isEmpty(to)) {\n return 'button';\n } else if (typeof to === 'string' && to.startsWith('https://')) {\n return {\n as: 'a',\n href: to,\n target: target ?? '_blank',\n rel: 'noreferrer',\n };\n } else {\n return {\n as: Link,\n };\n }\n})<ButtonPropsWithTransientProps>`\n cursor: pointer;\n border: none;\n box-sizing: border-box;\n white-space: nowrap;\n ${({ theme, variant }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n const palette = theme.color.variants[variant] as any;\n return css`\n &:disabled {\n background-color: ${palette.disabled};\n color: ${palette.textDisabled};\n svg path {\n stroke: ${palette.textDisabled};\n }\n\n / For backwards compatibility with current coloring scheme (targeting stroke property) /\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n / Support icons with stroke /\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n user-select: none;\n }\n `;\n }}\n\n ${({ variant }) =>\n variant === 'outline' &&\n css`\n border: 1px solid ${({ theme }) => theme.color.border.input};\n `}\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n / To properly position loading spinner /\n position: relative;\n\n border-radius: ${({ theme }) => theme.button.borderRadius};\n\n transition-duration: ${TransitionDuration.Fast};\n transition-property: background-color, color, border-color, width, height;\n\n ${({ size }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return sizeStyles[size];\n }}\n ${({ width }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return widthStyles[width];\n }}\n\n / Variant styling /\n ${({ theme, variant, $isPending, $onSecondaryBackground }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n let palette = theme.color.variants[variant] as any;\n\n if (variant === 'basic' && $onSecondaryBackground) {\n palette = {\n ...palette,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n default: Color.CoreSlate300,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n hover: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n active: Color.CoreSlate400,\n // eslint-disable-next-line rulesdir/no-core-color-tokens\n disabled: Color.CoreSlate100,\n };\n }\n\n return css`\n background-color: ${palette.default};\n color: ${palette.text};\n svg path {\n stroke: ${palette.text};\n }\n\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n\n &${isHovered}${isNotDisabled} {\n background-color: ${palette.hover};\n }\n\n &${isDisabled} {\n cursor: not-allowed;\n }\n\n &${isActive} {\n background-color: ${palette.active};\n }\n\n ${focusOutlineControlled}\n\n ${\n $isPending &&\n css`\n cursor: default;\n background-color: ${palette.active};\n &:disabled {\n background-color: ${({ theme }) => {\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! /\n return theme.color.variants[variant].active;\n }};\n user-select: none;\n }\n\n svg path {\n stroke: ${palette.highlightDark};\n }\n\n // For backwards compatibility with current coloring scheme (targeting stroke property)\n svg.pds-icon {\n path {\n stroke: unset;\n }\n\n path[stroke] {\n stroke: currentColor;\n }\n }\n `\n }\n `;\n }}\n\n\n ${printMixins.hide}\n`;\n\ntype WithPendingProps = Pick<ButtonProps, 'isPending'>;\n\nconst LoaderContainer = styled.div<WithPendingProps>`\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 2s;\n opacity: ${({ isPending }) => (isPending ? '1' : '0')};\n`;\n\nconst Loader = styled(LoaderIcon)`\n animation: ${rotate} linear 1s infinite;\n`;\n\nexport const ButtonChildren = styled('div').attrs(({ isPending }: WithPendingProps) => ({\n ['aria-hidden']: isPending,\n}))<WithPendingProps>`\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n justify-content: center;\n transition: opacity ${TransitionDuration.Fast};\n opacity: ${({ isPending }) => (isPending ? '0' : '1')};\n gap: ${Spacing[1]};\n`;\n\nconst PrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst InheritPrefixIconContainer = styled.div`\n display: flex;\n align-items: center;\n\n & svg {\n width: inherit;\n height: inherit;\n }\n`;\n\nexport const SuffixIconContainer = styled(PrefixIconContainer)`\n margin-right: 0;\n flex-grow: 1;\n justify-content: flex-end;\n`;\n\nconst ButtonText = styled.span<{ size: 'md' \| 'sm'; width: 'full' \| 'auto' \| 'button' \| 'icon' }>`\n position: relative;\n\n / Needed to align for browsers that don't support text-box yet\n (which at this time, is firefox, and opera, and a few niche browsers)\n This checks firefox. Otherwise, it will default back to the original\n which is a slightly misaligned button\n /\n\n / Was trying to use this with @supports not, but genuinely could not figure out why this wouldn't\n work /\n\n line-height: ${({ width }) => (width === 'icon' ? '0' : 'inherit')};\n @-moz-document url-prefix() {\n top: ${({ size }) => (size === 'md' ? '1px' : '0.5px')};\n }\n\n @supports (text-box: cap alphabetic) {\n text-box: ${({ width }) => (width === 'icon' ? 'normal' : 'cap alphabetic')};\n }\n`;\n\ntype MaybePromise =\n \| ((e: MouseEvent<HTMLButtonElement>) => void)\n \| ((e: MouseEvent<HTMLButtonElement>) => Promise<void>);\n\nexport interface ButtonProps\n extends ComponentPropsWithoutRef<'button'>, Omit<PseudoClassProps, 'checked'> {\n /\n Visual style of the button.\n \n - `primary` – filled brand colour, for the primary action on a surface.\n * - `basic` – subtle grey fill, for secondary actions.\n * - `outline` – transparent with a border, alternative secondary style.\n * - `text` – no background or border, for tertiary / inline actions.\n * - `inverse` – inverted fill for use on dark/coloured backgrounds.\n * - `danger` – red fill, for destructive actions.\n \n @defaultValue 'primary'\n /\n variant?: 'basic' \| 'primary' \| 'inverse' \| 'danger' \| 'text' \| 'outline';\n /\n Shows a loading spinner and disables the button. Also triggers automatically\n * when `onClick` returns a Promise, clearing once the promise settles.\n /\n isPending?: boolean;\n /\n Icon rendered to the left of the button label.\n * Import from `@persona/icons`.\n /\n prefixIcon?: ReactNode;\n /\n Controls how the prefix icon inherits sizing.\n \n - `basic` – icon is rendered inside a fixed-size container.\n * - `inherit` – icon stretches to fill the surrounding element's dimensions.\n \n @defaultValue 'basic'\n /\n prefixIconType?: 'basic' \| 'inherit';\n\n /\n Icon rendered to the right of the button label.\n * Import from `@persona/icons`.\n /\n suffixIcon?: ReactNode;\n\n /\n Height and typography scale of the button.\n \n @defaultValue 'md'\n /\n size?: 'md' \| 'sm';\n\n /\n Changes the button into a link.\n * Pass a relative path to use `react-router-dom` `<Link>`, or an absolute\n * `https://` URL to render an `<a>` tag that opens in a new tab.\n /\n to?: LinkProps['to'];\n\n /\n Overrides the target of the link if `to` is provided and is an external link.\n /\n target?: LinkProps['target'];\n\n /\n Note: we may want to default this to 'button' in the future, but many instances of this Button component\n * in dashboard currently rely on the default 'submit' behavior that occurs when using this in redux-form\n * so we'll have to comb through and manually add the type='submit' prop.\n /\n type?: 'button' \| 'reset' \| 'submit';\n /\n Controls the width of the button.\n \n - `full` – stretches to fill its container (`width: 100%`).\n * - `auto` – shrinks to fit its content.\n * - `button` – a fixed medium element width (from design tokens).\n * - `icon` – square, sized to match the button height; use for icon-only buttons.\n \n @defaultValue 'full'\n /\n width?: 'full' \| 'auto' \| 'button' \| 'icon';\n onClick?: MaybePromise;\n ref?: Ref<HTMLButtonElement>;\n\n /\n In some cases we render a button on a secondary background, which needs an adjustment\n * for certain variants.\n /\n onSecondaryBackground?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n {\n id,\n children,\n prefixIcon,\n suffixIcon,\n disabled,\n isPending,\n type = 'button',\n prefixIconType = 'basic',\n variant = 'primary',\n size = 'md',\n width = 'full',\n onClick,\n onSecondaryBackground,\n ...props\n }: ButtonProps,\n ref,\n) {\n const [isResolving, { enable, disable }] = useToggle(false);\n const innerOnClick: MaybePromise = isFunction(onClick) ? onClick : noop;\n const loading = isPending \|\| isResolving;\n\n const handleClick = useCallback(\n async (e: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n return;\n }\n\n const maybePromise = innerOnClick(e);\n\n if (maybePromise instanceof Promise) {\n enable();\n await maybePromise;\n disable();\n }\n },\n [loading, innerOnClick],\n );\n\n return (\n <StyledButton\n id={id}\n type={type}\n data-test={'button__' + variant}\n variant={variant}\n size={size}\n width={width}\n disabled={disabled \|\| loading}\n $isPending={loading}\n $onSecondaryBackground={onSecondaryBackground}\n {...props}\n onClick={handleClick}\n ref={ref}\n >\n {loading && (\n <LoaderContainer isPending={loading}>\n <Loader aria-label={`Loading ${props['aria-label'] \|\| ''}`} />\n </LoaderContainer>\n )}\n <ButtonChildren isPending={loading}>\n {prefixIcon != null && (\n <>\n {prefixIconType === 'basic' && <PrefixIconContainer>{prefixIcon}</PrefixIconContainer>}\n {prefixIconType === 'inherit' && (\n <InheritPrefixIconContainer>{prefixIcon}</InheritPrefixIconContainer>\n )}\n </>\n )}\n {children && (\n <ButtonText width={width} size={size}>\n {children}\n </ButtonText>\n )}\n {suffixIcon != null && <SuffixIconContainer>{suffixIcon}</SuffixIconContainer>}\n </ButtonChildren>\n </StyledButton>\n );\n});\n\nexport default Button;\n","import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius } from '@persona/design-tokens';\n\nimport Button, { type ButtonProps } from './Button';\n\nconst BUTTON_SIZE_MAP = {\n xs: '16px',\n sm: '24px',\n md: '32px',\n};\n\nconst ICON_SIZE_MAP = {\n xs: '12px',\n sm: '16px',\n md: '16px',\n};\n\ntype IconBtnSize = keyof typeof BUTTON_SIZE_MAP;\n\nconst IconBtn = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n border-radius: ${BorderRadius.Md};\n\n ${({ size }) => css`\n height: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n width: ${BUTTON_SIZE_MAP[size as IconBtnSize]};\n\n svg {\n width: ${ICON_SIZE_MAP[size as IconBtnSize]};\n height: ${ICON_SIZE_MAP[size as IconBtnSize]};\n }\n `}\n`;\n\nexport interface IconButtonProps extends Omit<\n ButtonProps,\n 'width' \| 'prefixIcon' \| 'prefixIconType' \| 'suffixIcon' \| 'variant' \| 'size'\n> {\n /\n `xs` - 16px. `sm` - 24px. `md` - 32px.\n * Pair with a PDS icon in the prescribed size.\n /\n size?: IconBtnSize;\n}\n\n/\n Use to render icon-only buttons. Ensure buttons have proper aria properties.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n { size = 'xs', ...props },\n ref,\n) {\n return <IconBtn size={size as ButtonProps['size']} ref={ref} {...props} />;\n});\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/{IconButton-CBcW7ZU8.d.mts → IconButton-BpyOr8Ev.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "./Button-C0F0F2IL.mjs";
+import { r as ButtonProps } from "./Button-BrI1s2-r.mjs";
 import * as _$react from "react";
 //#region components/Button/IconButton.d.ts
@@ -21,4 +21,4 @@ interface IconButtonProps extends Omit<ButtonProps, 'width' | 'prefixIcon' | 'pr
 declare const IconButton: _$react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconButtonProps as n, IconButton as t };
-//# sourceMappingURL=IconButton-CBcW7ZU8.d.mts.map
+//# sourceMappingURL=IconButton-BpyOr8Ev.d.mts.map

package/dist/IconButton.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as IconButtonProps, t as IconButton } from "./IconButton-CBcW7ZU8.mjs";
+import { n as IconButtonProps, t as IconButton } from "./IconButton-BpyOr8Ev.mjs";
 export { IconButtonProps, IconButton as default };

package/dist/ImageTile.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { i as TextAction } from "./Action-CnNf5T-l.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { i as TextAction } from "./Action-CcAyQpYN.mjs";
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/ImageTile/ImageTile.d.ts
 interface ImageTileProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {

package/dist/InlineCombobox.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { r as InlineEditConfig } from "./TableBoxCell-DmVX_tgn.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { r as InlineEditConfig } from "./TableBoxCell-WXc57DwN.mjs";
 import { RefObject } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/TableBox/InlineCombobox.d.ts
 interface InlineComboboxProps {

package/dist/InlineInput.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as InlineEditConfig } from "./TableBoxCell-DmVX_tgn.mjs";
+import { r as InlineEditConfig } from "./TableBoxCell-WXc57DwN.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/TableBox/InlineInput.d.ts

package/dist/{Input-Bimw8KFj.mjs → Input-BWlvBYB3.mjs} RENAMED Viewed

@@ -1,12 +1,12 @@
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
+import { i as Paragraph } from "./Text-B0orb-cZ.mjs";
 import { isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import inputMixin from "./mixins/input.mjs";
-import { i as Paragraph } from "./Text-RcEfNFLx.mjs";
-import { n as Button } from "./IconButton-BfDlic2K.mjs";
-import { n as useFormField, t as FormControlContext } from "./useFormField-eftOPiXj.mjs";
+import { n as Button } from "./IconButton-BgL3QUVO.mjs";
+import { n as useFormField, t as FormControlContext } from "./useFormField-Bz2iMPBO.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleXInverseIcon } from "@persona/icons";
 import { CircleXInverseIcon as CircleXInverseIcon$1 } from "@persona/icons/12px";
 //#region components/Input/Input.tsx
@@ -187,4 +187,4 @@ const InputGroup = forwardRef(function InputGroup({ size = "md", leftIcon, onCle
 //#endregion
 export { Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-Bimw8KFj.mjs.map
+//# sourceMappingURL=Input-BWlvBYB3.mjs.map

package/dist/{Input-Bimw8KFj.mjs.map → Input-BWlvBYB3.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input-Bimw8KFj.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${Color.BorderIconSecondary};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${Color.BorderIconSecondary};\n\n ${({ disabled }) =>\n disabled &&\n css`\n color: ${Color.BorderIconDisabled};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.secondary};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAM,YAAY,OAAO,GAAG;;;;;AAM5B,MAAM,WAAW,OAAO,GAA2B;;UAEzC,QAAQ,GAAG;;;;;WAKV,MAAM,oBAAoB;aACxB,EAAE,YAAa,UAAU,OAAO,SAAS,OAAQ;YAClD,EAAE,YAAa,UAAU,OAAO,SAAS,OAAQ;;;;;;;;AAS7D,MAAM,uBAAuB,OAAO,GAA2B;;;SAGtD,QAAQ,GAAG;YACR,EAAE,YAAa,UAAU,OAAO,QAAQ,QAAQ,GAAI;;;;;;AAOhE,MAAa,cAAc,OAAO,OAAO,CAAC,MAAM;CAC9C,OAAO;CACP,SAAS;CACV,CAAC;;;aAGW,EAAE,WAAY,SAAS,OAAO,SAAS,OAAQ;YAChD,EAAE,WAAY,SAAS,OAAO,SAAS,OAAQ;mBACxC,aAAa,GAAG;WACxB,MAAM,oBAAoB;;KAEhC,EAAE,eACH,YACA,GAAG;eACQ,MAAM,mBAAmB;MAClC;;KAED,YAAY,cAAc;;;;;eAKhB,EAAE,WAAY,SAAS,OAAO,SAAS,OAAQ;cAChD,EAAE,WAAY,SAAS,OAAO,SAAS,OAAQ;;;AAI7D,MAAM,sBAAsB,OAAO,GAA0B;;WAElD,QAAQ,GAAG;UACZ,EAAE,YAAa,UAAU,OAAO,QAAQ,MAAO;;AAwBzD,MAAM,YAAY,OAAO,KAAuB;IAC5C,WAAW;;;;cAID,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;KAGlD,EAAE,OAAO,WAAW,oBAAoB;CACzC,IAAI;AACJ,SAAQ,OAAR;EACE;EACA,KAAK;AACH,gBAAa,QAAQ,QAAQ,GAAG,YAAY,QAAQ,GAAG;AACvD,UAAO,GAAG;2BACS,gBAAgB,aAAa,QAAQ,GAAG;0BACzC,YAAY,aAAa,QAAQ,GAAG;;EAExD,KAAK;AACH,gBAAa,QAAQ,QAAQ,GAAG,YAAY,QAAQ,GAAG;AACvD,UAAO,GAAG;2BACS,gBAAgB,aAAa,QAAQ,GAAG;0BACzC,YAAY,aAAa,QAAQ,GAAG;;;EAG1D;;AAGJ,MAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,MAAM,UAAU,cAAc,IAAI,YAAY,UAAU,UAAU,WAAW,GAAG,SAClF,KACA;CACA,MAAM,QAAQ,aAAa;EAAE;EAAY;EAAU;EAAU,SAAS;EAAI;EAAW,CAAC;AAEtF,QACE,oBAAC,WAAD;EACE,OAAO;EACP,WAAW;EACX,eAAe;EACV;EACL,IAAI,MAAM;EACV,oBAAkB,GAAG,MAAM,eAAe,MAAM,aAAa,IAAI,MAAM,kBAAkB;EACzF,qBAAmB,MAAM,WAAW,MAAM,cAAc,KAAA;EACxD,gBAAc,MAAM;EACpB,YAAY,MAAM;EAClB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,WAAW,MAAM;EACjB,GAAI;EACJ,MAAM,MAAM;EACZ,CAAA;EAEJ;AA0CF,MAAa,aAAa,WAA4C,SAAS,WAC7E,EACE,OAAO,MACP,UACA,SACA,aACA,UACA,UACA,YACA,UACA,QACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE;EAAY;EAAU;EAAU,CAAC;CAC9D,MAAM,0BAA0B,QAAwB;CACxD,MAAM,CAAC,mBAAmB,wBAAwB,SAAwB,KAAK;CAE/E,MAAM,qBAAqB,OAA8B,KAAK;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAwB,KAAK;AAEjF,iBAAgB;AAEd,MAAI,eAAe,wBAAwB,QACzC,sBAAqB,GAAG,KAAK,wBAAwB,QAAQ,cAAc,EAAE,IAAI;IAElF,CAAC,qBAAqB,CAAC;AAE1B,iBAAgB;AACd,MAAI,UAAU,mBAAmB,QAE/B,uBAAsB,GAAG,KAAK,mBAAmB,QAAQ,YAAY,IAAI;IAE1E,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,MAAM,oBACJ,SAAS,OACL,EACE,QAAQ,QACT,GACD,EAAE;AAER,QACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,qBAAC,WAAD;GAAgB;GAAK,GAAI;aAAzB;IACG,YAAY,oBAAC,UAAD;KAAU,OAAO;eAAO;KAAoB,CAAA;IACxD,aAAa,UAAU;KACtB;KACU;KACV,GAAI,cAAc,EAAE,aAAa,GAAG,EAAE;KACtC,cAAc,WAAW;KACzB,OACE,qBAAqB,qBACjB,EACE,cAAc,qBAAqB,oBACpC,GACD,EAAE;KACT,CAAC;IAKD,UAAU,EAAE,WAAW,gBACtB,oBAAC,qBAAD;KAAqB,OAAO;KAAM,KAAK;eACrC,oBAAC,WAAD;MAAiB;gBAAO;MAAmB,CAAA;KACvB,CAAA;KAGtB,WAAW,gBAEX,qBAAC,sBAAD;KAAsB,KAAK;KAAyB,OAAO;eAA3D,CACG,WACC,oBAAC,aAAD;MACE,SAAS;MACT,UAAU,MAAM;MAChB,cAAW;MACL;gBAEL,SAAS,OAAO,oBAACA,sBAAD,EAA2B,CAAA,GAAG,oBAAC,oBAAD,EAAsB,CAAA;MACzD,CAAA,EAEf,eACC,aAAa,aAAa;MACxB,MAAM;MACN,OAAO,YAAY,MAAM,SAAS;MAClC,OAAO;MACR,CAAC,CACiB;;IAEf;;EACgB,CAAA;EAEhC"}
1	+ {"version":3,"file":"Input-BWlvBYB3.mjs","names":["SmallCircleXInverseIcon"],"sources":["../components/Input/Input.tsx"],"sourcesContent":["import {\n cloneElement,\n type ComponentPropsWithoutRef,\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport { CircleXInverseIcon as SmallCircleXInverseIcon } from '@persona/icons/12px';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport useFormField, {\n FormControlContext,\n} from 'design-system/components/FormControl/useFormField';\nimport { Paragraph } from 'design-system/components/Text';\nimport { isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\n\nconst Container = styled.div`\n display: flex;\n position: relative;\n width: 100%;\n`;\n\nconst LeftIcon = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n left: ${Spacing[2]};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n color: ${Color.BorderIconSecondary};\n height: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n width: ${({ $size }) => ($size === 'sm' ? '12px' : '16px')};\n pointer-events: none;\n\n svg {\n height: 100%;\n width: 100%;\n }\n`;\n\nconst InputButtonContainer = styled.div<{ $size?: InputSizes }>`\n position: absolute;\n display: flex;\n gap: ${Spacing[2]};\n right: ${({ $size }) => ($size === 'sm' ? '3px' : Spacing[1])};\n top: 50%;\n transform: translateY(-50%);\n margin: 0;\n font-size: 0px;\n`;\n\nexport const ClearButton = styled(Button).attrs({\n width: 'icon',\n variant: 'basic',\n})`\n background-color: transparent;\n padding: 0;\n height: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n width: ${({ size }) => (size === 'sm' ? '18px' : '24px')};\n border-radius: ${BorderRadius.Md};\n color: ${Color.BorderIconSecondary};\n\n ${({ disabled }) =>\n disabled &&\n css`\n color: ${Color.BorderIconDisabled};\n `}\n\n &${isHovered}${isNotDisabled} {\n background-color: transparent;\n }\n\n svg {\n height: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'sm' ? '12px' : '16px')};\n }\n`;\n\nconst SuffixTextContainer = styled.div<{ $size: InputSizes }>`\n position: absolute;\n right: ${Spacing[2]};\n top: ${({ $size }) => ($size === 'sm' ? '2px' : '6px')};\n`;\n\ninterface StyledInputProps extends InputMixinProps {\n $leftIcon?: ReactNode;\n $hasRightItem?: boolean;\n}\n\nexport interface InputProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>, Omit<InputMixinProps, '$size'> {\n /*\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n `size` HTML attr on `<input>`\n /\n inputSize?: ComponentPropsWithoutRef<'input'>['size'];\n\n leftIcon?: StyledInputProps['$leftIcon'];\n hasRightItem?: boolean;\n}\n\nconst InputBase = styled.input<StyledInputProps>`\n ${inputMixin};\n line-height: 1;\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.secondary};\n }\n\n ${({ $size, $leftIcon, $hasRightItem }) => {\n let btnSpacing: string;\n switch ($size) {\n default:\n case 'md':\n btnSpacing = `calc(${Spacing[3]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[3]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[3]};\n `;\n case 'sm':\n btnSpacing = `calc(${Spacing[2]} + 16px + ${Spacing[1]})`;\n return css`\n padding-right: ${$hasRightItem ? btnSpacing : Spacing[2]};\n padding-left: ${$leftIcon ? btnSpacing : Spacing[2]};\n `;\n }\n }}\n`;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { size, leftIcon, hasRightItem, id, hasWarning, hasError, disabled, maxLength, ...props },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled, inputId: id, maxLength });\n\n return (\n <InputBase\n $size={size}\n $leftIcon={leftIcon}\n $hasRightItem={hasRightItem}\n ref={ref}\n id={field.inputId}\n aria-describedby={`${field.helperTextId}${field.hasWarning ? ` ${field.warningTextId}` : ''}`}\n aria-errormessage={field.hasError ? field.errorTextId : undefined}\n aria-invalid={field.hasError}\n hasWarning={field.hasWarning}\n hasError={field.hasError}\n disabled={field.disabled}\n maxLength={field.maxLength}\n {...props}\n size={props.inputSize}\n />\n );\n});\n\nexport interface InputGroupProps\n extends ComponentPropsWithoutRef<'div'>, Omit<InputMixinProps, '$size'> {\n /\n Input\n /\n children: ReactElement<InputProps>;\n\n /\n Size of the input. If you need the HTML size attr, use inputSize.\n /\n size?: InputSizes;\n\n /\n Icon to render to the left of the input field.\n \n Import icon from `@persona/icons`. Use 24px for `lg` input size.\n /\n leftIcon?: ReactNode;\n\n /\n Renders clear button to the right and calls function upon click.\n /\n onClear?: MouseEventHandler<HTMLButtonElement>;\n\n /\n Button to be rendered to the right of the input\n /\n rightButton?: ReactElement<ButtonProps>;\n\n /\n Disabled prop will be passed down to `<Input>`\n /\n disabled?: boolean;\n\n /\n Suffix text to be shown to the right of the input (inside the input field)\n /\n suffix?: string;\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n size = 'md',\n leftIcon,\n onClear,\n rightButton,\n children,\n disabled,\n hasWarning,\n hasError,\n suffix,\n ...props\n },\n ref,\n) {\n const field = useFormField({ hasWarning, hasError, disabled });\n const inputButtonContainerRef = useRef<HTMLDivElement>();\n const [inputPaddingRight, setInputPaddingRight] = useState<string \| null>(null);\n\n const suffixContainerRef = useRef<HTMLDivElement \| null>(null);\n const [suffixPaddingRight, setSuffixPaddingRight] = useState<string \| null>(null);\n\n useEffect(() => {\n // We only need to calculate padding in presence of the right button\n if (rightButton && inputButtonContainerRef.current) {\n setInputPaddingRight(`${12 + inputButtonContainerRef.current.offsetWidth + 4}px`);\n }\n }, [setInputPaddingRight]);\n\n useEffect(() => {\n if (suffix && suffixContainerRef.current) {\n // 12px is 8px padding to the right, plus the 4px gap between the suffix and the input.\n setSuffixPaddingRight(`${12 + suffixContainerRef.current.offsetWidth}px`);\n }\n }, [suffix, setSuffixPaddingRight]);\n\n const rightButtonStyles: CSSProperties =\n size === 'sm'\n ? {\n height: '18px',\n }\n : {};\n\n return (\n <FormControlContext.Provider value={field}>\n <Container ref={ref} {...props}>\n {leftIcon && <LeftIcon $size={size}>{leftIcon}</LeftIcon>}\n {cloneElement(children, {\n size,\n leftIcon: leftIcon,\n ...(rightButton ? { rightButton } : {}),\n hasRightItem: onClear \|\| suffix,\n style:\n inputPaddingRight \|\| suffixPaddingRight\n ? {\n paddingRight: inputPaddingRight \|\| suffixPaddingRight,\n }\n : {},\n })}\n\n {/ Renders only if there's a suffix and NO button /}\n {/ At some point, this should be moved so that it's not absolutely positioned, and\n these are both wrapped within an \"input\" container /}\n {suffix && !(onClear \|\| rightButton) && (\n <SuffixTextContainer $size={size} ref={suffixContainerRef}>\n <Paragraph size={size}>{suffix}</Paragraph>\n </SuffixTextContainer>\n )}\n\n {(onClear \|\| rightButton) && ( // TODO: Render only if value is present\n / @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <InputButtonContainer ref={inputButtonContainerRef} $size={size}>\n {onClear && (\n <ClearButton\n onClick={onClear}\n disabled={field.disabled}\n aria-label='Clear'\n size={size}\n >\n {size === 'sm' ? <SmallCircleXInverseIcon /> : <CircleXInverseIcon />}\n </ClearButton>\n )}\n {rightButton &&\n cloneElement(rightButton, {\n size: 'sm',\n width: rightButton.props.width \|\| 'auto',\n style: rightButtonStyles,\n })}\n </InputButtonContainer>\n )}\n </Container>\n </FormControlContext.Provider>\n );\n});\n\nexport default Input;\n"],"mappings":"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"}

package/dist/{Input-CVdjkX88.d.mts → Input-qlQVD5h0.d.mts} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { t as PseudoClassProps } from "./PseudoClassProps-CcSlKNev.mjs";
-import { r as ButtonProps } from "./Button-C0F0F2IL.mjs";
-import { n as InputSizes, t as InputMixinProps } from "./input-CzO-6_1V.mjs";
-import * as _$styled_components0 from "styled-components";
+import { t as PseudoClassProps } from "./PseudoClassProps-BPdn-ofQ.mjs";
+import { r as ButtonProps } from "./Button-BrI1s2-r.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-M7BEIewR.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, MouseEventHandler, ReactElement, ReactNode } from "react";
+import * as _$styled_components0 from "styled-components";
 //#region components/Input/Input.d.ts
 declare const ClearButton: _$styled_components0.StyledComponent<_$react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>, any, {
@@ -62,4 +62,4 @@ interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, Omit<InputMix
 declare const InputGroup: _$react.ForwardRefExoticComponent<InputGroupProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputProps as a, InputGroupProps as i, Input as n, InputGroup as r, ClearButton as t };
-//# sourceMappingURL=Input-CVdjkX88.d.mts.map
+//# sourceMappingURL=Input-qlQVD5h0.d.mts.map

package/dist/Input.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-CVdjkX88.mjs";
+import { a as InputProps, i as InputGroupProps, n as Input, r as InputGroup, t as ClearButton } from "./Input-qlQVD5h0.mjs";
 export { ClearButton, Input, Input as default, InputGroup, InputGroupProps, InputProps };

package/dist/{InputProps-BwKkmImn.d.mts → InputProps-D_7MnQfE.d.mts} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as InputSizes, t as InputMixinProps } from "./input-CzO-6_1V.mjs";
+import { n as InputSizes, t as InputMixinProps } from "./input-M7BEIewR.mjs";
 //#region types/InputProps.d.ts
 interface InputProps extends Omit<InputMixinProps, '$size'> {
@@ -13,4 +13,4 @@ interface InputProps extends Omit<InputMixinProps, '$size'> {
 }
 //#endregion
 export { InputProps as t };
-//# sourceMappingURL=InputProps-BwKkmImn.d.mts.map
+//# sourceMappingURL=InputProps-D_7MnQfE.d.mts.map

package/dist/InputProps.d.mts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as InputProps } from "./InputProps-BwKkmImn.mjs";
+import { t as InputProps } from "./InputProps-D_7MnQfE.mjs";
 export { InputProps };

package/dist/IntegerValueControl.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { t as ValueControlProps } from "./types-NJtAxsU1.mjs";
+import { t as ValueControlProps } from "./types-B5VmRRMR.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 //#region components/DataTable/TableControls/FiltersV2/value-controls/IntegerValueControl/IntegerValueControl.d.ts

package/dist/LayoutLoadingSpinner.d.mts ADDED Viewed

@@ -0,0 +1,11 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+//#region patterns/LayoutLoadingSpinner/LayoutLoadingSpinner.d.ts
+/**
+ * Centered 120px loading ring that fills its container. Use as the loading state for a page or
+ * embedded app when no layout-specific shimmer exists.
+ */
+declare const LayoutLoadingSpinner: () => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LayoutLoadingSpinner };
+//# sourceMappingURL=LayoutLoadingSpinner.d.mts.map

package/dist/Link.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
+import { AnchorHTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps as LinkProps$1 } from "react-router-dom";
-import { AnchorHTMLAttributes, ReactNode } from "react";
 //#region components/Link/Link.d.ts
 type Target = '_blank' | '_self' | '_parent' | '_top';
@@ -18,7 +18,7 @@ interface BaseLinkProps {
 }
 interface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
-   * The URL to navigate to. Can be internal (e.g., "/dashboard") or external (e.g., "https://example.com").
+   * The URL to navigate to. Can be internal (e.g., "/settings") or external (e.g., "https://example.com").
    */
   url: string;
   /**
@@ -28,7 +28,7 @@ interface ExternalLinkProps extends BaseLinkProps, AnchorHTMLAttributes<HTMLAnch
 }
 interface InternalLinkProps extends BaseLinkProps, Omit<LinkProps$1, 'to'> {
   /**
-   * The URL to navigate to. Should be an internal route (e.g., "/dashboard").
+   * The URL to navigate to. Should be an internal route (e.g., "/settings").
    */
   url: string;
 }

package/dist/{ListBox-DKZpGYjo.mjs → ListBox-9jHHEaqW.mjs} RENAMED Viewed

@@ -1,21 +1,21 @@
-import { isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
-import { paragraphMixins } from "./mixins/text.mjs";
-import { n as Stack } from "./Stack-Bl54WmhY.mjs";
+import { a as styled, r as css } from "./styledComponentsInterop-8zScIQyC.mjs";
 import { HeadlessAriaButton } from "./lib/HeadlessAriaButton.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
 import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
-import { n as Button$1, t as IconButton } from "./IconButton-BfDlic2K.mjs";
-import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-xtDMuOoN.mjs";
-import { t as FormGroupContext } from "./useFormGroup-BMukAMAd.mjs";
-import { o as MenuHeading, r as ListItem } from "./Menu-Dir03WA9.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-BCyV8nC0.mjs";
-import { s as Popover_default } from "./Popover-BkDpDdaO.mjs";
-import { t as Container } from "./FormControl-HVzZEqJH.mjs";
+import { n as Stack } from "./Stack-Bre2oiov.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-BgL3QUVO.mjs";
+import { a as StyledTruncatedText, i as StickerContentContainer, n as Sticker, r as StickerContainer } from "./Sticker-CQ6sOKUj.mjs";
+import { t as FormGroupContext } from "./useFormGroup-CaTiD_Yt.mjs";
+import { o as MenuHeading, r as ListItem } from "./Menu-38UCGcte.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-CUnf420M.mjs";
+import { s as Popover_default } from "./Popover-DlXyKYL5.mjs";
+import { t as Container } from "./FormControl-1BmoYFCu.mjs";
 import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { DropIndicator, GridList, GridListItem, Header, ListBoxSection, useDragAndDrop } from "react-aria-components";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { DropIndicator, GridList, GridListItem, Header, ListBoxSection, useDragAndDrop } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { DragIcon } from "@persona/icons";
 import { MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
 import { uniqueId } from "lodash-es";
@@ -424,7 +424,7 @@ const LogicRow = ({ condition, attributeName, operator, matchLevelName, editable
 		children: /* @__PURE__ */ jsxs(LogicRuleContainer, {
 			$hideCondition: hideCondition,
 			$size: size,
-			children: [!hideCondition && (condition || "\xA0"), attributeName && /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: [!hideCondition && (condition || "\xA0"), attributeName && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx(LogicRowSticker, {
 					disabled: !editable,
 					children: attributeName
@@ -444,4 +444,4 @@ const ListBox = Object.assign(ListBox$1, { LogicRow });
 //#endregion
 export { useListBoxContext as n, ListBox as t };
-//# sourceMappingURL=ListBox-DKZpGYjo.mjs.map
+//# sourceMappingURL=ListBox-9jHHEaqW.mjs.map