@choco-vanille/ui 1.1.2 → 1.3.0

package/dist/components/feedback/empty-state/EmptyState.js

@@ -0,0 +1,64 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import m from "../../layout/flex/Flex.js";
+import "../../layout/flex/styles/Flex.css.js";
+import i from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import { EMPTY_STATE_STYLES as t } from "./styles/EmptyState.css.js";
+import { cn as p } from "../../../utils/cn.js";
+import { memo as f } from "react";
+const d = f(({
+  title: a,
+  description: n,
+  action: e,
+  className: l,
+  ref: s,
+  ...c
+}) => /* @__PURE__ */ r(
+  m,
+  {
+    ref: s,
+    flexDirection: "column",
+    gap: "sm",
+    className: p(t.root, l),
+    ...c,
+    children: [
+      /* @__PURE__ */ r(
+        m,
+        {
+          flexDirection: "column",
+          gap: "xs",
+          alignItems: "center",
+          className: t.content,
+          children: [
+            /* @__PURE__ */ o(
+              i,
+              {
+                as: "h2",
+                variant: "h2",
+                fontSize: "xl",
+                fontWeight: "semibold",
+                children: a
+              }
+            ),
+            /* @__PURE__ */ o(
+              i,
+              {
+                as: "p",
+                variant: "p",
+                fontSize: "sm",
+                color: "textSecondary",
+                children: n
+              }
+            )
+          ]
+        }
+      ),
+      e && /* @__PURE__ */ o("div", { className: t.action, children: e })
+    ]
+  }
+));
+d.displayName = "EmptyState";
+export {
+  d as default
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/feedback/empty-state/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sources":["../../../../src/components/feedback/empty-state/EmptyState.tsx"],"sourcesContent":["import { Flex } from '@components/layout/flex'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { EMPTY_STATE_STYLES } from '@components/feedback/empty-state/styles/EmptyState.css.ts'\r\nimport type { EmptyStateProps } from '@components/feedback/empty-state/types/EmptyState.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst EmptyState: FC<EmptyStateProps> = memo(({\r\n    title,\r\n    description,\r\n    action,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => (\r\n    <Flex\r\n        ref={ref}\r\n        flexDirection={'column'}\r\n        gap={'sm'}\r\n        className={cn(EMPTY_STATE_STYLES.root, className)}\r\n        {...props}\r\n    >\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            alignItems={'center'}\r\n            className={EMPTY_STATE_STYLES.content}\r\n        >\r\n            <Typography\r\n                as={'h2'}\r\n                variant={'h2'}\r\n                fontSize={'xl'}\r\n                fontWeight={'semibold'}\r\n            >\r\n                {title}\r\n            </Typography>\r\n            <Typography\r\n                as={'p'}\r\n                variant={'p'}\r\n                fontSize={'sm'}\r\n                color={'textSecondary'}\r\n            >\r\n                {description}\r\n            </Typography>\r\n        </Flex>\r\n        {action && (\r\n            <div className={EMPTY_STATE_STYLES.action}>\r\n                {action}\r\n            </div>\r\n        )}\r\n    </Flex>\r\n))\r\n\r\nEmptyState.displayName = 'EmptyState'\r\n\r\nexport default EmptyState\r\n"],"names":["EmptyState","memo","title","description","action","className","ref","props","jsxs","Flex","cn","EMPTY_STATE_STYLES","jsx","Typography"],"mappings":";;;;;;;;AAOA,MAAMA,IAAkCC,EAAK,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,KAAAH;AAAA,IACA,eAAe;AAAA,IACf,KAAK;AAAA,IACL,WAAWI,EAAGC,EAAmB,MAAMN,CAAS;AAAA,IAC/C,GAAGE;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,eAAe;AAAA,UACf,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,WAAWE,EAAmB;AAAA,UAE9B,UAAA;AAAA,YAAA,gBAAAC;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,YAAY;AAAA,gBAEX,UAAAX;AAAA,cAAA;AAAA,YAAA;AAAA,YAEL,gBAAAU;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,OAAO;AAAA,gBAEN,UAAAV;AAAA,cAAA;AAAA,YAAA;AAAA,UACL;AAAA,QAAA;AAAA,MAAA;AAAA,MAEHC,KACG,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAmB,QAC9B,UAAAP,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAER,CACH;AAEDJ,EAAW,cAAc;"}

package/dist/components/feedback/empty-state/index.d.ts

@@ -0,0 +1,3 @@
+export { default as EmptyState } from './EmptyState.tsx';
+export { EMPTY_STATE_STYLES } from './styles/EmptyState.css.ts';
+export type { EmptyStateProps } from './types';

package/dist/components/feedback/empty-state/styles/EmptyState.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                */var e={root:"_16isg9l0",content:"_16isg9l1",action:"_16isg9l2"};exports.EMPTY_STATE_STYLES=e;
+//# sourceMappingURL=EmptyState.css.cjs.map

package/dist/components/feedback/empty-state/styles/EmptyState.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/feedback/empty-state/styles/EmptyState.css.d.ts

@@ -0,0 +1,5 @@
+export declare const EMPTY_STATE_STYLES: {
+    root: string;
+    content: string;
+    action: string;
+};

package/dist/components/feedback/empty-state/styles/EmptyState.css.js

@@ -0,0 +1,7 @@
+/* empty css                                            */
+/* empty css                              */
+var i = { root: "_16isg9l0", content: "_16isg9l1", action: "_16isg9l2" };
+export {
+  i as EMPTY_STATE_STYLES
+};
+//# sourceMappingURL=EmptyState.css.js.map

package/dist/components/feedback/empty-state/styles/EmptyState.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/feedback/empty-state/types/EmptyState.props.d.ts

@@ -0,0 +1,10 @@
+import type * as React from 'react';
+/** Props for an empty result state displayed in a list or table. */
+export type EmptyStateProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & React.RefAttributes<HTMLDivElement> & {
+    /** Heading displayed for the empty state. */
+    title: React.ReactNode;
+    /** Supporting explanation displayed below the heading. */
+    description: React.ReactNode;
+    /** Optional action, such as a Button or Link. */
+    action?: React.ReactNode;
+};

package/dist/components/feedback/empty-state/types/index.d.ts

@@ -0,0 +1 @@
+export type { EmptyStateProps } from './EmptyState.props.ts';

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

@@ -2,3 +2,5 @@ export * from './skeleton';
 export * from './callout';
 export * from './toast';
 export * from './progress';
+export * from './empty-state';
+export * from './spinner';

package/dist/components/feedback/progress/CircularProgress.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime");require("./constants/progressColors.const.cjs");const m=require("./constants/progressSizes.const.cjs"),o=require("./styles/Progress.css.cjs"),l=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const p=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const u=require("../../../utils/cn.cjs"),j=require("react"),E=a=>Math.min(100,Math.max(0,a)),g=j.memo(({value:a,color:x,size:r="sm",label:n,quantityLabel:S,className:h,ref:f,...y})=>{const t=E(a),c=S===!0?`${Math.round(t)}%`:S,R=c??`${t}%`,s=m.PROGRESS_SIZE_TO_CIRCULAR_SIZE[r],v=m.PROGRESS_SIZE_TO_STROKE_WIDTH[r],i=(s-v)/2,d=2*Math.PI*i,_=d*(1-t/100);return e.jsxs(l,{ref:f,display:"inline-flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"xs",className:h,...y,children:[e.jsxs(l,{as:"div",position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",children:[e.jsxs("svg",{role:"progressbar","aria-valuenow":t,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":R,"aria-label":n,viewBox:`0 0 ${s} ${s}`,className:u.cn(o.PROGRESS_STYLES.circular({size:r})),children:[e.jsx("circle",{"data-progress-track":!0,cx:s/2,cy:s/2,r:i,className:u.cn(o.PROGRESS_STYLES.circularTrack({size:r,color:x}))}),e.jsx("circle",{"data-progress-indicator":!0,cx:s/2,cy:s/2,r:i,className:u.cn(o.PROGRESS_STYLES.circularIndicator({size:r,color:x})),style:{strokeDasharray:d,strokeDashoffset:_}})]}),c&&e.jsx(l,{as:"div",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",style:{inset:0},children:e.jsx(p,{as:"span",variant:"span",fontSize:r==="sm"?"xs":r==="lg"?"lg":"sm",fontWeight:"semibold",color:"text",children:c})})]}),n&&e.jsx(p,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:n})]})});g.displayName="CircularProgress";module.exports=g;
+"use strict";const e=require("react/jsx-runtime");require("./constants/progressColors.const.cjs");const S=require("./constants/progressSizes.const.cjs"),i=require("./styles/Progress.css.cjs"),o=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const m=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const l=require("../../../utils/cn.cjs"),q=require("react"),I=require("./utils/clamp.utils.cjs"),p=q.memo(({value:g,color:u,size:r="sm",label:t,"aria-label":y,"aria-labelledby":f,quantityLabel:d,className:h,ref:v,...R})=>{const a=I.clamp(g),c=d===!0?`${Math.round(a)}%`:d,_=c??`${a}%`,s=S.PROGRESS_SIZE_TO_CIRCULAR_SIZE[r],j=S.PROGRESS_SIZE_TO_STROKE_WIDTH[r],n=(s-j)/2,x=2*Math.PI*n,E=x*(1-a/100);return e.jsxs(o,{ref:v,display:"inline-flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"xs",className:h,...R,children:[e.jsxs(o,{as:"div",position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",children:[e.jsxs("svg",{role:"progressbar","aria-valuenow":a,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":_,"aria-label":t??y,"aria-labelledby":f,viewBox:`0 0 ${s} ${s}`,className:l.cn(i.PROGRESS_STYLES.circular({size:r})),children:[e.jsx("circle",{"data-progress-track":!0,cx:s/2,cy:s/2,r:n,className:l.cn(i.PROGRESS_STYLES.circularTrack({size:r,color:u}))}),e.jsx("circle",{"data-progress-indicator":!0,cx:s/2,cy:s/2,r:n,className:l.cn(i.PROGRESS_STYLES.circularIndicator({size:r,color:u})),style:{strokeDasharray:x,strokeDashoffset:E}})]}),c&&e.jsx(o,{as:"div",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",style:{inset:0},children:e.jsx(m,{as:"span",variant:"span",fontSize:r==="sm"?"xs":r==="lg"?"lg":"sm",fontWeight:"semibold",color:"text",children:c})})]}),t&&e.jsx(m,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:t})]})});p.displayName="CircularProgress";module.exports=p;
 //# sourceMappingURL=CircularProgress.cjs.map

package/dist/components/feedback/progress/CircularProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.cjs","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["clamp","value","CircularProgress","memo","color","size","label","quantityLabel","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":"gdAWMA,EAASC,GAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGA,CAAK,CAAC,EAE3DC,EAA0CC,EAAAA,KAAK,CAAC,CAClD,MAAAF,EACA,MAAAG,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,cAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeX,EAAMC,CAAK,EAC1BW,EACNL,IAAkB,GAAO,GAAG,KAAK,MAAMI,CAAY,CAAC,IAAMJ,EACpDM,EAAYD,GAAyB,GAAGD,CAAY,IAEpDG,EAAUC,EAAAA,+BAA+BV,CAAI,EAC7CW,EAAcC,EAAAA,8BAA8BZ,CAAI,EAChDa,GAAUJ,EAAUE,GAAe,EACnCG,EAAgB,EAAI,KAAK,GAAKD,EAC9BE,EAAaD,GAAiB,EAAIR,EAAe,KAEvD,OACIU,EAAAA,KAACC,EAAA,CACG,IAAAb,EACA,QAAS,cACT,cAAe,SACf,WAAY,SACZ,eAAgB,SAChB,IAAK,KACL,UAAAD,EACC,GAAGE,EAEJ,SAAA,CAAAW,EAAAA,KAACC,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,cACT,WAAY,SACZ,eAAgB,SAEhB,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACG,KAAM,cACN,gBAAeV,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBE,EAChB,aAAYP,EACZ,QAAS,OAAOQ,CAAO,IAAIA,CAAO,GAClC,UAAWS,EAAAA,GAAGC,EAAAA,gBAAgB,SAAS,CAAE,KAAAnB,CAAA,CAAM,CAAC,EAEhD,SAAA,CAAAoB,EAAAA,IAAC,SAAA,CACG,sBAAmB,GACnB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,EAAAA,gBAAgB,cAAc,CAAE,KAAAnB,EAAM,MAAAD,EAAO,CAAC,CAAA,CAAA,EAEhEqB,EAAAA,IAAC,SAAA,CACG,0BAAuB,GACvB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,kBAAgB,kBAAkB,CAAE,KAAAnB,EAAM,MAAAD,CAAA,CAAO,CAAC,EAChE,MAAO,CACH,gBAAiBe,EACjB,iBAAkBC,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,EAEHR,GACGa,EAAAA,IAACH,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,CAAE,MAAO,CAAA,EAEhB,SAAAG,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAUrB,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KACxD,WAAY,WACZ,MAAO,OAEN,SAAAO,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,EAGPN,GACGmB,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAApB,CAAA,CAAA,CACL,CAAA,CAAA,CAIhB,CAAC,EAEDJ,EAAiB,YAAc"}
+{"version":3,"file":"CircularProgress.cjs","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport { clamp } from '@components/feedback/progress/utils/clamp.utils.ts'\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label ?? ariaLabel}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["CircularProgress","memo","value","color","size","label","ariaLabel","ariaLabelledBy","quantityLabel","className","ref","props","clampedValue","clamp","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":"qfAYMA,EAA0CC,EAAAA,KAA0B,CAAC,CACvE,MAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,cAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeC,EAAAA,MAAMX,CAAK,EAC1BY,EACNN,IAAkB,GAAO,GAAG,KAAK,MAAMI,CAAY,CAAC,IAAMJ,EACpDO,EAAYD,GAAyB,GAAGF,CAAY,IAEpDI,EAAUC,EAAAA,+BAA+Bb,CAAI,EAC7Cc,EAAcC,EAAAA,8BAA8Bf,CAAI,EAChDgB,GAAUJ,EAAUE,GAAe,EACnCG,EAAgB,EAAI,KAAK,GAAKD,EAC9BE,EAAaD,GAAiB,EAAIT,EAAe,KAEvD,OACIW,EAAAA,KAACC,EAAA,CACG,IAAAd,EACA,QAAS,cACT,cAAe,SACf,WAAY,SACZ,eAAgB,SAChB,IAAK,KACL,UAAAD,EACC,GAAGE,EAEJ,SAAA,CAAAY,EAAAA,KAACC,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,cACT,WAAY,SACZ,eAAgB,SAEhB,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACG,KAAM,cACN,gBAAeX,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBG,EAChB,aAAYV,GAASC,EACrB,kBAAiBC,EACjB,QAAS,OAAOS,CAAO,IAAIA,CAAO,GAClC,UAAWS,EAAAA,GAAGC,EAAAA,gBAAgB,SAAS,CAAE,KAAAtB,CAAA,CAAM,CAAC,EAEhD,SAAA,CAAAuB,EAAAA,IAAC,SAAA,CACG,sBAAmB,GACnB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,EAAAA,gBAAgB,cAAc,CAAE,KAAAtB,EAAM,MAAAD,EAAO,CAAC,CAAA,CAAA,EAEhEwB,EAAAA,IAAC,SAAA,CACG,0BAAuB,GACvB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,kBAAgB,kBAAkB,CAAE,KAAAtB,EAAM,MAAAD,CAAA,CAAO,CAAC,EAChE,MAAO,CACH,gBAAiBkB,EACjB,iBAAkBC,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,EAEHR,GACGa,EAAAA,IAACH,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,CAAE,MAAO,CAAA,EAEhB,SAAAG,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAUxB,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KACxD,WAAY,WACZ,MAAO,OAEN,SAAAU,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,EAGPT,GACGsB,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAAvB,CAAA,CAAA,CACL,CAAA,CAAA,CAIhB,CAAC,EAEDL,EAAiB,YAAc"}

package/dist/components/feedback/progress/CircularProgress.js

@@ -1,38 +1,41 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import "./constants/progressColors.const.js";
-import { PROGRESS_SIZE_TO_CIRCULAR_SIZE as R, PROGRESS_SIZE_TO_STROKE_WIDTH as _ } from "./constants/progressSizes.const.js";
+import { PROGRESS_SIZE_TO_CIRCULAR_SIZE as E, PROGRESS_SIZE_TO_STROKE_WIDTH as T } from "./constants/progressSizes.const.js";
 import { PROGRESS_STYLES as l } from "./styles/Progress.css.js";
-import m from "../../layout/box/Box.js";
+import c from "../../layout/box/Box.js";
 import "../../layout/box/styles/Box.css.js";
-import x from "../../foundation/typography/Typography.js";
+import u from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
-import { cn as p } from "../../../utils/cn.js";
-import { memo as E } from "react";
-const T = (s) => Math.min(100, Math.max(0, s)), C = E(({
-  value: s,
-  color: d,
+import { cn as m } from "../../../utils/cn.js";
+import { memo as b } from "react";
+import { clamp as C } from "./utils/clamp.utils.js";
+const O = b(({
+  value: x,
+  color: p,
   size: r = "sm",
-  label: o,
-  quantityLabel: u,
-  className: h,
-  ref: S,
-  ...g
+  label: s,
+  "aria-label": y,
+  "aria-labelledby": S,
+  quantityLabel: d,
+  className: g,
+  ref: h,
+  ...v
 }) => {
-  const a = T(s), i = u === !0 ? `${Math.round(a)}%` : u, y = i ?? `${a}%`, t = R[r], v = _[r], n = (t - v) / 2, f = 2 * Math.PI * n, I = f * (1 - a / 100);
-  return /* @__PURE__ */ c(
-    m,
+  const t = C(x), i = d === !0 ? `${Math.round(t)}%` : d, I = i ?? `${t}%`, a = E[r], R = T[r], o = (a - R) / 2, f = 2 * Math.PI * o, _ = f * (1 - t / 100);
+  return /* @__PURE__ */ n(
+    c,
     {
-      ref: S,
+      ref: h,
       display: "inline-flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
       gap: "xs",
-      className: h,
-      ...g,
+      className: g,
+      ...v,
       children: [
-        /* @__PURE__ */ c(
-          m,
+        /* @__PURE__ */ n(
+          c,
           {
             as: "div",
             position: "relative",
@@ -40,39 +43,40 @@ const T = (s) => Math.min(100, Math.max(0, s)), C = E(({
             alignItems: "center",
             justifyContent: "center",
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ n(
                 "svg",
                 {
                   role: "progressbar",
-                  "aria-valuenow": a,
+                  "aria-valuenow": t,
                   "aria-valuemin": 0,
                   "aria-valuemax": 100,
-                  "aria-valuetext": y,
-                  "aria-label": o,
-                  viewBox: `0 0 ${t} ${t}`,
-                  className: p(l.circular({ size: r })),
+                  "aria-valuetext": I,
+                  "aria-label": s ?? y,
+                  "aria-labelledby": S,
+                  viewBox: `0 0 ${a} ${a}`,
+                  className: m(l.circular({ size: r })),
                   children: [
                     /* @__PURE__ */ e(
                       "circle",
                       {
                         "data-progress-track": !0,
-                        cx: t / 2,
-                        cy: t / 2,
-                        r: n,
-                        className: p(l.circularTrack({ size: r, color: d }))
+                        cx: a / 2,
+                        cy: a / 2,
+                        r: o,
+                        className: m(l.circularTrack({ size: r, color: p }))
                       }
                     ),
                     /* @__PURE__ */ e(
                       "circle",
                       {
                         "data-progress-indicator": !0,
-                        cx: t / 2,
-                        cy: t / 2,
-                        r: n,
-                        className: p(l.circularIndicator({ size: r, color: d })),
+                        cx: a / 2,
+                        cy: a / 2,
+                        r: o,
+                        className: m(l.circularIndicator({ size: r, color: p })),
                         style: {
                           strokeDasharray: f,
-                          strokeDashoffset: I
+                          strokeDashoffset: _
                         }
                       }
                     )
@@ -80,7 +84,7 @@ const T = (s) => Math.min(100, Math.max(0, s)), C = E(({
                 }
               ),
               i && /* @__PURE__ */ e(
-                m,
+                c,
                 {
                   as: "div",
                   position: "absolute",
@@ -89,7 +93,7 @@ const T = (s) => Math.min(100, Math.max(0, s)), C = E(({
                   justifyContent: "center",
                   style: { inset: 0 },
                   children: /* @__PURE__ */ e(
-                    x,
+                    u,
                     {
                       as: "span",
                       variant: "span",
@@ -104,22 +108,22 @@ const T = (s) => Math.min(100, Math.max(0, s)), C = E(({
             ]
           }
         ),
-        o && /* @__PURE__ */ e(
-          x,
+        s && /* @__PURE__ */ e(
+          u,
           {
             as: "span",
             variant: "span",
             fontSize: "sm",
             color: "textSecondary",
-            children: o
+            children: s
           }
         )
       ]
     }
   );
 });
-C.displayName = "CircularProgress";
+O.displayName = "CircularProgress";
 export {
-  C as default
+  O as default
 };
 //# sourceMappingURL=CircularProgress.js.map

package/dist/components/feedback/progress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["clamp","value","CircularProgress","memo","color","size","label","quantityLabel","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":"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"}
+{"version":3,"file":"CircularProgress.js","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport { clamp } from '@components/feedback/progress/utils/clamp.utils.ts'\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label ?? ariaLabel}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["CircularProgress","memo","value","color","size","label","ariaLabel","ariaLabelledBy","quantityLabel","className","ref","props","clampedValue","clamp","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA0CC,EAA0B,CAAC;AAAA,EACvE,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAeC,EAAMX,CAAK,GAC1BY,IACNN,MAAkB,KAAO,GAAG,KAAK,MAAMI,CAAY,CAAC,MAAMJ,GACpDO,IAAYD,KAAyB,GAAGF,CAAY,KAEpDI,IAAUC,EAA+Bb,CAAI,GAC7Cc,IAAcC,EAA8Bf,CAAI,GAChDgB,KAAUJ,IAAUE,KAAe,GACnCG,IAAgB,IAAI,KAAK,KAAKD,GAC9BE,IAAaD,KAAiB,IAAIT,IAAe;AAEvD,SACI,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAd;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK;AAAA,MACL,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAEhB,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAM;AAAA,kBACN,iBAAeX;AAAA,kBACf,iBAAe;AAAA,kBACf,iBAAe;AAAA,kBACf,kBAAgBG;AAAA,kBAChB,cAAYV,KAASC;AAAA,kBACrB,mBAAiBC;AAAA,kBACjB,SAAS,OAAOS,CAAO,IAAIA,CAAO;AAAA,kBAClC,WAAWS,EAAGC,EAAgB,SAAS,EAAE,MAAAtB,EAAA,CAAM,CAAC;AAAA,kBAEhD,UAAA;AAAA,oBAAA,gBAAAuB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,uBAAmB;AAAA,wBACnB,IAAIX,IAAU;AAAA,wBACd,IAAIA,IAAU;AAAA,wBACd,GAAGI;AAAA,wBACH,WAAWK,EAAGC,EAAgB,cAAc,EAAE,MAAAtB,GAAM,OAAAD,GAAO,CAAC;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEhE,gBAAAwB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,2BAAuB;AAAA,wBACvB,IAAIX,IAAU;AAAA,wBACd,IAAIA,IAAU;AAAA,wBACd,GAAGI;AAAA,wBACH,WAAWK,EAAGC,EAAgB,kBAAkB,EAAE,MAAAtB,GAAM,OAAAD,EAAA,CAAO,CAAC;AAAA,wBAChE,OAAO;AAAA,0BACH,iBAAiBkB;AAAA,0BACjB,kBAAkBC;AAAA,wBAAA;AAAA,sBACtB;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEHR,KACG,gBAAAa;AAAA,gBAACH;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,EAAE,OAAO,EAAA;AAAA,kBAEhB,UAAA,gBAAAG;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACG,IAAI;AAAA,sBACJ,SAAS;AAAA,sBACT,UAAUxB,MAAS,OAAO,OAAOA,MAAS,OAAO,OAAO;AAAA,sBACxD,YAAY;AAAA,sBACZ,OAAO;AAAA,sBAEN,UAAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACL;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGPT,KACG,gBAAAsB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YAEN,UAAAvB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDL,EAAiB,cAAc;"}

package/dist/components/feedback/progress/Progress.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("./styles/Progress.css.cjs"),t=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const u=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const m=require("../../../utils/cn.cjs"),f=require("react"),j=n=>Math.min(100,Math.max(0,n)),x=f.memo(({value:n,color:i,size:p="sm",borderRadius:c="sm",label:s,quantityLabel:o,width:d="100%",className:S,ref:h,...g})=>{const r=j(n),a=o===!0?`${Math.round(r)}%`:o,v=a??`${r}%`;return e.jsxs(t,{ref:h,display:"flex",flexDirection:"column",gap:"xs",width:d,className:S,...g,children:[(s||a)&&e.jsxs(t,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:"sm",children:[s&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:s}),a&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",fontWeight:"medium",color:"textSecondary",children:a})]}),e.jsx(t,{as:"div",role:"progressbar","aria-valuenow":r,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":v,"aria-label":s,className:m.cn(l.PROGRESS_STYLES.recipe({size:p,borderRadius:c,color:i})),children:e.jsx(t,{as:"div","data-progress-fill":!0,width:`${r}%`,className:m.cn(l.PROGRESS_STYLES.fill({borderRadius:c,color:i}))})})]})});x.displayName="Progress";module.exports=x;
+"use strict";const e=require("react/jsx-runtime"),o=require("./styles/Progress.css.cjs"),t=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const u=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const m=require("../../../utils/cn.cjs"),j=require("react"),q=i=>Math.min(100,Math.max(0,i)),x=j.memo(({value:i,color:n,size:d="sm",borderRadius:c="sm",label:a,"aria-label":p,"aria-labelledby":S,quantityLabel:l,width:h="100%",className:g,ref:v,...y})=>{const s=q(i),r=l===!0?`${Math.round(s)}%`:l,f=r??`${s}%`;return e.jsxs(t,{ref:v,display:"flex",flexDirection:"column",gap:"xs",width:h,className:g,...y,children:[(a||r)&&e.jsxs(t,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:"sm",children:[a&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:a}),r&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",fontWeight:"medium",color:"textSecondary",children:r})]}),e.jsx(t,{as:"div",role:"progressbar","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":f,"aria-label":a??p,"aria-labelledby":S,className:m.cn(o.PROGRESS_STYLES.recipe({size:d,borderRadius:c,color:n})),children:e.jsx(t,{as:"div","data-progress-fill":!0,width:`${s}%`,className:m.cn(o.PROGRESS_STYLES.fill({borderRadius:c,color:n}))})})]})});x.displayName="Progress";module.exports=x;
 //# sourceMappingURL=Progress.cjs.map

package/dist/components/feedback/progress/Progress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.cjs","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":"yWAOMA,EAASC,GAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGA,CAAK,CAAC,EAE3DC,EAAkCC,EAAAA,KAAK,CAAC,CAC1C,MAAAF,EACA,MAAAG,EACA,KAAAC,EAAO,KACP,aAAAC,EAAe,KACf,MAAAC,EACA,cAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeb,EAAMC,CAAK,EAC1Ba,EACNN,IAAkB,GAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,IAAML,EACpDO,EAAYD,GAAyB,GAAGD,CAAY,IAE1D,OACIG,EAAAA,KAACC,EAAA,CACG,IAAAN,EACA,QAAS,OACT,cAAe,SACf,IAAK,KACL,MAAAF,EACA,UAAAC,EACC,GAAGE,EAEF,SAAA,EAAAL,GAASO,IACPE,EAAAA,KAACC,EAAA,CACG,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,IAAK,KAEJ,SAAA,CAAAV,GACGW,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAAZ,CAAA,CAAA,EAGRO,GACGI,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,WAAY,SACZ,MAAO,gBAEN,SAAAL,CAAA,CAAA,CACL,CAAA,CAAA,EAIZI,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,KAAM,cACN,gBAAeJ,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBE,EAChB,aAAYR,EACZ,UAAWa,EAAAA,GAAGC,EAAAA,gBAAgB,OAAO,CAAE,KAAAhB,EAAM,aAAAC,EAAc,MAAAF,CAAA,CAAO,CAAC,EAEnE,SAAAc,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,qBAAkB,GAClB,MAAO,GAAGJ,CAAY,IACtB,UAAWO,EAAAA,GAAGC,EAAAA,gBAAgB,KAAK,CAAE,aAAAf,EAAc,MAAAF,EAAO,CAAC,CAAA,CAAA,CAC/D,CAAA,CACJ,CAAA,CAAA,CAGZ,CAAC,EAEDF,EAAS,YAAc"}
+{"version":3,"file":"Progress.cjs","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label ?? ariaLabel}\r\n                aria-labelledby={ariaLabelledBy}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","ariaLabel","ariaLabelledBy","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":"yWAOMA,EAASC,GAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGA,CAAK,CAAC,EAE3DC,EAAkCC,EAAAA,KAA0B,CAAC,CAC/D,MAAAF,EACA,MAAAG,EACA,KAAAC,EAAO,KACP,aAAAC,EAAe,KACf,MAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,cAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAef,EAAMC,CAAK,EAC1Be,EACNN,IAAkB,GAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,IAAML,EACpDO,EAAYD,GAAyB,GAAGD,CAAY,IAE1D,OACIG,EAAAA,KAACC,EAAA,CACG,IAAAN,EACA,QAAS,OACT,cAAe,SACf,IAAK,KACL,MAAAF,EACA,UAAAC,EACC,GAAGE,EAEF,SAAA,EAAAP,GAASS,IACPE,EAAAA,KAACC,EAAA,CACG,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,IAAK,KAEJ,SAAA,CAAAZ,GACGa,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAAd,CAAA,CAAA,EAGRS,GACGI,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,WAAY,SACZ,MAAO,gBAEN,SAAAL,CAAA,CAAA,CACL,CAAA,CAAA,EAIZI,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,KAAM,cACN,gBAAeJ,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBE,EAChB,aAAYV,GAASC,EACrB,kBAAiBC,EACjB,UAAWa,EAAAA,GAAGC,EAAAA,gBAAgB,OAAO,CAAE,KAAAlB,EAAM,aAAAC,EAAc,MAAAF,CAAA,CAAO,CAAC,EAEnE,SAAAgB,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,qBAAkB,GAClB,MAAO,GAAGJ,CAAY,IACtB,UAAWO,EAAAA,GAAGC,EAAAA,gBAAgB,KAAK,CAAE,aAAAjB,EAAc,MAAAF,EAAO,CAAC,CAAA,CAAA,CAC/D,CAAA,CACJ,CAAA,CAAA,CAGZ,CAAC,EAEDF,EAAS,YAAc"}

package/dist/components/feedback/progress/Progress.js

@@ -1,37 +1,39 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { PROGRESS_STYLES as p } from "./styles/Progress.css.js";
-import s from "../../layout/box/Box.js";
+import i from "../../layout/box/Box.js";
 import "../../layout/box/styles/Box.css.js";
 import c from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
 import { cn as d } from "../../../utils/cn.js";
-import { memo as y } from "react";
-const S = (o) => Math.min(100, Math.max(0, o)), j = y(({
-  value: o,
-  color: i,
+import { memo as b } from "react";
+const j = (s) => Math.min(100, Math.max(0, s)), w = b(({
+  value: s,
+  color: o,
   size: f = "sm",
-  borderRadius: m = "sm",
+  borderRadius: l = "sm",
   label: a,
-  quantityLabel: n,
-  width: x = "100%",
-  className: u,
-  ref: h,
-  ...v
+  "aria-label": x,
+  "aria-labelledby": u,
+  quantityLabel: m,
+  width: h = "100%",
+  className: v,
+  ref: y,
+  ...g
 }) => {
-  const e = S(o), r = n === !0 ? `${Math.round(e)}%` : n, g = r ?? `${e}%`;
-  return /* @__PURE__ */ l(
-    s,
+  const e = j(s), r = m === !0 ? `${Math.round(e)}%` : m, S = r ?? `${e}%`;
+  return /* @__PURE__ */ n(
+    i,
     {
-      ref: h,
+      ref: y,
       display: "flex",
       flexDirection: "column",
       gap: "xs",
-      width: x,
-      className: u,
-      ...v,
+      width: h,
+      className: v,
+      ...g,
       children: [
-        (a || r) && /* @__PURE__ */ l(
-          s,
+        (a || r) && /* @__PURE__ */ n(
+          i,
           {
             display: "flex",
             justifyContent: "space-between",
@@ -63,23 +65,24 @@ const S = (o) => Math.min(100, Math.max(0, o)), j = y(({
           }
         ),
         /* @__PURE__ */ t(
-          s,
+          i,
           {
             as: "div",
             role: "progressbar",
             "aria-valuenow": e,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
-            "aria-valuetext": g,
-            "aria-label": a,
-            className: d(p.recipe({ size: f, borderRadius: m, color: i })),
+            "aria-valuetext": S,
+            "aria-label": a ?? x,
+            "aria-labelledby": u,
+            className: d(p.recipe({ size: f, borderRadius: l, color: o })),
             children: /* @__PURE__ */ t(
-              s,
+              i,
               {
                 as: "div",
                 "data-progress-fill": !0,
                 width: `${e}%`,
-                className: d(p.fill({ borderRadius: m, color: i }))
+                className: d(p.fill({ borderRadius: l, color: o }))
               }
             )
           }
@@ -88,8 +91,8 @@ const S = (o) => Math.min(100, Math.max(0, o)), j = y(({
     }
   );
 });
-j.displayName = "Progress";
+w.displayName = "Progress";
 export {
-  j as default
+  w as default
 };
 //# sourceMappingURL=Progress.js.map

package/dist/components/feedback/progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":";;;;;;;;AAOA,MAAMA,IAAQ,CAACC,MAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAK,CAAC,GAE3DC,IAAkCC,EAAK,CAAC;AAAA,EAC1C,OAAAF;AAAA,EACA,OAAAG;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAeb,EAAMC,CAAK,GAC1Ba,IACNN,MAAkB,KAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,MAAML,GACpDO,IAAYD,KAAyB,GAAGD,CAAY;AAE1D,SACI,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAAF;AAAA,MACA,WAAAC;AAAA,MACC,GAAGE;AAAA,MAEF,UAAA;AAAA,SAAAL,KAASO,MACP,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAAV,KACG,gBAAAW;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,OAAO;AAAA,kBAEN,UAAAZ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGRO,KACG,gBAAAI;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO;AAAA,kBAEN,UAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QAAA;AAAA,QAIZ,gBAAAI;AAAA,UAACD;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,MAAM;AAAA,YACN,iBAAeJ;AAAA,YACf,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,kBAAgBE;AAAA,YAChB,cAAYR;AAAA,YACZ,WAAWa,EAAGC,EAAgB,OAAO,EAAE,MAAAhB,GAAM,cAAAC,GAAc,OAAAF,EAAA,CAAO,CAAC;AAAA,YAEnE,UAAA,gBAAAc;AAAA,cAACD;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,sBAAkB;AAAA,gBAClB,OAAO,GAAGJ,CAAY;AAAA,gBACtB,WAAWO,EAAGC,EAAgB,KAAK,EAAE,cAAAf,GAAc,OAAAF,GAAO,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/D;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAEDF,EAAS,cAAc;"}
+{"version":3,"file":"Progress.js","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label ?? ariaLabel}\r\n                aria-labelledby={ariaLabelledBy}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","ariaLabel","ariaLabelledBy","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":";;;;;;;;AAOA,MAAMA,IAAQ,CAACC,MAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAK,CAAC,GAE3DC,IAAkCC,EAA0B,CAAC;AAAA,EAC/D,OAAAF;AAAA,EACA,OAAAG;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAef,EAAMC,CAAK,GAC1Be,IACNN,MAAkB,KAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,MAAML,GACpDO,IAAYD,KAAyB,GAAGD,CAAY;AAE1D,SACI,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAAF;AAAA,MACA,WAAAC;AAAA,MACC,GAAGE;AAAA,MAEF,UAAA;AAAA,SAAAP,KAASS,MACP,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAAZ,KACG,gBAAAa;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,OAAO;AAAA,kBAEN,UAAAd;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGRS,KACG,gBAAAI;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO;AAAA,kBAEN,UAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QAAA;AAAA,QAIZ,gBAAAI;AAAA,UAACD;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,MAAM;AAAA,YACN,iBAAeJ;AAAA,YACf,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,kBAAgBE;AAAA,YAChB,cAAYV,KAASC;AAAA,YACrB,mBAAiBC;AAAA,YACjB,WAAWa,EAAGC,EAAgB,OAAO,EAAE,MAAAlB,GAAM,cAAAC,GAAc,OAAAF,EAAA,CAAO,CAAC;AAAA,YAEnE,UAAA,gBAAAgB;AAAA,cAACD;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,sBAAkB;AAAA,gBAClB,OAAO,GAAGJ,CAAY;AAAA,gBACtB,WAAWO,EAAGC,EAAgB,KAAK,EAAE,cAAAjB,GAAc,OAAAF,GAAO,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/D;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAEDF,EAAS,cAAc;"}

package/dist/components/feedback/progress/types/Progress.props.d.ts

@@ -1,7 +1,14 @@
 import { BoxProps } from '../../../layout/box';
 import { ProgressBorderRadius, ProgressColor, ProgressSize } from './Progress.types.ts';
 import type * as React from 'react';
-export type ProgressBaseProps = Omit<BoxProps, 'as' | 'children' | 'ref'> & {
+type ProgressAccessibleName = {
+    label: string;
+} | {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+export type ProgressBaseProps = Omit<BoxProps, 'as' | 'children' | 'ref' | 'aria-label' | 'aria-labelledby'> & {
     /** Ref forwarded to the outermost element. */
     ref?: React.Ref<HTMLDivElement>;
     /** Current progress value between 0 and 100. */
@@ -12,11 +19,15 @@ export type ProgressBaseProps = Omit<BoxProps, 'as' | 'children' | 'ref'> & {
     size?: ProgressSize;
     /** Border radius of the linear track. Defaults to `sm`. */
     borderRadius?: ProgressBorderRadius;
-    /** Accessible label describing what the progress represents. */
-    label?: string;
     /**
      * Text displayed alongside (linear) or inside (circular) the progress.
      * Pass `true` to render the value as a percentage, or a custom string.
      */
     quantityLabel?: string | true;
+} & ProgressAccessibleName;
+export type ProgressRenderProps = ProgressBaseProps & {
+    label?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 };
+export {};

package/dist/components/feedback/progress/utils/clamp.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=t=>Math.min(100,Math.max(0,t));exports.clamp=a;
+//# sourceMappingURL=clamp.utils.cjs.map

package/dist/components/feedback/progress/utils/clamp.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp.utils.cjs","sources":["../../../../../src/components/feedback/progress/utils/clamp.utils.ts"],"sourcesContent":["export const clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n"],"names":["clamp","value"],"mappings":"gFAAO,MAAMA,EAASC,GAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGA,CAAK,CAAC"}

package/dist/components/feedback/progress/utils/clamp.utils.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number) => number;