@persona/design-system 0.1.5-pre.4

package/dist/LoadingShimmer-CNE6JUVF.mjs

@@ -0,0 +1,67 @@
+import { t as motion } from "./motion-DoikasqZ.mjs";
+import { BorderRadius, Color } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region components/LoadingShimmer/LoadingShimmer.tsx
+const ShimmerContainer = styled.span`
+  position: relative;
+  display: inline-block;
+  /* Using a one off color since our current color tokens are not quite what we need */
+  background-color: ${({ $variant }) => $variant === "secondary" ? "#eaeaea" : Color.CoreSlate50};
+  width: ${({ width }) => width ?? "100px"};
+  height: ${({ height }) => height ?? "auto"};
+  border-radius: ${BorderRadius.Md};
+  overflow: hidden;
+`;
+const Shimmer = styled(motion.span)`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({ $variant }) => `linear-gradient(90deg, transparent 0%, ${$variant === "secondary" ? Color.CoreSlate50 : Color.CoreSlate25} 50%, transparent 100%)`};
+  filter: blur(4px);
+`;
+/**
+* Base class of all Loading Shimmer components.
+*/
+function LoadingShimmer({ width, height, variant = "primary", ...props }) {
+	return /* @__PURE__ */ jsx(ShimmerContainer, {
+		width,
+		height,
+		$variant: variant,
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"data-test": "loading-shimmer",
+		"data-loading-indicator": "true",
+		...props,
+		children: /* @__PURE__ */ jsx(Shimmer, {
+			initial: {
+				x: "-100%",
+				skew: -30
+			},
+			animate: {
+				x: "100%",
+				skew: -30
+			},
+			$variant: variant,
+			transition: {
+				repeat: Infinity,
+				duration: 1,
+				ease: "easeOut"
+			}
+		})
+	});
+}
+const LoadingShimmerHeading = styled(LoadingShimmer)`
+  height: ${({ theme, size = "lg" }) => theme.text.heading[size].fontSize};
+`;
+const LoadingShimmerParagraph = styled(LoadingShimmer)`
+  height: ${({ theme, size = "md" }) => theme.text.paragraph[size].fontSize};
+`;
+const MaybeLoadingShimmer = ({ isLoading, children, height, width }) => isLoading ? /* @__PURE__ */ jsx(LoadingShimmer, {
+	height,
+	width
+}) : /* @__PURE__ */ jsx(Fragment, { children });
+//#endregion
+export { MaybeLoadingShimmer as i, LoadingShimmerHeading as n, LoadingShimmerParagraph as r, LoadingShimmer as t };
+
+//# sourceMappingURL=LoadingShimmer-CNE6JUVF.mjs.map

package/dist/LoadingShimmer-CNE6JUVF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingShimmer-CNE6JUVF.mjs","names":[],"sources":["../components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { BorderRadius, Color } from '@persona/design-tokens';\nimport { motion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport type { HeadingSize, ParagraphSize } from 'design-system/mixins/text';\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n  height?: string;\n  width?: string;\n  variant?: 'primary' | 'secondary';\n}\n\ntype ShimmerContainerProps = {\n  width?: string;\n  height?: string;\n  $variant: 'primary' | 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n  position: relative;\n  display: inline-block;\n  /* Using a one off color since our current color tokens are not quite what we need */\n  background-color: ${({ $variant }) => ($variant === 'secondary' ? '#eaeaea' : Color.CoreSlate50)};\n  width: ${({ width }) => width ?? '100px'};\n  height: ${({ height }) => height ?? 'auto'};\n  border-radius: ${BorderRadius.Md};\n  overflow: hidden;\n`;\n\ntype ShimmerProps = {\n  $variant: 'primary' | 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: ${({ $variant }) =>\n    `linear-gradient(90deg, transparent 0%, ${$variant === 'secondary' ? Color.CoreSlate50 : Color.CoreSlate25} 50%, transparent 100%)`};\n  filter: blur(4px);\n`;\n\n/**\n * Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n  width,\n  height,\n  variant = 'primary',\n  ...props\n}: LoadingShimmerProps) {\n  return (\n    <ShimmerContainer\n      width={width}\n      height={height}\n      $variant={variant}\n      aria-live='polite'\n      aria-busy='true'\n      data-test='loading-shimmer'\n      data-loading-indicator='true'\n      {...props}\n    >\n      <Shimmer\n        initial={{ x: '-100%', skew: -30 }}\n        animate={{ x: '100%', skew: -30 }}\n        $variant={variant}\n        transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n      />\n    </ShimmerContainer>\n  );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n  size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n  height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n  size?: ParagraphSize;\n  // eg. 200px\n  width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n  height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n  isLoading: boolean;\n  height?: string;\n  width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n  isLoading,\n  children,\n  height,\n  width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;AAkBA,MAAM,mBAAmB,OAAO,IAA2B;;;;uBAIpC,EAAE,eAAgB,aAAa,cAAc,YAAY,MAAM,YAAa;YACvF,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1B,aAAa,GAAG;;;AAOnC,MAAM,UAAU,OAAO,OAAO,KAAK;;;;iBAIlB,EAAE,eACf,0CAA0C,aAAa,cAAc,MAAM,cAAc,MAAM,YAAY,yBAAyB;;;;;;AAOxI,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;AACtB,QACE,oBAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEJ,oBAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EACe,CAAA;;AAQvB,MAAa,wBAAwB,OAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,OAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,oBAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,oBAAA,UAAA,EAAG,UAAY,CAAA"}

package/dist/LoadingShimmer-DMK9RC4N.cjs

@@ -0,0 +1,92 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_motion = require("./motion-QW6imSxE.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");
+//#region components/LoadingShimmer/LoadingShimmer.tsx
+const ShimmerContainer = styled_components.default.span`
+  position: relative;
+  display: inline-block;
+  /* Using a one off color since our current color tokens are not quite what we need */
+  background-color: ${({ $variant }) => $variant === "secondary" ? "#eaeaea" : _persona_design_tokens.Color.CoreSlate50};
+  width: ${({ width }) => width ?? "100px"};
+  height: ${({ height }) => height ?? "auto"};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  overflow: hidden;
+`;
+const Shimmer = (0, styled_components.default)(require_motion.motion.span)`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({ $variant }) => `linear-gradient(90deg, transparent 0%, ${$variant === "secondary" ? _persona_design_tokens.Color.CoreSlate50 : _persona_design_tokens.Color.CoreSlate25} 50%, transparent 100%)`};
+  filter: blur(4px);
+`;
+/**
+* Base class of all Loading Shimmer components.
+*/
+function LoadingShimmer({ width, height, variant = "primary", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShimmerContainer, {
+		width,
+		height,
+		$variant: variant,
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"data-test": "loading-shimmer",
+		"data-loading-indicator": "true",
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shimmer, {
+			initial: {
+				x: "-100%",
+				skew: -30
+			},
+			animate: {
+				x: "100%",
+				skew: -30
+			},
+			$variant: variant,
+			transition: {
+				repeat: Infinity,
+				duration: 1,
+				ease: "easeOut"
+			}
+		})
+	});
+}
+const LoadingShimmerHeading = (0, styled_components.default)(LoadingShimmer)`
+  height: ${({ theme, size = "lg" }) => theme.text.heading[size].fontSize};
+`;
+const LoadingShimmerParagraph = (0, styled_components.default)(LoadingShimmer)`
+  height: ${({ theme, size = "md" }) => theme.text.paragraph[size].fontSize};
+`;
+const MaybeLoadingShimmer = ({ isLoading, children, height, width }) => isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingShimmer, {
+	height,
+	width
+}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+//#endregion
+Object.defineProperty(exports, "LoadingShimmer", {
+	enumerable: true,
+	get: function() {
+		return LoadingShimmer;
+	}
+});
+Object.defineProperty(exports, "LoadingShimmerHeading", {
+	enumerable: true,
+	get: function() {
+		return LoadingShimmerHeading;
+	}
+});
+Object.defineProperty(exports, "LoadingShimmerParagraph", {
+	enumerable: true,
+	get: function() {
+		return LoadingShimmerParagraph;
+	}
+});
+Object.defineProperty(exports, "MaybeLoadingShimmer", {
+	enumerable: true,
+	get: function() {
+		return MaybeLoadingShimmer;
+	}
+});
+
+//# sourceMappingURL=LoadingShimmer-DMK9RC4N.cjs.map

package/dist/LoadingShimmer-DMK9RC4N.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingShimmer-DMK9RC4N.cjs","names":["Color","BorderRadius","motion"],"sources":["../components/LoadingShimmer/LoadingShimmer.tsx"],"sourcesContent":["import { BorderRadius, Color } from '@persona/design-tokens';\nimport { motion } from 'framer-motion';\nimport type { ComponentPropsWithoutRef, FC } from 'react';\nimport styled from 'styled-components';\n\nimport type { HeadingSize, ParagraphSize } from 'design-system/mixins/text';\n\ninterface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {\n  height?: string;\n  width?: string;\n  variant?: 'primary' | 'secondary';\n}\n\ntype ShimmerContainerProps = {\n  width?: string;\n  height?: string;\n  $variant: 'primary' | 'secondary';\n};\nconst ShimmerContainer = styled.span<ShimmerContainerProps>`\n  position: relative;\n  display: inline-block;\n  /* Using a one off color since our current color tokens are not quite what we need */\n  background-color: ${({ $variant }) => ($variant === 'secondary' ? '#eaeaea' : Color.CoreSlate50)};\n  width: ${({ width }) => width ?? '100px'};\n  height: ${({ height }) => height ?? 'auto'};\n  border-radius: ${BorderRadius.Md};\n  overflow: hidden;\n`;\n\ntype ShimmerProps = {\n  $variant: 'primary' | 'secondary';\n};\nconst Shimmer = styled(motion.span)<ShimmerProps>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: ${({ $variant }) =>\n    `linear-gradient(90deg, transparent 0%, ${$variant === 'secondary' ? Color.CoreSlate50 : Color.CoreSlate25} 50%, transparent 100%)`};\n  filter: blur(4px);\n`;\n\n/**\n * Base class of all Loading Shimmer components.\n */\nexport function LoadingShimmer({\n  width,\n  height,\n  variant = 'primary',\n  ...props\n}: LoadingShimmerProps) {\n  return (\n    <ShimmerContainer\n      width={width}\n      height={height}\n      $variant={variant}\n      aria-live='polite'\n      aria-busy='true'\n      data-test='loading-shimmer'\n      data-loading-indicator='true'\n      {...props}\n    >\n      <Shimmer\n        initial={{ x: '-100%', skew: -30 }}\n        animate={{ x: '100%', skew: -30 }}\n        $variant={variant}\n        transition={{ repeat: Infinity, duration: 1, ease: 'easeOut' }}\n      />\n    </ShimmerContainer>\n  );\n}\n\nexport interface LoadingShimmerHeadingProps extends LoadingShimmerProps {\n  size?: HeadingSize;\n}\n\nexport const LoadingShimmerHeading = styled(LoadingShimmer)<LoadingShimmerHeadingProps>`\n  height: ${({ theme, size = 'lg' }) => theme.text.heading[size].fontSize};\n`;\n\ninterface LoadingShimmerParagraphProps extends LoadingShimmerProps {\n  size?: ParagraphSize;\n  // eg. 200px\n  width?: string;\n}\n\nexport const LoadingShimmerParagraph = styled(LoadingShimmer)<LoadingShimmerParagraphProps>`\n  height: ${({ theme, size = 'md' }) => theme.text.paragraph[size].fontSize};\n`;\n\n// A \"maybe\" shimmer block that is shimmering if the `isLoading`\n// value is set to true and otherwise just displays its children\ninterface MaybeLoadingShimmerProps {\n  isLoading: boolean;\n  height?: string;\n  width?: string;\n}\n\nexport const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps> = ({\n  isLoading,\n  children,\n  height,\n  width,\n}) => (isLoading ? <LoadingShimmer height={height} width={width} /> : <>{children}</>);\n"],"mappings":";;;;;;;AAkBA,MAAM,mBAAmB,kBAAA,QAAO,IAA2B;;;;uBAIpC,EAAE,eAAgB,aAAa,cAAc,YAAYA,uBAAAA,MAAM,YAAa;YACvF,EAAE,YAAY,SAAS,QAAQ;aAC9B,EAAE,aAAa,UAAU,OAAO;mBAC1BC,uBAAAA,aAAa,GAAG;;;AAOnC,MAAM,UAAU,CAAA,GAAA,kBAAA,SAAOC,eAAAA,OAAO,KAAK;;;;iBAIlB,EAAE,eACf,0CAA0C,aAAa,cAAcF,uBAAAA,MAAM,cAAcA,uBAAAA,MAAM,YAAY,yBAAyB;;;;;;AAOxI,SAAgB,eAAe,EAC7B,OACA,QACA,UAAU,WACV,GAAG,SACmB;AACtB,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EACS;EACC;EACR,UAAU;EACV,aAAU;EACV,aAAU;EACV,aAAU;EACV,0BAAuB;EACvB,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,SAAS;IAAE,GAAG;IAAS,MAAM;IAAK;GAClC,SAAS;IAAE,GAAG;IAAQ,MAAM;IAAK;GACjC,UAAU;GACV,YAAY;IAAE,QAAQ;IAAU,UAAU;IAAG,MAAM;IAAW;GAC9D,CAAA;EACe,CAAA;;AAQvB,MAAa,wBAAwB,CAAA,GAAA,kBAAA,SAAO,eAAe;aAC9C,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,QAAQ,MAAM,SAAS;;AAS1E,MAAa,0BAA0B,CAAA,GAAA,kBAAA,SAAO,eAAe;aAChD,EAAE,OAAO,OAAO,WAAW,MAAM,KAAK,UAAU,MAAM,SAAS;;AAW5E,MAAa,uBAAqD,EAChE,WACA,UACA,QACA,YACK,YAAY,iBAAA,GAAA,kBAAA,KAAC,gBAAD;CAAwB;CAAe;CAAS,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAG,UAAY,CAAA"}

package/dist/LoadingShimmer.d.cts

@@ -0,0 +1,38 @@
+import { i as ParagraphSize, n as HeadingSize } from "./text-PmH5oc61.cjs";
+import { ComponentPropsWithoutRef, FC } from "react";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/LoadingShimmer/LoadingShimmer.d.ts
+interface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {
+  height?: string;
+  width?: string;
+  variant?: 'primary' | 'secondary';
+}
+/**
+ * Base class of all Loading Shimmer components.
+ */
+declare function LoadingShimmer({
+  width,
+  height,
+  variant,
+  ...props
+}: LoadingShimmerProps): _$react_jsx_runtime0.JSX.Element;
+interface LoadingShimmerHeadingProps extends LoadingShimmerProps {
+  size?: HeadingSize;
+}
+declare const LoadingShimmerHeading: _$styled_components0.StyledComponent<typeof LoadingShimmer, any, LoadingShimmerHeadingProps, never>;
+interface LoadingShimmerParagraphProps extends LoadingShimmerProps {
+  size?: ParagraphSize;
+  width?: string;
+}
+declare const LoadingShimmerParagraph: _$styled_components0.StyledComponent<typeof LoadingShimmer, any, LoadingShimmerParagraphProps, never>;
+interface MaybeLoadingShimmerProps {
+  isLoading: boolean;
+  height?: string;
+  width?: string;
+}
+declare const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps>;
+//#endregion
+export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerHeadingProps, LoadingShimmerParagraph, MaybeLoadingShimmer };
+//# sourceMappingURL=LoadingShimmer.d.cts.map

package/dist/LoadingShimmer.d.mts

@@ -0,0 +1,38 @@
+import { i as ParagraphSize, n as HeadingSize } from "./text-BrSUs-88.mjs";
+import * as _$styled_components0 from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, FC } from "react";
+
+//#region components/LoadingShimmer/LoadingShimmer.d.ts
+interface LoadingShimmerProps extends ComponentPropsWithoutRef<'span'> {
+  height?: string;
+  width?: string;
+  variant?: 'primary' | 'secondary';
+}
+/**
+ * Base class of all Loading Shimmer components.
+ */
+declare function LoadingShimmer({
+  width,
+  height,
+  variant,
+  ...props
+}: LoadingShimmerProps): _$react_jsx_runtime0.JSX.Element;
+interface LoadingShimmerHeadingProps extends LoadingShimmerProps {
+  size?: HeadingSize;
+}
+declare const LoadingShimmerHeading: _$styled_components0.StyledComponent<typeof LoadingShimmer, any, LoadingShimmerHeadingProps, never>;
+interface LoadingShimmerParagraphProps extends LoadingShimmerProps {
+  size?: ParagraphSize;
+  width?: string;
+}
+declare const LoadingShimmerParagraph: _$styled_components0.StyledComponent<typeof LoadingShimmer, any, LoadingShimmerParagraphProps, never>;
+interface MaybeLoadingShimmerProps {
+  isLoading: boolean;
+  height?: string;
+  width?: string;
+}
+declare const MaybeLoadingShimmer: FC<MaybeLoadingShimmerProps>;
+//#endregion
+export { LoadingShimmer, LoadingShimmerHeading, LoadingShimmerHeadingProps, LoadingShimmerParagraph, MaybeLoadingShimmer };
+//# sourceMappingURL=LoadingShimmer.d.mts.map

package/dist/MaskedInput.d.cts

@@ -0,0 +1,10 @@
+import { a as InputProps } from "./Input-XppkvfUf.cjs";
+import * as _$react from "react";
+import { IMaskInputProps } from "react-imask/mixin";
+
+//#region components/MaskedInput/MaskedInput.d.ts
+type MaskedInputProps = Omit<IMaskInputProps<HTMLInputElement>, 'inputRef' | 'componentProps' | 'size' | 'ref'> & InputProps;
+declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "ref" | "size" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { MaskedInput, MaskedInput as default, MaskedInputProps };
+//# sourceMappingURL=MaskedInput.d.cts.map

package/dist/MaskedInput.d.mts

@@ -0,0 +1,10 @@
+import { a as InputProps } from "./Input-Cv5qieRg.mjs";
+import * as _$react from "react";
+import { IMaskInputProps } from "react-imask/mixin";
+
+//#region components/MaskedInput/MaskedInput.d.ts
+type MaskedInputProps = Omit<IMaskInputProps<HTMLInputElement>, 'inputRef' | 'componentProps' | 'size' | 'ref'> & InputProps;
+declare const MaskedInput: _$react.ForwardRefExoticComponent<Omit<IMaskInputProps<HTMLInputElement>, "ref" | "size" | "inputRef" | "componentProps"> & InputProps & _$react.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { MaskedInput, MaskedInput as default, MaskedInputProps };
+//# sourceMappingURL=MaskedInput.d.mts.map

package/dist/MatchHighlight.d.cts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as _$styled_components0 from "styled-components";
+
+//#region components/MatchHighlight/MatchHighlight.d.ts
+interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {
+  matchStrength?: 'none' | 'partial' | 'full';
+}
+declare const MatchHighlight: _$styled_components0.StyledComponent<"span", any, MatchHighlightProps, never>;
+//#endregion
+export { MatchHighlight, MatchHighlight as default, MatchHighlightProps };
+//# sourceMappingURL=MatchHighlight.d.cts.map

package/dist/MatchHighlight.d.mts

@@ -0,0 +1,11 @@
+import * as _$styled_components0 from "styled-components";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region components/MatchHighlight/MatchHighlight.d.ts
+interface MatchHighlightProps extends Omit<ComponentPropsWithoutRef<'p'>, 'color'> {
+  matchStrength?: 'none' | 'partial' | 'full';
+}
+declare const MatchHighlight: _$styled_components0.StyledComponent<"span", any, MatchHighlightProps, never>;
+//#endregion
+export { MatchHighlight, MatchHighlight as default, MatchHighlightProps };
+//# sourceMappingURL=MatchHighlight.d.mts.map

package/dist/Menu-BpkjNO81.cjs

@@ -0,0 +1,217 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_theme = require("./theme.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_lib_PDSProvider = require("./lib/PDSProvider.cjs");
+const require_Card = require("./Card-CyCKL-M5.cjs");
+const require_lib_zindex = require("./lib/zindex.cjs");
+require("./variables/text.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let react_aria = require("react-aria");
+let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+_radix_ui_react_dropdown_menu = require_chunk.__toESM(_radix_ui_react_dropdown_menu);
+//#region components/Menu/Menu.tsx
+const FloatingCard = (0, styled_components.default)(require_Card.Card_default)`
+  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);
+  outline: none;
+  z-index: ${require_lib_zindex.Z_INDICES.tooltip};
+`;
+const MenuList = styled_components.default.div.attrs(({ role, doNotSetRole = false }) => ({ role: doNotSetRole ? void 0 : role ?? "menu" }))`
+  list-style: none;
+  margin: 0;
+  padding: ${({ padding }) => padding || _persona_design_tokens.Spacing[2]};
+  outline: none;
+`;
+const ListItem = styled_components.default.li`
+  ${({ size }) => size === "sm" ? require_mixins_text.paragraphMixins.sm : require_mixins_text.paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  padding: ${({ size }) => size === "sm" ? `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]}` : `${_persona_design_tokens.Spacing[2]}`};
+  border-radius: 4px;
+  list-style: none;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.primary};
+  cursor: pointer;
+  ${({ focused, selected, theme }) => focused && !selected && styled_components.css`
+      outline: none;
+      color: ${theme.color.text.primary};
+      background-color: ${theme.color.background.secondary};
+    `}
+
+  &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isHovered}, &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isFocused} {
+    ${({ selected }) => !selected && styled_components.css`
+        outline: none;
+        color: ${({ theme }) => theme.color.text.primary};
+        background-color: ${({ theme }) => theme.color.background.secondary};
+      `}
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${_persona_design_tokens.Color.BorderFocus};
+    outline-offset: 1px;
+  }
+
+  ${({ selected, theme }) => selected && styled_components.css`
+      outline: none;
+      color: ${theme.color.text.brand};
+      background-color: ${theme.color.background.highlight};
+    `}
+
+  &${require_lib_pseudoClass.isDisabled} {
+    color: ${({ theme }) => theme.color.text.disabled};
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* Variant Styling */
+  ${({ theme, variant }) => variant === "danger" && styled_components.css`
+      color: ${theme.color.variants[variant].default};
+
+      &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isHovered}, &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isFocused} {
+        color: ${_persona_design_tokens.Color.CoreRed900};
+        background-color: ${theme.color.variants[variant].highlightLight};
+      }
+
+      &${require_lib_pseudoClass.isDisabled} {
+        color: ${({ theme }) => theme.color.variants[variant].disabled};
+      }
+    `}
+`;
+const IconContainer = (0, styled_components.default)("div")`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: ${_persona_design_tokens.Spacing[2]};
+  line-height: 1;
+
+  ${({ suffix }) => suffix && styled_components.css`
+      margin-left: ${_persona_design_tokens.Spacing[2]};
+    `}
+`;
+const LabelContainer = (0, styled_components.default)("div")`
+  line-height: 16px;
+  ${({ stretchLabel }) => stretchLabel && styled_components.css`
+      width: 100%;
+    `}
+`;
+const MenuItem = (0, react.forwardRef)(function MenuItem({ children, disabled, variant, prefixIcon, suffixIcon, stretchLabel, selected, size, ...elemProps }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ListItem, {
+		disabled,
+		variant,
+		selected,
+		ref,
+		"aria-disabled": disabled,
+		"aria-current": selected ? "true" : void 0,
+		role: "menuitem",
+		tabIndex: disabled ? -1 : 0,
+		size,
+		...elemProps,
+		children: [
+			prefixIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, { children: prefixIcon }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LabelContainer, {
+				stretchLabel: !!stretchLabel,
+				children
+			}),
+			suffixIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconContainer, {
+				suffix: true,
+				children: suffixIcon
+			})
+		]
+	});
+});
+const StyledMenuDivider = styled_components.default.hr`
+  height: 0px;
+  padding: 0px;
+  font-size: 0;
+  margin: ${_persona_design_tokens.Spacing[2]} -${_persona_design_tokens.Spacing[2]};
+  border: none;
+  border-top: 1px solid ${({ theme }) => theme.color.border.primary};
+`;
+const MenuDivider = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuDivider, { ...props })
+});
+const MenuHeading = styled_components.default.li`
+  ${require_mixins_text.paragraphMixins.sm};
+  text-transform: uppercase;
+  padding: ${({ size }) => size === "sm" ? `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]}` : _persona_design_tokens.Spacing[2]};
+  display: block;
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-weight: ${400};
+  letter-spacing: 0.1em;
+`;
+const Menu = ({ children, variant, containerProps, itemProps, listRef, className, onClose, as, ...props }) => {
+	const menu = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingCard, {
+		...containerProps,
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuList, {
+			...props,
+			as,
+			ref: listRef,
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria.DismissButton, { onDismiss: onClose })]
+		})
+	});
+	if (variant === "dark") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_PDSProvider, {
+		theme: require_theme.darkTheme,
+		children: menu
+	});
+	return menu;
+};
+Menu.Heading = MenuHeading;
+Menu.Divider = MenuDivider;
+Menu.Item = MenuItem;
+//#endregion
+Object.defineProperty(exports, "FloatingCard", {
+	enumerable: true,
+	get: function() {
+		return FloatingCard;
+	}
+});
+Object.defineProperty(exports, "IconContainer", {
+	enumerable: true,
+	get: function() {
+		return IconContainer;
+	}
+});
+Object.defineProperty(exports, "ListItem", {
+	enumerable: true,
+	get: function() {
+		return ListItem;
+	}
+});
+Object.defineProperty(exports, "Menu", {
+	enumerable: true,
+	get: function() {
+		return Menu;
+	}
+});
+Object.defineProperty(exports, "MenuDivider", {
+	enumerable: true,
+	get: function() {
+		return MenuDivider;
+	}
+});
+Object.defineProperty(exports, "MenuHeading", {
+	enumerable: true,
+	get: function() {
+		return MenuHeading;
+	}
+});
+Object.defineProperty(exports, "MenuItem", {
+	enumerable: true,
+	get: function() {
+		return MenuItem;
+	}
+});
+Object.defineProperty(exports, "MenuList", {
+	enumerable: true,
+	get: function() {
+		return MenuList;
+	}
+});
+
+//# sourceMappingURL=Menu-BpkjNO81.cjs.map

package/dist/Menu-BpkjNO81.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu-BpkjNO81.cjs","names":["Card","Z_INDICES","Spacing","paragraphMixins","isNotDisabled","isHovered","isFocused","Color","isDisabled","DropdownMenu","DismissButton","PDSProvider","darkTheme"],"sources":["../components/Menu/Menu.tsx"],"sourcesContent":["import PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { DismissButton } from 'react-aria';\nimport styled, {\n  css,\n  type DefaultTheme,\n  type StyledComponent,\n  type StyledComponentPropsWithRef,\n} from 'styled-components';\n\nimport Card from 'design-system/components/Card';\nimport { isDisabled, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\nimport { darkTheme } from 'design-system/theme';\nimport { FontWeight } from 'design-system/variables/text';\n\nexport const FloatingCard: StyledComponent<\n  ComponentType<StyledComponentPropsWithRef<typeof Card>>,\n  DefaultTheme\n> = styled(Card)`\n  box-shadow: 0px 0px 14px 2px rgba(0, 0, 0, 0.12);\n  outline: none;\n  z-index: ${Z_INDICES.tooltip};\n`;\n\nexport const MenuList = styled.div.attrs<{ padding?: Spacing; doNotSetRole?: boolean }>(\n  ({ role, doNotSetRole = false }) => ({\n    role: doNotSetRole ? undefined : (role ?? 'menu'),\n  }),\n)<{ padding?: Spacing }>`\n  list-style: none;\n  margin: 0;\n  padding: ${({ padding }) => padding || Spacing[2]};\n  outline: none;\n`;\n\nexport interface MenuItemProps<T extends ElementType = 'div'> {\n  children: ReactNode;\n  prefixIcon?: ReactNode;\n  suffixIcon?: ReactNode;\n  disabled?: boolean;\n  variant?: 'basic' | 'danger';\n  as?: T;\n  stretchLabel?: boolean;\n  subtitle?: string;\n  focused?: boolean;\n  selected?: boolean;\n  size?: 'sm' | 'md';\n}\n\nexport const ListItem = styled.li<\n  Pick<MenuItemProps, 'variant' | 'disabled' | 'focused' | 'selected' | 'size'>\n>`\n  ${({ size }) => (size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n  display: flex;\n  align-items: center;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : `${Spacing[2]}`)};\n  border-radius: 4px;\n  list-style: none;\n  text-decoration: none;\n  color: ${({ theme }) => theme.color.text.primary};\n  cursor: pointer;\n  ${({ focused, selected, theme }) =>\n    focused &&\n    !selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.primary};\n      background-color: ${theme.color.background.secondary};\n    `}\n\n  &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n    ${({ selected }) =>\n      !selected &&\n      css`\n        outline: none;\n        color: ${({ theme }) => theme.color.text.primary};\n        background-color: ${({ theme }) => theme.color.background.secondary};\n      `}\n  }\n\n  &:focus-visible {\n    outline: 2px solid ${Color.BorderFocus};\n    outline-offset: 1px;\n  }\n\n  ${({ selected, theme }) =>\n    selected &&\n    css`\n      outline: none;\n      color: ${theme.color.text.brand};\n      background-color: ${theme.color.background.highlight};\n    `}\n\n  &${isDisabled} {\n    color: ${({ theme }) => theme.color.text.disabled};\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Variant Styling */\n  ${({ theme, variant }) =>\n    variant === 'danger' &&\n    css`\n      color: ${theme.color.variants[variant].default};\n\n      &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n        color: ${Color.CoreRed900};\n        background-color: ${theme.color.variants[variant].highlightLight};\n      }\n\n      &${isDisabled} {\n        color: ${({ theme }) => theme.color.variants[variant].disabled};\n      }\n    `}\n`;\n\nexport const IconContainer = styled('div')<{ suffix?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: ${Spacing[2]};\n  line-height: 1;\n\n  ${({ suffix }) =>\n    suffix &&\n    css`\n      margin-left: ${Spacing[2]};\n    `}\n`;\n\nconst LabelContainer = styled('div')<{ stretchLabel: boolean }>`\n  line-height: 16px;\n  ${({ stretchLabel }) =>\n    stretchLabel &&\n    css`\n      width: 100%;\n    `}\n`;\n\n/**\n * https://stackoverflow.com/a/73795494\n */\nexport interface MenuItemType<T extends ElementType = 'div'> extends FC<\n  MenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: MenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\nexport const MenuItem: MenuItemType = forwardRef(function MenuItem(\n  {\n    children,\n    disabled,\n    variant,\n    prefixIcon,\n    suffixIcon,\n    stretchLabel,\n    selected,\n    size,\n    ...elemProps\n  },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <ListItem\n      disabled={disabled}\n      variant={variant}\n      selected={selected}\n      ref={ref}\n      aria-disabled={disabled}\n      // aria-current is the correct a11y attribute for role=\"menuitem\" (not aria-selected).\n      aria-current={selected ? 'true' : undefined}\n      role='menuitem'\n      tabIndex={disabled ? -1 : 0}\n      size={size}\n      {...elemProps}\n    >\n      {prefixIcon && <IconContainer>{prefixIcon}</IconContainer>}\n      <LabelContainer stretchLabel={!!stretchLabel}>{children}</LabelContainer>\n      {suffixIcon && <IconContainer suffix>{suffixIcon}</IconContainer>}\n    </ListItem>\n  );\n});\n\nconst StyledMenuDivider = styled.hr`\n  height: 0px;\n  padding: 0px;\n  font-size: 0;\n  margin: ${Spacing[2]} -${Spacing[2]};\n  border: none;\n  border-top: 1px solid ${({ theme }) => theme.color.border.primary};\n`;\n\nexport const MenuDivider = (props: ComponentPropsWithoutRef<'hr'>) => (\n  <DropdownMenu.Separator asChild>\n    <StyledMenuDivider {...props} />\n  </DropdownMenu.Separator>\n);\n\nexport interface MenuHeadingProps {\n  size?: 'sm' | 'md';\n}\n\nexport const MenuHeading = styled.li<MenuHeadingProps>`\n  ${paragraphMixins.sm};\n  text-transform: uppercase;\n  padding: ${({ size }) => (size === 'sm' ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2])};\n  display: block;\n  color: ${({ theme }) => theme.color.text.secondary};\n  font-weight: ${FontWeight.Regular};\n  letter-spacing: 0.1em;\n`;\n\nexport interface MenuProps<T extends ElementType = 'div'> {\n  children?: ReactNode;\n  className?: string;\n  variant?: 'light' | 'dark';\n  as?: T;\n  doNotSetRole?: boolean;\n  containerProps?: ComponentPropsWithRef<'div'>;\n  listRef?: RefObject<T>;\n  itemProps?:\n    | ComponentPropsWithoutRef<'li'>\n    | ((\n        props: ComponentPropsWithoutRef<'li'>,\n        index: number,\n      ) => Partial<ComponentPropsWithRef<'li'>>);\n  onClose?: VoidFunction;\n}\n\nexport const Menu = <T extends ElementType = 'div'>({\n  children,\n  variant,\n  containerProps,\n  itemProps,\n  listRef,\n  className,\n  onClose,\n  as,\n  ...props\n}: MenuProps<T> & ComponentPropsWithoutRef<T>) => {\n  const menu = (\n    <FloatingCard {...containerProps} className={className}>\n      <MenuList {...props} as={as as any} ref={listRef}>\n        {children}\n        <DismissButton onDismiss={onClose} />\n      </MenuList>\n    </FloatingCard>\n  );\n\n  if (variant === 'dark') {\n    return <PDSProvider theme={darkTheme}>{menu}</PDSProvider>;\n  }\n\n  return menu;\n};\n\nMenu.Heading = MenuHeading;\nMenu.Divider = MenuDivider;\nMenu.Item = MenuItem;\n\nexport default Menu;\n"],"mappings":"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"}

package/dist/Menu-DIFkRQ6x.d.mts

@@ -0,0 +1,70 @@
+import { r as _default } from "./Card-CcU9cKCd.mjs";
+import { Spacing } from "@persona/design-tokens";
+import { DefaultTheme, StyledComponent, StyledComponentPropsWithRef } from "styled-components";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ComponentType, ElementType, FC, ReactNode, RefObject } from "react";
+
+//#region components/Menu/Menu.d.ts
+declare const FloatingCard: StyledComponent<ComponentType<StyledComponentPropsWithRef<typeof _default>>, DefaultTheme>;
+declare const MenuList: StyledComponent<"div", any, {
+  padding?: Spacing;
+}, never>;
+interface MenuItemProps<T extends ElementType = 'div'> {
+  children: ReactNode;
+  prefixIcon?: ReactNode;
+  suffixIcon?: ReactNode;
+  disabled?: boolean;
+  variant?: 'basic' | 'danger';
+  as?: T;
+  stretchLabel?: boolean;
+  subtitle?: string;
+  focused?: boolean;
+  selected?: boolean;
+  size?: 'sm' | 'md';
+}
+declare const ListItem: StyledComponent<"li", any, Pick<MenuItemProps<"div">, "variant" | "disabled" | "size" | "focused" | "selected">, never>;
+declare const IconContainer: StyledComponent<"div", any, {
+  suffix?: boolean;
+}, never>;
+/**
+ * https://stackoverflow.com/a/73795494
+ */
+interface MenuItemType<T extends ElementType = 'div'> extends FC<MenuItemProps<T> & ComponentPropsWithRef<T>> {
+  <T extends ElementType = 'div'>(props: MenuItemProps<T> & ComponentPropsWithoutRef<T>): ReturnType<FC<MenuItemProps<T> & ComponentPropsWithoutRef<T>>>;
+}
+declare const MenuItem: MenuItemType;
+declare const MenuDivider: (props: ComponentPropsWithoutRef<"hr">) => _$react_jsx_runtime0.JSX.Element;
+interface MenuHeadingProps {
+  size?: 'sm' | 'md';
+}
+declare const MenuHeading: StyledComponent<"li", any, MenuHeadingProps, never>;
+interface MenuProps<T extends ElementType = 'div'> {
+  children?: ReactNode;
+  className?: string;
+  variant?: 'light' | 'dark';
+  as?: T;
+  doNotSetRole?: boolean;
+  containerProps?: ComponentPropsWithRef<'div'>;
+  listRef?: RefObject<T>;
+  itemProps?: ComponentPropsWithoutRef<'li'> | ((props: ComponentPropsWithoutRef<'li'>, index: number) => Partial<ComponentPropsWithRef<'li'>>);
+  onClose?: VoidFunction;
+}
+declare const Menu: {
+  <T extends ElementType = "div">({
+    children,
+    variant,
+    containerProps,
+    itemProps,
+    listRef,
+    className,
+    onClose,
+    as,
+    ...props
+  }: MenuProps<T> & ComponentPropsWithoutRef<T>): _$react_jsx_runtime0.JSX.Element;
+  Heading: StyledComponent<"li", any, MenuHeadingProps, never>;
+  Divider: (props: ComponentPropsWithoutRef<"hr">) => _$react_jsx_runtime0.JSX.Element;
+  Item: MenuItemType<"div">;
+};
+//#endregion
+export { MenuDivider as a, MenuItem as c, MenuList as d, MenuProps as f, Menu as i, MenuItemProps as l, IconContainer as n, MenuHeading as o, ListItem as r, MenuHeadingProps as s, FloatingCard as t, MenuItemType as u };
+//# sourceMappingURL=Menu-DIFkRQ6x.d.mts.map