@persona/design-system 0.1.5-pre.4

package/dist/components/Tile/index.mjs

@@ -0,0 +1,96 @@
+import { n as Stack, t as HStack } from "../../Stack-hwgS2FU1.mjs";
+import "../Stack/index.mjs";
+import { i as Paragraph, n as Heading } from "../../Text-DOTYjIt0.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-T7RQpy_a.mjs";
+import { n as Sticker } from "../../Sticker-D6bwBTGr.mjs";
+import { Color, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "@persona/icons/12px";
+import { ArrowRightIcon as ArrowRightIcon$1 } from "@persona/icons/16px";
+//#region components/Tile/Tile.tsx
+const PADDING_BY_SIZE = {
+	sm: Spacing[3],
+	md: Spacing[4]
+};
+const TileContainer = styled(Stack)`
+  background-color: ${({ theme }) => theme.color.background.primary};
+  box-sizing: border-box;
+  width: 100%;
+  max-width: ${"220px"};
+  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};
+  border: 1px solid ${({ theme }) => theme.color.border.primary};
+  border-radius: ${({ theme }) => theme.card.borderRadius};
+`;
+const TransitionArrow = styled.span`
+  display: inline-flex;
+  align-items: center;
+  color: ${Color.BorderIconSecondary};
+  line-height: 0;
+`;
+const Tile = ({ size = "md", label, labelTooltip, value, sticker, metadata, metadataTooltip, ...props }) => {
+	const labelNode = labelTooltip ? /* @__PURE__ */ jsx(TextUnderlineTooltip, {
+		tooltip: labelTooltip,
+		side: "top",
+		children: label
+	}) : label;
+	const metadataNode = metadata != null && metadataTooltip ? /* @__PURE__ */ jsx(TextUnderlineTooltip, {
+		tooltip: metadataTooltip,
+		children: metadata
+	}) : metadata;
+	const { text: stickerText, ...stickerRest } = sticker ?? { text: "" };
+	return /* @__PURE__ */ jsxs(TileContainer, {
+		$size: size,
+		spacing: Spacing[1],
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Paragraph, {
+				size,
+				color: "secondary",
+				as: "div",
+				children: labelNode
+			}),
+			/* @__PURE__ */ jsxs(HStack, {
+				spacing: Spacing[2],
+				align: "center",
+				children: [Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Heading, {
+						size,
+						color: "primary",
+						as: "p",
+						children: value[0]
+					}),
+					/* @__PURE__ */ jsx(TransitionArrow, {
+						"data-test": "tile-transition-arrow",
+						"aria-hidden": "true",
+						children: size === "sm" ? /* @__PURE__ */ jsx(ArrowRightIcon, {}) : /* @__PURE__ */ jsx(ArrowRightIcon$1, {})
+					}),
+					/* @__PURE__ */ jsx(Heading, {
+						size,
+						color: "primary",
+						as: "p",
+						children: value[1]
+					})
+				] }) : /* @__PURE__ */ jsx(Heading, {
+					size,
+					color: "primary",
+					as: "p",
+					children: value
+				}), sticker != null && /* @__PURE__ */ jsx(Sticker, {
+					...stickerRest,
+					children: stickerText
+				})]
+			}),
+			metadata != null && /* @__PURE__ */ jsx(Paragraph, {
+				size: "sm",
+				color: "secondary",
+				as: "div",
+				children: metadataNode
+			})
+		]
+	});
+};
+//#endregion
+export { Tile, Tile as default };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["ArrowRightIcon12","ArrowRightIcon16"],"sources":["../../../components/Tile/Tile.tsx"],"sourcesContent":["import Stack, { HStack } from '@persona/design-system/components/Stack';\nimport Sticker, { type StickerProps } from '@persona/design-system/components/Sticker';\nimport { Heading, Paragraph } from '@persona/design-system/components/Text';\nimport { TextUnderlineTooltip } from '@persona/design-system/components/Tooltip';\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { ArrowRightIcon as ArrowRightIcon12 } from '@persona/icons/12px';\nimport { ArrowRightIcon as ArrowRightIcon16 } from '@persona/icons/16px';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type TileSize = 'sm' | 'md';\n\nexport interface TileStickerProps extends Omit<\n  StickerProps,\n  'children' | 'onDismiss' | 'dismissButtonProps'\n> {\n  /**\n   * Text content of the sticker. The Tile owns rendering so callers cannot\n   * inject arbitrary JSX.\n   */\n  text: string;\n}\n\nexport interface TileProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Size of the tile. Controls value typography and padding.\n   *\n   * @defaultValue 'md'\n   */\n  size?: TileSize;\n\n  /**\n   * Label rendered above the value.\n   */\n  label: string;\n\n  /**\n   * Tooltip content shown when hovering the label. When provided, the label\n   * is rendered with a dashed-underline trigger.\n   */\n  labelTooltip?: ReactNode;\n\n  /**\n   * Main value displayed prominently. Pass a `[before, after]` tuple to render\n   * a transition between two values with a right-pointing arrow between them.\n   */\n  value: string | [string, string];\n\n  /**\n   * Optional sticker rendered to the right of the value. The Tile renders the\n   * `<Sticker>` itself; callers configure it via these props (text + any\n   * non-children sticker props such as `variant` or `icon`).\n   */\n  sticker?: TileStickerProps;\n\n  /**\n   * Optional metadata text rendered beneath the value.\n   */\n  metadata?: string;\n\n  /**\n   * Tooltip content shown when hovering the metadata. When provided, the\n   * metadata is rendered with a dashed-underline trigger.\n   */\n  metadataTooltip?: ReactNode;\n}\n\nconst PADDING_BY_SIZE: Record<TileSize, string> = {\n  sm: Spacing[3],\n  md: Spacing[4],\n};\n\nconst TILE_MAX_WIDTH_PX = '220px';\n\nconst TileContainer = styled(Stack)<{ $size: TileSize }>`\n  background-color: ${({ theme }) => theme.color.background.primary};\n  box-sizing: border-box;\n  width: 100%;\n  max-width: ${TILE_MAX_WIDTH_PX};\n  padding: ${({ $size }) => PADDING_BY_SIZE[$size]};\n  border: 1px solid ${({ theme }) => theme.color.border.primary};\n  border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst TransitionArrow = styled.span`\n  display: inline-flex;\n  align-items: center;\n  color: ${Color.BorderIconSecondary};\n  line-height: 0;\n`;\n\nexport const Tile = ({\n  size = 'md',\n  label,\n  labelTooltip,\n  value,\n  sticker,\n  metadata,\n  metadataTooltip,\n  ...props\n}: TileProps) => {\n  const labelNode = labelTooltip ? (\n    <TextUnderlineTooltip tooltip={labelTooltip} side='top'>\n      {label}\n    </TextUnderlineTooltip>\n  ) : (\n    label\n  );\n\n  const metadataNode =\n    metadata != null && metadataTooltip ? (\n      <TextUnderlineTooltip tooltip={metadataTooltip}>{metadata}</TextUnderlineTooltip>\n    ) : (\n      metadata\n    );\n\n  const { text: stickerText, ...stickerRest } = sticker ?? { text: '' };\n\n  return (\n    <TileContainer $size={size} spacing={Spacing[1]} {...props}>\n      <Paragraph size={size} color='secondary' as='div'>\n        {labelNode}\n      </Paragraph>\n      <HStack spacing={Spacing[2]} align='center'>\n        {Array.isArray(value) ? (\n          <>\n            <Heading size={size} color='primary' as='p'>\n              {value[0]}\n            </Heading>\n            <TransitionArrow data-test='tile-transition-arrow' aria-hidden='true'>\n              {size === 'sm' ? <ArrowRightIcon12 /> : <ArrowRightIcon16 />}\n            </TransitionArrow>\n            <Heading size={size} color='primary' as='p'>\n              {value[1]}\n            </Heading>\n          </>\n        ) : (\n          <Heading size={size} color='primary' as='p'>\n            {value}\n          </Heading>\n        )}\n        {sticker != null && <Sticker {...stickerRest}>{stickerText}</Sticker>}\n      </HStack>\n      {metadata != null && (\n        <Paragraph size='sm' color='secondary' as='div'>\n          {metadataNode}\n        </Paragraph>\n      )}\n    </TileContainer>\n  );\n};\n\nexport default Tile;\n"],"mappings":";;;;;;;;;;;AAmEA,MAAM,kBAA4C;CAChD,IAAI,QAAQ;CACZ,IAAI,QAAQ;CACb;AAID,MAAM,gBAAgB,OAAO,MAAM;uBACZ,EAAE,YAAY,MAAM,MAAM,WAAW,QAAQ;;;eAGrD,QAAkB;cACnB,EAAE,YAAY,gBAAgB,OAAO;uBAC5B,EAAE,YAAY,MAAM,MAAM,OAAO,QAAQ;oBAC5C,EAAE,YAAY,MAAM,KAAK,aAAa;;AAG1D,MAAM,kBAAkB,OAAO,IAAI;;;WAGxB,MAAM,oBAAoB;;;AAIrC,MAAa,QAAQ,EACnB,OAAO,MACP,OACA,cACA,OACA,SACA,UACA,iBACA,GAAG,YACY;CACf,MAAM,YAAY,eAChB,oBAAC,sBAAD;EAAsB,SAAS;EAAc,MAAK;YAC/C;EACoB,CAAA,GAEvB;CAGF,MAAM,eACJ,YAAY,QAAQ,kBAClB,oBAAC,sBAAD;EAAsB,SAAS;YAAkB;EAAgC,CAAA,GAEjF;CAGJ,MAAM,EAAE,MAAM,aAAa,GAAG,gBAAgB,WAAW,EAAE,MAAM,IAAI;AAErE,QACE,qBAAC,eAAD;EAAe,OAAO;EAAM,SAAS,QAAQ;EAAI,GAAI;YAArD;GACE,oBAAC,WAAD;IAAiB;IAAM,OAAM;IAAY,IAAG;cACzC;IACS,CAAA;GACZ,qBAAC,QAAD;IAAQ,SAAS,QAAQ;IAAI,OAAM;cAAnC,CACG,MAAM,QAAQ,MAAM,GACnB,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACV,oBAAC,iBAAD;MAAiB,aAAU;MAAwB,eAAY;gBAC5D,SAAS,OAAO,oBAACA,gBAAD,EAAoB,CAAA,GAAG,oBAACC,kBAAD,EAAoB,CAAA;MAC5C,CAAA;KAClB,oBAAC,SAAD;MAAe;MAAM,OAAM;MAAU,IAAG;gBACrC,MAAM;MACC,CAAA;KACT,EAAA,CAAA,GAEH,oBAAC,SAAD;KAAe;KAAM,OAAM;KAAU,IAAG;eACrC;KACO,CAAA,EAEX,WAAW,QAAQ,oBAAC,SAAD;KAAS,GAAI;eAAc;KAAsB,CAAA,CAC9D;;GACR,YAAY,QACX,oBAAC,WAAD;IAAW,MAAK;IAAK,OAAM;IAAY,IAAG;cACvC;IACS,CAAA;GAEA"}

package/dist/components/Toast/index.cjs

@@ -0,0 +1,141 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("../../lib/pseudoClass.cjs");
+require("../../variables/effect.cjs");
+require("../../variables/transitions.cjs");
+const require_mixins_text = require("../../mixins/text.cjs");
+const require_IconButton = require("../../IconButton-B1ZL8BqW.cjs");
+require("../Button/index.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");
+let _persona_icons = require("@persona/icons");
+let _persona_icons_12px = require("@persona/icons/12px");
+//#region components/Toast/Toast.tsx
+let MessageType = /* @__PURE__ */ function(MessageType) {
+	MessageType["Success"] = "success";
+	MessageType["Failure"] = "failure";
+	MessageType["Notice"] = "notice";
+	return MessageType;
+}({});
+const TOAST_WIDTH = "324px";
+const BaseToast = (0, styled_components.default)(require_motion.motion.div)`
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  color: ${({ theme }) => theme.color.text.primary};
+  ${require_mixins_text.paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  gap: ${_persona_design_tokens.Spacing[2]};
+  box-sizing: border-box;
+  padding: ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]};
+  width: 100%;
+`;
+const ToastIcon = styled_components.default.div`
+  flex-shrink: 0;
+  display: flex;
+  line-height: 0;
+  color: ${_persona_design_tokens.Color.BorderIconPrimary};
+`;
+const ToastContent = styled_components.default.div`
+  flex: 1;
+  min-width: 0; /* needed for text to wrap/truncate inside flex container */
+  ${({ $clip }) => $clip && styled_components.css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
+`;
+const CloseButton = (0, styled_components.default)(require_IconButton.IconButton)`
+  flex-shrink: 0;
+  margin-left: auto;
+  color: ${_persona_design_tokens.Color.BorderIconPrimary};
+
+  &${require_lib_pseudoClass.isActive}${require_lib_pseudoClass.isNotDisabled}, &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  ${({ isFocusVisible }) => !isFocusVisible && styled_components.css`
+      &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+        box-shadow: none;
+      }
+      &${require_lib_pseudoClass.isFocused}${require_lib_pseudoClass.isNotDisabled} {
+        box-shadow: none;
+      }
+    `}
+`;
+const NoticeToast = (0, styled_components.default)(BaseToast)`
+  background: ${_persona_design_tokens.Color.CorePurple200};
+`;
+const SuccessToast = (0, styled_components.default)(BaseToast)`
+  background: ${_persona_design_tokens.Color.CoreGreen200};
+`;
+const FailureToast = (0, styled_components.default)(BaseToast)`
+  background: ${_persona_design_tokens.Color.CoreRed200};
+`;
+const getStyledComponent = (variant) => {
+	switch (variant) {
+		case "success": return SuccessToast;
+		case "failure": return FailureToast;
+		default: return NoticeToast;
+	}
+};
+const getIcon = (variant) => {
+	switch (variant) {
+		case "success": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleCheckIcon, {});
+		case "failure": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleAlertIcon, {});
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleInfoIcon, {});
+	}
+};
+const Toast = ({ message, messageType, onDismiss, shouldClipOverflow, ...elemProps }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(getStyledComponent(messageType), {
+		initial: {
+			y: 64,
+			opacity: 0,
+			scale: .96
+		},
+		animate: {
+			y: 0,
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .9,
+			transition: {
+				duration: .3,
+				ease: "easeOut"
+			}
+		},
+		role: "alert",
+		"aria-live": "polite",
+		transition: {
+			type: "tween",
+			duration: .4,
+			ease: "easeOut"
+		},
+		...elemProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastIcon, { children: getIcon(messageType) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastContent, {
+				$clip: shouldClipOverflow,
+				children: message
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseButton, {
+				size: "sm",
+				"aria-label": "Close",
+				title: "Close",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.XIcon, {})
+			})
+		]
+	});
+};
+//#endregion
+exports.MessageType = MessageType;
+exports.TOAST_WIDTH = TOAST_WIDTH;
+exports.Toast = Toast;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["motion","BorderRadius","paragraphMixins","Spacing","Color","IconButton","isActive","isNotDisabled","isHovered","isFocused","CircleCheckIcon","CircleAlertIcon","CircleInfoIcon","XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { IconButton } from '@persona/design-system/components/Button';\nimport {\n  isActive,\n  isFocused,\n  isHovered,\n  isNotDisabled,\n} from '@persona/design-system/lib/pseudoClass';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { TransitionDurationInSeconds } from '@persona/design-system/variables/transitions';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from '@persona/icons';\nimport { XIcon } from '@persona/icons/12px';\nimport { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\n\nexport interface ToastProps extends HTMLMotionProps<'div'> {\n  id: string;\n  message: React.ReactNode;\n  messageType: MessageType;\n  onDismiss?: () => void;\n  shouldClipOverflow?: boolean;\n}\n\n// This is exported and used by whatever container is rendering the Toasts\nexport const TOAST_WIDTH = '324px';\n\nconst BaseToast = styled(motion.div)`\n  border-radius: ${BorderRadius.Md};\n  box-shadow: ${Elevation.Low};\n  color: ${({ theme }) => theme.color.text.primary};\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  box-sizing: border-box;\n  padding: ${Spacing[2]} ${Spacing[3]};\n  width: 100%;\n`;\n\nconst ToastIcon = styled.div`\n  flex-shrink: 0;\n  display: flex;\n  line-height: 0;\n  color: ${Color.BorderIconPrimary};\n`;\n\nconst ToastContent = styled.div<{ $clip?: boolean }>`\n  flex: 1;\n  min-width: 0; /* needed for text to wrap/truncate inside flex container */\n  ${({ $clip }) =>\n    $clip &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n`;\n\nconst CloseButton = styled(IconButton)<{ isFocusVisible?: boolean }>`\n  flex-shrink: 0;\n  margin-left: auto;\n  color: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nconst NoticeToast = styled(BaseToast)`\n  background: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${Color.CoreRed200};\n`;\n\nconst getStyledComponent = (variant: MessageType) => {\n  switch (variant) {\n    case MessageType.Success:\n      return SuccessToast;\n    case MessageType.Failure:\n      return FailureToast;\n    case MessageType.Notice:\n    default:\n      return NoticeToast;\n  }\n};\n\nconst getIcon = (variant: MessageType): ReactElement => {\n  switch (variant) {\n    case MessageType.Success:\n      return <CircleCheckIcon />;\n    case MessageType.Failure:\n      return <CircleAlertIcon />;\n    case MessageType.Notice:\n    default:\n      return <CircleInfoIcon />;\n  }\n};\n\nexport const Toast = ({\n  message,\n  messageType,\n  onDismiss,\n  shouldClipOverflow,\n  ...elemProps\n}: ToastProps) => {\n  const StyledToast = getStyledComponent(messageType);\n\n  return (\n    <StyledToast\n      initial={{ y: 64, opacity: 0, scale: 0.96 }}\n      animate={{ y: 0, opacity: 1, scale: 1 }}\n      exit={{\n        opacity: 0,\n        scale: 0.9,\n        transition: { duration: TransitionDurationInSeconds.MediumFast, ease: 'easeOut' },\n      }}\n      role='alert'\n      aria-live='polite'\n      transition={{ type: 'tween', duration: TransitionDurationInSeconds.Medium, ease: 'easeOut' }}\n      {...elemProps}\n    >\n      <ToastIcon>{getIcon(messageType)}</ToastIcon>\n      <ToastContent $clip={shouldClipOverflow}>{message}</ToastContent>\n      {onDismiss && (\n        <CloseButton size='sm' aria-label='Close' title='Close' onClick={onDismiss}>\n          <XIcon />\n        </CloseButton>\n      )}\n    </StyledToast>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD;AAWD,MAAa,cAAc;AAE3B,MAAM,YAAY,CAAA,GAAA,kBAAA,SAAOA,eAAAA,OAAO,IAAI;mBACjBC,uBAAAA,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/CC,oBAAAA,gBAAgB,GAAG;;;SAGdC,uBAAAA,QAAQ,GAAG;;aAEPA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;;AAItC,MAAM,YAAY,kBAAA,QAAO,GAAG;;;;WAIjBC,uBAAAA,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,kBAAA,QAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,kBAAA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAOC,mBAAAA,WAAW;;;WAG3BD,uBAAAA,MAAM,kBAAkB;;KAE9BE,wBAAAA,WAAWC,wBAAAA,cAAc,KAAKC,wBAAAA,YAAYD,wBAAAA,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,kBAAA,GAAG;SACEC,wBAAAA,YAAYC,wBAAAA,YAAYF,wBAAAA,cAAc;;;SAGtCE,wBAAAA,YAAYF,wBAAAA,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACrBH,uBAAAA,MAAM,cAAc;;AAGpC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,eAAe,CAAA,GAAA,kBAAA,SAAO,UAAU;gBACtBA,uBAAAA,MAAM,WAAW;;AAGjC,MAAM,sBAAsB,YAAyB;AACnD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO;EACT,KAAA,UACE,QAAO;EAET,QACE,QAAO;;;AAIb,MAAM,WAAW,YAAuC;AACtD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO,iBAAA,GAAA,kBAAA,KAACM,eAAAA,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,iBAAA,GAAA,kBAAA,KAACC,eAAAA,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,iBAAA,GAAA,kBAAA,MAHkB,mBAAmB,YAGzB,EAAZ;EACE,SAAS;GAAE,GAAG;GAAI,SAAS;GAAG,OAAO;GAAM;EAC3C,SAAS;GAAE,GAAG;GAAG,SAAS;GAAG,OAAO;GAAG;EACvC,MAAM;GACJ,SAAS;GACT,OAAO;GACP,YAAY;IAAE,UAAA;IAAkD,MAAM;IAAW;GAClF;EACD,MAAK;EACL,aAAU;EACV,YAAY;GAAE,MAAM;GAAS,UAAA;GAA8C,MAAM;GAAW;EAC5F,GAAI;YAXN;GAaE,iBAAA,GAAA,kBAAA,KAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,iBAAA,GAAA,kBAAA,KAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}

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

@@ -0,0 +1,2 @@
+import { MessageType, TOAST_WIDTH, Toast, ToastProps } from "../../Toast.cjs";
+export { MessageType, TOAST_WIDTH, Toast, ToastProps };

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

@@ -0,0 +1,2 @@
+import { MessageType, TOAST_WIDTH, Toast, ToastProps } from "../../Toast.mjs";
+export { MessageType, TOAST_WIDTH, Toast, ToastProps };

package/dist/components/Toast/index.mjs

@@ -0,0 +1,136 @@
+import { isActive, isFocused, isHovered, isNotDisabled } from "../../lib/pseudoClass.mjs";
+import "../../variables/effect.mjs";
+import "../../variables/transitions.mjs";
+import { paragraphMixins } from "../../mixins/text.mjs";
+import { t as IconButton } from "../../IconButton-C28qxOdi.mjs";
+import "../Button/index.mjs";
+import { t as motion } from "../../motion-DoikasqZ.mjs";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from "@persona/icons";
+import { XIcon as XIcon$1 } from "@persona/icons/12px";
+//#region components/Toast/Toast.tsx
+let MessageType = /* @__PURE__ */ function(MessageType) {
+	MessageType["Success"] = "success";
+	MessageType["Failure"] = "failure";
+	MessageType["Notice"] = "notice";
+	return MessageType;
+}({});
+const TOAST_WIDTH = "324px";
+const BaseToast = styled(motion.div)`
+  border-radius: ${BorderRadius.Md};
+  box-shadow: ${"0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 3px 14px 0px rgba(0, 0, 0, 0.04), 0px 8px 10px 0px rgba(0, 0, 0, 0.04)"};
+  color: ${({ theme }) => theme.color.text.primary};
+  ${paragraphMixins.md};
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+  box-sizing: border-box;
+  padding: ${Spacing[2]} ${Spacing[3]};
+  width: 100%;
+`;
+const ToastIcon = styled.div`
+  flex-shrink: 0;
+  display: flex;
+  line-height: 0;
+  color: ${Color.BorderIconPrimary};
+`;
+const ToastContent = styled.div`
+  flex: 1;
+  min-width: 0; /* needed for text to wrap/truncate inside flex container */
+  ${({ $clip }) => $clip && css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
+`;
+const CloseButton = styled(IconButton)`
+  flex-shrink: 0;
+  margin-left: auto;
+  color: ${Color.BorderIconPrimary};
+
+  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  ${({ isFocusVisible }) => !isFocusVisible && css`
+      &${isHovered}${isFocused}${isNotDisabled} {
+        box-shadow: none;
+      }
+      &${isFocused}${isNotDisabled} {
+        box-shadow: none;
+      }
+    `}
+`;
+const NoticeToast = styled(BaseToast)`
+  background: ${Color.CorePurple200};
+`;
+const SuccessToast = styled(BaseToast)`
+  background: ${Color.CoreGreen200};
+`;
+const FailureToast = styled(BaseToast)`
+  background: ${Color.CoreRed200};
+`;
+const getStyledComponent = (variant) => {
+	switch (variant) {
+		case "success": return SuccessToast;
+		case "failure": return FailureToast;
+		default: return NoticeToast;
+	}
+};
+const getIcon = (variant) => {
+	switch (variant) {
+		case "success": return /* @__PURE__ */ jsx(CircleCheckIcon, {});
+		case "failure": return /* @__PURE__ */ jsx(CircleAlertIcon, {});
+		default: return /* @__PURE__ */ jsx(CircleInfoIcon, {});
+	}
+};
+const Toast = ({ message, messageType, onDismiss, shouldClipOverflow, ...elemProps }) => {
+	return /* @__PURE__ */ jsxs(getStyledComponent(messageType), {
+		initial: {
+			y: 64,
+			opacity: 0,
+			scale: .96
+		},
+		animate: {
+			y: 0,
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .9,
+			transition: {
+				duration: .3,
+				ease: "easeOut"
+			}
+		},
+		role: "alert",
+		"aria-live": "polite",
+		transition: {
+			type: "tween",
+			duration: .4,
+			ease: "easeOut"
+		},
+		...elemProps,
+		children: [
+			/* @__PURE__ */ jsx(ToastIcon, { children: getIcon(messageType) }),
+			/* @__PURE__ */ jsx(ToastContent, {
+				$clip: shouldClipOverflow,
+				children: message
+			}),
+			onDismiss && /* @__PURE__ */ jsx(CloseButton, {
+				size: "sm",
+				"aria-label": "Close",
+				title: "Close",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(XIcon$1, {})
+			})
+		]
+	});
+};
+//#endregion
+export { MessageType, TOAST_WIDTH, Toast };
+
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["XIcon"],"sources":["../../../components/Toast/Toast.tsx"],"sourcesContent":["import { IconButton } from '@persona/design-system/components/Button';\nimport {\n  isActive,\n  isFocused,\n  isHovered,\n  isNotDisabled,\n} from '@persona/design-system/lib/pseudoClass';\nimport { paragraphMixins } from '@persona/design-system/mixins/text';\nimport { Elevation } from '@persona/design-system/variables/effect';\nimport { TransitionDurationInSeconds } from '@persona/design-system/variables/transitions';\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { CircleAlertIcon, CircleCheckIcon, CircleInfoIcon } from '@persona/icons';\nimport { XIcon } from '@persona/icons/12px';\nimport { type HTMLMotionProps, motion } from 'framer-motion';\nimport type { ReactElement } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport enum MessageType {\n  Success = 'success',\n  Failure = 'failure',\n  Notice = 'notice',\n}\n\nexport interface ToastProps extends HTMLMotionProps<'div'> {\n  id: string;\n  message: React.ReactNode;\n  messageType: MessageType;\n  onDismiss?: () => void;\n  shouldClipOverflow?: boolean;\n}\n\n// This is exported and used by whatever container is rendering the Toasts\nexport const TOAST_WIDTH = '324px';\n\nconst BaseToast = styled(motion.div)`\n  border-radius: ${BorderRadius.Md};\n  box-shadow: ${Elevation.Low};\n  color: ${({ theme }) => theme.color.text.primary};\n  ${paragraphMixins.md};\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n  box-sizing: border-box;\n  padding: ${Spacing[2]} ${Spacing[3]};\n  width: 100%;\n`;\n\nconst ToastIcon = styled.div`\n  flex-shrink: 0;\n  display: flex;\n  line-height: 0;\n  color: ${Color.BorderIconPrimary};\n`;\n\nconst ToastContent = styled.div<{ $clip?: boolean }>`\n  flex: 1;\n  min-width: 0; /* needed for text to wrap/truncate inside flex container */\n  ${({ $clip }) =>\n    $clip &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `}\n`;\n\nconst CloseButton = styled(IconButton)<{ isFocusVisible?: boolean }>`\n  flex-shrink: 0;\n  margin-left: auto;\n  color: ${Color.BorderIconPrimary};\n\n  &${isActive}${isNotDisabled}, &${isHovered}${isNotDisabled} {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n\n  ${({ isFocusVisible }) =>\n    !isFocusVisible &&\n    css`\n      &${isHovered}${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n      &${isFocused}${isNotDisabled} {\n        box-shadow: none;\n      }\n    `}\n`;\n\nconst NoticeToast = styled(BaseToast)`\n  background: ${Color.CorePurple200};\n`;\n\nconst SuccessToast = styled(BaseToast)`\n  background: ${Color.CoreGreen200};\n`;\n\nconst FailureToast = styled(BaseToast)`\n  background: ${Color.CoreRed200};\n`;\n\nconst getStyledComponent = (variant: MessageType) => {\n  switch (variant) {\n    case MessageType.Success:\n      return SuccessToast;\n    case MessageType.Failure:\n      return FailureToast;\n    case MessageType.Notice:\n    default:\n      return NoticeToast;\n  }\n};\n\nconst getIcon = (variant: MessageType): ReactElement => {\n  switch (variant) {\n    case MessageType.Success:\n      return <CircleCheckIcon />;\n    case MessageType.Failure:\n      return <CircleAlertIcon />;\n    case MessageType.Notice:\n    default:\n      return <CircleInfoIcon />;\n  }\n};\n\nexport const Toast = ({\n  message,\n  messageType,\n  onDismiss,\n  shouldClipOverflow,\n  ...elemProps\n}: ToastProps) => {\n  const StyledToast = getStyledComponent(messageType);\n\n  return (\n    <StyledToast\n      initial={{ y: 64, opacity: 0, scale: 0.96 }}\n      animate={{ y: 0, opacity: 1, scale: 1 }}\n      exit={{\n        opacity: 0,\n        scale: 0.9,\n        transition: { duration: TransitionDurationInSeconds.MediumFast, ease: 'easeOut' },\n      }}\n      role='alert'\n      aria-live='polite'\n      transition={{ type: 'tween', duration: TransitionDurationInSeconds.Medium, ease: 'easeOut' }}\n      {...elemProps}\n    >\n      <ToastIcon>{getIcon(messageType)}</ToastIcon>\n      <ToastContent $clip={shouldClipOverflow}>{message}</ToastContent>\n      {onDismiss && (\n        <CloseButton size='sm' aria-label='Close' title='Close' onClick={onDismiss}>\n          <XIcon />\n        </CloseButton>\n      )}\n    </StyledToast>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAY,cAAL,yBAAA,aAAA;AACL,aAAA,aAAA;AACA,aAAA,aAAA;AACA,aAAA,YAAA;;KACD;AAWD,MAAa,cAAc;AAE3B,MAAM,YAAY,OAAO,OAAO,IAAI;mBACjB,aAAa,GAAG;kIACL;YAClB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;IAC/C,gBAAgB,GAAG;;;SAGd,QAAQ,GAAG;;aAEP,QAAQ,GAAG,GAAG,QAAQ,GAAG;;;AAItC,MAAM,YAAY,OAAO,GAAG;;;;WAIjB,MAAM,kBAAkB;;AAGnC,MAAM,eAAe,OAAO,GAAwB;;;KAG/C,EAAE,YACH,SACA,GAAG;;;;MAID;;AAGN,MAAM,cAAc,OAAO,WAAW;;;WAG3B,MAAM,kBAAkB;;KAE9B,WAAW,cAAc,KAAK,YAAY,cAAc;;;;KAIxD,EAAE,qBACH,CAAC,kBACD,GAAG;SACE,YAAY,YAAY,cAAc;;;SAGtC,YAAY,cAAc;;;MAG7B;;AAGN,MAAM,cAAc,OAAO,UAAU;gBACrB,MAAM,cAAc;;AAGpC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,aAAa;;AAGnC,MAAM,eAAe,OAAO,UAAU;gBACtB,MAAM,WAAW;;AAGjC,MAAM,sBAAsB,YAAyB;AACnD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO;EACT,KAAA,UACE,QAAO;EAET,QACE,QAAO;;;AAIb,MAAM,WAAW,YAAuC;AACtD,SAAQ,SAAR;EACE,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAC5B,KAAA,UACE,QAAO,oBAAC,iBAAD,EAAmB,CAAA;EAE5B,QACE,QAAO,oBAAC,gBAAD,EAAkB,CAAA;;;AAI/B,MAAa,SAAS,EACpB,SACA,aACA,WACA,oBACA,GAAG,gBACa;AAGhB,QACE,qBAHkB,mBAAmB,YAGzB,EAAZ;EACE,SAAS;GAAE,GAAG;GAAI,SAAS;GAAG,OAAO;GAAM;EAC3C,SAAS;GAAE,GAAG;GAAG,SAAS;GAAG,OAAO;GAAG;EACvC,MAAM;GACJ,SAAS;GACT,OAAO;GACP,YAAY;IAAE,UAAA;IAAkD,MAAM;IAAW;GAClF;EACD,MAAK;EACL,aAAU;EACV,YAAY;GAAE,MAAM;GAAS,UAAA;GAA8C,MAAM;GAAW;EAC5F,GAAI;YAXN;GAaE,oBAAC,WAAD,EAAA,UAAY,QAAQ,YAAY,EAAa,CAAA;GAC7C,oBAAC,cAAD;IAAc,OAAO;cAAqB;IAAuB,CAAA;GAChE,aACC,oBAAC,aAAD;IAAa,MAAK;IAAK,cAAW;IAAQ,OAAM;IAAQ,SAAS;cAC/D,oBAACA,SAAD,EAAS,CAAA;IACG,CAAA;GAEJ"}

package/dist/components/Toggle/index.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Toggle = require("../../Toggle-CVdg5iQ0.cjs");
+exports.Toggle = require_Toggle.Toggle;
+exports.default = require_Toggle.Toggle;

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

@@ -0,0 +1,2 @@
+import { n as ToggleProps, t as Toggle } from "../../Toggle-BjkbL_uf.cjs";
+export { Toggle, Toggle as default, ToggleProps };

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

@@ -0,0 +1,2 @@
+import { n as ToggleProps, t as Toggle } from "../../Toggle-B3Cdyf7T.mjs";
+export { Toggle, Toggle as default, ToggleProps };

package/dist/components/Toggle/index.mjs

@@ -0,0 +1,2 @@
+import { t as Toggle } from "../../Toggle-8GNRxyvE.mjs";
+export { Toggle, Toggle as default };

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,12 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../../chunk-CoPdw6nB.cjs");
+const require_Tooltip = require("../../Tooltip-0i_15ysU.cjs");
+exports.FloatingTooltip = require_Tooltip.FloatingTooltip;
+exports.HelperTooltip = require_Tooltip.HelperTooltip;
+exports.TextUnderlineTooltip = require_Tooltip.TextUnderlineTooltip;
+exports.TextWithDashedUnderline = require_Tooltip.TextWithDashedUnderline;
+exports.Tooltip = require_Tooltip.Tooltip;
+exports.default = require_Tooltip.Tooltip;

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

@@ -0,0 +1,4 @@
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-CE1oH6Iz.cjs";
+import { t as HelperTooltip } from "../../HelperTooltip-oXdyk2At.cjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-BDMs4iXn.cjs";
+export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

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

@@ -0,0 +1,4 @@
+import { i as TooltipWithIconProps, n as Tooltip, r as TooltipStandardProps, t as FloatingTooltip } from "../../Tooltip-C0PS5InA.mjs";
+import { t as HelperTooltip } from "../../HelperTooltip-Cd7I0Ucq.mjs";
+import { n as TextWithDashedUnderline, t as TextUnderlineTooltip } from "../../TextUnderlineTooltip-z4sSGL91.mjs";
+export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default, TooltipStandardProps, TooltipWithIconProps };

package/dist/components/Tooltip/index.mjs

@@ -0,0 +1,2 @@
+import { a as Tooltip, i as FloatingTooltip, n as TextWithDashedUnderline, r as HelperTooltip, t as TextUnderlineTooltip } from "../../Tooltip-T7RQpy_a.mjs";
+export { FloatingTooltip, HelperTooltip, TextUnderlineTooltip, TextWithDashedUnderline, Tooltip, Tooltip as default };

package/dist/constants.d.mts

@@ -0,0 +1,5 @@
+//#region components/Pagination/constants.d.ts
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+//#endregion
+export { DEFAULT_PAGE_SIZE_OPTIONS };
+//# sourceMappingURL=constants.d.mts.map

package/dist/ids-Cr-NW2RJ.d.mts

@@ -0,0 +1,11 @@
+//#region lib/register/ids.d.ts
+declare function sanitizeId(raw: string): string;
+/**
+ * Get or create a globally stable ID keyed on any object (typically a React ref).
+ * The hint is sanitized and combined with a random suffix for uniqueness.
+ * IDs are GC'd when the key object goes out of scope.
+ */
+declare function getStableId(key: object, hint: string): string;
+//#endregion
+export { sanitizeId as n, getStableId as t };
+//# sourceMappingURL=ids-Cr-NW2RJ.d.mts.map

package/dist/ids-e4V5Y3Ub.d.cts

@@ -0,0 +1,11 @@
+//#region lib/register/ids.d.ts
+declare function sanitizeId(raw: string): string;
+/**
+ * Get or create a globally stable ID keyed on any object (typically a React ref).
+ * The hint is sanitized and combined with a random suffix for uniqueness.
+ * IDs are GC'd when the key object goes out of scope.
+ */
+declare function getStableId(key: object, hint: string): string;
+//#endregion
+export { sanitizeId as n, getStableId as t };
+//# sourceMappingURL=ids-e4V5Y3Ub.d.cts.map

package/dist/index-1-AkepUA.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/index-7in8TPrM.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/index-8R9vlM2B.d.mts

@@ -0,0 +1,83 @@
+import { a as InputBase, c as ValueBase, d as InputDOMProps, i as HelpTextProps, l as AriaLabelingProps, n as LabelableProps, o as RangeValue, r as FocusableProps, s as Validation, u as DOMProps } from "./index-CKu60b9I.mjs";
+import { MutableRefObject, ReactElement, ReactNode } from "react";
+import { CalendarDate, CalendarDateTime, ZonedDateTime } from "@internationalized/date";
+
+//#region ../../node_modules/@react-types/overlays/src/index.d.ts
+interface OverlayTriggerProps {
+  /** Whether the overlay is open by default (controlled). */
+  isOpen?: boolean;
+  /** Whether the overlay is open by default (uncontrolled). */
+  defaultOpen?: boolean;
+  /** Handler that is called when the overlay's open state changes. */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+//#endregion
+//#region ../../node_modules/@react-types/calendar/src/index.d.ts
+type PageBehavior = 'single' | 'visible';
+//#endregion
+//#region ../../node_modules/@react-types/datepicker/src/index.d.ts
+type DateValue$1 = CalendarDate | CalendarDateTime | ZonedDateTime;
+type MappedDateValue<T> = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never;
+type Granularity = 'day' | 'hour' | 'minute' | 'second';
+interface DateFieldBase<T extends DateValue$1> extends InputBase, Validation<MappedDateValue<T>>, FocusableProps, LabelableProps, HelpTextProps {
+  /** The minimum allowed date that a user may select. */
+  minValue?: DateValue$1 | null;
+  /** The maximum allowed date that a user may select. */
+  maxValue?: DateValue$1 | null;
+  /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+  isDateUnavailable?: (date: DateValue$1) => boolean;
+  /** A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight. */
+  placeholderValue?: T | null;
+  /** Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale. */
+  hourCycle?: 12 | 24;
+  /** Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times. */
+  granularity?: Granularity;
+  /**
+   * Whether to hide the time zone abbreviation.
+   * @default false
+   */
+  hideTimeZone?: boolean;
+  /**
+   * Whether to always show leading zeros in the month, day, and hour fields.
+   * By default, this is determined by the user's locale.
+   */
+  shouldForceLeadingZeros?: boolean;
+}
+interface AriaDateFieldBaseProps<T extends DateValue$1> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
+interface DateFieldProps<T extends DateValue$1> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
+interface AriaDateFieldProps<T extends DateValue$1> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string;
+}
+interface DatePickerBase<T extends DateValue$1> extends DateFieldBase<T>, OverlayTriggerProps {
+  /**
+   * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
+   * @default visible
+   */
+  pageBehavior?: PageBehavior;
+  /**
+   * The day that starts the week.
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+}
+interface DatePickerProps<T extends DateValue$1> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
+interface DateRangePickerProps<T extends DateValue$1> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
+  /**
+   * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
+   * i.e. ranges containing unavailable dates, may be selected.
+   */
+  allowsNonContiguousRanges?: boolean;
+  /**
+   * The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  startName?: string;
+  /**
+   * The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  endName?: string;
+}
+//#endregion
+export { DatePickerProps as n, DateRangePickerProps as r, AriaDateFieldProps as t };
+//# sourceMappingURL=index-8R9vlM2B.d.mts.map

package/dist/index-B2KLYYkM.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/index-BBDa5smF.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/index-BJ8-FA6N.d.cts

@@ -0,0 +1 @@
+export { };