thread-ui 0.1.2 → 0.1.5

package/dist/components/typography/typography.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getColoredTextColor } from '../../utils';
+export const Title = ({ children, align = 'left', inline = false, color = 'standard' }) => {
+    const styles = {
+        fontSize: '3rem',
+        fontWeight: 700,
+        lineHeight: 1.3,
+        marginBottom: inline ? 0 : '40px',
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx("h1", { style: styles, children: children });
+};
+export const H1 = ({ children, align = 'left', color = 'standard' }) => {
+    const styles = {
+        fontSize: '2rem',
+        fontWeight: 600,
+        lineHeight: 1.3,
+        marginBottom: '32px',
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx("h1", { style: styles, children: children });
+};
+export const H2 = ({ children, align = 'left', color = 'standard' }) => {
+    const styles = {
+        fontSize: '1.5rem',
+        fontWeight: 600,
+        lineHeight: 1.3,
+        marginBottom: '24px',
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx("h2", { style: styles, children: children });
+};
+export const H3 = ({ children, align = 'left', color = 'standard' }) => {
+    const styles = {
+        fontSize: '1.25rem',
+        fontWeight: 600,
+        lineHeight: 1.3,
+        marginBottom: '16px',
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx("h3", { style: styles, children: children });
+};
+export const Text = ({ children, align = 'left', inline = false, color = 'standard' }) => {
+    const Component = inline ? 'span' : 'p';
+    const styles = {
+        fontSize: '1rem',
+        fontWeight: 350,
+        lineHeight: 1.5,
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx(Component, { style: styles, children: children });
+};
+export const Subtitle = ({ children, align = 'left', color = 'text-secondary' }) => {
+    const styles = {
+        display: 'block',
+        fontSize: 'clamp(0.875rem, 0.75em, 1.5rem)',
+        marginTop: '0.2em',
+        textAlign: align,
+        color: getColoredTextColor(color),
+    };
+    return _jsx("span", { style: styles, children: children });
+};
+//# sourceMappingURL=typography.js.map

package/dist/components/typography/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/button/button.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './button.types';
+export declare const Button: ({ children, fullWidth, color, size, onClick, type, margin, disabled, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,eAAO,MAAM,MAAM,2EAShB,WAAW,4CA+Bb,CAAC"}

package/dist/components/ui/button/button.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getUtilityColorValue, getUtilityFontSize, getUtilitySizeValue } from '../../../utils';
+import { ThreadTheme, useThreadStyles } from '../../../functions';
+export const Button = ({ children, fullWidth, color = 'primary', size = 'md', onClick, type = 'button', margin, disabled = false, }) => {
+    const colorValue = getUtilityColorValue(color);
+    const buttonClasses = useThreadStyles({
+        padding: `${getUtilitySizeValue(size)}px`,
+        fontSize: getUtilityFontSize(size),
+        width: fullWidth ? '100%' : 'fit-content',
+        transition: 'background-color 0.2s ease',
+        border: `${ThreadTheme.borderSize.md} ${color == 'black' ? ThreadTheme.white : colorValue} solid`,
+        borderRadius: ThreadTheme.borderRadius.md,
+        color: ThreadTheme.white,
+        backgroundColor: colorValue,
+        margin: margin ?? 'auto',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        cursor: 'pointer',
+        userSelect: 'none',
+        opacity: disabled ? 0.6 : 1,
+        hover: {
+            backgroundColor: disabled ? colorValue : color == 'black' ? ThreadTheme.white : ThreadTheme.background,
+            color: disabled ? ThreadTheme.background : colorValue,
+            borderColor: color == 'black' ? ThreadTheme.black : colorValue,
+        },
+    });
+    return (_jsx("button", { type: type, className: buttonClasses, onClick: disabled ? undefined : onClick, children: children }));
+};
+//# sourceMappingURL=button.js.map

package/dist/components/ui/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,QAAQ,GAAG,KAAK,GACH,EAAE,EAAE;IACjB,MAAM,UAAU,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,eAAe,CAAC;QACrC,OAAO,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,IAAI;QACzC,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC;QAClC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;QACzC,UAAU,EAAE,4BAA4B;QACxC,MAAM,EAAE,GAAG,WAAW,CAAC,UAAU,CAAC,EAAE,IAAI,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,QAAQ;QACjG,YAAY,EAAE,WAAW,CAAC,YAAY,CAAC,EAAE;QACzC,KAAK,EAAE,WAAW,CAAC,KAAK;QACxB,eAAe,EAAE,UAAU;QAC3B,MAAM,EAAE,MAAM,IAAI,MAAM;QACxB,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,MAAM;QAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC3B,KAAK,EAAE;YACN,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU;YACtG,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;YACrD,WAAW,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU;SAC9D;KACD,CAAC,CAAC;IAEH,OAAO,CACN,iBAAQ,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,YACnF,QAAQ,GACD,CACT,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ui/button/button.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { UtilityColorOptions, UtilitySizeOptions } from '../../../types';
+export type ButtonProps = {
+    fullWidth?: boolean;
+    color?: Exclude<UtilityColorOptions, 'text'>;
+    type?: 'button' | 'submit' | 'reset';
+    onClick?: () => void;
+    margin?: string;
+    size?: UtilitySizeOptions;
+    disabled?: boolean;
+    children: ReactNode;
+};
+//# sourceMappingURL=button.types.d.ts.map

package/dist/components/ui/button/button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlE,MAAM,MAAM,WAAW,GAAG;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC"}

package/dist/components/ui/button/button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../../src/components/ui/button/button.types.ts"],"names":[],"mappings":""}

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps } from './button.types';
+export { Button } from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/ui/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/ui/divider/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,OAAO,+BAAgC,YAAY,4CA2B/D,CAAC"}

package/dist/components/{divider → ui/divider}/divider.js

@@ -1,8 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '../../utils';
+import { ThreadTheme, useThreadStyles } from '../../../functions';
 export const Divider = ({ width, marginY, weight }) => {
-    const { theme } = useTheme();
     let dividerWeight;
     switch (weight) {
         case 'light':
@@ -17,15 +16,15 @@ export const Divider = ({ width, marginY, weight }) => {
         default:
             dividerWeight = 1;
     }
-    const styles = {
+    const styles = useThreadStyles({
         width: width || '75%',
         marginTop: marginY || '16px',
         marginBottom: marginY || '16px',
         marginLeft: 'auto',
         marginRight: 'auto',
         height: `${dividerWeight}px`,
-        backgroundColor: theme.colors.structure,
-    };
-    return _jsx("div", { style: styles });
+        backgroundColor: ThreadTheme.structure,
+    });
+    return _jsx("div", { className: styles });
 };
 //# sourceMappingURL=divider.js.map

package/dist/components/ui/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG3D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAgB,EAAE,EAAE;IACnE,IAAI,aAAqB,CAAC;IAC1B,QAAQ,MAAM,EAAE,CAAC;QAChB,KAAK,OAAO;YACX,aAAa,GAAG,GAAG,CAAC;YACpB,MAAM;QACP,KAAK,UAAU;YACd,aAAa,GAAG,CAAC,CAAC;YAClB,MAAM;QACP,KAAK,MAAM;YACV,aAAa,GAAG,CAAC,CAAC;YAClB,MAAM;QACP;YACC,aAAa,GAAG,CAAC,CAAC;IACpB,CAAC;IAED,MAAM,MAAM,GAAG,eAAe,CAAC;QAC9B,KAAK,EAAE,KAAK,IAAI,KAAK;QACrB,SAAS,EAAE,OAAO,IAAI,MAAM;QAC5B,YAAY,EAAE,OAAO,IAAI,MAAM;QAC/B,UAAU,EAAE,MAAM;QAClB,WAAW,EAAE,MAAM;QACnB,MAAM,EAAE,GAAG,aAAa,IAAI;QAC5B,eAAe,EAAE,WAAW,CAAC,SAAS;KACtC,CAAC,CAAC;IAEH,OAAO,cAAK,SAAS,EAAE,MAAM,GAAQ,CAAC;AACvC,CAAC,CAAC"}

package/dist/components/ui/divider/divider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;CACvC,CAAC"}

package/dist/components/ui/divider/divider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.types.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/divider.types.ts"],"names":[],"mappings":""}

package/dist/components/ui/divider/index.d.ts

@@ -0,0 +1,3 @@
+export type { DividerProps } from './divider.types';
+export { Divider } from './divider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/divider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/divider/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/ui/divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/divider/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/ui/icon/icon.d.ts

@@ -0,0 +1,12 @@
+import { IconProps } from './icon.types';
+/**
+ * Standard Icon Component from Phosphor
+ * @param name Icon Name from Phosphor Icons
+ * @param color Icon Color
+ * @param size Icon Size [8 | 12 | 16 | 24 | 32 | 48 | 64]
+ * @param weight Icon Weight ['light' | 'regular' | 'bold']
+ * @param filled Icon Fill
+ * @returns ReactNode Icon
+ */
+export declare const Icon: ({ name, color, size, weight, filled }: IconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/ui/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon/icon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,0CAAoE,SAAS,4CAU7F,CAAC"}

package/dist/components/ui/icon/icon.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PhosphorIcons from '@phosphor-icons/react';
+import { getUtilityColorValue } from '../../../utils';
+/**
+ * Standard Icon Component from Phosphor
+ * @param name Icon Name from Phosphor Icons
+ * @param color Icon Color
+ * @param size Icon Size [8 | 12 | 16 | 24 | 32 | 48 | 64]
+ * @param weight Icon Weight ['light' | 'regular' | 'bold']
+ * @param filled Icon Fill
+ * @returns ReactNode Icon
+ */
+export const Icon = ({ name, color, size = 24, weight = 'regular', filled = false }) => {
+    const IconComponent = PhosphorIcons[name];
+    const colorValue = color ? getUtilityColorValue(color) : undefined;
+    return _jsx(IconComponent, { color: colorValue, size: size, weight: filled ? 'fill' : weight });
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/ui/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/ui/icon/icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,aAAa,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,KAAK,EAAa,EAAE,EAAE;IACjG,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAItC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnE,OAAO,KAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAAI,CAAC;AAC3F,CAAC,CAAC"}

package/dist/components/{icon → ui/icon}/icon.types.d.ts

@@ -1,13 +1,12 @@
 import * as PhosphorIcons from '@phosphor-icons/react';
-import { UtilityColorOptions } from '../../types';
+import { UtilityColorOptions } from '../../../types';
 export type IconNames = keyof typeof PhosphorIcons;
 export type IconSizes = 8 | 12 | 16 | 24 | 32 | 48 | 64;
 export type IconProps = {
     name: IconNames;
     size: IconSizes;
-    color: UtilityColorOptions;
+    color?: UtilityColorOptions;
     weight?: 'light' | 'regular' | 'bold';
-    square?: boolean;
     filled?: boolean;
 };
 //# sourceMappingURL=icon.types.d.ts.map

package/dist/components/ui/icon/icon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon/icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,aAAa,CAAC;AACnD,MAAM,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC"}

package/dist/components/ui/icon/icon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.types.js","sourceRoot":"","sources":["../../../../src/components/ui/icon/icon.types.ts"],"names":[],"mappings":""}

package/dist/components/ui/icon/index.d.ts

@@ -0,0 +1,3 @@
+export type { IconProps, IconNames, IconSizes } from './icon.types';
+export { Icon } from './icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/ui/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/icon/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/ui/icon-button/icon-button.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from './icon-button.types';
+export declare const IconButton: ({ children, fullWidth, color, size, onClick, type, margin, disabled, name, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/ui/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,eAAO,MAAM,UAAU,iFAUpB,eAAe,4CAWjB,CAAC"}

package/dist/components/ui/icon-button/icon-button.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Button } from '../../../components';
+import { getUtilityFontSize, getUtilityIconSize, getUtilitySizeValue } from '../../../utils';
+import { useThreadStyles } from '../../../functions';
+export const IconButton = ({ children, fullWidth, color = 'primary', size = 'md', onClick, type = 'button', margin, disabled = false, name, }) => {
+    const styles = useThreadStyles({
+        marginLeft: `${getUtilitySizeValue(size) - 2}px`,
+        fontSize: getUtilityFontSize(size),
+    });
+    return (_jsxs(Button, { fullWidth: fullWidth, color: color, onClick: onClick, type: type, margin: margin, disabled: disabled, children: [_jsx(Icon, { name: name, size: getUtilityIconSize(size) }), _jsx("div", { className: styles, children: children })] }));
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/ui/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACtF,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,IAAI,EACX,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,IAAI,GACa,EAAE,EAAE;IACrB,MAAM,MAAM,GAAG,eAAe,CAAC;QAC9B,UAAU,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI;QAChD,QAAQ,EAAE,kBAAkB,CAAC,IAAI,CAAC;KAClC,CAAC,CAAC;IACH,OAAO,CACN,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,aAC3G,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAI,EACpD,cAAK,SAAS,EAAE,MAAM,YAAG,QAAQ,GAAO,IAChC,CACT,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ui/icon-button/icon-button.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { IconNames } from '../icon/icon.types';
+export type IconButtonProps = ButtonProps & {
+    name: IconNames;
+    children?: ReactNode;
+};
+//# sourceMappingURL=icon-button.types.d.ts.map

package/dist/components/ui/icon-button/icon-button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/icon-button.types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC"}

package/dist/components/ui/icon-button/icon-button.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon-button.types.js.map

package/dist/components/ui/icon-button/icon-button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.types.js","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/icon-button.types.tsx"],"names":[],"mappings":""}

package/dist/components/ui/icon-button/index.d.ts

@@ -0,0 +1,3 @@
+export type { IconButtonProps } from './icon-button.types';
+export { IconButton } from './icon-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/icon-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/ui/icon-button/index.js

@@ -0,0 +1,2 @@
+export { IconButton } from './icon-button';
+//# sourceMappingURL=index.js.map

package/dist/components/ui/icon-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/icon-button/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,8 @@
+export * from './button';
+export * from './divider';
+export * from './icon';
+export * from './icon-button';
+export * from './mode-controller';
+export * from './test-component';
+export * from './toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC"}

package/dist/components/ui/index.js

@@ -0,0 +1,8 @@
+export * from './button';
+export * from './divider';
+export * from './icon';
+export * from './icon-button';
+export * from './mode-controller';
+export * from './test-component';
+export * from './toggle';
+//# sourceMappingURL=index.js.map

package/dist/components/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC"}

package/dist/components/ui/mode-controller/index.d.ts

@@ -0,0 +1,2 @@
+export { ModeController } from './mode-controller';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/mode-controller/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/mode-controller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/ui/mode-controller/index.js

@@ -0,0 +1,2 @@
+export { ModeController } from './mode-controller';
+//# sourceMappingURL=index.js.map

package/dist/components/ui/mode-controller/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/mode-controller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/ui/mode-controller/mode-controller.d.ts

@@ -0,0 +1,2 @@
+export declare const ModeController: () => void;
+//# sourceMappingURL=mode-controller.d.ts.map

package/dist/components/ui/mode-controller/mode-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-controller.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/mode-controller/mode-controller.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,cAAc,YAAW,CAAC"}

package/dist/components/ui/mode-controller/mode-controller.js

@@ -0,0 +1,15 @@
+// import { useThemeOption } from '../../../functions/theme/old';
+// import useT
+// import { ThemeModeOption } from '../../../types';
+// export const ModeController = () => {
+// 	const [option, setOption] = useThemeOption();
+// 	return (
+// 		<select value={option} onChange={(e) => setOption(e.target.value as ThemeModeOption)}>
+// 			<option value="light">Light</option>
+// 			<option value="dark">Dark</option>
+// 			<option value="system">System</option>
+// 		</select>
+// 	);
+// };
+export const ModeController = () => { };
+//# sourceMappingURL=mode-controller.js.map

package/dist/components/ui/mode-controller/mode-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-controller.js","sourceRoot":"","sources":["../../../../src/components/ui/mode-controller/mode-controller.tsx"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,cAAc;AACd,oDAAoD;AAEpD,wCAAwC;AACxC,iDAAiD;AAEjD,YAAY;AACZ,2FAA2F;AAC3F,0CAA0C;AAC1C,wCAAwC;AACxC,4CAA4C;AAC5C,cAAc;AACd,MAAM;AACN,KAAK;AACL,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC"}

package/dist/components/ui/test-component/index.d.ts

@@ -0,0 +1,2 @@
+export { TestComponent } from './test-component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/test-component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/test-component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/ui/test-component/index.js

@@ -0,0 +1,2 @@
+export { TestComponent } from './test-component';
+//# sourceMappingURL=index.js.map

package/dist/components/ui/test-component/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/test-component/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/ui/test-component/test-component.d.ts

@@ -0,0 +1,2 @@
+export declare const TestComponent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=test-component.d.ts.map

package/dist/components/ui/test-component/test-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-component.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/test-component/test-component.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,+CAezB,CAAC"}

package/dist/components/ui/test-component/test-component.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CONTAINER_STYLES } from '../../../defaults';
+import { useThreadStyleObjects, ThreadTheme } from '../../../functions';
+export const TestComponent = () => {
+    const styles = useThreadStyleObjects({
+        container: CONTAINER_STYLES,
+        block: {
+            backgroundColor: ThreadTheme.background,
+        },
+        text: {
+            color: ThreadTheme.primary.main,
+        },
+    });
+    return (_jsx("div", { className: `${styles.container} ${styles.block}`, children: _jsx("p", { className: styles.text, children: "TEST 123" }) }));
+};
+//# sourceMappingURL=test-component.js.map

package/dist/components/ui/test-component/test-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-component.js","sourceRoot":"","sources":["../../../../src/components/ui/test-component/test-component.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IACjC,MAAM,MAAM,GAAG,qBAAqB,CAAC;QACpC,SAAS,EAAE,gBAAgB;QAC3B,KAAK,EAAE;YACN,eAAe,EAAE,WAAW,CAAC,UAAU;SACvC;QACD,IAAI,EAAE;YACL,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,IAAI;SAC/B;KACD,CAAC,CAAC;IACH,OAAO,CACN,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,KAAK,EAAE,YACpD,YAAG,SAAS,EAAE,MAAM,CAAC,IAAI,yBAAc,GAClC,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ui/toggle/index.d.ts

@@ -0,0 +1,4 @@
+export type { ToggleProps } from './toggle.types';
+export { Toggle } from './toggle';
+export { ModeToggle } from './mode-toggle/mode-toggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/ui/toggle/index.js

@@ -0,0 +1,3 @@
+export { Toggle } from './toggle';
+export { ModeToggle } from './mode-toggle/mode-toggle';
+//# sourceMappingURL=index.js.map

package/dist/components/ui/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/toggle/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/ui/toggle/mode-toggle/mode-toggle.d.ts

@@ -0,0 +1,2 @@
+export declare const ModeToggle: () => void;
+//# sourceMappingURL=mode-toggle.d.ts.map

package/dist/components/ui/toggle/mode-toggle/mode-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/toggle/mode-toggle/mode-toggle.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU,YAAW,CAAC"}

package/dist/components/ui/toggle/mode-toggle/mode-toggle.js

@@ -0,0 +1,10 @@
+// 'use client';
+// import { getThemeValue } from '../../../../functions';
+// import { useThemeToggle } from '../../../../functions/theme/theme-provide';
+// import Toggle from '../toggle';
+// export const ModeToggle = () => {
+// 	const [mode, setMode] = useThemeToggle();
+// 	return <Toggle isOn={mode === 'dark'} onToggle={() => setMode(mode === 'light' ? 'dark' : 'light')} color="primary" />;
+// };
+export const ModeToggle = () => { };
+//# sourceMappingURL=mode-toggle.js.map

package/dist/components/ui/toggle/mode-toggle/mode-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.js","sourceRoot":"","sources":["../../../../../src/components/ui/toggle/mode-toggle/mode-toggle.tsx"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,yDAAyD;AACzD,8EAA8E;AAC9E,kCAAkC;AAElC,oCAAoC;AACpC,6CAA6C;AAE7C,2HAA2H;AAC3H,KAAK;AACL,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC"}

package/dist/components/ui/toggle/toggle.d.ts

@@ -0,0 +1,4 @@
+import { ToggleProps } from './toggle.types';
+export declare const Toggle: ({ isOn, onToggle, color }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default Toggle;
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/ui/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,MAAM,8BAA2C,WAAW,4CA+DxE,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/ui/toggle/toggle.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getUtilityColorValue } from '../../../utils';
+import { ThreadTheme } from '../../../functions';
+export const Toggle = ({ isOn, onToggle, color = 'success' }) => {
+    const colorValue = getUtilityColorValue(color);
+    const styles = {
+        button: {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: '24px',
+            width: '44px',
+            borderRadius: '9999px',
+            transition: 'background-color 200ms ease-in-out',
+            outline: 'none',
+        },
+        buttonOn: {
+            backgroundColor: colorValue,
+        },
+        buttonOff: {
+            backgroundColor: ThreadTheme.gray.main,
+        },
+        knob: {
+            display: 'inline-block',
+            height: '16px',
+            width: '16px',
+            backgroundColor: 'white',
+            borderRadius: '9999px',
+            transform: 'translateX(4px)',
+            transition: 'transform 200ms ease-in-out',
+        },
+        knobOn: {
+            transform: 'translateX(24px)',
+        },
+        srOnly: {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: '0',
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            borderWidth: '0',
+        },
+    };
+    return (_jsxs("button", { type: "button", onClick: onToggle, style: {
+            ...styles.button,
+            ...(isOn ? styles.buttonOn : styles.buttonOff),
+        }, children: [_jsx("span", { style: styles.srOnly, children: isOn ? 'On' : 'Off' }), _jsx("span", { style: {
+                    ...styles.knob,
+                    ...(isOn ? styles.knobOn : {}),
+                } })] }));
+};
+export default Toggle;
+//# sourceMappingURL=toggle.js.map

package/dist/components/ui/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/ui/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAe,EAAE,EAAE;IAC5E,MAAM,UAAU,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAkC;QAC7C,MAAM,EAAE;YACP,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,QAAQ;YACtB,UAAU,EAAE,oCAAoC;YAChD,OAAO,EAAE,MAAM;SACf;QACD,QAAQ,EAAE;YACT,eAAe,EAAE,UAAU;SAC3B;QACD,SAAS,EAAE;YACV,eAAe,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI;SACtC;QACD,IAAI,EAAE;YACL,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,OAAO;YACxB,YAAY,EAAE,QAAQ;YACtB,SAAS,EAAE,iBAAiB;YAC5B,UAAU,EAAE,6BAA6B;SACzC;QACD,MAAM,EAAE;YACP,SAAS,EAAE,kBAAkB;SAC7B;QACD,MAAM,EAAE;YACP,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,OAAO,EAAE,GAAG;YACZ,MAAM,EAAE,MAAM;YACd,QAAQ,EAAE,QAAQ;YAClB,IAAI,EAAE,kBAAkB;YACxB,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,GAAG;SAChB;KACD,CAAC;IAEF,OAAO,CACN,kBACC,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE;YACN,GAAG,MAAM,CAAC,MAAM;YAChB,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;SAC9C,aAED,eAAM,KAAK,EAAE,MAAM,CAAC,MAAM,YAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAQ,EACxD,eACC,KAAK,EAAE;oBACN,GAAG,MAAM,CAAC,IAAI;oBACd,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;iBAC9B,GACA,IACM,CACT,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}