@saas-ui/react 3.0.0-next.5 → 3.0.0-next.50

package/dist/components/page/page.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { type HTMLChakraProps, type SlotRecipeProps } from '@chakra-ui/react';
+interface PageOptions {
+    children?: React.ReactNode;
+    loading?: boolean;
+    skeleton?: React.ReactNode;
+}
+interface PageRootProps extends PageOptions, HTMLChakraProps<'main'>, SlotRecipeProps<'suiPage'> {
+}
+declare const PageRoot: React.ForwardRefExoticComponent<PageRootProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderProps extends Omit<HTMLChakraProps<'header'>, 'title' | 'children'> {
+    /**
+     * Page header navigation
+     * Typically breadcrumbs or backbutton.
+     */
+    nav?: React.ReactNode;
+    /**
+     * Page header title
+     */
+    title?: React.ReactNode;
+    /**
+     * Page header description
+     */
+    description?: React.ReactNode;
+    /**
+     * Page header actions, typically a toolbar
+     */
+    actions?: React.ReactNode;
+    /**
+     * Page header footer
+     */
+    footer?: React.ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderSection: React.ForwardRefExoticComponent<Omit<import("@chakra-ui/react").PatchHtmlProps<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>, "zIndex" | "opacity" | "cursor" | "page" | "container" | "_hover" | "_active" | "_focus" | "_focusWithin" | "_focusVisible" | "_disabled" | "_visited" | "_target" | "_readOnly" | "_readWrite" | "_empty" | "_checked" | "_enabled" | "_expanded" | "_highlighted" | "_complete" | "_incomplete" | "_dragging" | "_before" | "_after" | "_firstLetter" | "_firstLine" | "_marker" | "_selection" | "_file" | "_backdrop" | "_first" | "_last" | "_notFirst" | "_notLast" | "_only" | "_even" | "_odd" | "_peerFocus" | "_peerHover" | "_peerActive" | "_peerFocusWithin" | "_peerFocusVisible" | "_peerDisabled" | "_peerChecked" | "_peerInvalid" | "_peerExpanded" | "_peerPlaceholderShown" | "_groupFocus" | "_groupHover" | "_groupActive" | "_groupFocusWithin" | "_groupFocusVisible" | "_groupDisabled" | "_groupChecked" | "_groupExpanded" | "_groupInvalid" | "_indeterminate" | "_required" | "_valid" | "_invalid" | "_autofill" | "_inRange" | "_outOfRange" | "_placeholder" | "_placeholderShown" | "_pressed" | "_selected" | "_grabbed" | "_underValue" | "_overValue" | "_atValue" | "_default" | "_optional" | "_open" | "_closed" | "_fullscreen" | "_loading" | "_hidden" | "_current" | "_currentPage" | "_currentStep" | "_today" | "_unavailable" | "_rangeStart" | "_rangeEnd" | "_now" | "_topmost" | "_motionReduce" | "_motionSafe" | "_print" | "_landscape" | "_portrait" | "_dark" | "_light" | "_osDark" | "_osLight" | "_highContrast" | "_lessContrast" | "_moreContrast" | "_ltr" | "_rtl" | "_scrollbar" | "_scrollbarThumb" | "_scrollbarTrack" | "_horizontal" | "_vertical" | "_icon" | "_starting" | "sm" | "smOnly" | "smDown" | "md" | "mdOnly" | "mdDown" | "lg" | "lgOnly" | "lgDown" | "xl" | "xlOnly" | "xlDown" | "2xl" | "2xlOnly" | "2xlDown" | "smToMd" | "smToLg" | "smToXl" | "smTo2xl" | "mdToLg" | "mdToXl" | "mdTo2xl" | "lgToXl" | "lgTo2xl" | "xlTo2xl" | "base" | "animation" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationRange" | "animationRangeStart" | "animationRangeEnd" | "animationTimeline" | "transformOrigin" | "WebkitAppearance" | "WebkitBorderBefore" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBoxReflect" | "WebkitLineClamp" | "WebkitMask" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitOverflowScrolling" | "WebkitTapHighlightColor" | "WebkitTextFillColor" | "WebkitTextStroke" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTouchCallout" | "WebkitUserModify" | "WebkitUserSelect" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "all" | "anchorName" | "anchorScope" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxAlign" | "boxDecorationBreak" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caret" | "caretColor" | "caretShape" | "clear" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "imeMode" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskBorder" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offset" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTry" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapStop" | "scrollSnapType" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollTimeline" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformStyle" | "transition" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimeline" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "alignmentBaseline" | "baselineShift" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "bg" | "bgColor" | "bgSize" | "bgPos" | "bgRepeat" | "bgAttachment" | "bgClip" | "bgGradient" | "bgImg" | "bgImage" | "borderStart" | "borderEnd" | "borderX" | "borderY" | "borderStartColor" | "borderEndColor" | "borderStartStyle" | "borderEndStyle" | "rounded" | "roundedTopLeft" | "roundedStartStart" | "borderTopStartRadius" | "roundedEndStart" | "borderBottomStartRadius" | "roundedTopRight" | "roundedStartEnd" | "borderTopEndRadius" | "roundedEndEnd" | "borderBottomEndRadius" | "roundedBottomLeft" | "roundedBottomRight" | "roundedStart" | "borderStartRadius" | "roundedEnd" | "borderEndRadius" | "roundedTop" | "roundedBottom" | "roundedLeft" | "roundedRight" | "borderXWidth" | "borderStartWidth" | "borderEndWidth" | "borderYWidth" | "shadow" | "shadowColor" | "blendMode" | "bgBlendMode" | "gapY" | "gapX" | "flexDir" | "w" | "h" | "minW" | "minH" | "maxW" | "maxH" | "overscroll" | "overscrollX" | "overscrollY" | "scrollPaddingX" | "scrollPaddingY" | "listStylePos" | "listStyleImg" | "pos" | "insetX" | "insetY" | "insetStart" | "insetEnd" | "m" | "mt" | "mr" | "mb" | "ml" | "ms" | "marginStart" | "me" | "marginEnd" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "ps" | "paddingStart" | "pe" | "paddingEnd" | "px" | "paddingX" | "py" | "paddingY" | "textDecor" | "backgroundGradient" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderInlineStartRadius" | "borderInlineEndRadius" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius" | "divideX" | "divideY" | "divideColor" | "divideStyle" | "boxShadowColor" | "blur" | "brightness" | "contrast" | "grayscale" | "hueRotate" | "invert" | "saturate" | "sepia" | "dropShadow" | "backdropBlur" | "backdropBrightness" | "backdropContrast" | "backdropGrayscale" | "backdropHueRotate" | "backdropInvert" | "backdropOpacity" | "backdropSaturate" | "backdropSepia" | "focusRing" | "focusVisibleRing" | "focusRingColor" | "focusRingOffset" | "focusRingWidth" | "focusRingStyle" | "boxSize" | "hideFrom" | "hideBelow" | "scrollbar" | "scrollMarginX" | "scrollMarginY" | "scrollSnapStrictness" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "ring" | "ringColor" | "ringOffset" | "ringOffsetColor" | "ringInset" | "skewX" | "skewY" | "scaleX" | "scaleY" | "spaceXReverse" | "spaceX" | "spaceYReverse" | "spaceY" | "rotateX" | "rotateY" | "translateX" | "translateY" | "truncate" | "borderSpacingX" | "borderSpacingY" | "srOnly" | "debug" | "colorPalette" | "textStyle" | "layerStyle" | "animationStyle" | "css" | keyof import("@chakra-ui/react").PolymorphicProps> & Omit<import("@chakra-ui/react").JsxStyleProps, never> & import("@chakra-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageTitle: React.ForwardRefExoticComponent<Omit<import("@chakra-ui/react").PatchHtmlProps<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">>, "zIndex" | "opacity" | "cursor" | "page" | "container" | "_hover" | "_active" | "_focus" | "_focusWithin" | "_focusVisible" | "_disabled" | "_visited" | "_target" | "_readOnly" | "_readWrite" | "_empty" | "_checked" | "_enabled" | "_expanded" | "_highlighted" | "_complete" | "_incomplete" | "_dragging" | "_before" | "_after" | "_firstLetter" | "_firstLine" | "_marker" | "_selection" | "_file" | "_backdrop" | "_first" | "_last" | "_notFirst" | "_notLast" | "_only" | "_even" | "_odd" | "_peerFocus" | "_peerHover" | "_peerActive" | "_peerFocusWithin" | "_peerFocusVisible" | "_peerDisabled" | "_peerChecked" | "_peerInvalid" | "_peerExpanded" | "_peerPlaceholderShown" | "_groupFocus" | "_groupHover" | "_groupActive" | "_groupFocusWithin" | "_groupFocusVisible" | "_groupDisabled" | "_groupChecked" | "_groupExpanded" | "_groupInvalid" | "_indeterminate" | "_required" | "_valid" | "_invalid" | "_autofill" | "_inRange" | "_outOfRange" | "_placeholder" | "_placeholderShown" | "_pressed" | "_selected" | "_grabbed" | "_underValue" | "_overValue" | "_atValue" | "_default" | "_optional" | "_open" | "_closed" | "_fullscreen" | "_loading" | "_hidden" | "_current" | "_currentPage" | "_currentStep" | "_today" | "_unavailable" | "_rangeStart" | "_rangeEnd" | "_now" | "_topmost" | "_motionReduce" | "_motionSafe" | "_print" | "_landscape" | "_portrait" | "_dark" | "_light" | "_osDark" | "_osLight" | "_highContrast" | "_lessContrast" | "_moreContrast" | "_ltr" | "_rtl" | "_scrollbar" | "_scrollbarThumb" | "_scrollbarTrack" | "_horizontal" | "_vertical" | "_icon" | "_starting" | "sm" | "smOnly" | "smDown" | "md" | "mdOnly" | "mdDown" | "lg" | "lgOnly" | "lgDown" | "xl" | "xlOnly" | "xlDown" | "2xl" | "2xlOnly" | "2xlDown" | "smToMd" | "smToLg" | "smToXl" | "smTo2xl" | "mdToLg" | "mdToXl" | "mdTo2xl" | "lgToXl" | "lgTo2xl" | "xlTo2xl" | "base" | "animation" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationRange" | "animationRangeStart" | "animationRangeEnd" | "animationTimeline" | "transformOrigin" | "WebkitAppearance" | "WebkitBorderBefore" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBoxReflect" | "WebkitLineClamp" | "WebkitMask" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitOverflowScrolling" | "WebkitTapHighlightColor" | "WebkitTextFillColor" | "WebkitTextStroke" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTouchCallout" | "WebkitUserModify" | "WebkitUserSelect" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "all" | "anchorName" | "anchorScope" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxAlign" | "boxDecorationBreak" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caret" | "caretColor" | "caretShape" | "clear" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "imeMode" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskBorder" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offset" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTry" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapStop" | "scrollSnapType" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollTimeline" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformStyle" | "transition" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimeline" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "alignmentBaseline" | "baselineShift" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "bg" | "bgColor" | "bgSize" | "bgPos" | "bgRepeat" | "bgAttachment" | "bgClip" | "bgGradient" | "bgImg" | "bgImage" | "borderStart" | "borderEnd" | "borderX" | "borderY" | "borderStartColor" | "borderEndColor" | "borderStartStyle" | "borderEndStyle" | "rounded" | "roundedTopLeft" | "roundedStartStart" | "borderTopStartRadius" | "roundedEndStart" | "borderBottomStartRadius" | "roundedTopRight" | "roundedStartEnd" | "borderTopEndRadius" | "roundedEndEnd" | "borderBottomEndRadius" | "roundedBottomLeft" | "roundedBottomRight" | "roundedStart" | "borderStartRadius" | "roundedEnd" | "borderEndRadius" | "roundedTop" | "roundedBottom" | "roundedLeft" | "roundedRight" | "borderXWidth" | "borderStartWidth" | "borderEndWidth" | "borderYWidth" | "shadow" | "shadowColor" | "blendMode" | "bgBlendMode" | "gapY" | "gapX" | "flexDir" | "w" | "h" | "minW" | "minH" | "maxW" | "maxH" | "overscroll" | "overscrollX" | "overscrollY" | "scrollPaddingX" | "scrollPaddingY" | "listStylePos" | "listStyleImg" | "pos" | "insetX" | "insetY" | "insetStart" | "insetEnd" | "m" | "mt" | "mr" | "mb" | "ml" | "ms" | "marginStart" | "me" | "marginEnd" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "ps" | "paddingStart" | "pe" | "paddingEnd" | "px" | "paddingX" | "py" | "paddingY" | "textDecor" | "backgroundGradient" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderInlineStartRadius" | "borderInlineEndRadius" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius" | "divideX" | "divideY" | "divideColor" | "divideStyle" | "boxShadowColor" | "blur" | "brightness" | "contrast" | "grayscale" | "hueRotate" | "invert" | "saturate" | "sepia" | "dropShadow" | "backdropBlur" | "backdropBrightness" | "backdropContrast" | "backdropGrayscale" | "backdropHueRotate" | "backdropInvert" | "backdropOpacity" | "backdropSaturate" | "backdropSepia" | "focusRing" | "focusVisibleRing" | "focusRingColor" | "focusRingOffset" | "focusRingWidth" | "focusRingStyle" | "boxSize" | "hideFrom" | "hideBelow" | "scrollbar" | "scrollMarginX" | "scrollMarginY" | "scrollSnapStrictness" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "ring" | "ringColor" | "ringOffset" | "ringOffsetColor" | "ringInset" | "skewX" | "skewY" | "scaleX" | "scaleY" | "spaceXReverse" | "spaceX" | "spaceYReverse" | "spaceY" | "rotateX" | "rotateY" | "translateX" | "translateY" | "truncate" | "borderSpacingX" | "borderSpacingY" | "srOnly" | "debug" | "colorPalette" | "textStyle" | "layerStyle" | "animationStyle" | "css" | keyof import("@chakra-ui/react").PolymorphicProps> & Omit<import("@chakra-ui/react").JsxStyleProps, never> & import("@chakra-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageDescription: React.ForwardRefExoticComponent<Omit<import("@chakra-ui/react").PatchHtmlProps<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">>, "zIndex" | "opacity" | "cursor" | "page" | "container" | "_hover" | "_active" | "_focus" | "_focusWithin" | "_focusVisible" | "_disabled" | "_visited" | "_target" | "_readOnly" | "_readWrite" | "_empty" | "_checked" | "_enabled" | "_expanded" | "_highlighted" | "_complete" | "_incomplete" | "_dragging" | "_before" | "_after" | "_firstLetter" | "_firstLine" | "_marker" | "_selection" | "_file" | "_backdrop" | "_first" | "_last" | "_notFirst" | "_notLast" | "_only" | "_even" | "_odd" | "_peerFocus" | "_peerHover" | "_peerActive" | "_peerFocusWithin" | "_peerFocusVisible" | "_peerDisabled" | "_peerChecked" | "_peerInvalid" | "_peerExpanded" | "_peerPlaceholderShown" | "_groupFocus" | "_groupHover" | "_groupActive" | "_groupFocusWithin" | "_groupFocusVisible" | "_groupDisabled" | "_groupChecked" | "_groupExpanded" | "_groupInvalid" | "_indeterminate" | "_required" | "_valid" | "_invalid" | "_autofill" | "_inRange" | "_outOfRange" | "_placeholder" | "_placeholderShown" | "_pressed" | "_selected" | "_grabbed" | "_underValue" | "_overValue" | "_atValue" | "_default" | "_optional" | "_open" | "_closed" | "_fullscreen" | "_loading" | "_hidden" | "_current" | "_currentPage" | "_currentStep" | "_today" | "_unavailable" | "_rangeStart" | "_rangeEnd" | "_now" | "_topmost" | "_motionReduce" | "_motionSafe" | "_print" | "_landscape" | "_portrait" | "_dark" | "_light" | "_osDark" | "_osLight" | "_highContrast" | "_lessContrast" | "_moreContrast" | "_ltr" | "_rtl" | "_scrollbar" | "_scrollbarThumb" | "_scrollbarTrack" | "_horizontal" | "_vertical" | "_icon" | "_starting" | "sm" | "smOnly" | "smDown" | "md" | "mdOnly" | "mdDown" | "lg" | "lgOnly" | "lgDown" | "xl" | "xlOnly" | "xlDown" | "2xl" | "2xlOnly" | "2xlDown" | "smToMd" | "smToLg" | "smToXl" | "smTo2xl" | "mdToLg" | "mdToXl" | "mdTo2xl" | "lgToXl" | "lgTo2xl" | "xlTo2xl" | "base" | "animation" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "animationRange" | "animationRangeStart" | "animationRangeEnd" | "animationTimeline" | "transformOrigin" | "WebkitAppearance" | "WebkitBorderBefore" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBoxReflect" | "WebkitLineClamp" | "WebkitMask" | "WebkitMaskAttachment" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitOverflowScrolling" | "WebkitTapHighlightColor" | "WebkitTextFillColor" | "WebkitTextStroke" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTouchCallout" | "WebkitUserModify" | "WebkitUserSelect" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "all" | "anchorName" | "anchorScope" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "bottom" | "boxAlign" | "boxDecorationBreak" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caret" | "caretColor" | "caretShape" | "clear" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cx" | "cy" | "d" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "imeMode" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineClamp" | "lineHeight" | "lineHeightStep" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "margin" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskBorder" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offset" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "padding" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "positionAnchor" | "positionArea" | "positionTry" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapStop" | "scrollSnapType" | "scrollSnapTypeX" | "scrollSnapTypeY" | "scrollTimeline" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrap" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "top" | "touchAction" | "transform" | "transformBox" | "transformStyle" | "transition" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimeline" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionName" | "visibility" | "whiteSpace" | "whiteSpaceCollapse" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "alignmentBaseline" | "baselineShift" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "bg" | "bgColor" | "bgSize" | "bgPos" | "bgRepeat" | "bgAttachment" | "bgClip" | "bgGradient" | "bgImg" | "bgImage" | "borderStart" | "borderEnd" | "borderX" | "borderY" | "borderStartColor" | "borderEndColor" | "borderStartStyle" | "borderEndStyle" | "rounded" | "roundedTopLeft" | "roundedStartStart" | "borderTopStartRadius" | "roundedEndStart" | "borderBottomStartRadius" | "roundedTopRight" | "roundedStartEnd" | "borderTopEndRadius" | "roundedEndEnd" | "borderBottomEndRadius" | "roundedBottomLeft" | "roundedBottomRight" | "roundedStart" | "borderStartRadius" | "roundedEnd" | "borderEndRadius" | "roundedTop" | "roundedBottom" | "roundedLeft" | "roundedRight" | "borderXWidth" | "borderStartWidth" | "borderEndWidth" | "borderYWidth" | "shadow" | "shadowColor" | "blendMode" | "bgBlendMode" | "gapY" | "gapX" | "flexDir" | "w" | "h" | "minW" | "minH" | "maxW" | "maxH" | "overscroll" | "overscrollX" | "overscrollY" | "scrollPaddingX" | "scrollPaddingY" | "listStylePos" | "listStyleImg" | "pos" | "insetX" | "insetY" | "insetStart" | "insetEnd" | "m" | "mt" | "mr" | "mb" | "ml" | "ms" | "marginStart" | "me" | "marginEnd" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "ps" | "paddingStart" | "pe" | "paddingEnd" | "px" | "paddingX" | "py" | "paddingY" | "textDecor" | "backgroundGradient" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderInlineStartRadius" | "borderInlineEndRadius" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius" | "divideX" | "divideY" | "divideColor" | "divideStyle" | "boxShadowColor" | "blur" | "brightness" | "contrast" | "grayscale" | "hueRotate" | "invert" | "saturate" | "sepia" | "dropShadow" | "backdropBlur" | "backdropBrightness" | "backdropContrast" | "backdropGrayscale" | "backdropHueRotate" | "backdropInvert" | "backdropOpacity" | "backdropSaturate" | "backdropSepia" | "focusRing" | "focusVisibleRing" | "focusRingColor" | "focusRingOffset" | "focusRingWidth" | "focusRingStyle" | "boxSize" | "hideFrom" | "hideBelow" | "scrollbar" | "scrollMarginX" | "scrollMarginY" | "scrollSnapStrictness" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "ring" | "ringColor" | "ringOffset" | "ringOffsetColor" | "ringInset" | "skewX" | "skewY" | "scaleX" | "scaleY" | "spaceXReverse" | "spaceX" | "spaceYReverse" | "spaceY" | "rotateX" | "rotateY" | "translateX" | "translateY" | "truncate" | "borderSpacingX" | "borderSpacingY" | "srOnly" | "debug" | "colorPalette" | "textStyle" | "layerStyle" | "animationStyle" | "css" | keyof import("@chakra-ui/react").PolymorphicProps> & Omit<import("@chakra-ui/react").JsxStyleProps, never> & import("@chakra-ui/react").PolymorphicProps & React.RefAttributes<HTMLDivElement>>;
+interface PageBodyProps extends HTMLChakraProps<'div'> {
+}
+declare const PageBody: React.ForwardRefExoticComponent<PageBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { PageRoot as Root, PageBody as Body, PageHeader as Header, PageHeaderSection as HeaderSection, PageTitle as Title, PageDescription as Description, };
+export type { PageRootProps as RootProps, PageBodyProps as BodyProps, PageHeaderProps as HeaderProps, };

package/dist/components/page/page.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { chakra, } from '@chakra-ui/react';
+import { LoadingOverlay } from "../loading-overlay/index.js";
+import { PageProvider, useClassNames, usePageContext, usePageStyles, withContext, withProvider, } from "./page.context.js";
+const PageRoot = withProvider(forwardRef(function PageRoot(props, ref) {
+    const { loading, skeleton, children, ...containerProps } = props;
+    const context = {
+        loading,
+        skeleton,
+    };
+    return (_jsx(PageProvider, { value: context, children: _jsx(chakra.main, { ref: ref, ...containerProps, children: children }) }));
+}), 'root');
+const PageHeader = withContext(forwardRef(function PageHeader(props, ref) {
+    const { nav, title, description, actions, footer, css, ...rest } = props;
+    const styles = usePageStyles();
+    const classNames = useClassNames();
+    let heading;
+    if (title || description) {
+        heading = (_jsxs(chakra.div, { gridArea: "heading", className: classNames.heading, css: styles.heading, children: [typeof title === 'string' ? _jsx(PageTitle, { children: title }) : title, typeof description === 'string' ? (_jsx(PageDescription, { children: description })) : (description)] }));
+    }
+    return (_jsxs(chakra.header, { ref: ref, css: css, ...rest, className: props.className, children: [React.isValidElement(nav)
+                ? React.cloneElement(nav, {
+                    gridArea: 'nav',
+                })
+                : null, heading, React.isValidElement(actions)
+                ? React.cloneElement(actions, {
+                    gridArea: 'actions',
+                })
+                : null, React.isValidElement(footer)
+                ? React.cloneElement(footer, {
+                    gridArea: 'footer',
+                })
+                : null] }));
+}), 'header');
+const PageHeaderSection = withContext('div', 'section');
+const PageTitle = withContext('h2', 'title');
+const PageDescription = withContext('div', 'description');
+const PageBody = withContext(forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { loading, skeleton } = usePageContext();
+    let content = children;
+    if (loading) {
+        content = skeleton || (_jsx(LoadingOverlay.Root, { children: _jsx(LoadingOverlay.Spinner, {}) }));
+    }
+    return (_jsx(chakra.div, { ref: ref, ...rest, children: content }));
+}), 'body');
+PageBody.displayName = 'PageBody';
+export { PageRoot as Root, PageBody as Body, PageHeader as Header, PageHeaderSection as HeaderSection, PageTitle as Title, PageDescription as Description, };

package/dist/components/pagination/index.d.ts

@@ -1 +1 @@
-export { Pagination_alias_1 as Pagination } from '../../_tsup-dts-rollup.js';
+export * as Pagination from './pagination.tsx';

package/dist/components/pagination/index.js

@@ -1,11 +1 @@
-'use client'
-import {
-  pagination_exports
-} from "../../chunk-L4JB7UFV.js";
-import "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  pagination_exports as Pagination
-};
+export * as Pagination from "./pagination.js";

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,22 @@
+import { Pagination as ChakraPagination } from '@chakra-ui/react/pagination';
+import { type TextProps } from '@chakra-ui/react/text';
+import { type ButtonProps } from '../button/index.ts';
+type PaginationVariant = 'outline' | 'solid' | 'subtle';
+export interface RootProps extends Omit<ChakraPagination.RootProps, 'type'> {
+    size?: ButtonProps['size'];
+    variant?: PaginationVariant;
+}
+export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Ellipsis: import("react").ForwardRefExoticComponent<ChakraPagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Item: import("react").ForwardRefExoticComponent<ChakraPagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PrevButton: import("react").ForwardRefExoticComponent<ChakraPagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const NextButton: import("react").ForwardRefExoticComponent<ChakraPagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Items: (props: React.HTMLAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export interface PageTextProps extends TextProps {
+    format?: 'short' | 'compact' | 'long';
+}
+export declare const PageText: import("react").ForwardRefExoticComponent<PageTextProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const PrevTrigger: import("react").ForwardRefExoticComponent<ChakraPagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const NextTrigger: import("react").ForwardRefExoticComponent<ChakraPagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Context: (props: import("@ark-ui/react").PaginationContextProps) => import("react").ReactNode;
+export {};

package/dist/components/pagination/pagination.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { Pagination as ChakraPagination, usePaginationContext, } from '@chakra-ui/react/pagination';
+import { Text } from '@chakra-ui/react/text';
+import { createContext } from '@saas-ui/core/utils';
+import { Button } from "../button/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { ChevronLeftIcon, ChevronRightIcon, EllipsisIcon, } from "../icons/icons.js";
+const [RootPropsProvider, useRootProps] = createContext({
+    name: 'RootPropsProvider',
+});
+const variantMap = {
+    outline: { default: 'ghost', ellipsis: 'plain', current: 'outline' },
+    solid: { default: 'outline', ellipsis: 'outline', current: 'solid' },
+    subtle: { default: 'ghost', ellipsis: 'plain', current: 'subtle' },
+};
+export const Root = forwardRef(function PaginationRoot(props, ref) {
+    const { size = 'sm', variant = 'outline', ...rest } = props;
+    return (_jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: _jsx(ChakraPagination.Root, { ref: ref, type: "button", ...rest }) }));
+});
+export const Ellipsis = forwardRef(function PaginationEllipsis(props, ref) {
+    const { size, variantMap } = useRootProps();
+    return (_jsx(ChakraPagination.Ellipsis, { ref: ref, ...props, asChild: true, children: _jsx(Button, { as: "span", variant: variantMap.ellipsis, size: size, children: props.children ?? _jsx(EllipsisIcon, {}) }) }));
+});
+export const Item = forwardRef(function PaginationItem(props, ref) {
+    const { page } = usePaginationContext();
+    const { size, variantMap } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap.current : variantMap.default;
+    return (_jsx(ChakraPagination.Item, { ref: ref, ...props, asChild: true, children: _jsx(Button, { variant: variant, size: size, children: props.value }) }));
+});
+export const PrevButton = forwardRef(function PaginationPrevTrigger(props, ref) {
+    const { size, variantMap } = useRootProps();
+    return (_jsx(ChakraPagination.PrevTrigger, { ref: ref, asChild: true, ...props, children: _jsx(IconButton, { variant: variantMap.default, size: size, children: props.children ?? _jsx(ChevronLeftIcon, {}) }) }));
+});
+export const NextButton = forwardRef(function PaginationNextTrigger(props, ref) {
+    const { size, variantMap } = useRootProps();
+    return (_jsx(ChakraPagination.NextTrigger, { ref: ref, asChild: true, ...props, children: _jsx(IconButton, { variant: variantMap.default, size: size, children: props.children ?? _jsx(ChevronRightIcon, {}) }) }));
+});
+export const Items = (props) => {
+    return (_jsx(ChakraPagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+            return page.type === 'ellipsis' ? (_jsx(Ellipsis, { index: index, ...props }, index)) : (_jsx(Item, { type: "page", value: page.value, ...props }, index));
+        }) }));
+};
+export const PageText = forwardRef(function PaginationPageText(props, ref) {
+    const { format = 'compact', ...rest } = props;
+    const { page, pages, pageRange, count } = usePaginationContext();
+    const content = useMemo(() => {
+        if (format === 'short')
+            return `${page} / ${pages.length}`;
+        if (format === 'compact')
+            return `${page} of ${pages.length}`;
+        return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
+    }, [format, page, pages.length, pageRange, count]);
+    return (_jsx(Text, { fontWeight: "medium", ref: ref, ...rest, children: content }));
+});
+export const PrevTrigger = ChakraPagination.PrevTrigger;
+export const NextTrigger = ChakraPagination.NextTrigger;
+export const Context = ChakraPagination.Context;

package/dist/components/password-input/index.d.ts

@@ -1,2 +1,2 @@
-export { PasswordInput_alias_1 as PasswordInput } from '../../_tsup-dts-rollup.js';
-export { PasswordInputProps_alias_1 as PasswordInputProps } from '../../_tsup-dts-rollup.js';
+export { PasswordInput } from './password-input.tsx';
+export type { PasswordInputProps } from './password-input.tsx';

package/dist/components/password-input/index.js

@@ -1,11 +1 @@
-'use client'
-import {
-  PasswordInput
-} from "../../chunk-TXIFPX2A.js";
-import "../../chunk-BLSGOJQ7.js";
-import "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  PasswordInput
-};
+export { PasswordInput } from "./password-input.js";

package/dist/components/password-input/password-input.d.ts

@@ -0,0 +1,15 @@
+import { type InputGroupProps } from '../input-group/index.ts';
+import { type InputProps } from '../input/index.ts';
+export interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
+    rootProps?: InputGroupProps;
+}
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface PasswordVisibilityProps {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    visibilityIcon?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}

package/dist/components/password-input/password-input.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { mergeRefs, useControllableState } from '@chakra-ui/react';
+import { IconButton } from "../icon-button/index.js";
+import { EyeIcon, EyeOffIcon } from "../icons/icons.js";
+import { InputGroup } from "../input-group/index.js";
+import { Input } from "../input/index.js";
+export const PasswordInput = forwardRef(function PasswordInput(props, ref) {
+    const { rootProps, defaultVisible, visible: visibleProp, onVisibleChange, visibilityIcon = { on: _jsx(EyeIcon, {}), off: _jsx(EyeOffIcon, {}) }, ...rest } = props;
+    const [visible, setVisible] = useControllableState({
+        value: visibleProp,
+        defaultValue: defaultVisible || false,
+        onChange: onVisibleChange,
+    });
+    const inputRef = useRef(null);
+    return (_jsx(InputGroup, { width: "full", endElement: _jsx(VisibilityTrigger, { disabled: rest.disabled, onPointerDown: (e) => {
+                if (rest.disabled)
+                    return;
+                if (e.button !== 0)
+                    return;
+                e.preventDefault();
+                setVisible(!visible);
+            }, children: visible ? visibilityIcon.off : visibilityIcon.on }), ...rootProps, children: _jsx(Input, { ...rest, ref: mergeRefs(ref, inputRef), type: visible ? 'text' : 'password' }) }));
+});
+const VisibilityTrigger = forwardRef(function VisibilityTrigger(props, ref) {
+    return (_jsx(IconButton, { tabIndex: -1, ref: ref, me: "-2", aspectRatio: "square", size: "sm", variant: "ghost", colorPalette: "gray", height: "calc(100% - {spacing.2})", "aria-label": "Toggle password visibility", ...props }));
+});

package/dist/components/persona/index.d.ts

@@ -1,7 +1,3 @@
-export { Persona_alias_1 as Persona } from '../../_tsup-dts-rollup.js';
-export { PersonaAvatar_alias_1 as PersonaAvatar } from '../../_tsup-dts-rollup.js';
-export { PersonaProps_alias_1 as PersonaProps } from '../../_tsup-dts-rollup.js';
-export { PersonaAvatarProps_alias_1 as PersonaAvatarProps } from '../../_tsup-dts-rollup.js';
-export { defaultPersonaPresenceOptions_alias_1 as defaultPersonaPresenceOptions } from '../../_tsup-dts-rollup.js';
-export { PersonaPresence_alias_1 as PersonaPresence } from '../../_tsup-dts-rollup.js';
-export { PersonaPresenceConfig_alias_1 as PersonaPresenceConfig } from '../../_tsup-dts-rollup.js';
+export * as Persona from './persona.tsx';
+export { defaultPersonaPresenceOptions } from './presence.ts';
+export type { PersonaPresence, PersonaPresenceConfig } from './presence.ts';

package/dist/components/persona/index.js

@@ -1,13 +1,2 @@
-'use client'
-import {
-  Persona,
-  PersonaAvatar,
-  defaultPersonaPresenceOptions
-} from "../../chunk-TYGGMKHU.js";
-import "../../chunk-FN7TU5F5.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Persona,
-  PersonaAvatar,
-  defaultPersonaPresenceOptions
-};
+export * as Persona from "./persona.js";
+export { defaultPersonaPresenceOptions } from "./presence.js";

package/dist/components/persona/persona-composed.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { PersonaVariantProps } from '@saas-ui/chakra-preset/slot-recipes/persona';
+import * as PersonaPrimitive from './persona.tsx';
+import type { PersonaPresence } from './presence.ts';
+interface PersonaOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * The presence status of the person
+     *
+     * If set will add an AvatarBadge with color configured in `Presence`
+     * Default presence options:
+     * - online
+     * - offline
+     * - busy
+     * - dnd
+     * - away
+     */
+    presence?: PersonaPresence;
+    /**
+     * The icon shown in the AvatarBadge
+     */
+    presenceIcon?: React.ReactNode;
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label, usually the role of the person
+     * Only visible from md size and up.
+     */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * Tertiary label, usually the status of the person.
+     * Only visible from lg size and up.
+     */
+    tertiaryLabel?: React.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+}
+export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+}
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
+export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+}
+export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/persona/persona-composed.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PersonaPrimitive from "./persona.js";
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const Persona = React.forwardRef((props, ref) => {
+    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
+    /** Avatar props */
+    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
+    return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
+});
+Persona.displayName = 'Persona';
+export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
+    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+});

package/dist/components/persona/persona.context.d.ts

@@ -0,0 +1,9 @@
+export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, useRecipeResult: (props: any) => {
+    styles: Record<string, import("@chakra-ui/react").SystemStyleObject>;
+    classNames: Record<string, string>;
+    props: {
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    };
+}, usePropsContext: () => Record<string, any>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, ClassNamesProvider: import("react").Provider<Record<string, string>>, PropsProvider: import("react").Provider<Record<string, any>>, StylesProvider: import("react").Provider<Record<string, import("@chakra-ui/react").SystemStyleObject>>;

package/dist/components/persona/persona.context.js

@@ -0,0 +1,4 @@
+import { createSlotRecipeContext } from '@chakra-ui/react';
+export const { useStyles: usePersonaStyles, useRecipeResult, usePropsContext, withProvider, withContext, ClassNamesProvider, PropsProvider, StylesProvider, } = createSlotRecipeContext({
+    key: 'suiPersona',
+});

package/dist/components/persona/persona.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
+import type { PersonaVariantProps } from '@saas-ui/chakra-preset/slot-recipes/persona';
+import { type AvatarProps } from '../avatar/avatar.tsx';
+import type { PersonaPresence } from './presence.ts';
+interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    outOfOffice?: boolean;
+    /**
+     * The presence status of the person
+     */
+    presence?: PersonaPresence;
+}
+/**
+ * The root component that provides context and styles.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaAvatarOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+}
+interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+    getInitials?: (name?: string | null) => string | null;
+}
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
+}
+declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
+}
+/**
+ * Wrapper component for the labels.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
+interface PersonaLabelProps extends HTMLChakraProps<'span'> {
+}
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The secondary label, usually the role of a person.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/persona
+ */
+declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
+export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };