@dotss/ui 0.0.10 → 0.0.12

package/ChainPicker/ChainPicker.es.js

@@ -1,8 +1,10 @@
-import { jsx as f, jsxs as q } from "@emotion/react/jsx-runtime";
-import { forwardRef as A, useRef as U, useState as b, useId as B, useLayoutEffect as G, Fragment as J } from "react";
-import T from "@emotion/styled";
-import K from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-const Q = T.ul`
+import { jsx as f, jsxs as B } from "@emotion/react/jsx-runtime";
+import { forwardRef as G, useRef as C, useState as b, useId as J, useLayoutEffect as Q, Fragment as X } from "react";
+import H from "@emotion/styled";
+import Z from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import ee from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import te from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+const ie = H.div`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -12,7 +14,7 @@ const Q = T.ul`
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`, V = T.div`
+`, ne = H.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -34,7 +36,19 @@ const Q = T.ul`
     );
     pointer-events: none;
   }
-`, x = T.li`
+
+  @supports selector(:has(:focus-visible)) {
+    &:has(:focus-visible) {
+      outline: ${({ theme: a }) => a.palette.grey[100]} solid 2px;
+    }
+  }
+
+  @supports not selector(:has(:focus-visible)) {
+    ${({ focusWithin: a, theme: t }) => a ? {
+  outline: `${t.palette.grey[100]} solid 2px`
+} : {}}
+  }
+`, y = H.div`
   height: 54px;
   display: flex;
   align-items: center;
@@ -44,138 +58,169 @@ const Q = T.ul`
 
   ${({
   theme: {
-    palette: { grey: g },
-    typography: { h2M: e },
-    spacing: { content: o }
+    palette: { grey: a },
+    typography: { h2M: t },
+    spacing: { content: r }
   }
 }) => ({
-  fontSize: e.size,
-  fontWeight: e.weight,
-  lineHeight: e.lineHeight,
-  letterSpacing: e.letterSpacing,
-  color: g[100],
-  padding: o(3)
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing,
+  color: a[100],
+  padding: r(3)
 })};
 
   ${({
-  selected: g,
+  selected: a,
   theme: {
-    palette: { grey: e },
-    typography: { h4M: o }
+    palette: { grey: t },
+    typography: { h4M: r }
   }
-}) => g ? {
+}) => a ? {
   "&, & *": {
-    color: `${e[100]} !important`
+    color: `${t[100]} !important`
   }
 } : {
-  color: `${e[30]} !important`,
-  fontSize: `${o.size} !important`,
-  fontWeight: `${o.weight} !important`,
-  lineHeight: `${o.lineHeight} !important`,
-  letterSpacing: `${o.letterSpacing} !important`,
+  color: `${t[30]} !important`,
+  fontSize: `${r.size} !important`,
+  fontWeight: `${r.weight} !important`,
+  lineHeight: `${r.lineHeight} !important`,
+  letterSpacing: `${r.letterSpacing} !important`,
   "& *": {
-    color: `${e[30]} !important`
+    color: `${t[30]} !important`
   }
 }}
-`, X = 3, ie = A(function({ column: e, value: o = e[0].value, onChange: y, renderLabel: P, inlineCSS: H, wrapperProps: u, ...C }, Y) {
-  const s = U(null), r = 54, E = e.findIndex((n) => n.value === o), [h, p] = b(E * r), [$, k] = b(!1), [I, L] = b(0), [N, R] = b(0), W = B(), { isHoverPossible: z } = K(), M = (n) => {
-    k(!0), R(n), L(h);
-  }, w = (n) => {
-    if (!$)
-      return;
-    const i = N - n;
-    let t = I + i;
-    const a = r * (e.length - 1);
-    t < 0 ? t = 0 : t > a && (t = a), p(t), s.current && (s.current.children[0].scrollTop = t);
-  }, O = (n) => M(n.clientY), j = (n) => M(n.touches[0].clientY), F = (n) => w(n.clientY), _ = (n) => w(n.touches[0].clientY), S = (n) => {
-    if (!$ || (k(!1), !z && n.type === "mouseup"))
-      return;
-    if (Math.abs(I - h) < X) {
-      const d = n.target.closest("[data-index]");
+`, oe = 3, fe = G(function({
+  column: t,
+  value: r = t[0].value,
+  onChange: x,
+  renderLabel: k,
+  inlineCSS: E,
+  wrapperProps: g,
+  thumbProps: Y,
+  ...L
+}, W) {
+  const w = t.findIndex((i) => i.value === r), u = C(w), o = C(null), [h, p] = b(w * 54), [P, T] = b(!1), [$, F] = b(0), [N, R] = b(0), z = J(), { isHoverPossible: A } = ee(), { isKeyboardMode: K } = te(), { hasFocus: O } = Z({ ref: o }), D = (i) => {
+    T(!0), R(i), F(h);
+  }, I = (i) => {
+    if (!P) return;
+    const e = N - i;
+    let n = $ + e;
+    const s = 54 * (t.length - 1);
+    n < 0 ? n = 0 : n > s && (n = s), p(n), o.current && (o.current.children[0].scrollTop = n);
+  }, j = (i) => {
+    var n, s;
+    i.stopPropagation();
+    let e = u.current;
+    i.key === "ArrowUp" ? (e += 1, e > t.length - 1 && (e = 0)) : i.key === "ArrowDown" ? (e -= 1, e < 0 && (e = t.length - 1)) : i.key === "PageUp" ? (e += 5, e > t.length - 1 && (e = 0)) : i.key === "PageDown" ? (e -= 5, e < 0 && (e = t.length - 1)) : i.key === "Home" ? e = 0 : i.key === "End" && (e = t.length - 1), x(t[e].value), u.current = e, (s = (n = o.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${u.current}"]`)) == null || s.focus();
+  }, q = (i) => D(i.clientY), U = (i) => D(i.touches[0].clientY), _ = (i) => I(i.clientY), V = (i) => I(i.touches[0].clientY), m = (i) => {
+    if (!P || (T(!1), !A && i.type === "mouseup")) return;
+    if (Math.abs($ - h) < oe) {
+      const d = i.target.closest("[data-index]");
       if (d) {
-        const m = Number(d.dataset.index);
-        if (e[m] && s.current) {
-          const v = s.current.children[0];
+        const S = Number(d.dataset.index);
+        if (t[S] && o.current) {
+          const v = o.current.children[0];
           v.scrollTo({
-            top: m * r,
+            top: S * 54,
             behavior: "smooth"
           });
-          const D = () => {
-            Math.abs(v.scrollTop - m * r) < 1 && (y(e[m].value), v.removeEventListener("scroll", D));
+          const M = () => {
+            Math.abs(v.scrollTop - S * 54) < 1 && (x(t[S].value), v.removeEventListener("scroll", M));
           };
-          v.addEventListener("scroll", D);
+          v.addEventListener("scroll", M);
         }
       }
       return;
     }
-    let i = Math.round(h / r), t = i * r;
-    const a = r * (e.length - 1);
-    t < 0 ? (t = 0, i = 0) : t > a && (t = a, i = e.length - 1);
+    let e = Math.round(h / 54), n = e * 54;
+    const s = 54 * (t.length - 1);
+    n < 0 ? (n = 0, e = 0) : n > s && (n = s, e = t.length - 1), u.current = e;
     const l = (c) => {
-      if (Math.abs(c - t) < 1)
-        p(t), s.current && (s.current.children[0].scrollTop = t);
+      if (Math.abs(c - n) < 1)
+        p(n), o.current && (o.current.children[0].scrollTop = n);
       else {
-        const d = c + (t - c) / 5;
-        p(d), s.current && (s.current.children[0].scrollTop = d), requestAnimationFrame(() => l(d));
+        const d = c + (n - c) / 5;
+        p(d), o.current && (o.current.children[0].scrollTop = d), requestAnimationFrame(() => l(d));
       }
     };
-    requestAnimationFrame(() => l(h)), e[i] && y(e[i].value);
+    requestAnimationFrame(() => l(h)), t[e] && x(t[e].value);
   };
-  return G(() => {
-    const i = e.findIndex((t) => t.value === o) * r;
-    p(i), s.current && (s.current.children[0].scrollTop = i);
-  }, [o, e, r]), /* @__PURE__ */ f(V, { ref: s, ...u, css: u == null ? void 0 : u.inlineCSS, children: /* @__PURE__ */ f(
-    Q,
+  return Q(() => {
+    const e = t.findIndex((n) => n.value === r) * 54;
+    p(e), o.current && (o.current.children[0].scrollTop = e);
+  }, [r, t, 54]), /* @__PURE__ */ f(
+    ne,
     {
-      ref: Y,
-      css: H,
-      ...C,
-      onMouseDown: O,
-      onMouseMove: F,
-      onMouseUp: S,
-      onMouseLeave: S,
-      onTouchStart: j,
-      onTouchMove: _,
-      onTouchEnd: S,
-      onTouchCancel: S,
-      children: e.map((n, i) => {
-        const t = e.findIndex((c) => c.value === o), a = t === 0 ? 0 : Math.round(h / r), l = i === a;
-        return /* @__PURE__ */ q(J, { children: [
-          i === 0 && /* @__PURE__ */ f(
-            x,
-            {
-              className: "chain-picker-item",
-              "data-index": i,
-              selected: !1,
-              distance: (t + 1) * -1
-            }
-          ),
-          /* @__PURE__ */ f(
-            x,
-            {
-              className: "chain-picker-item",
-              "data-index": i,
-              "data-selected": l,
-              selected: l,
-              distance: i - t,
-              children: P ? P(n, l) : n.label
-            }
-          ),
-          i === e.length - 1 && /* @__PURE__ */ f(
-            x,
-            {
-              className: "chain-picker-item",
-              "data-index": i,
-              selected: !1,
-              distance: e.length - t
-            }
-          )
-        ] }, `${W}_${n.label}`);
-      })
+      ref: o,
+      ...g,
+      css: g == null ? void 0 : g.inlineCSS,
+      focusWithin: K && O,
+      children: /* @__PURE__ */ f(
+        ie,
+        {
+          role: "group",
+          ref: W,
+          css: E,
+          ...L,
+          onMouseDown: q,
+          onMouseMove: _,
+          onMouseUp: m,
+          onMouseLeave: m,
+          onTouchStart: U,
+          onTouchMove: V,
+          onTouchEnd: m,
+          onTouchCancel: m,
+          children: t.map((i, e) => {
+            const n = t.findIndex((c) => c.value === r), s = n === 0 ? 0 : Math.round(h / 54), l = e === s;
+            return /* @__PURE__ */ B(X, { children: [
+              e === 0 && /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e - 1,
+                  selected: !1,
+                  distance: (n + 1) * -1
+                }
+              ),
+              /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e,
+                  "data-selected": l,
+                  selected: l,
+                  distance: e - n,
+                  role: "spinbutton",
+                  tabIndex: l ? 0 : -1,
+                  "aria-hidden": l ? "false" : "true",
+                  "aria-valuenow": i.value,
+                  "aria-valuetext": i.ariaValueText ?? i.label,
+                  "aria-valuemin": t[0].value,
+                  "aria-valuemax": t[t.length - 1].value,
+                  ...Y,
+                  onKeyDown: j,
+                  children: k ? k(i, l) : i.label
+                }
+              ),
+              e === t.length - 1 && /* @__PURE__ */ f(
+                y,
+                {
+                  className: "chain-picker-item",
+                  "data-index": e + 1,
+                  selected: !1,
+                  distance: t.length - n
+                }
+              )
+            ] }, `${z}_${i.label}`);
+          })
+        }
+      )
     }
-  ) });
+  );
 });
 export {
-  X as SCROLL_POSITION_THRESHOLD,
-  ie as default
+  oe as SCROLL_POSITION_THRESHOLD,
+  fe as default
 };

package/ChainPicker/ChainPicker.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./ChainPicker').ChainPickerProps & import('react').RefAttributes<HTMLUListElement>>;
+    component: import('react').ForwardRefExoticComponent<import('./ChainPicker').ChainPickerProps & import('react').RefAttributes<HTMLDivElement>>;
     tags: string[];
 };
 export default meta;

package/Checkbox/Checkbox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),C=require("react"),c=require("@emotion/styled"),f=require("../core/useTheme.cjs"),h=t=>t&&t.__esModule?t:{default:t},p=h(c),x=p.default.span`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),f=require("react"),c=require("@emotion/styled"),C=require("../core/useTheme.cjs"),h=t=>t&&t.__esModule?t:{default:t},p=h(c),x=p.default.span`
   position: relative;
   display: inline-flex;
 `,m=p.default.input`
@@ -7,10 +7,10 @@
   height: 100%;
   top: 0;
   left: 0;
-  opacity: 0;
+  appearance: none;
   cursor: pointer;
 
   &:disabled {
     cursor: not-allowed;
   }
-`;function y({size:t,checked:n,disabled:s,color:i="primary"}){const{palette:{brand:r,grey:e,background:d}}=f.default();let o=e.white,a=e[50],u=e[20];return n&&(o=i==="primary"?r.primary.main:r[i],a=i==="primary"?r.primary.main:r[i],u=e.white),n&&s&&(o=e[30],a=e[30],u=e[10]),!n&&s&&(o=d.primary,a=e[30],u=e[20]),l.jsxs("svg",{width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("path",{d:"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z",fill:o}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",fill:a}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",fill:u})]})}const g=C.forwardRef(function({size:n="medium",color:s="primary",checked:i,disabled:r,inlineCSS:e,...d},o){return l.jsxs(x,{ref:o,css:e,children:[l.jsx(m,{type:"checkbox",checked:i,disabled:r,...d}),l.jsx(y,{size:n,color:s,checked:i,disabled:r})]})});exports.default=g;
+`;function y({size:t,checked:n,disabled:a,color:r="primary"}){const{palette:{brand:i,grey:e,background:d}}=C.default();let o=e.white,s=e[50],u=e[20];return n&&(o=r==="primary"?i.primary.main:i[r],s=r==="primary"?i.primary.main:i[r],u=e.white),n&&a&&(o=e[30],s=e[30],u=e[10]),!n&&a&&(o=d.primary,s=e[30],u=e[20]),l.jsxs("svg",{width:t==="2xLarge"?48:24,height:t==="2xLarge"?48:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,focusable:"false",children:[l.jsx("path",{d:"M2 6C2 3.79086 3.79086 2 6 2H18C20.2091 2 22 3.79086 22 6V18C22 20.2091 20.2091 22 18 22H6C3.79086 22 2 20.2091 2 18V6Z",fill:o}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",fill:s}),l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",fill:u})]})}const b=f.forwardRef(function({size:n="medium",color:a="primary",checked:r,disabled:i,inlineCSS:e,...d},o){return l.jsxs(x,{ref:o,css:e,children:[l.jsx(m,{type:"checkbox",checked:r,disabled:i,...d}),l.jsx(y,{size:n,color:a,checked:r,disabled:i})]})});exports.default=b;

package/Checkbox/Checkbox.es.js

@@ -1,17 +1,17 @@
 import { jsxs as f, jsx as l } from "@emotion/react/jsx-runtime";
-import { forwardRef as s } from "react";
-import m from "@emotion/styled";
+import { forwardRef as m } from "react";
+import s from "@emotion/styled";
 import u from "../core/useTheme.es.js";
-const h = m.span`
+const h = s.span`
   position: relative;
   display: inline-flex;
-`, c = m.input`
+`, c = s.input`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
-  opacity: 0;
+  appearance: none;
   cursor: pointer;
 
   &:disabled {
@@ -27,8 +27,8 @@ function x({
   const {
     palette: { brand: i, grey: e, background: d }
   } = u();
-  let t = e.white, p = e[50], a = e[20];
-  return o && (t = r === "primary" ? i.primary.main : i[r], p = r === "primary" ? i.primary.main : i[r], a = e.white), o && n && (t = e[30], p = e[30], a = e[10]), !o && n && (t = d.primary, p = e[30], a = e[20]), /* @__PURE__ */ f(
+  let t = e.white, a = e[50], p = e[20];
+  return o && (t = r === "primary" ? i.primary.main : i[r], a = r === "primary" ? i.primary.main : i[r], p = e.white), o && n && (t = e[30], a = e[30], p = e[10]), !o && n && (t = d.primary, a = e[30], p = e[20]), /* @__PURE__ */ f(
     "svg",
     {
       width: C === "2xLarge" ? 48 : 24,
@@ -36,6 +36,8 @@ function x({
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": !0,
+      focusable: "false",
       children: [
         /* @__PURE__ */ l(
           "path",
@@ -50,7 +52,7 @@ function x({
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M18 3H6C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3ZM6 2C3.79086 2 2 3.79086 2 6V18C2 20.2091 3.79086 22 6 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H6Z",
-            fill: p
+            fill: a
           }
         ),
         /* @__PURE__ */ l(
@@ -59,14 +61,14 @@ function x({
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M18.604 6.20309C19.0442 6.53668 19.1306 7.16392 18.797 7.60408L11.218 17.6041C11.0406 17.8382 10.7692 17.9824 10.4759 17.9985C10.1826 18.0147 9.89706 17.901 9.69505 17.6878L5.27405 13.0211C4.89422 12.6202 4.91133 11.9873 5.31227 11.6074C5.7132 11.2276 6.34613 11.2447 6.72596 11.6456L10.3362 15.4564L17.203 6.39603C17.5366 5.95588 18.1639 5.8695 18.604 6.20309Z",
-            fill: a
+            fill: p
           }
         )
       ]
     }
   );
 }
-const v = s(function({ size: o = "medium", color: n = "primary", checked: r, disabled: i, inlineCSS: e, ...d }, t) {
+const v = m(function({ size: o = "medium", color: n = "primary", checked: r, disabled: i, inlineCSS: e, ...d }, t) {
   return /* @__PURE__ */ f(h, { ref: t, css: e, children: [
     /* @__PURE__ */ l(c, { type: "checkbox", checked: r, disabled: i, ...d }),
     /* @__PURE__ */ l(x, { size: o, color: n, checked: r, disabled: i })

package/CircularProgressIndicator/CircularProgressIndicator.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),h=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},o=y(m),k=g.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),h=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},i=y(m),k=g.keyframes`
     100% {
         transform: rotate(270deg);
     }
-`,x=o.default.svg`
+`,x=i.default.svg`
   ${({size:e})=>e==="large"?{width:120,height:120}:{width:40,height:40}};
 
   transform: rotate(-90deg);
 
   ${({loop:e})=>e?{animation:`${k} 1s infinite`}:{}};
-`,$=o.default.circle`
+`,$=i.default.circle`
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{grey:e}}})=>e[10]};
-`,_=o.default.circle`
+`,_=i.default.circle`
   transition: stroke-dashoffset ${({transitionDuration:e})=>e}ms linear 0s;
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{brand:e}}})=>e.primary.main};
-`,p=h.forwardRef(function({size:t="small",value:i=0,transitionDuration:n=500,inlineCSS:l,loop:a,...d},u){const r=t==="large"?52:18,c=2*Math.PI*r,f=c*(1-(a?20:i)/100);return s.jsxs(x,{ref:u,viewBox:t==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:t,loop:a,...d,css:l,children:[s.jsx($,{size:t,r}),s.jsx(_,{size:t,transitionDuration:n,r,strokeLinecap:"round",strokeDashoffset:f,strokeDasharray:c})]})});exports.default=p;
+`,b=h.forwardRef(function({size:r="small",value:c=0,transitionDuration:n=500,inlineCSS:d,loop:t,...a},u){const s=r==="large"?52:18,l=2*Math.PI*s,f=l*(1-(t?20:c)/100);return o.jsxs(x,{ref:u,viewBox:r==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:r,loop:t,role:"progressbar","aria-valuenow":t?void 0:c,"aria-label":a["aria-label"]?a["aria-label"]:"로딩 중",...a,css:d,children:[o.jsx($,{size:r,r:s}),o.jsx(_,{size:r,transitionDuration:n,r:s,strokeLinecap:"round",strokeDashoffset:f,strokeDasharray:l})]})});exports.default=b;

package/CircularProgressIndicator/CircularProgressIndicator.es.js

@@ -1,12 +1,12 @@
-import { jsxs as h, jsx as c } from "@emotion/react/jsx-runtime";
+import { jsxs as h, jsx as n } from "@emotion/react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { keyframes as k } from "@emotion/react";
-import o from "@emotion/styled";
+import s from "@emotion/styled";
 const y = k`
     100% {
         transform: rotate(270deg);
     }
-`, p = o.svg`
+`, u = s.svg`
   ${({ size: r }) => r === "large" ? {
   width: 120,
   height: 120
@@ -20,7 +20,7 @@ const y = k`
   ${({ loop: r }) => r ? {
   animation: `${y} 1s infinite`
 } : {}};
-`, u = o.circle`
+`, x = s.circle`
   ${({ size: r }) => r === "large" ? {
   cx: 60,
   cy: 60,
@@ -35,7 +35,7 @@ const y = k`
     palette: { grey: r }
   }
 }) => r[10]};
-`, x = o.circle`
+`, $ = s.circle`
   transition: stroke-dashoffset ${({ transitionDuration: r }) => r}ms linear 0s;
   ${({ size: r }) => r === "large" ? {
   cx: 60,
@@ -51,30 +51,33 @@ const y = k`
     palette: { brand: r }
   }
 }) => r.primary.main};
-`, P = g(
-  function({ size: t = "small", value: i = 0, transitionDuration: n = 500, inlineCSS: l, loop: s, ...d }, f) {
-    const e = t === "large" ? 52 : 18, a = 2 * Math.PI * e, m = a * (1 - (s ? 20 : i) / 100);
+`, b = g(
+  function({ size: e = "small", value: i = 0, transitionDuration: l = 500, inlineCSS: d, loop: t, ...a }, f) {
+    const o = e === "large" ? 52 : 18, c = 2 * Math.PI * o, m = c * (1 - (t ? 20 : i) / 100);
     return /* @__PURE__ */ h(
-      p,
+      u,
       {
         ref: f,
-        viewBox: t === "large" ? "0 0 120 120" : "0 0 40 40",
+        viewBox: e === "large" ? "0 0 120 120" : "0 0 40 40",
         fill: "none",
-        size: t,
-        loop: s,
-        ...d,
-        css: l,
+        size: e,
+        loop: t,
+        role: "progressbar",
+        "aria-valuenow": t ? void 0 : i,
+        "aria-label": a["aria-label"] ? a["aria-label"] : "로딩 중",
+        ...a,
+        css: d,
         children: [
-          /* @__PURE__ */ c(u, { size: t, r: e }),
-          /* @__PURE__ */ c(
-            x,
+          /* @__PURE__ */ n(x, { size: e, r: o }),
+          /* @__PURE__ */ n(
+            $,
             {
-              size: t,
-              transitionDuration: n,
-              r: e,
+              size: e,
+              transitionDuration: l,
+              r: o,
               strokeLinecap: "round",
               strokeDashoffset: m,
-              strokeDasharray: a
+              strokeDasharray: c
             }
           )
         ]
@@ -83,5 +86,5 @@ const y = k`
   }
 );
 export {
-  P as default
+  b as default
 };