@tempoxyz/ds 0.2.6 → 0.3.1

package/dist/web/components/Spinner.css

@@ -1 +1 @@
-.z_tds_2f_web-rvpwDc0{animation:.8s linear infinite z-kid-tds_2f_web_2f_spinner_2f_rotation}.z_tds_2f_web-rvpwDc1{height:100%}.z_tds_2f_web-rvpwDc2{width:100%}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-rvpwDc3{animation:none}}.z_tds_2f_web-rvpwDc4{color:inherit}.z_tds_2f_web-rvpwDc5{display:inline-flex}.z_tds_2f_web-rvpwDc6{flex-shrink:0}.z_tds_2f_web-rvpwDc7{&:where([data-size=large]){height:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-rvpwDc8{&:where([data-size=large]){width:var(--z-tds_2f_web-spacing-20,1.25rem)}}.z_tds_2f_web-rvpwDc9{&:where([data-size=medium]){height:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-rvpwDca{&:where([data-size=medium]){width:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-rvpwDcb{&:where([data-size=small]){height:var(--z-tds_2f_web-spacing-12,.75rem)}}.z_tds_2f_web-rvpwDcc{&:where([data-size=small]){width:var(--z-tds_2f_web-spacing-12,.75rem)}}
+.z_tds_2f_web-rvpwDc0{animation:.8s linear infinite z-kid-tds_2f_web_2f_spinner_2f_rotation}.z_tds_2f_web-rvpwDc1{height:100%}.z_tds_2f_web-rvpwDc2{width:100%}@media (prefers-reduced-motion:reduce){.z_tds_2f_web-rvpwDc3{animation:none}}.z_tds_2f_web-rvpwDc4{align-items:center}.z_tds_2f_web-rvpwDc5{color:inherit}.z_tds_2f_web-rvpwDc6{display:inline-flex}.z_tds_2f_web-rvpwDc7{flex-shrink:0}.z_tds_2f_web-rvpwDc8{height:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-rvpwDc9{justify-content:center}.z_tds_2f_web-rvpwDca{width:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-rvpwDcb{&:where([data-elevated=true]){background-color:var(--z-tds_2f_web-color-background-elevated,light-dark(var(--z-tds_2f_web-color-neutral-000,#fff),var(--z-tds_2f_web-color-neutral-092,#141414)))}}.z_tds_2f_web-rvpwDcc{&:where([data-elevated=true]){border-radius:var(--z-tds_2f_web-radius-xs,calc(.75rem * var(--tds-corner-scale,1)))}}.z_tds_2f_web-rvpwDcd{&:where([data-elevated=true]){box-shadow:0 12px 36px #0000000a,0 8px 32px #0000000a,0 4px 12px #0000000a}}.z_tds_2f_web-rvpwDce{&:where([data-elevated=true]){height:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-rvpwDcf{&:where([data-elevated=true]){width:var(--z-tds_2f_web-spacing-44,2.75rem)}}.z_tds_2f_web-rvpwDcg{&:where([data-elevated=true]){&>svg{height:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-rvpwDch{&:where([data-elevated=true]){&>svg{width:var(--z-tds_2f_web-spacing-16,1rem)}}}.z_tds_2f_web-rvpwDci{stroke:light-dark(#000,currentColor)}

package/dist/web/components/Spinner.d.ts

@@ -2,15 +2,17 @@ import type { ComponentPropsWithRef } from 'react';
 import type * as zyzz from 'zyzz';
 /**
  * An indeterminate loading indicator. Renders a Base UI `Progress.Root` with
- * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The ring draws in
- * `currentColor` and stops rotating under `prefers-reduced-motion: reduce`.
+ * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The arc draws in
+ * `currentColor` on a faint track, black in light mode and the text color in dark mode, and stops
+ * rotating under `prefers-reduced-motion: reduce`. `elevated` places it on a 44px elevated tile
+ * with a shadow.
  *
  * - Pass `aria-label` to say what is loading, such as `Loading transactions`.
  * - Show it only after a short delay, so fast responses do not flash an indicator.
  * - Prefer `Skeleton` when the shape of the loading content is known.
  *
  * @example
- * <Spinner aria-label="Loading transactions" size="small" />
+ * <Spinner aria-label="Loading transactions" elevated />
  *
  * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role | MDN progressbar role}
@@ -25,30 +27,37 @@ declare namespace styles {
     const glyph: zyzz.style.ReturnType<"react">;
     const spinner: zyzz.variants.ReturnType<{
         readonly base: {
+            readonly alignItems: "center";
             readonly color: "inherit !custom";
             readonly display: "inline-flex";
             readonly flexShrink: "0 !custom";
+            readonly height: "16";
+            readonly justifyContent: "center";
+            readonly width: "16";
         };
         readonly defaultVariants: {
-            readonly size: "medium";
+            readonly elevated: false;
         };
         readonly variants: {
-            readonly size: {
-                readonly large: {
-                    readonly height: "20";
-                    readonly width: "20";
-                };
-                readonly medium: {
-                    readonly height: "16";
-                    readonly width: "16";
-                };
-                readonly small: {
-                    readonly height: "12";
-                    readonly width: "12";
+            readonly elevated: {
+                readonly false: {};
+                readonly true: {
+                    readonly backgroundColor: "background.elevated";
+                    readonly borderRadius: "xs";
+                    readonly boxShadow: "0 12px 36px #0000000a, 0 8px 32px #0000000a, 0 4px 12px #0000000a !custom";
+                    readonly height: "44";
+                    readonly width: "44";
+                    readonly selectors: {
+                        readonly '& > svg': {
+                            readonly height: "16";
+                            readonly width: "16";
+                        };
+                    };
                 };
             };
         };
     }, "react">;
+    const track: zyzz.style.ReturnType<"react">;
 }
 export {};
 //# sourceMappingURL=Spinner.d.ts.map

package/dist/web/components/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/web/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAgB3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;CAC7C;AAOD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAQjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;eAiBnB,CAAA;CACF"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/web/components/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAIjC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,+BAoB3C;AAED,yBAAiB,OAAO,CAAC;IACvB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,OAAO,CAAC,CAAA;CAC7C;AAOD,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAQjB,CAAA;IAEM,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8BnB,CAAA;IAIM,MAAM,KAAK,gCAGjB,CAAA;CACF"}

package/dist/web/components/Spinner.js

@@ -6,15 +6,17 @@ import * as BaseUi from '@base-ui/react/progress';
 import { style, variants } from '../zyzz.config.js';
 /**
  * An indeterminate loading indicator. Renders a Base UI `Progress.Root` with
- * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The ring draws in
- * `currentColor` and stops rotating under `prefers-reduced-motion: reduce`.
+ * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The arc draws in
+ * `currentColor` on a faint track, black in light mode and the text color in dark mode, and stops
+ * rotating under `prefers-reduced-motion: reduce`. `elevated` places it on a 44px elevated tile
+ * with a shadow.
  *
  * - Pass `aria-label` to say what is loading, such as `Loading transactions`.
  * - Show it only after a short delay, so fast responses do not flash an indicator.
  * - Prefer `Skeleton` when the shape of the loading content is known.
  *
  * @example
- * <Spinner aria-label="Loading transactions" size="small" />
+ * <Spinner aria-label="Loading transactions" elevated />
  *
  * @see {@link https://base-ui.com/react/components/progress | Base UI Progress}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role | MDN progressbar role}
@@ -22,14 +24,17 @@ import { style, variants } from '../zyzz.config.js';
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html | WCAG 2.2 Pause, Stop, Hide}
  */
 export function Spinner(props) {
-    const { className, size, vars, ...attributes } = props;
-    return (_jsx(BaseUi.Progress.Root, { "aria-label": "Loading", ...attributes, ...styles.spinner({ className, size, style: props.style, vars }), value: null, children: _jsxs("svg", { "aria-hidden": "true", ...styles.glyph(), fill: "none", viewBox: "0 0 16 16", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeOpacity: "0.16", strokeWidth: "2" }), _jsx("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" })] }) }));
+    const { className, elevated, vars, ...attributes } = props;
+    return (_jsx(BaseUi.Progress.Root, { "aria-label": "Loading", ...attributes, ...styles.spinner({ className, elevated, style: props.style, vars }), value: null, children: _jsxs("svg", { "aria-hidden": "true", ...styles.glyph(), fill: "none", viewBox: "0 0 16 16", children: [_jsx("circle", { cx: "8", cy: "8", r: "6", strokeOpacity: "0.08", ...styles.track() }), _jsx("path", { d: "M14 7.97422C14 9.3007 13.5642 10.5901 12.7601 11.6425C11.9561 12.6948 10.8287 13.4514 9.55292 13.7947C8.27712 14.138 6.92417 14.0489 5.70391 13.5413C4.48364 13.0337 3.46426 12.1359 2.80386 10.9871C2.14345 9.83835 1.87894 8.50283 2.05134 7.1877C2.22374 5.87257 2.82342 4.65132 3.75737 3.71336C4.69132 2.77539 5.90734 2.17314 7.21685 2", stroke: "currentColor", strokeLinecap: "round" })] }) }));
 }
 const rotation = "z-kid-tds_2f_web_2f_spinner_2f_rotation";
 var styles;
 (function (styles) {
     styles.glyph = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-rvpwDc0 z_tds_2f_web-rvpwDc1 z_tds_2f_web-rvpwDc2 z_tds_2f_web-rvpwDc3"});
-    styles.spinner = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-rvpwDc4 z_tds_2f_web-rvpwDc5 z_tds_2f_web-rvpwDc6 z_tds_2f_web-rvpwDc7 z_tds_2f_web-rvpwDc8 z_tds_2f_web-rvpwDc9 z_tds_2f_web-rvpwDca z_tds_2f_web-rvpwDcb z_tds_2f_web-rvpwDcc"+" "+external:"z_tds_2f_web-rvpwDc4 z_tds_2f_web-rvpwDc5 z_tds_2f_web-rvpwDc6 z_tds_2f_web-rvpwDc7 z_tds_2f_web-rvpwDc8 z_tds_2f_web-rvpwDc9 z_tds_2f_web-rvpwDca z_tds_2f_web-rvpwDcb z_tds_2f_web-rvpwDcc",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"size")?input["size"]:void 0;if(value===void 0)value="medium";if(value!==null&&value!==void 0)result["data-size"]=String(value);return result});
+    styles.spinner = ((input={})=>{const external=input.className,style=input.style,vars=input.vars,inline=vars?{...vars,...style}:style,className=external?"z_tds_2f_web-rvpwDc4 z_tds_2f_web-rvpwDc5 z_tds_2f_web-rvpwDc6 z_tds_2f_web-rvpwDc7 z_tds_2f_web-rvpwDc8 z_tds_2f_web-rvpwDc9 z_tds_2f_web-rvpwDca z_tds_2f_web-rvpwDcb z_tds_2f_web-rvpwDcc z_tds_2f_web-rvpwDcd z_tds_2f_web-rvpwDce z_tds_2f_web-rvpwDcf z_tds_2f_web-rvpwDcg z_tds_2f_web-rvpwDch"+" "+external:"z_tds_2f_web-rvpwDc4 z_tds_2f_web-rvpwDc5 z_tds_2f_web-rvpwDc6 z_tds_2f_web-rvpwDc7 z_tds_2f_web-rvpwDc8 z_tds_2f_web-rvpwDc9 z_tds_2f_web-rvpwDca z_tds_2f_web-rvpwDcb z_tds_2f_web-rvpwDcc z_tds_2f_web-rvpwDcd z_tds_2f_web-rvpwDce z_tds_2f_web-rvpwDcf z_tds_2f_web-rvpwDcg z_tds_2f_web-rvpwDch",result=inline?{className,style:inline}:{className};let value;value=Object.hasOwn(input,"elevated")?input["elevated"]:void 0;if(value===void 0)value="false";if(value!==null&&value!==void 0)result["data-elevated"]=String(value);return result});
+    // Figma draws the track in black at 8% in every scheme. Its black has no dark value, so the dark
+    // track keeps the text color, which stays visible on a dark surface.
+    styles.track = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-rvpwDci"});
 })(styles || (styles = {}));
 //# sourceMappingURL=Spinner.js.map
 import './Spinner.css';

package/dist/web/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/web/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAA;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEtD,OAAO,CACL,KAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,kBACR,SAAS,KAChB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,EACjE,KAAK,EAAE,IAAI,YAEX,8BAAiB,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,aACzE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,GAAG,EACzF,eAAM,CAAC,EAAC,qBAAqB,EAAC,MAAM,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,GAAG,IACxF,GACe,CACxB,CAAA;AACH,CAAC;AAOD,MAAM,QAAQ,GAAG,SAAS,CACxB,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAC5E,EAAE,EAAE,EAAE,0BAA0B,EAAE,CACnC,CAAA;AAED,IAAU,MAAM,CA6Bf;AA7BD,WAAU,MAAM;IACD,YAAK,GAAG,KAAK,CACxB;QACE,SAAS,EAAE,GAAG,QAAQ,+BAA+B;QACrD,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,cAAc;QACrB,yCAAyC,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;KACzE,EACD,EAAE,EAAE,EAAE,uBAAuB,EAAE,CAChC,CAAA;IAEY,cAAO,GAAG,QAAQ,CAC7B;QACE,IAAI,EAAE;YACJ,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,WAAW;SACxB;QACD,eAAe,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QACnC,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACpC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACrC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;aACrC;SACF;KACF,EACD,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAC1B,CAAA;AACH,CAAC,EA7BS,MAAM,KAAN,MAAM,QA6Bf"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/web/components/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAA;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,OAAO,CAAC,KAAoB;IAC1C,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAE1D,OAAO,CACL,KAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,kBACR,SAAS,KAChB,UAAU,KACV,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,EACrE,KAAK,EAAE,IAAI,YAEX,8BAAiB,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,aACzE,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,aAAa,EAAC,MAAM,KAAK,MAAM,CAAC,KAAK,EAAE,GAAI,EACvE,eACE,CAAC,EAAC,+UAA+U,EACjV,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACrB,IACE,GACe,CACxB,CAAA;AACH,CAAC;AAOD,MAAM,QAAQ,GAAG,SAAS,CACxB,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAC5E,EAAE,EAAE,EAAE,0BAA0B,EAAE,CACnC,CAAA;AAED,IAAU,MAAM,CAiDf;AAjDD,WAAU,MAAM;IACD,YAAK,GAAG,KAAK,CACxB;QACE,SAAS,EAAE,GAAG,QAAQ,+BAA+B;QACrD,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,cAAc;QACrB,yCAAyC,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;KACzE,EACD,EAAE,EAAE,EAAE,uBAAuB,EAAE,CAChC,CAAA;IAEY,cAAO,GAAG,QAAQ,CAC7B;QACE,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,iBAAiB;YACxB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,WAAW;YACvB,MAAM,EAAE,IAAI;YACZ,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,IAAI;SACZ;QACD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QACpC,QAAQ,EAAE;YACR,kDAAkD;YAClD,QAAQ,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE;oBACJ,eAAe,EAAE,qBAAqB;oBACtC,YAAY,EAAE,IAAI;oBAClB,2FAA2F;oBAC3F,kCAAkC;oBAClC,SAAS,EAAE,2EAA2E;oBACtF,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,IAAI;oBACX,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;iBACxD;aACF;SACF;KACF,EACD,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAC1B,CAAA;IAED,iGAAiG;IACjG,qEAAqE;IACxD,YAAK,GAAG,KAAK,CACxB,EAAE,MAAM,EAAE,wCAAwC,EAAE,EACpD,EAAE,EAAE,EAAE,uBAAuB,EAAE,CAChC,CAAA;AACH,CAAC,EAjDS,MAAM,KAAN,MAAM,QAiDf"}