@cambly/syntax-core 19.1.0 → 19.2.0
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/Dialog/ModalDialog.cjs +3 -3
- package/dist/Dialog/ModalDialog.js +2 -2
- package/dist/IconButton/IconButton.cjs +7 -2
- package/dist/IconButton/IconButton.css +1627 -0
- package/dist/IconButton/IconButton.css.map +1 -1
- package/dist/IconButton/IconButton.d.ts +7 -1
- package/dist/IconButton/IconButton.js +6 -1
- package/dist/Modal/Modal.cjs +3 -3
- package/dist/Modal/Modal.js +2 -2
- package/dist/Popover/Popover.cjs +4 -4
- package/dist/Popover/Popover.js +3 -3
- package/dist/RichSelect/RichSelectList.cjs +6 -6
- package/dist/RichSelect/RichSelectList.js +5 -5
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/WordConfetti/WordConfetti.cjs +2 -2
- package/dist/WordConfetti/WordConfetti.js +1 -1
- package/dist/__chunks/{725OOIL4.js → 4SO4HHVL.js} +3 -3
- package/dist/__chunks/{A2MUYVOP.cjs → 5SG2TWV3.cjs} +7 -7
- package/dist/__chunks/{TTCJEHHX.js → ATUBU46J.js} +2 -2
- package/dist/__chunks/{A4EEJRTW.cjs → CWVVOO2G.cjs} +5 -5
- package/dist/__chunks/{HVGNETJV.js → GDXRRA57.js} +55 -10
- package/dist/__chunks/GDXRRA57.js.map +1 -0
- package/dist/__chunks/{C2HJHJQW.js → GMIOWJBD.js} +2 -2
- package/dist/__chunks/{XES27TWJ.js → HO7QM7X2.js} +1 -1
- package/dist/__chunks/{XES27TWJ.js.map → HO7QM7X2.js.map} +1 -1
- package/dist/__chunks/{LBBAOI6G.js → KR6JQ2DS.js} +2 -4
- package/dist/__chunks/KR6JQ2DS.js.map +1 -0
- package/dist/__chunks/{Q2PKWGLY.js → KZIOUAWM.js} +2 -2
- package/dist/__chunks/{3Y6HGWJG.cjs → OQSEZXJ6.cjs} +3 -3
- package/dist/__chunks/{3D6LFUMA.js → QURJJHRN.js} +2 -2
- package/dist/__chunks/{DDS2EDAA.cjs → ULC7XW64.cjs} +1 -1
- package/dist/__chunks/{DDS2EDAA.cjs.map → ULC7XW64.cjs.map} +1 -1
- package/dist/__chunks/{PZEDDYBZ.cjs → VJWLFFAD.cjs} +54 -9
- package/dist/__chunks/VJWLFFAD.cjs.map +1 -0
- package/dist/__chunks/{K3AY5BI4.cjs → VWM2UOZ3.cjs} +2 -4
- package/dist/__chunks/VWM2UOZ3.cjs.map +1 -0
- package/dist/__chunks/{B6775YJ4.cjs → VZTP4FJU.cjs} +3 -3
- package/dist/__chunks/{B3RYP36U.cjs → Y5R3XLL7.cjs} +3 -3
- package/dist/index.cjs +9 -9
- package/dist/index.js +8 -8
- package/package.json +1 -1
- package/dist/__chunks/HVGNETJV.js.map +0 -1
- package/dist/__chunks/K3AY5BI4.cjs.map +0 -1
- package/dist/__chunks/LBBAOI6G.js.map +0 -1
- package/dist/__chunks/PZEDDYBZ.cjs.map +0 -1
- /package/dist/__chunks/{725OOIL4.js.map → 4SO4HHVL.js.map} +0 -0
- /package/dist/__chunks/{A2MUYVOP.cjs.map → 5SG2TWV3.cjs.map} +0 -0
- /package/dist/__chunks/{TTCJEHHX.js.map → ATUBU46J.js.map} +0 -0
- /package/dist/__chunks/{A4EEJRTW.cjs.map → CWVVOO2G.cjs.map} +0 -0
- /package/dist/__chunks/{C2HJHJQW.js.map → GMIOWJBD.js.map} +0 -0
- /package/dist/__chunks/{Q2PKWGLY.js.map → KZIOUAWM.js.map} +0 -0
- /package/dist/__chunks/{3Y6HGWJG.cjs.map → OQSEZXJ6.cjs.map} +0 -0
- /package/dist/__chunks/{3D6LFUMA.js.map → QURJJHRN.js.map} +0 -0
- /package/dist/__chunks/{B6775YJ4.cjs.map → VZTP4FJU.cjs.map} +0 -0
- /package/dist/__chunks/{B3RYP36U.cjs.map → Y5R3XLL7.cjs.map} +0 -0
|
@@ -12,6 +12,9 @@ import {
|
|
|
12
12
|
import {
|
|
13
13
|
backgroundColor
|
|
14
14
|
} from "./YGON3SJ5.js";
|
|
15
|
+
import {
|
|
16
|
+
Box_default
|
|
17
|
+
} from "./IB6JZQF3.js";
|
|
15
18
|
import {
|
|
16
19
|
useIsHydrated
|
|
17
20
|
} from "./JB65NEXK.js";
|
|
@@ -24,7 +27,17 @@ import { forwardRef } from "react";
|
|
|
24
27
|
var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_sm_txjkh_46", "md": "_md_txjkh_51", "lg": "_lg_txjkh_56", "smIcon": "_smIcon_txjkh_61", "mdIcon": "_mdIcon_txjkh_68", "lgIcon": "_lgIcon_txjkh_75" };
|
|
25
28
|
|
|
26
29
|
// src/IconButton/IconButton.tsx
|
|
27
|
-
import { jsx } from "react/jsx-runtime";
|
|
30
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
31
|
+
var sizeToIndicatorSize = {
|
|
32
|
+
sm: "6px",
|
|
33
|
+
md: "8px",
|
|
34
|
+
lg: "10px"
|
|
35
|
+
};
|
|
36
|
+
var sizeToVerticalOffset = {
|
|
37
|
+
sm: "-1px",
|
|
38
|
+
md: "-2px",
|
|
39
|
+
lg: "-3px"
|
|
40
|
+
};
|
|
28
41
|
var IconButton = forwardRef(
|
|
29
42
|
({
|
|
30
43
|
accessibilityLabel,
|
|
@@ -35,12 +48,13 @@ var IconButton = forwardRef(
|
|
|
35
48
|
size = "md",
|
|
36
49
|
tooltip,
|
|
37
50
|
on = "lightBackground",
|
|
51
|
+
indicatorColor,
|
|
38
52
|
onClick
|
|
39
53
|
}, ref) => {
|
|
40
54
|
const isHydrated = useIsHydrated();
|
|
41
55
|
const foregroundColorClass = foregroundColor(color, on);
|
|
42
56
|
const backgroundColorClass = backgroundColor(color, on);
|
|
43
|
-
return /* @__PURE__ */
|
|
57
|
+
return /* @__PURE__ */ jsxs(
|
|
44
58
|
"button",
|
|
45
59
|
{
|
|
46
60
|
"aria-label": accessibilityLabel,
|
|
@@ -57,13 +71,44 @@ var IconButton = forwardRef(
|
|
|
57
71
|
IconButton_module_default[size]
|
|
58
72
|
),
|
|
59
73
|
ref,
|
|
60
|
-
children:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
Icon,
|
|
77
|
+
{
|
|
78
|
+
className: materialIconSize[size],
|
|
79
|
+
size: internalIconSize[size]
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
indicatorColor && /* @__PURE__ */ jsx(
|
|
83
|
+
Box_default,
|
|
84
|
+
{
|
|
85
|
+
display: "flex",
|
|
86
|
+
position: "relative",
|
|
87
|
+
justifyContent: "end",
|
|
88
|
+
alignItems: "end",
|
|
89
|
+
children: /* @__PURE__ */ jsx(
|
|
90
|
+
Box_default,
|
|
91
|
+
{
|
|
92
|
+
display: "flex",
|
|
93
|
+
alignItems: "center",
|
|
94
|
+
justifyContent: "center",
|
|
95
|
+
position: "absolute",
|
|
96
|
+
backgroundColor: indicatorColor,
|
|
97
|
+
width: sizeToIndicatorSize[size],
|
|
98
|
+
height: sizeToIndicatorSize[size],
|
|
99
|
+
"data-testid": "indicator",
|
|
100
|
+
rounding: "full",
|
|
101
|
+
dangerouslySetInlineStyle: {
|
|
102
|
+
__style: {
|
|
103
|
+
border: "1px solid white",
|
|
104
|
+
transform: `translateY(${sizeToVerticalOffset[size]})`
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
]
|
|
67
112
|
}
|
|
68
113
|
);
|
|
69
114
|
}
|
|
@@ -74,4 +119,4 @@ var IconButton_default = IconButton;
|
|
|
74
119
|
export {
|
|
75
120
|
IconButton_default
|
|
76
121
|
};
|
|
77
|
-
//# sourceMappingURL=
|
|
122
|
+
//# sourceMappingURL=GDXRRA57.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport Box from \"../Box/Box\";\n\nconst sizeToIndicatorSize = {\n sm: \"6px\",\n md: \"8px\",\n lg: \"10px\",\n} as const;\n\nconst sizeToVerticalOffset = {\n sm: \"-1px\",\n md: \"-2px\",\n lg: \"-3px\",\n} as const;\n\ntype Color =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: Color;\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * If specified, will create an indicator (dot) on the top right of the button with the specified color\n */\n indicatorColor?: ComponentProps<typeof Box>[\"backgroundColor\"];\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n on = \"lightBackground\",\n indicatorColor,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n )}\n ref={ref}\n >\n <Icon\n className={materialIconSize[size]}\n size={internalIconSize[size]}\n />\n {indicatorColor && (\n <Box\n display=\"flex\"\n position=\"relative\"\n justifyContent=\"end\"\n alignItems=\"end\"\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor={indicatorColor}\n width={sizeToIndicatorSize[size]}\n height={sizeToIndicatorSize[size]}\n data-testid=\"indicator\"\n rounding=\"full\"\n dangerouslySetInlineStyle={{\n __style: {\n border: \"1px solid white\",\n transform: `translateY(${sizeToVerticalOffset[size]})`,\n },\n }}\n />\n </Box>\n )}\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;AD2HhS,SAgBE,KAhBF;AA5GN,IAAM,sBAAsB;AAAA,EAC1B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,uBAAuB;AAAA,EAC3B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA6EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,iBAAiB,IAAI;AAAA,cAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UACC,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,YAAW;AAAA,cAEX;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,YAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,UAAS;AAAA,kBACT,iBAAiB;AAAA,kBACjB,OAAO,oBAAoB,IAAI;AAAA,kBAC/B,QAAQ,oBAAoB,IAAI;AAAA,kBAChC,eAAY;AAAA,kBACZ,UAAS;AAAA,kBACT,2BAA2B;AAAA,oBACzB,SAAS;AAAA,sBACP,QAAQ;AAAA,sBACR,WAAW,cAAc,qBAAqB,IAAI;AAAA,oBACpD;AAAA,kBACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
} from "./HVA7R2EL.js";
|
|
14
14
|
import {
|
|
15
15
|
IconButton_default
|
|
16
|
-
} from "./
|
|
16
|
+
} from "./GDXRRA57.js";
|
|
17
17
|
import {
|
|
18
18
|
Box_default
|
|
19
19
|
} from "./IB6JZQF3.js";
|
|
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
|
|
|
130
130
|
export {
|
|
131
131
|
Modal
|
|
132
132
|
};
|
|
133
|
-
//# sourceMappingURL=
|
|
133
|
+
//# sourceMappingURL=GMIOWJBD.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue,
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 13 Aug 2024 19:26:44 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB;","names":[]}
|
|
@@ -33,7 +33,6 @@ var gaps = {
|
|
|
33
33
|
};
|
|
34
34
|
var WordConfetto = ({
|
|
35
35
|
backgroundColor,
|
|
36
|
-
key,
|
|
37
36
|
rotation,
|
|
38
37
|
size,
|
|
39
38
|
text
|
|
@@ -50,8 +49,7 @@ var WordConfetto = ({
|
|
|
50
49
|
},
|
|
51
50
|
width: "fit-content",
|
|
52
51
|
children: /* @__PURE__ */ jsx(Typography_default, { size, weight: "bold", fontStyle: "serif", children: text })
|
|
53
|
-
}
|
|
54
|
-
key
|
|
52
|
+
}
|
|
55
53
|
);
|
|
56
54
|
};
|
|
57
55
|
var WordConfetti = forwardRef(
|
|
@@ -103,4 +101,4 @@ var WordConfetti_default = WordConfetti;
|
|
|
103
101
|
export {
|
|
104
102
|
WordConfetti_default
|
|
105
103
|
};
|
|
106
|
-
//# sourceMappingURL=
|
|
104
|
+
//# sourceMappingURL=KR6JQ2DS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"sourcesContent":["import { type ReactNode, forwardRef, useMemo, type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\nconst themeBackgroundColors = {\n neutral: [\"pink\", \"lilac\", \"thistle\"],\n cool: [\"sky\", \"slate\", \"teal\"],\n warm: [\"red\", \"tan\", \"orange\"],\n} as const;\n\nconst degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];\n\nconst paddings = {\n 300: \"16px 20px 16px 20px\",\n 400: \"20px 24px 20px 24px\",\n 700: \"24px 28px 24px 28px\",\n 800: \"28px 40px 28px 40px\",\n 900: \"32px 48px 32px 48px\",\n 1100: \"36px 56px 36px 56px\",\n};\n\nconst gaps = {\n 300: 3,\n 400: 4,\n 700: 6,\n 800: 6,\n 900: 9,\n 1100: 10,\n} as const;\n\nconst WordConfetto = ({\n backgroundColor,\n rotation,\n size,\n text,\n}: {\n backgroundColor:\n | \"pink\"\n | \"lilac\"\n | \"thistle\"\n | \"sky\"\n | \"slate\"\n | \"teal\"\n | \"red\"\n | \"tan\"\n | \"orange\";\n rotation: number;\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n text: string;\n}): ReactElement => {\n return (\n <Box\n backgroundColor={backgroundColor}\n dangerouslySetInlineStyle={{\n __style: {\n padding: paddings[size],\n transform: `rotate(${rotation}deg)`,\n },\n }}\n width=\"fit-content\"\n >\n <Typography size={size} weight=\"bold\" fontStyle=\"serif\">\n {text}\n </Typography>\n </Box>\n );\n};\n\ntype Direction = \"row\" | \"column\";\ntype WordConfettiProps = {\n /**\n * Test id for the confetti\n */\n \"data-testid\"?: string;\n /**\n * The direction to display the words.\n * @defaultValue row\n */\n direction?: Direction;\n /**\n * The size of the font in the confetti.\n */\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n /**\n * The theme for the background colors of the confetti.\n */\n theme: \"neutral\" | \"cool\" | \"warm\";\n /**\n * The words to display as confetti.\n */\n words: string[];\n};\n\n/**\n * [WordConfetti](https://cambly-syntax.vercel.app/?path=/docs/components-wordconfetti--docs) is a container for displaying words in different color themes and fun offset angles.\n */\nconst WordConfetti = forwardRef<HTMLDivElement, WordConfettiProps>(\n function WordConfetti(props: WordConfettiProps, ref): JSX.Element {\n const {\n \"data-testid\": dataTestId,\n direction = \"row\",\n size,\n theme,\n words,\n } = props;\n\n const styledWords = useMemo(\n () =>\n words.map((word) => ({\n text: word,\n backgroundColor:\n themeBackgroundColors[theme][Math.floor(Math.random() * 3)],\n rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)],\n })),\n [theme, words],\n );\n\n return (\n <Box\n display=\"flex\"\n direction={direction}\n flexWrap=\"wrap\"\n data-testid={dataTestId}\n ref={ref}\n gap={gaps[size]}\n >\n {styledWords.map(\n ({ text, backgroundColor, rotation }, index): ReactNode => {\n return (\n <WordConfetto\n key={`${text}+${index}`}\n backgroundColor={backgroundColor}\n rotation={rotation}\n size={size}\n text={text}\n />\n );\n },\n )}\n </Box>\n );\n },\n);\n\nexport default WordConfetti;\n"],"mappings":";;;;;;;;;AAAA,SAAyB,YAAY,eAAkC;AA6DjE;AAzDN,IAAM,wBAAwB;AAAA,EAC5B,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,EACpC,MAAM,CAAC,OAAO,SAAS,MAAM;AAAA,EAC7B,MAAM,CAAC,OAAO,OAAO,QAAQ;AAC/B;AAEA,IAAM,sBAAsB,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE1D,IAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAcoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,SAAS,IAAI;AAAA,UACtB,WAAW,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,sBAAW,MAAY,QAAO,QAAO,WAAU,SAC7C,gBACH;AAAA;AAAA,EACF;AAEJ;AA8BA,IAAM,eAAe;AAAA,EACnB,SAASA,cAAa,OAA0B,KAAkB;AAChE,UAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,cAAc;AAAA,MAClB,MACE,MAAM,IAAI,CAAC,UAAU;AAAA,QACnB,MAAM;AAAA,QACN,iBACE,sBAAsB,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,QAC5D,UAAU,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,MAC7D,EAAE;AAAA,MACJ,CAAC,OAAO,KAAK;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,sBAAY;AAAA,UACX,CAAC,EAAE,MAAM,iBAAiB,SAAS,GAAG,UAAqB;AACzD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,cAJK,GAAG,QAAQ;AAAA,YAKlB;AAAA,UAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ;","names":["WordConfetti"]}
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
ColorBaseDestructive700,
|
|
7
7
|
ColorBaseGray700,
|
|
8
8
|
ColorCambioWhite100
|
|
9
|
-
} from "./
|
|
9
|
+
} from "./HO7QM7X2.js";
|
|
10
10
|
import {
|
|
11
11
|
Focus_module_default
|
|
12
12
|
} from "./KKADUD65.js";
|
|
@@ -148,4 +148,4 @@ SelectList.Option = SelectOption_default;
|
|
|
148
148
|
export {
|
|
149
149
|
SelectList
|
|
150
150
|
};
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=KZIOUAWM.js.map
|
|
@@ -13,7 +13,7 @@ var _7KH536I2cjs = require('./7KH536I2.cjs');
|
|
|
13
13
|
var _THM3NAFOcjs = require('./THM3NAFO.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
@@ -79,7 +79,7 @@ function Modal({
|
|
|
79
79
|
__style: { top: 4, right: 4 }
|
|
80
80
|
},
|
|
81
81
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
82
|
-
|
|
82
|
+
_VJWLFFADcjs.IconButton_default,
|
|
83
83
|
{
|
|
84
84
|
accessibilityLabel: accessibilityCloseLabel,
|
|
85
85
|
color: image ? "primary" : "tertiary",
|
|
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
|
|
|
130
130
|
|
|
131
131
|
|
|
132
132
|
exports.Modal = Modal;
|
|
133
|
-
//# sourceMappingURL=
|
|
133
|
+
//# sourceMappingURL=OQSEZXJ6.cjs.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./CXENLD6O.js";
|
|
5
5
|
import {
|
|
6
6
|
IconButton_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./GDXRRA57.js";
|
|
8
8
|
import {
|
|
9
9
|
Box_default
|
|
10
10
|
} from "./IB6JZQF3.js";
|
|
@@ -157,4 +157,4 @@ export {
|
|
|
157
157
|
AriaModal,
|
|
158
158
|
ModalDialog_default
|
|
159
159
|
};
|
|
160
|
-
//# sourceMappingURL=
|
|
160
|
+
//# sourceMappingURL=QURJJHRN.js.map
|
|
@@ -10,4 +10,4 @@ var ColorCambioWhite100 = "#ffffff";
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=ULC7XW64.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue,
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 13 Aug 2024 19:26:44 GMT\n */\n\nexport const ColorBaseBlack = \"#000000\";\nexport const ColorBaseDestructive100 = \"#fef3f5\";\nexport const ColorBaseDestructive200 = \"#fad6de\";\nexport const ColorBaseDestructive300 = \"#f2a2b2\";\nexport const ColorBaseDestructive700 = \"#d32a4b\";\nexport const ColorBaseDestructive800 = \"#81162c\";\nexport const ColorBaseDestructive900 = \"#55101d\";\nexport const ColorBaseGray10 = \"#cbcbcb\"; // Used as the default color for dividers and inner strokes\nexport const ColorBaseGray30 = \"#000000\"; // For IconButton background when on top of an image\nexport const ColorBaseGray60 = \"#000000\"; // Used for icon background in classroom video grid\nexport const ColorBaseGray80 = \"#000000\"; // Used as the background for modals\nexport const ColorBaseGray100 = \"#f7f7f7\";\nexport const ColorBaseGray200 = \"#f0f0f0\"; // Used for light mode backgrounds when showing card content on top\nexport const ColorBaseGray300 = \"#d0d0d0\"; // Used for component outlines, eg: select and textfield\nexport const ColorBaseGray700 = \"#767676\"; // For secondary text in light mode\nexport const ColorBaseGray800 = \"#353535\";\nexport const ColorBaseGray900 = \"#191919\"; // Default text color, Classroom background\nexport const ColorBaseOrange100 = \"#fdf2f0\";\nexport const ColorBaseOrange200 = \"#f6cdc4\";\nexport const ColorBaseOrange300 = \"#ec9987\";\nexport const ColorBaseOrange700 = \"#c34124\";\nexport const ColorBaseOrange800 = \"#732818\";\nexport const ColorBaseOrange900 = \"#4d1a10\";\nexport const ColorBasePrimary100 = \"#eff6fa\";\nexport const ColorBasePrimary200 = \"#c1dbe7\";\nexport const ColorBasePrimary300 = \"#84b7d0\";\nexport const ColorBasePrimary700 = \"#236482\";\nexport const ColorBasePrimary800 = \"#274858\";\nexport const ColorBasePrimary900 = \"#1b303b\";\nexport const ColorBaseSuccess100 = \"#eff7f1\";\nexport const ColorBaseSuccess200 = \"#bddcc6\";\nexport const ColorBaseSuccess300 = \"#81ba92\";\nexport const ColorBaseSuccess700 = \"#397b4d\";\nexport const ColorBaseSuccess800 = \"#2d4936\";\nexport const ColorBaseSuccess900 = \"#1e3124\";\nexport const ColorBasePurple100 = \"#f9f5fa\";\nexport const ColorBasePurple200 = \"#e8dceb\";\nexport const ColorBasePurple300 = \"#cdb4d3\";\nexport const ColorBasePurple700 = \"#8b5f95\";\nexport const ColorBasePurple800 = \"#523b58\";\nexport const ColorBasePurple900 = \"#37273b\";\nexport const ColorBaseYellow100 = \"#fdf5d9\";\nexport const ColorBaseYellow200 = \"#fbe8a3\";\nexport const ColorBaseYellow300 = \"#f8d663\";\nexport const ColorBaseYellow700 = \"#ffc929\";\nexport const ColorBaseYellow800 = \"#765f1c\";\nexport const ColorBaseYellow900 = \"#3b3009\";\nexport const ColorBaseWhite = \"#ffffff\";\nexport const ColorCambioBlack = \"#050500\";\nexport const ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
|
|
@@ -14,6 +14,9 @@ var _2D3DOVVZcjs = require('./2D3DOVVZ.cjs');
|
|
|
14
14
|
var _F3SUJGZLcjs = require('./F3SUJGZL.cjs');
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
18
|
+
|
|
19
|
+
|
|
17
20
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
18
21
|
|
|
19
22
|
// src/IconButton/IconButton.tsx
|
|
@@ -25,6 +28,16 @@ var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_s
|
|
|
25
28
|
|
|
26
29
|
// src/IconButton/IconButton.tsx
|
|
27
30
|
var _jsxruntime = require('react/jsx-runtime');
|
|
31
|
+
var sizeToIndicatorSize = {
|
|
32
|
+
sm: "6px",
|
|
33
|
+
md: "8px",
|
|
34
|
+
lg: "10px"
|
|
35
|
+
};
|
|
36
|
+
var sizeToVerticalOffset = {
|
|
37
|
+
sm: "-1px",
|
|
38
|
+
md: "-2px",
|
|
39
|
+
lg: "-3px"
|
|
40
|
+
};
|
|
28
41
|
var IconButton = _react.forwardRef.call(void 0,
|
|
29
42
|
({
|
|
30
43
|
accessibilityLabel,
|
|
@@ -35,12 +48,13 @@ var IconButton = _react.forwardRef.call(void 0,
|
|
|
35
48
|
size = "md",
|
|
36
49
|
tooltip,
|
|
37
50
|
on = "lightBackground",
|
|
51
|
+
indicatorColor,
|
|
38
52
|
onClick
|
|
39
53
|
}, ref) => {
|
|
40
54
|
const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
|
|
41
55
|
const foregroundColorClass = _RXQBNEFRcjs.foregroundColor.call(void 0, color, on);
|
|
42
56
|
const backgroundColorClass = _F3SUJGZLcjs.backgroundColor.call(void 0, color, on);
|
|
43
|
-
return /* @__PURE__ */ _jsxruntime.
|
|
57
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
44
58
|
"button",
|
|
45
59
|
{
|
|
46
60
|
"aria-label": accessibilityLabel,
|
|
@@ -57,13 +71,44 @@ var IconButton = _react.forwardRef.call(void 0,
|
|
|
57
71
|
IconButton_module_default[size]
|
|
58
72
|
),
|
|
59
73
|
ref,
|
|
60
|
-
children:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
76
|
+
Icon,
|
|
77
|
+
{
|
|
78
|
+
className: _65BTPZZTcjs.materialIconSize[size],
|
|
79
|
+
size: _65BTPZZTcjs.internalIconSize[size]
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
indicatorColor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
83
|
+
_QODNNCT2cjs.Box_default,
|
|
84
|
+
{
|
|
85
|
+
display: "flex",
|
|
86
|
+
position: "relative",
|
|
87
|
+
justifyContent: "end",
|
|
88
|
+
alignItems: "end",
|
|
89
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
90
|
+
_QODNNCT2cjs.Box_default,
|
|
91
|
+
{
|
|
92
|
+
display: "flex",
|
|
93
|
+
alignItems: "center",
|
|
94
|
+
justifyContent: "center",
|
|
95
|
+
position: "absolute",
|
|
96
|
+
backgroundColor: indicatorColor,
|
|
97
|
+
width: sizeToIndicatorSize[size],
|
|
98
|
+
height: sizeToIndicatorSize[size],
|
|
99
|
+
"data-testid": "indicator",
|
|
100
|
+
rounding: "full",
|
|
101
|
+
dangerouslySetInlineStyle: {
|
|
102
|
+
__style: {
|
|
103
|
+
border: "1px solid white",
|
|
104
|
+
transform: `translateY(${sizeToVerticalOffset[size]})`
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
]
|
|
67
112
|
}
|
|
68
113
|
);
|
|
69
114
|
}
|
|
@@ -74,4 +119,4 @@ var IconButton_default = IconButton;
|
|
|
74
119
|
|
|
75
120
|
|
|
76
121
|
exports.IconButton_default = IconButton_default;
|
|
77
|
-
//# sourceMappingURL=
|
|
122
|
+
//# sourceMappingURL=VJWLFFAD.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AAEvB,SAAqC,kBAAkB;;;ACF6C,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;AD2HhS,SAgBE,KAhBF;AA5GN,IAAM,sBAAsB;AAAA,EAC1B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,uBAAuB;AAAA,EAC3B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA6EA,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,MAAM;AAAA,IACN,OAAO;AAAA,IACP;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,aAAa,cAAc;AACjC,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,cAAc;AAAA,QACzB;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAO,IAAI;AAAA,QACb;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,iBAAiB,IAAI;AAAA,cAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UACC,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,UAAS;AAAA,cACT,gBAAe;AAAA,cACf,YAAW;AAAA,cAEX;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,YAAW;AAAA,kBACX,gBAAe;AAAA,kBACf,UAAS;AAAA,kBACT,iBAAiB;AAAA,kBACjB,OAAO,oBAAoB,IAAI;AAAA,kBAC/B,QAAQ,oBAAoB,IAAI;AAAA,kBAChC,eAAY;AAAA,kBACZ,UAAS;AAAA,kBACT,2BAA2B;AAAA,oBACzB,SAAS;AAAA,sBACP,QAAQ;AAAA,sBACR,WAAW,cAAc,qBAAqB,IAAI;AAAA,oBACpD;AAAA,kBACF;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import classNames from \"classnames\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport React, { type ComponentProps, forwardRef } from \"react\";\nimport { type Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport Box from \"../Box/Box\";\n\nconst sizeToIndicatorSize = {\n sm: \"6px\",\n md: \"8px\",\n lg: \"10px\",\n} as const;\n\nconst sizeToVerticalOffset = {\n sm: \"-1px\",\n md: \"-2px\",\n lg: \"-3px\",\n} as const;\n\ntype Color =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n\ntype IconButtonProps = {\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?: Color;\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The size of the button\n\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * The label to be used for accessibility\n */\n accessibilityLabel: string;\n /**\n * The icon to be displayed.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * If specified, will create an indicator (dot) on the top right of the button with the specified color\n */\n indicatorColor?: ComponentProps<typeof Box>[\"backgroundColor\"];\n /**\n * The callback to be called when the button is clicked\n */\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n /**\n * The tooltip to be displayed when the user hovers over the button\n */\n tooltip?: string;\n};\n\n/**\n * [IconButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconbutton--docs) is a clickable element that is used to perform an action.\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (\n {\n accessibilityLabel,\n color = \"primary\",\n \"data-testid\": dataTestId,\n disabled = false,\n icon: Icon,\n size = \"md\",\n tooltip,\n on = \"lightBackground\",\n indicatorColor,\n onClick,\n }: IconButtonProps,\n ref,\n ) => {\n const isHydrated = useIsHydrated();\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <button\n aria-label={accessibilityLabel}\n data-testid={dataTestId}\n type=\"button\"\n title={tooltip}\n disabled={!isHydrated || disabled}\n onClick={onClick}\n className={classNames(\n styles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n styles[size],\n )}\n ref={ref}\n >\n <Icon\n className={materialIconSize[size]}\n size={internalIconSize[size]}\n />\n {indicatorColor && (\n <Box\n display=\"flex\"\n position=\"relative\"\n justifyContent=\"end\"\n alignItems=\"end\"\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor={indicatorColor}\n width={sizeToIndicatorSize[size]}\n height={sizeToIndicatorSize[size]}\n data-testid=\"indicator\"\n rounding=\"full\"\n dangerouslySetInlineStyle={{\n __style: {\n border: \"1px solid white\",\n transform: `translateY(${sizeToVerticalOffset[size]})`,\n },\n }}\n />\n </Box>\n )}\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"]}
|
|
@@ -33,7 +33,6 @@ var gaps = {
|
|
|
33
33
|
};
|
|
34
34
|
var WordConfetto = ({
|
|
35
35
|
backgroundColor,
|
|
36
|
-
key,
|
|
37
36
|
rotation,
|
|
38
37
|
size,
|
|
39
38
|
text
|
|
@@ -50,8 +49,7 @@ var WordConfetto = ({
|
|
|
50
49
|
},
|
|
51
50
|
width: "fit-content",
|
|
52
51
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5NQO6SP3cjs.Typography_default, { size, weight: "bold", fontStyle: "serif", children: text })
|
|
53
|
-
}
|
|
54
|
-
key
|
|
52
|
+
}
|
|
55
53
|
);
|
|
56
54
|
};
|
|
57
55
|
var WordConfetti = _react.forwardRef.call(void 0,
|
|
@@ -103,4 +101,4 @@ var WordConfetti_default = WordConfetti;
|
|
|
103
101
|
|
|
104
102
|
|
|
105
103
|
exports.WordConfetti_default = WordConfetti_default;
|
|
106
|
-
//# sourceMappingURL=
|
|
104
|
+
//# sourceMappingURL=VWM2UOZ3.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/WordConfetti/WordConfetti.tsx"],"names":["WordConfetti"],"mappings":";;;;;;;;;AAAA,SAAyB,YAAY,eAAkC;AA6DjE;AAzDN,IAAM,wBAAwB;AAAA,EAC5B,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,EACpC,MAAM,CAAC,OAAO,SAAS,MAAM;AAAA,EAC7B,MAAM,CAAC,OAAO,OAAO,QAAQ;AAC/B;AAEA,IAAM,sBAAsB,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAE1D,IAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,OAAO;AAAA,EACX,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AACR;AAEA,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAcoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,2BAA2B;AAAA,QACzB,SAAS;AAAA,UACP,SAAS,SAAS,IAAI;AAAA,UACtB,WAAW,UAAU;AAAA,QACvB;AAAA,MACF;AAAA,MACA,OAAM;AAAA,MAEN,8BAAC,sBAAW,MAAY,QAAO,QAAO,WAAU,SAC7C,gBACH;AAAA;AAAA,EACF;AAEJ;AA8BA,IAAM,eAAe;AAAA,EACnB,SAASA,cAAa,OAA0B,KAAkB;AAChE,UAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI;AAEJ,UAAM,cAAc;AAAA,MAClB,MACE,MAAM,IAAI,CAAC,UAAU;AAAA,QACnB,MAAM;AAAA,QACN,iBACE,sBAAsB,KAAK,EAAE,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,QAC5D,UAAU,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC;AAAA,MAC7D,EAAE;AAAA,MACJ,CAAC,OAAO,KAAK;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR;AAAA,QACA,UAAS;AAAA,QACT,eAAa;AAAA,QACb;AAAA,QACA,KAAK,KAAK,IAAI;AAAA,QAEb,sBAAY;AAAA,UACX,CAAC,EAAE,MAAM,iBAAiB,SAAS,GAAG,UAAqB;AACzD,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,cAJK,GAAG,QAAQ;AAAA,YAKlB;AAAA,UAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,IAAO,uBAAQ","sourcesContent":["import { type ReactNode, forwardRef, useMemo, type ReactElement } from \"react\";\nimport Box from \"../Box/Box\";\nimport Typography from \"../Typography/Typography\";\n\nconst themeBackgroundColors = {\n neutral: [\"pink\", \"lilac\", \"thistle\"],\n cool: [\"sky\", \"slate\", \"teal\"],\n warm: [\"red\", \"tan\", \"orange\"],\n} as const;\n\nconst degreeOfTiltOptions = [-6, -6, -3, -3, 0, 3, 3, 6, 6];\n\nconst paddings = {\n 300: \"16px 20px 16px 20px\",\n 400: \"20px 24px 20px 24px\",\n 700: \"24px 28px 24px 28px\",\n 800: \"28px 40px 28px 40px\",\n 900: \"32px 48px 32px 48px\",\n 1100: \"36px 56px 36px 56px\",\n};\n\nconst gaps = {\n 300: 3,\n 400: 4,\n 700: 6,\n 800: 6,\n 900: 9,\n 1100: 10,\n} as const;\n\nconst WordConfetto = ({\n backgroundColor,\n rotation,\n size,\n text,\n}: {\n backgroundColor:\n | \"pink\"\n | \"lilac\"\n | \"thistle\"\n | \"sky\"\n | \"slate\"\n | \"teal\"\n | \"red\"\n | \"tan\"\n | \"orange\";\n rotation: number;\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n text: string;\n}): ReactElement => {\n return (\n <Box\n backgroundColor={backgroundColor}\n dangerouslySetInlineStyle={{\n __style: {\n padding: paddings[size],\n transform: `rotate(${rotation}deg)`,\n },\n }}\n width=\"fit-content\"\n >\n <Typography size={size} weight=\"bold\" fontStyle=\"serif\">\n {text}\n </Typography>\n </Box>\n );\n};\n\ntype Direction = \"row\" | \"column\";\ntype WordConfettiProps = {\n /**\n * Test id for the confetti\n */\n \"data-testid\"?: string;\n /**\n * The direction to display the words.\n * @defaultValue row\n */\n direction?: Direction;\n /**\n * The size of the font in the confetti.\n */\n size: 300 | 400 | 700 | 800 | 900 | 1100;\n /**\n * The theme for the background colors of the confetti.\n */\n theme: \"neutral\" | \"cool\" | \"warm\";\n /**\n * The words to display as confetti.\n */\n words: string[];\n};\n\n/**\n * [WordConfetti](https://cambly-syntax.vercel.app/?path=/docs/components-wordconfetti--docs) is a container for displaying words in different color themes and fun offset angles.\n */\nconst WordConfetti = forwardRef<HTMLDivElement, WordConfettiProps>(\n function WordConfetti(props: WordConfettiProps, ref): JSX.Element {\n const {\n \"data-testid\": dataTestId,\n direction = \"row\",\n size,\n theme,\n words,\n } = props;\n\n const styledWords = useMemo(\n () =>\n words.map((word) => ({\n text: word,\n backgroundColor:\n themeBackgroundColors[theme][Math.floor(Math.random() * 3)],\n rotation: degreeOfTiltOptions[Math.floor(Math.random() * 9)],\n })),\n [theme, words],\n );\n\n return (\n <Box\n display=\"flex\"\n direction={direction}\n flexWrap=\"wrap\"\n data-testid={dataTestId}\n ref={ref}\n gap={gaps[size]}\n >\n {styledWords.map(\n ({ text, backgroundColor, rotation }, index): ReactNode => {\n return (\n <WordConfetto\n key={`${text}+${index}`}\n backgroundColor={backgroundColor}\n rotation={rotation}\n size={size}\n text={text}\n />\n );\n },\n )}\n </Box>\n );\n },\n);\n\nexport default WordConfetti;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _Y5R3XLL7cjs = require('./Y5R3XLL7.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
|
|
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
|
|
|
100
100
|
} = props;
|
|
101
101
|
const modal = !children || modalProp;
|
|
102
102
|
const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
103
|
-
|
|
103
|
+
_Y5R3XLL7cjs.ModalDialog_default,
|
|
104
104
|
{
|
|
105
105
|
accessibilityLabel,
|
|
106
106
|
accessibilityCloseLabel,
|
|
@@ -141,4 +141,4 @@ var Popover_default = Popover;
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
|
|
144
|
-
//# sourceMappingURL=
|
|
144
|
+
//# sourceMappingURL=VZTP4FJU.cjs.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _QODNNCT2cjs = require('./QODNNCT2.cjs');
|
|
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
|
|
|
130
130
|
}
|
|
131
131
|
},
|
|
132
132
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
133
|
-
|
|
133
|
+
_VJWLFFADcjs.IconButton_default,
|
|
134
134
|
{
|
|
135
135
|
onClick: () => state.close(),
|
|
136
136
|
color: "tertiary",
|
|
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
|
|
160
|
-
//# sourceMappingURL=
|
|
160
|
+
//# sourceMappingURL=Y5R3XLL7.cjs.map
|
package/dist/index.cjs
CHANGED
|
@@ -19,7 +19,7 @@ var _IBT4YOI5cjs = require('./__chunks/IBT4YOI5.cjs');
|
|
|
19
19
|
var _OVHMMIVEcjs = require('./__chunks/OVHMMIVE.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _OQSEZXJ6cjs = require('./__chunks/OQSEZXJ6.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
var _CCKTB7L5cjs = require('./__chunks/CCKTB7L5.cjs');
|
|
@@ -35,21 +35,21 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
|
|
|
35
35
|
require('./__chunks/TH4TA3JN.cjs');
|
|
36
36
|
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var _CWVVOO2Gcjs = require('./__chunks/CWVVOO2G.cjs');
|
|
39
39
|
require('./__chunks/JVGX637E.cjs');
|
|
40
40
|
|
|
41
41
|
|
|
42
|
-
var
|
|
42
|
+
var _5SG2TWV3cjs = require('./__chunks/5SG2TWV3.cjs');
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
var
|
|
46
|
-
require('./__chunks/
|
|
45
|
+
var _VZTP4FJUcjs = require('./__chunks/VZTP4FJU.cjs');
|
|
46
|
+
require('./__chunks/Y5R3XLL7.cjs');
|
|
47
47
|
require('./__chunks/3RX4RMGC.cjs');
|
|
48
48
|
|
|
49
49
|
|
|
50
|
-
var
|
|
50
|
+
var _VJWLFFADcjs = require('./__chunks/VJWLFFAD.cjs');
|
|
51
51
|
require('./__chunks/WFVGNGEP.cjs');
|
|
52
|
-
require('./__chunks/
|
|
52
|
+
require('./__chunks/ULC7XW64.cjs');
|
|
53
53
|
require('./__chunks/OMXDPTE4.cjs');
|
|
54
54
|
|
|
55
55
|
|
|
@@ -106,7 +106,7 @@ require('./__chunks/F3SUJGZL.cjs');
|
|
|
106
106
|
require('./__chunks/UKQIAZA5.cjs');
|
|
107
107
|
|
|
108
108
|
|
|
109
|
-
var
|
|
109
|
+
var _VWM2UOZ3cjs = require('./__chunks/VWM2UOZ3.cjs');
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
var _QODNNCT2cjs = require('./__chunks/QODNNCT2.cjs');
|
|
@@ -162,5 +162,5 @@ require('./__chunks/X2SDR4SD.cjs');
|
|
|
162
162
|
|
|
163
163
|
|
|
164
164
|
|
|
165
|
-
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _E3A6VFMBcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _BFEZ3PUTcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _OVHMMIVEcjs.Checkbox_default; exports.Chip = _IHGDCH62cjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _CCKTB7L5cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton =
|
|
165
|
+
exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _E3A6VFMBcjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _BFEZ3PUTcjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _OVHMMIVEcjs.Checkbox_default; exports.Chip = _IHGDCH62cjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _CCKTB7L5cjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _JOTFTEBXcjs.LinkButton_default; exports.Modal = _OQSEZXJ6cjs.Modal; exports.Popover = _VZTP4FJUcjs.Popover_default; exports.RadioButton = _4AI6GQ5Ucjs.RadioButton_default; exports.RichSelectList = _5SG2TWV3cjs.RichSelectList_default; exports.SelectList = _CWVVOO2Gcjs.SelectList; exports.TabButton = _ML36DCKLcjs.TabButton; exports.TabLink = _OBQBJKAYcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _AUO7CEJIcjs.TextArea_default; exports.TextField = _5NI7VPKScjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _UXSGTOGUcjs.Tooltip_default; exports.Typography = _5NQO6SP3cjs.Typography_default; exports.WordConfetti = _VWM2UOZ3cjs.WordConfetti_default;
|
|
166
166
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
} from "./__chunks/YMIQ7WYX.js";
|
|
20
20
|
import {
|
|
21
21
|
Modal
|
|
22
|
-
} from "./__chunks/
|
|
22
|
+
} from "./__chunks/GMIOWJBD.js";
|
|
23
23
|
import {
|
|
24
24
|
Heading_default
|
|
25
25
|
} from "./__chunks/E27BHPP7.js";
|
|
@@ -35,21 +35,21 @@ import {
|
|
|
35
35
|
import "./__chunks/YLWWTB4I.js";
|
|
36
36
|
import {
|
|
37
37
|
SelectList
|
|
38
|
-
} from "./__chunks/
|
|
38
|
+
} from "./__chunks/KZIOUAWM.js";
|
|
39
39
|
import "./__chunks/SPQ7DQHG.js";
|
|
40
40
|
import {
|
|
41
41
|
RichSelectList_default
|
|
42
|
-
} from "./__chunks/
|
|
42
|
+
} from "./__chunks/4SO4HHVL.js";
|
|
43
43
|
import {
|
|
44
44
|
Popover_default
|
|
45
|
-
} from "./__chunks/
|
|
46
|
-
import "./__chunks/
|
|
45
|
+
} from "./__chunks/ATUBU46J.js";
|
|
46
|
+
import "./__chunks/QURJJHRN.js";
|
|
47
47
|
import "./__chunks/CXENLD6O.js";
|
|
48
48
|
import {
|
|
49
49
|
IconButton_default
|
|
50
|
-
} from "./__chunks/
|
|
50
|
+
} from "./__chunks/GDXRRA57.js";
|
|
51
51
|
import "./__chunks/4U4UW4AK.js";
|
|
52
|
-
import "./__chunks/
|
|
52
|
+
import "./__chunks/HO7QM7X2.js";
|
|
53
53
|
import "./__chunks/ZHU5A7BH.js";
|
|
54
54
|
import {
|
|
55
55
|
ButtonGroup_default
|
|
@@ -106,7 +106,7 @@ import "./__chunks/YGON3SJ5.js";
|
|
|
106
106
|
import "./__chunks/M4CFLT64.js";
|
|
107
107
|
import {
|
|
108
108
|
WordConfetti_default
|
|
109
|
-
} from "./__chunks/
|
|
109
|
+
} from "./__chunks/KR6JQ2DS.js";
|
|
110
110
|
import {
|
|
111
111
|
Box_default
|
|
112
112
|
} from "./__chunks/IB6JZQF3.js";
|