@consumidor-positivo/aurora 0.0.89 → 0.0.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Card/Container/index.d.ts +10 -0
- package/dist/components/Card/Emphasis/index.d.ts +9 -0
- package/dist/components/Card/Image/index.d.ts +7 -0
- package/dist/components/Card/Root/index.d.ts +11 -0
- package/dist/components/Card/Tag/index.d.ts +8 -0
- package/dist/components/Card/index.d.ts +15 -0
- package/dist/components/Card/index.es.js +47 -0
- package/dist/components/Card/index.es.js.map +1 -0
- package/dist/components/Card/styles.css +1 -0
- package/dist/components/Container/index.es.js +23 -0
- package/dist/components/Container/index.es.js.map +1 -0
- package/dist/components/Emphasis/index.es.js +22 -0
- package/dist/components/Emphasis/index.es.js.map +1 -0
- package/dist/components/Icon/index.es.js +1 -0
- package/dist/components/Icon/index.es.js.map +1 -1
- package/dist/components/Icon/styles.css +1 -1
- package/dist/components/Image/index.es.js +12 -0
- package/dist/components/Image/index.es.js.map +1 -0
- package/dist/components/Tag/index.es.js +20 -0
- package/dist/components/Tag/index.es.js.map +1 -0
- package/dist/components/Text/styles.css +1 -1
- package/dist/components/icons/Icon.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export type CardContainerProps = {
|
|
4
|
+
direction?: 'column' | 'row';
|
|
5
|
+
alignItems?: 'center' | 'start';
|
|
6
|
+
justifyContent?: 'center' | 'space-between';
|
|
7
|
+
gap?: number;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export declare const CardContainer: ({ direction, alignItems, justifyContent, gap, children, }: CardContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export type CardEmphasisProps = {
|
|
2
|
+
content: {
|
|
3
|
+
title: string;
|
|
4
|
+
description: string;
|
|
5
|
+
}[];
|
|
6
|
+
height?: number;
|
|
7
|
+
maxHeight?: number;
|
|
8
|
+
};
|
|
9
|
+
export declare const CardEmphasis: ({ content, height, maxHeight, }: CardEmphasisProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export type CardRootProps = {
|
|
4
|
+
border?: boolean;
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
maxWidth?: number;
|
|
8
|
+
maxHeight?: number;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export declare const CardRoot: ({ border, width, height, maxWidth, maxHeight, children, }: CardRootProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export type CardTagProps = {
|
|
4
|
+
color?: 'primary' | 'secondary';
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export declare const CardTag: ({ color, icon, children, }: CardTagProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CardContainerProps } from './Container';
|
|
2
|
+
import { CardEmphasisProps } from './Emphasis';
|
|
3
|
+
import { CardImageProps } from './Image';
|
|
4
|
+
import { CardRootProps } from './Root';
|
|
5
|
+
import { CardTagProps } from './Tag';
|
|
6
|
+
|
|
7
|
+
type Components = {
|
|
8
|
+
Root: React.FC<CardRootProps>;
|
|
9
|
+
Container: React.FC<CardContainerProps>;
|
|
10
|
+
Emphasis: React.FC<CardEmphasisProps>;
|
|
11
|
+
Image: React.FC<CardImageProps>;
|
|
12
|
+
Tag: React.FC<CardTagProps>;
|
|
13
|
+
};
|
|
14
|
+
declare const components: Components;
|
|
15
|
+
export { components as Card };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { CardContainer } from "../Container/index.es.js";
|
|
2
|
+
import { CardEmphasis } from "../Emphasis/index.es.js";
|
|
3
|
+
import { CardImage } from "../Image/index.es.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
6
|
+
import { CardTag } from "../Tag/index.es.js";
|
|
7
|
+
import './styles.css';const CardRoot = ({
|
|
8
|
+
border = true,
|
|
9
|
+
width,
|
|
10
|
+
height,
|
|
11
|
+
maxWidth,
|
|
12
|
+
maxHeight,
|
|
13
|
+
children
|
|
14
|
+
}) => {
|
|
15
|
+
const rootClasses = classNames("au-card__root", {
|
|
16
|
+
"au-card__root--border-none": !border
|
|
17
|
+
});
|
|
18
|
+
const rootSize = {
|
|
19
|
+
width: `${width}px`,
|
|
20
|
+
height: `${height}px`,
|
|
21
|
+
maxWidth: `${maxWidth}px`,
|
|
22
|
+
maxHeight: `${maxHeight}px`
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
style: rootSize,
|
|
28
|
+
className: rootClasses,
|
|
29
|
+
children
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
const components = {
|
|
34
|
+
Root: CardRoot,
|
|
35
|
+
Container: CardContainer,
|
|
36
|
+
Emphasis: CardEmphasis,
|
|
37
|
+
Image: CardImage,
|
|
38
|
+
Tag: CardTag
|
|
39
|
+
};
|
|
40
|
+
Object.keys(components).forEach((key) => {
|
|
41
|
+
const component = components[key];
|
|
42
|
+
component.displayName = `Card.${key}`;
|
|
43
|
+
});
|
|
44
|
+
export {
|
|
45
|
+
components as Card
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Root/index.tsx","../../../lib/components/Card/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardRootProps = {\n border?: boolean\n width?: number\n height?: number\n maxWidth?: number\n maxHeight?: number\n children: ReactNode\n}\nexport const CardRoot = ({\n border = true,\n width,\n height,\n maxWidth,\n maxHeight,\n children,\n}: CardRootProps) => {\n const rootClasses = classNames('au-card__root', {\n 'au-card__root--border-none': !border,\n })\n const rootSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n maxWidth: `${maxWidth}px`,\n maxHeight: `${maxHeight}px`\n }\n\n return (\n <div\n style={rootSize}\n className={rootClasses}>\n {children}\n </div>\n )\n}\n","import { CardContainer, CardContainerProps } from './Container'\nimport { CardEmphasis, CardEmphasisProps } from './Emphasis'\nimport { CardImage, CardImageProps } from './Image'\nimport { CardRoot, CardRootProps } from './Root'\nimport { CardTag, CardTagProps } from './Tag'\nimport './styles.scss'\n\ntype Components = {\n Root: React.FC<CardRootProps>\n Container: React.FC<CardContainerProps>\n Emphasis: React.FC<CardEmphasisProps>\n Image: React.FC<CardImageProps>\n Tag: React.FC<CardTagProps>\n}\n\nconst components: Components = {\n Root: CardRoot,\n Container: CardContainer,\n Emphasis: CardEmphasis,\n Image: CardImage,\n Tag: CardTag,\n}\n\nObject.keys(components).forEach((key) => {\n const component = components[key as keyof Components]\n component.displayName = `Card.${key}`\n})\n\nexport { components as Card }\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,WAAW,CAAC;AAAA,EACvB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACb,QAAA,cAAc,WAAW,iBAAiB;AAAA,IAC9C,8BAA8B,CAAC;AAAA,EAAA,CAChC;AACD,QAAM,WAA0B;AAAA,IAC9B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,IACjB,UAAU,GAAG,QAAQ;AAAA,IACrB,WAAW,GAAG,SAAS;AAAA,EAAA;AAIvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAGP;ACrBA,MAAM,aAAyB;AAAA,EAC7B,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AAAA,EACP,KAAK;AACP;AAEA,OAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAQ;AACjC,QAAA,YAAY,WAAW,GAAuB;AAC1C,YAAA,cAAc,QAAQ,GAAG;AACrC,CAAC;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.au-card{font-family:"Source Sans 3",sans-serif}.au-card__root{background-color:#fff;border-radius:16px;border:1px solid #e2e4e9;padding:16px}.au-card__root--border-none{border:none}.au-card__container{display:flex;flex-direction:column;align-items:start;width:100%;height:100%}.au-card__container--direction-row{flex-direction:row}.au-card__container--align-items-center{align-items:center}.au-card__container--justify-content-center{justify-content:center}.au-card__container--justify-content-space-between{justify-content:space-between}.au-card__emphasis{background-color:#f2f5fc;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:16px;margin:0 -16px;width:calc(100% + 32px)}.au-card__emphasis-container{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:end}.au-card__tag{border-radius:8px;display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 16px;width:100%;color:#16181d;font-size:14px;font-weight:600;line-height:21px}.au-card__tag--primary{background-color:#95f0cf}.au-card__tag--secondary{background-color:#eee6ff}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
const CardContainer = ({
|
|
4
|
+
direction,
|
|
5
|
+
alignItems,
|
|
6
|
+
justifyContent,
|
|
7
|
+
gap,
|
|
8
|
+
children
|
|
9
|
+
}) => {
|
|
10
|
+
const containerClasses = classNames("au-card__container", {
|
|
11
|
+
[`au-card__container--direction-${direction}`]: direction,
|
|
12
|
+
[`au-card__container--align-items-${alignItems}`]: alignItems,
|
|
13
|
+
[`au-card__container--justify-content-${justifyContent}`]: justifyContent
|
|
14
|
+
});
|
|
15
|
+
const containerStyle = {
|
|
16
|
+
gap: `${gap}px`
|
|
17
|
+
};
|
|
18
|
+
return /* @__PURE__ */ jsx("div", { style: containerStyle, className: containerClasses, children });
|
|
19
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
CardContainer
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Container/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { CSSProperties, ReactNode } from 'react'\n\nexport type CardContainerProps = {\n direction?: 'column' | 'row'\n alignItems?: 'center' | 'start'\n justifyContent?: 'center' | 'space-between'\n gap?: number\n children: ReactNode\n}\nexport const CardContainer = ({\n direction,\n alignItems,\n justifyContent,\n gap,\n children,\n}: CardContainerProps) => {\n const containerClasses = classNames('au-card__container', {\n [`au-card__container--direction-${direction}`]: direction,\n [`au-card__container--align-items-${alignItems}`]: alignItems,\n [`au-card__container--justify-content-${justifyContent}`]: justifyContent,\n })\n\n const containerStyle: CSSProperties = {\n gap: `${gap}px`,\n }\n return (\n <div style={containerStyle} className={containerClasses}>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;AAUO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AAClB,QAAA,mBAAmB,WAAW,sBAAsB;AAAA,IACxD,CAAC,iCAAiC,SAAS,EAAE,GAAG;AAAA,IAChD,CAAC,mCAAmC,UAAU,EAAE,GAAG;AAAA,IACnD,CAAC,uCAAuC,cAAc,EAAE,GAAG;AAAA,EAAA,CAC5D;AAED,QAAM,iBAAgC;AAAA,IACpC,KAAK,GAAG,GAAG;AAAA,EAAA;AAEb,6BACG,OAAI,EAAA,OAAO,gBAAgB,WAAW,kBACpC,SACH,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Text } from "../Text/index.es.js";
|
|
3
|
+
const CardEmphasis = ({
|
|
4
|
+
content,
|
|
5
|
+
height,
|
|
6
|
+
maxHeight
|
|
7
|
+
}) => {
|
|
8
|
+
const emphasisSize = {
|
|
9
|
+
height: `${height}px`,
|
|
10
|
+
maxHeight: `${maxHeight}px`
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ jsx("div", { style: emphasisSize, className: "au-card__emphasis", children: content == null ? void 0 : content.map((item) => {
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", { className: "au-card__emphasis-container", children: [
|
|
14
|
+
/* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", children: item.title }),
|
|
15
|
+
/* @__PURE__ */ jsx(Text, { variant: "body-small", weight: "semibold", children: item.description })
|
|
16
|
+
] });
|
|
17
|
+
}) });
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
CardEmphasis
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Emphasis/index.tsx"],"sourcesContent":["import { Text } from '@components/Text'\nimport { CSSProperties } from 'react'\n\nexport type CardEmphasisProps = {\n content: { title: string; description: string }[]\n height?: number\n maxHeight?: number\n}\nexport const CardEmphasis = ({\n content,\n height,\n maxHeight,\n}: CardEmphasisProps) => {\n const emphasisSize: CSSProperties = {\n height: `${height}px`,\n maxHeight: `${maxHeight}px`,\n }\n\n return (\n <div style={emphasisSize} className=\"au-card__emphasis\">\n {content?.map((item) => {\n return (\n <div className=\"au-card__emphasis-container\">\n <Text variant=\"body-small\" color=\"secondary\">\n {item.title}\n </Text>\n <Text variant=\"body-small\" weight=\"semibold\">\n {item.description}\n </Text>\n </div>\n )\n })}\n </div>\n )\n}\n"],"names":[],"mappings":";;AAQO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,eAA8B;AAAA,IAClC,QAAQ,GAAG,MAAM;AAAA,IACjB,WAAW,GAAG,SAAS;AAAA,EAAA;AAIvB,SAAA,oBAAC,SAAI,OAAO,cAAc,WAAU,qBACjC,UAAA,mCAAS,IAAI,CAAC,SAAS;AAEpB,WAAA,qBAAC,OAAI,EAAA,WAAU,+BACb,UAAA;AAAA,MAAA,oBAAC,QAAK,SAAQ,cAAa,OAAM,aAC9B,eAAK,OACR;AAAA,0BACC,MAAK,EAAA,SAAQ,cAAa,QAAO,YAC/B,eAAK,aACR;AAAA,IACF,EAAA,CAAA;AAAA,EAEH,GACH,CAAA;AAEJ;"}
|
|
@@ -18,6 +18,7 @@ import './styles.css';const Icon = ({
|
|
|
18
18
|
"au-icon--color-dark": color === "dark",
|
|
19
19
|
"au-icon--color-info": color === "info",
|
|
20
20
|
"au-icon--size-large": size === "large",
|
|
21
|
+
"au-icon--size-small": size === "small",
|
|
21
22
|
[`${className}`]: !!className
|
|
22
23
|
});
|
|
23
24
|
return /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../lib/components/icons/Icon.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\n\nexport type IconSize = 'large' | 'default'\nexport type IconColor = 'dark' | 'info' | 'default'\n\nexport type IconProps = {\n size?: IconSize\n color?: IconColor\n rawColor?: string\n className?: string\n onClick?: () => void\n}\ntype BaseIconProps = IconProps & {\n markup?: string\n name?: string\n}\n\nconst Icon: React.FC<BaseIconProps> = ({\n markup,\n name,\n size,\n color,\n rawColor,\n className,\n onClick,\n}: BaseIconProps) => {\n const iconStyle: React.CSSProperties = {\n ...(rawColor && { color: rawColor }),\n }\n\n const componentClass = classNames('au-icon', {\n [`au-icon--${name?.toLocaleLowerCase()}`]: !!name,\n 'au-icon--color-raw': !!rawColor,\n 'au-icon--color-dark': color === 'dark',\n 'au-icon--color-info': color === 'info',\n 'au-icon--size-large': size === 'large',\n [`${className}`]: !!className,\n })\n\n return (\n <div\n style={iconStyle}\n onClick={onClick}\n className={componentClass}\n dangerouslySetInnerHTML={{\n __html: markup || '',\n }}\n />\n )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;AAkBA,MAAM,OAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,YAAiC;AAAA,IACrC,GAAI,YAAY,EAAE,OAAO,SAAS;AAAA,EAAA;AAG9B,QAAA,iBAAiB,WAAW,WAAW;AAAA,IAC3C,CAAC,YAAY,6BAAM,mBAAmB,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7C,sBAAsB,CAAC,CAAC;AAAA,IACxB,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,SAAS;AAAA,IAChC,CAAC,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrB;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,yBAAyB;AAAA,QACvB,QAAQ,UAAU;AAAA,MACpB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/icons/Icon.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\n\nexport type IconSize = 'large' | 'small' | 'default'\nexport type IconColor = 'dark' | 'info' | 'default'\n\nexport type IconProps = {\n size?: IconSize\n color?: IconColor\n rawColor?: string\n className?: string\n onClick?: () => void\n}\ntype BaseIconProps = IconProps & {\n markup?: string\n name?: string\n}\n\nconst Icon: React.FC<BaseIconProps> = ({\n markup,\n name,\n size,\n color,\n rawColor,\n className,\n onClick,\n}: BaseIconProps) => {\n const iconStyle: React.CSSProperties = {\n ...(rawColor && { color: rawColor }),\n }\n\n const componentClass = classNames('au-icon', {\n [`au-icon--${name?.toLocaleLowerCase()}`]: !!name,\n 'au-icon--color-raw': !!rawColor,\n 'au-icon--color-dark': color === 'dark',\n 'au-icon--color-info': color === 'info',\n 'au-icon--size-large': size === 'large',\n 'au-icon--size-small': size === 'small',\n [`${className}`]: !!className,\n })\n\n return (\n <div\n style={iconStyle}\n onClick={onClick}\n className={componentClass}\n dangerouslySetInnerHTML={{\n __html: markup || '',\n }}\n />\n )\n}\n\nexport default Icon\n"],"names":[],"mappings":";;AAkBA,MAAM,OAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,YAAiC;AAAA,IACrC,GAAI,YAAY,EAAE,OAAO,SAAS;AAAA,EAAA;AAG9B,QAAA,iBAAiB,WAAW,WAAW;AAAA,IAC3C,CAAC,YAAY,6BAAM,mBAAmB,EAAE,GAAG,CAAC,CAAC;AAAA,IAC7C,sBAAsB,CAAC,CAAC;AAAA,IACxB,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,UAAU;AAAA,IACjC,uBAAuB,SAAS;AAAA,IAChC,uBAAuB,SAAS;AAAA,IAChC,CAAC,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC;AAAA,EAAA,CACrB;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,yBAAyB;AAAA,QACvB,QAAQ,UAAU;AAAA,MACpB;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-icon,.au-icon>svg{width:24px;height:24px;color:#0048db;display:flex;align-items:center;justify-content:center}.au-icon--size-large,.au-icon--size-large svg{width:32px;height:32px}.au-icon--color-dark>svg{color:#454a54}.au-icon--color-info>svg{color:#6728e5}.au-icon--color-raw>svg{color:inherit}
|
|
1
|
+
.au-icon,.au-icon>svg{width:24px;height:24px;color:#0048db;display:flex;align-items:center;justify-content:center}.au-icon--size-large,.au-icon--size-large svg{width:32px;height:32px}.au-icon--size-small,.au-icon--size-small svg{width:16px;height:16px}.au-icon--color-dark>svg{color:#454a54}.au-icon--color-info>svg{color:#6728e5}.au-icon--color-raw>svg{color:inherit}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
const CardImage = ({ src, alt, width, height }) => {
|
|
3
|
+
const imageSize = {
|
|
4
|
+
width: `${width}px`,
|
|
5
|
+
height: `${height}px`
|
|
6
|
+
};
|
|
7
|
+
return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("img", { style: imageSize, src, alt }) });
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
CardImage
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Image/index.tsx"],"sourcesContent":["import { CSSProperties } from 'react'\n\nexport type CardImageProps = {\n src: string\n alt?: string\n width?: number\n height?: number\n}\nexport const CardImage = ({ src, alt, width, height }: CardImageProps) => {\n const imageSize: CSSProperties = {\n width: `${width}px`,\n height: `${height}px`,\n }\n\n return (\n <div>\n <img style={imageSize} src={src} alt={alt} />\n </div>\n )\n}\n"],"names":[],"mappings":";AAQO,MAAM,YAAY,CAAC,EAAE,KAAK,KAAK,OAAO,aAA6B;AACxE,QAAM,YAA2B;AAAA,IAC/B,OAAO,GAAG,KAAK;AAAA,IACf,QAAQ,GAAG,MAAM;AAAA,EAAA;AAIjB,SAAA,oBAAC,SACC,UAAC,oBAAA,OAAA,EAAI,OAAO,WAAW,KAAU,IAAU,CAAA,EAC7C,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
const CardTag = ({
|
|
4
|
+
color = "primary",
|
|
5
|
+
icon,
|
|
6
|
+
children
|
|
7
|
+
}) => {
|
|
8
|
+
const tagClasses = classNames("au-card__tag", {
|
|
9
|
+
"au-card__tag--primary": color === "primary",
|
|
10
|
+
"au-card__tag--secondary": color === "secondary"
|
|
11
|
+
});
|
|
12
|
+
return /* @__PURE__ */ jsxs("div", { className: tagClasses, children: [
|
|
13
|
+
/* @__PURE__ */ jsx("span", { children: icon }),
|
|
14
|
+
/* @__PURE__ */ jsx("span", { children })
|
|
15
|
+
] });
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
CardTag
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../lib/components/Card/Tag/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { ReactNode } from 'react'\n\nexport type CardTagProps = {\n color?: 'primary' | 'secondary'\n icon?: ReactNode\n children: ReactNode\n}\nexport const CardTag = ({\n color = 'primary',\n icon,\n children,\n}: CardTagProps) => {\n const tagClasses = classNames('au-card__tag', {\n 'au-card__tag--primary': color === 'primary',\n 'au-card__tag--secondary': color === 'secondary',\n })\n return (\n <div className={tagClasses}>\n <span>{icon}</span>\n <span>{children}</span>\n </div>\n )\n}\n"],"names":[],"mappings":";;AAQO,MAAM,UAAU,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR;AAAA,EACA;AACF,MAAoB;AACZ,QAAA,aAAa,WAAW,gBAAgB;AAAA,IAC5C,yBAAyB,UAAU;AAAA,IACnC,2BAA2B,UAAU;AAAA,EAAA,CACtC;AAEC,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAA,oBAAC,UAAM,UAAK,KAAA,CAAA;AAAA,IACZ,oBAAC,UAAM,UAAS;AAAA,EAClB,EAAA,CAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:76px}.au-text--display-medium{font-size:48px;line-height:68px}.au-text--display-small{font-size:40px;line-height:60px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-micro{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:52px}.au-text--heading-large{font-size:28px;line-height:48px}.au-text--heading-medium{font-size:24px;line-height:44px}.au-text--heading-small{font-size:20px;line-height:
|
|
1
|
+
.au-text{font-family:"Source Sans 3",sans-serif;font-weight:400}.au-text--color-common{color:#16181d}.au-text--color-secondary{color:#454a54}.au-text--weight-bold{font-weight:700}.au-text--weight-semibold{font-weight:600}.au-text--weight-medium{font-weight:500}.au-text--weight-regular{font-weight:400}.au-text--weight-light{font-weight:300}.au-text--display-large,.au-text--display-medium,.au-text--display-small{font-family:Lexend Deca,sans-serif}.au-text--display-large{font-size:56px;line-height:76px}.au-text--display-medium{font-size:48px;line-height:68px}.au-text--display-small{font-size:40px;line-height:60px}.au-text--heading-big,.au-text--heading-large,.au-text--heading-medium,.au-text--heading-small,.au-text--heading-micro{font-family:Lexend Deca,sans-serif}.au-text--heading-big{font-size:32px;line-height:52px}.au-text--heading-large{font-size:28px;line-height:48px}.au-text--heading-medium{font-size:24px;line-height:44px}.au-text--heading-small{font-size:20px;line-height:28px}.au-text--heading-micro{font-size:16px;line-height:24px}.au-text--body-big,.au-text--body-large,.au-text--body-medium,.au-text--body-small{font-family:"Source Sans 3",sans-serif}.au-text--body-big{font-size:24px;line-height:36px}.au-text--body-large{font-size:20px;line-height:30px}.au-text--body-medium{font-size:16px;line-height:24px}.au-text--body-small{font-size:14px;line-height:21px}.au-text--caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:18px}@media (min-width: 1024px){.au-text--desk-display-large,.au-text--desk-display-medium,.au-text--desk-display-small{font-family:Lexend Deca,sans-serif}.au-text--desk-display-large{font-size:56px;line-height:76px}.au-text--desk-display-medium{font-size:48px;line-height:68px}.au-text--desk-display-small{font-size:40px;line-height:60px}.au-text--desk-heading-big,.au-text--desk-heading-large,.au-text--desk-heading-medium,.au-text--desk-heading-small,.au-text--desk-heading-micro{font-family:Lexend Deca,sans-serif}.au-text--desk-heading-big{font-size:32px;line-height:52px}.au-text--desk-heading-large{font-size:28px;line-height:48px}.au-text--desk-heading-medium{font-size:24px;line-height:44px}.au-text--desk-heading-small{font-size:20px;line-height:28px}.au-text--desk-heading-micro{font-size:16px;line-height:24px}.au-text--desk-body-big,.au-text--desk-body-large,.au-text--desk-body-medium,.au-text--desk-body-small{font-family:"Source Sans 3",sans-serif}.au-text--desk-body-big{font-size:24px;line-height:36px}.au-text--desk-body-large{font-size:20px;line-height:30px}.au-text--desk-body-medium{font-size:16px;line-height:24px}.au-text--desk-body-small{font-size:14px;line-height:21px}.au-text--desk-caption{font-family:"Source Sans 3",sans-serif;font-size:12px;line-height:18px}}
|