@cambly/syntax-core 13.0.0 → 15.1.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/Avatar/Avatar.cjs +3 -3
- package/dist/Avatar/Avatar.css +11 -7
- package/dist/Avatar/Avatar.css.map +1 -1
- package/dist/Avatar/Avatar.d.ts +2 -1
- package/dist/Avatar/Avatar.js +2 -2
- package/dist/AvatarGroup/AvatarGroup.cjs +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts +2 -1
- package/dist/AvatarGroup/AvatarGroup.js +1 -1
- package/dist/Badge/Badge.cjs +3 -3
- package/dist/Badge/Badge.css +45 -69
- package/dist/Badge/Badge.css.map +1 -1
- package/dist/Badge/Badge.d.ts +3 -3
- package/dist/Badge/Badge.js +2 -2
- package/dist/Button/Button.cjs +3 -3
- package/dist/Button/Button.css +45 -69
- package/dist/Button/Button.css.map +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/Checkbox/Checkbox.cjs +3 -3
- package/dist/Checkbox/Checkbox.css +45 -69
- package/dist/Checkbox/Checkbox.css.map +1 -1
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Checkbox/Checkbox.js +2 -2
- package/dist/Chip/Chip.cjs +3 -3
- package/dist/Chip/Chip.css +45 -69
- package/dist/Chip/Chip.css.map +1 -1
- package/dist/Chip/Chip.js +2 -2
- package/dist/Heading/Heading.cjs +3 -3
- package/dist/Heading/Heading.css +45 -69
- package/dist/Heading/Heading.css.map +1 -1
- package/dist/Heading/Heading.d.ts +8 -16
- package/dist/Heading/Heading.js +2 -2
- package/dist/Icon/Icon.cjs +2 -2
- package/dist/Icon/Icon.d.ts +1 -1
- package/dist/Icon/Icon.js +1 -1
- package/dist/LinkButton/LinkButton.cjs +3 -3
- package/dist/LinkButton/LinkButton.css +45 -69
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.js +2 -2
- package/dist/Modal/Modal.cjs +4 -4
- package/dist/Modal/Modal.css +45 -69
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.js +3 -3
- package/dist/RadioButton/RadioButton.cjs +3 -3
- package/dist/RadioButton/RadioButton.css +45 -69
- package/dist/RadioButton/RadioButton.css.map +1 -1
- package/dist/RadioButton/RadioButton.d.ts +1 -1
- package/dist/RadioButton/RadioButton.js +2 -2
- package/dist/RichSelect/RichSelectBox.cjs +9 -9
- package/dist/RichSelect/RichSelectBox.css +45 -69
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.d.ts +1 -1
- package/dist/RichSelect/RichSelectBox.js +8 -8
- package/dist/RichSelect/RichSelectChip.cjs +4 -4
- package/dist/RichSelect/RichSelectChip.css +45 -69
- package/dist/RichSelect/RichSelectChip.css.map +1 -1
- package/dist/RichSelect/RichSelectChip.js +3 -3
- package/dist/RichSelect/RichSelectList.cjs +11 -11
- package/dist/RichSelect/RichSelectList.css +45 -69
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.d.ts +1 -1
- package/dist/RichSelect/RichSelectList.js +10 -10
- package/dist/RichSelect/RichSelectRadioButton.cjs +4 -4
- package/dist/RichSelect/RichSelectRadioButton.css +45 -69
- package/dist/RichSelect/RichSelectRadioButton.css.map +1 -1
- package/dist/RichSelect/RichSelectRadioButton.d.ts +1 -1
- package/dist/RichSelect/RichSelectRadioButton.js +3 -3
- package/dist/RichSelect/RichSelectSection.cjs +3 -3
- package/dist/RichSelect/RichSelectSection.css +45 -69
- package/dist/RichSelect/RichSelectSection.css.map +1 -1
- package/dist/RichSelect/RichSelectSection.js +2 -2
- package/dist/SelectList/SelectList.cjs +4 -4
- package/dist/SelectList/SelectList.css +45 -69
- package/dist/SelectList/SelectList.css.map +1 -1
- package/dist/SelectList/SelectList.js +3 -3
- package/dist/TapArea/TapArea.d.ts +1 -1
- package/dist/TextArea/TextArea.cjs +3 -3
- package/dist/TextArea/TextArea.css +45 -69
- package/dist/TextArea/TextArea.css.map +1 -1
- package/dist/TextArea/TextArea.js +2 -2
- package/dist/TextField/TextField.cjs +3 -3
- package/dist/TextField/TextField.css +45 -69
- package/dist/TextField/TextField.css.map +1 -1
- package/dist/TextField/TextField.js +2 -2
- package/dist/Tooltip/Tooltip.cjs +3 -3
- package/dist/Tooltip/Tooltip.css +45 -69
- package/dist/Tooltip/Tooltip.css.map +1 -1
- package/dist/Tooltip/Tooltip.js +2 -2
- package/dist/Typography/Typography.cjs +2 -2
- package/dist/Typography/Typography.css +45 -69
- package/dist/Typography/Typography.css.map +1 -1
- package/dist/Typography/Typography.d.ts +12 -18
- package/dist/Typography/Typography.js +1 -1
- package/dist/__chunks/{DR35U5KW.js → 2BA4KWES.js} +2 -2
- package/dist/__chunks/{2OJKC2AX.cjs → 47PGLBOS.cjs} +5 -5
- package/dist/__chunks/47PGLBOS.cjs.map +1 -0
- package/dist/__chunks/{PDVLGG4C.js → 4WK5DK6U.js} +3 -2
- package/dist/__chunks/{PDVLGG4C.js.map → 4WK5DK6U.js.map} +1 -1
- package/dist/__chunks/{NCV3QLVA.js → 54ZAQVGC.js} +3 -3
- package/dist/__chunks/{NCV3QLVA.js.map → 54ZAQVGC.js.map} +1 -1
- package/dist/__chunks/{COREQINY.js → 67BJ4PC2.js} +2 -2
- package/dist/__chunks/{7YBXLFIG.cjs → 67PBF26W.cjs} +5 -5
- package/dist/__chunks/{VTKZKP33.js → 74XKLZ4N.js} +2 -2
- package/dist/__chunks/{ZTK7E42P.cjs → 7BZZUMJM.cjs} +3 -3
- package/dist/__chunks/{JUQWWD2D.js → AVTBLTHP.js} +7 -5
- package/dist/__chunks/AVTBLTHP.js.map +1 -0
- package/dist/__chunks/{XWLWM3FW.cjs → BLCQNB25.cjs} +1 -1
- package/dist/__chunks/{XWLWM3FW.cjs.map → BLCQNB25.cjs.map} +1 -1
- package/dist/__chunks/{XMKQJFU6.cjs → CV5CESW2.cjs} +1 -1
- package/dist/__chunks/{XMKQJFU6.cjs.map → CV5CESW2.cjs.map} +1 -1
- package/dist/__chunks/{7EM2GOIC.js → DFGY3NSE.js} +2 -2
- package/dist/__chunks/{Q6657TAT.js → E7IFJPHC.js} +2 -2
- package/dist/__chunks/{HN4N2HE2.cjs → EUBO6YEI.cjs} +10 -10
- package/dist/__chunks/{NL4XSQC3.cjs → FT35ULZS.cjs} +17 -17
- package/dist/__chunks/{D2WZPJL3.js → GGK4OCW3.js} +2 -2
- package/dist/__chunks/{ID2WKUNH.cjs → GJVLYIGI.cjs} +3 -3
- package/dist/__chunks/{LL5Q6ZDS.js → GWRAEUKW.js} +2 -2
- package/dist/__chunks/{S2VK4XNL.cjs → HF4V7JJP.cjs} +3 -3
- package/dist/__chunks/{V562ZHQ7.js → JRDHZ3QL.js} +2 -2
- package/dist/__chunks/JRDHZ3QL.js.map +1 -0
- package/dist/__chunks/{CHOHIFJN.cjs → KBFQU5AW.cjs} +1 -1
- package/dist/__chunks/KBFQU5AW.cjs.map +1 -0
- package/dist/__chunks/{TQ7D5O7L.js → L5CT6YRH.js} +2 -2
- package/dist/__chunks/{47RI4QGK.js → LA6LOY5X.js} +1 -1
- package/dist/__chunks/{47RI4QGK.js.map → LA6LOY5X.js.map} +1 -1
- package/dist/__chunks/{EGLA4ZQ6.js → LMERC43E.js} +4 -4
- package/dist/__chunks/LMERC43E.js.map +1 -0
- package/dist/__chunks/{T32LVZ6S.js → LT6ELZIN.js} +1 -1
- package/dist/__chunks/LT6ELZIN.js.map +1 -0
- package/dist/__chunks/{3JWSFE5Q.js → LURRFB7S.js} +3 -3
- package/dist/__chunks/{JW7TVUPB.cjs → N5W44DQ5.cjs} +3 -3
- package/dist/__chunks/{7FBJ7XRE.cjs → N7ZNFTV7.cjs} +3 -3
- package/dist/__chunks/{JRTUP3VP.cjs → NOQ3DDEP.cjs} +8 -6
- package/dist/__chunks/NOQ3DDEP.cjs.map +1 -0
- package/dist/__chunks/{7X4KKISP.cjs → ODVVI43Q.cjs} +4 -4
- package/dist/__chunks/{BU3EYSKD.js → ONZHIMUG.js} +2 -2
- package/dist/__chunks/{OQKBWMZ4.js → OTGGVIQE.js} +5 -5
- package/dist/__chunks/{GUACYIXB.cjs → PJLDYIB6.cjs} +2 -2
- package/dist/__chunks/PJLDYIB6.cjs.map +1 -0
- package/dist/__chunks/{7TZNQNSO.cjs → PRSQEQ5O.cjs} +6 -6
- package/dist/__chunks/{TVR4TJKV.js → SM7OH7FG.js} +2 -2
- package/dist/__chunks/{TELGW53W.js → SONYYWLY.js} +1 -1
- package/dist/__chunks/SONYYWLY.js.map +1 -0
- package/dist/__chunks/{HFWEVQNS.cjs → SZMHZR3B.cjs} +3 -3
- package/dist/__chunks/{HK7T4244.cjs → TJQKHHNH.cjs} +3 -3
- package/dist/__chunks/{HK7T4244.cjs.map → TJQKHHNH.cjs.map} +1 -1
- package/dist/__chunks/{TBFYPXWO.js → VUDLDPIN.js} +7 -7
- package/dist/__chunks/{W45CFJI7.cjs → XYSRAKGD.cjs} +3 -3
- package/dist/__chunks/{7FYS3TSR.cjs → YG47EHYS.cjs} +3 -3
- package/dist/__chunks/{HN2MMSUI.js → YI35INQ7.js} +2 -2
- package/dist/__chunks/{CQQJROZE.cjs → YVQRFDEE.cjs} +5 -4
- package/dist/__chunks/YVQRFDEE.cjs.map +1 -0
- package/dist/__chunks/{SFZ2MHPA.cjs → ZBBMY7Y7.cjs} +3 -3
- package/dist/index.cjs +23 -23
- package/dist/index.css +56 -76
- package/dist/index.css.map +1 -1
- package/dist/index.js +22 -22
- package/package.json +2 -2
- package/dist/__chunks/2OJKC2AX.cjs.map +0 -1
- package/dist/__chunks/CHOHIFJN.cjs.map +0 -1
- package/dist/__chunks/CQQJROZE.cjs.map +0 -1
- package/dist/__chunks/EGLA4ZQ6.js.map +0 -1
- package/dist/__chunks/GUACYIXB.cjs.map +0 -1
- package/dist/__chunks/JRTUP3VP.cjs.map +0 -1
- package/dist/__chunks/JUQWWD2D.js.map +0 -1
- package/dist/__chunks/T32LVZ6S.js.map +0 -1
- package/dist/__chunks/TELGW53W.js.map +0 -1
- package/dist/__chunks/V562ZHQ7.js.map +0 -1
- /package/dist/__chunks/{DR35U5KW.js.map → 2BA4KWES.js.map} +0 -0
- /package/dist/__chunks/{COREQINY.js.map → 67BJ4PC2.js.map} +0 -0
- /package/dist/__chunks/{7YBXLFIG.cjs.map → 67PBF26W.cjs.map} +0 -0
- /package/dist/__chunks/{VTKZKP33.js.map → 74XKLZ4N.js.map} +0 -0
- /package/dist/__chunks/{ZTK7E42P.cjs.map → 7BZZUMJM.cjs.map} +0 -0
- /package/dist/__chunks/{7EM2GOIC.js.map → DFGY3NSE.js.map} +0 -0
- /package/dist/__chunks/{Q6657TAT.js.map → E7IFJPHC.js.map} +0 -0
- /package/dist/__chunks/{HN4N2HE2.cjs.map → EUBO6YEI.cjs.map} +0 -0
- /package/dist/__chunks/{NL4XSQC3.cjs.map → FT35ULZS.cjs.map} +0 -0
- /package/dist/__chunks/{D2WZPJL3.js.map → GGK4OCW3.js.map} +0 -0
- /package/dist/__chunks/{ID2WKUNH.cjs.map → GJVLYIGI.cjs.map} +0 -0
- /package/dist/__chunks/{LL5Q6ZDS.js.map → GWRAEUKW.js.map} +0 -0
- /package/dist/__chunks/{S2VK4XNL.cjs.map → HF4V7JJP.cjs.map} +0 -0
- /package/dist/__chunks/{TQ7D5O7L.js.map → L5CT6YRH.js.map} +0 -0
- /package/dist/__chunks/{3JWSFE5Q.js.map → LURRFB7S.js.map} +0 -0
- /package/dist/__chunks/{JW7TVUPB.cjs.map → N5W44DQ5.cjs.map} +0 -0
- /package/dist/__chunks/{7FBJ7XRE.cjs.map → N7ZNFTV7.cjs.map} +0 -0
- /package/dist/__chunks/{7X4KKISP.cjs.map → ODVVI43Q.cjs.map} +0 -0
- /package/dist/__chunks/{BU3EYSKD.js.map → ONZHIMUG.js.map} +0 -0
- /package/dist/__chunks/{OQKBWMZ4.js.map → OTGGVIQE.js.map} +0 -0
- /package/dist/__chunks/{7TZNQNSO.cjs.map → PRSQEQ5O.cjs.map} +0 -0
- /package/dist/__chunks/{TVR4TJKV.js.map → SM7OH7FG.js.map} +0 -0
- /package/dist/__chunks/{HFWEVQNS.cjs.map → SZMHZR3B.cjs.map} +0 -0
- /package/dist/__chunks/{TBFYPXWO.js.map → VUDLDPIN.js.map} +0 -0
- /package/dist/__chunks/{W45CFJI7.cjs.map → XYSRAKGD.cjs.map} +0 -0
- /package/dist/__chunks/{7FYS3TSR.cjs.map → YG47EHYS.cjs.map} +0 -0
- /package/dist/__chunks/{HN2MMSUI.js.map → YI35INQ7.js.map} +0 -0
- /package/dist/__chunks/{SFZ2MHPA.cjs.map → ZBBMY7Y7.cjs.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";;;;;;AAmGI;AAhGJ,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AACF,GAGkC;AAChC,MAAI,cAAc,WAAW,SAAS,KAAK;AACzC,WAAO;AAAA,EACT,WAAW,cAAc,SAAS;AAChC,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAKA,IAAM,UAAU,CAAC;AAAA,EACf,QAAQ;AAAA,EACR,KAAK;AAAA,EACL;AAAA,EACA,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AACT,MAkEoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,EAAE,WAAW,KAAK,CAAC;AAAA,MAEjC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ","sourcesContent":["import { type ComponentProps, type ReactElement, type ReactNode } from \"react\";\nimport Typography from \"../Typography/Typography\";\n\nfunction weight({\n fontStyle,\n size,\n}: {\n fontStyle: ComponentProps<typeof Heading>[\"fontStyle\"];\n size: ComponentProps<typeof Heading>[\"size\"];\n}): \"bold\" | \"medium\" | \"regular\" {\n if (fontStyle === \"serif\" && size === 400) {\n return \"bold\";\n } else if (fontStyle === \"serif\") {\n return \"medium\";\n } else {\n return \"regular\";\n }\n}\n\n/**\n * [Heading](https://cambly-syntax.vercel.app/?path=/docs/components-heading--docs) enforces a consistent style & accessibility best practices for headings.\n */\nconst Heading = ({\n align = \"start\",\n as = \"h1\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n fontStyle = \"sans-serif\",\n lineClamp,\n size = 400,\n}: {\n /**\n * Aligns the text to the left, right, or center of the container.\n * * `start` and `end` will align the text to the left or right of the container depending on the locale.\n * * `forceLeft` and `forceRight` will align the text to the left or right of the container regardless of the locale (should be used sparingly).\n *\n * @defaultValue \"start\"\n */\n align?: \"start\" | \"end\" | \"forceLeft\" | \"center\" | \"forceRight\";\n /**\n * DOM element to render as.\n *\n * @defaultValue \"h1\"\n */\n as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n /**\n * The text to be rendered\n */\n children?: ReactNode;\n /**\n * The color of the text.\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"success\"\n | \"white\"\n | \"inherit\";\n /**\n * Test id for the text.\n */\n \"data-testid\"?: string;\n /**\n * Style of the font\n *\n * Classic only supports `sans-serif`\n *\n * @defaultValue \"sans-serif\"\n */\n fontStyle?: \"serif\" | \"sans-serif\";\n /**\n * The number of lines we should truncate the text at\n */\n lineClamp?: number | undefined;\n /**\n * Size of the text\n *\n * Mobile: (viewport width < 480px):\n * * `400`: 25px\n * * `700`: 38px\n * * `900`: 55px\n * * `1100`: 83px\n *\n * Desktop (viewport width >= 480px):\n * * `400`: 25px\n * * `700`: 49px\n * * `900`: 76px\n * * `1100`: 119px\n *\n * @defaultValue 400\n */\n size?: 400 | 700 | 900 | 1100;\n}): ReactElement => {\n return (\n <Typography\n align={align}\n as={as}\n color={color}\n fontStyle={fontStyle}\n data-testid={dataTestId}\n lineClamp={lineClamp}\n size={size}\n weight={weight({ fontStyle, size })}\n >\n {children}\n </Typography>\n );\n};\n\nexport default Heading;\n"]}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./M36V23WR.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./JRDHZ3QL.js";
|
|
8
8
|
|
|
9
9
|
// css-module:./Badge.module.css#css-module
|
|
10
10
|
var Badge_module_default = { "icon": "_icon_1g9xb_1" };
|
|
@@ -37,6 +37,7 @@ var Badge = ({
|
|
|
37
37
|
{
|
|
38
38
|
display: "inlineFlex",
|
|
39
39
|
paddingX: 2,
|
|
40
|
+
paddingY: 1,
|
|
40
41
|
rounding: "sm",
|
|
41
42
|
backgroundColor: color,
|
|
42
43
|
alignItems: "center",
|
|
@@ -70,4 +71,4 @@ var Badge_default = Badge;
|
|
|
70
71
|
export {
|
|
71
72
|
Badge_default
|
|
72
73
|
};
|
|
73
|
-
//# sourceMappingURL=
|
|
74
|
+
//# sourceMappingURL=4WK5DK6U.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nconst badgeColor = [\n \"sky\",\n \"success300\",\n \"destructive300\",\n \"orange\",\n \"tan\",\n \"gray370\",\n \"gray870\",\n \"lilac\",\n \"thistle\",\n \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n switch (color) {\n case \"gray370\":\n case \"destructive300\":\n case \"orange\":\n case \"tan\":\n case \"success300\":\n case \"sky\":\n case \"thistle\":\n case \"pink\":\n case \"lilac\":\n return \"gray900\";\n default:\n return \"white\";\n }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n icon: Icon,\n text,\n color = \"sky\",\n}: {\n /**\n * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n */\n icon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The text to display inside the badge\n */\n text: string;\n /**\n * The color of the badge\n *\n * @defaultValue \"sky\"\n */\n color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n return (\n <Box\n display=\"inlineFlex\"\n paddingX={2}\n rounding={\"sm\"}\n backgroundColor={color}\n alignItems=\"center\"\n justifyContent=\"center\"\n minHeight={24}\n >\n <Typography\n size={100}\n weight=\"medium\"\n color={textColorForBackgroundColor(color)}\n >\n <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n {Icon && <Icon className={styles.icon} size=\"xs\" />}\n <Typography\n color={textColorForBackgroundColor(color)}\n size={100}\n weight=\"medium\"\n >\n {text}\n </Typography>\n </Box>\n </Typography>\n </Box>\n );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;
|
|
1
|
+
{"version":3,"sources":["css-module:./Badge.module.css#css-module","../../src/Badge/Badge.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Badge/Badge.module.css\"; export default {\"icon\":\"_icon_1g9xb_1\"}","import { type ComponentProps } from \"react\";\nimport Typography from \"../Typography/Typography\";\nimport Box from \"../Box/Box\";\nimport styles from \"./Badge.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\n\nconst badgeColor = [\n \"sky\",\n \"success300\",\n \"destructive300\",\n \"orange\",\n \"tan\",\n \"gray370\",\n \"gray870\",\n \"lilac\",\n \"thistle\",\n \"pink\",\n] as const;\n\nconst textColorForBackgroundColor = (\n color: (typeof badgeColor)[number],\n): \"gray900\" | \"white\" => {\n switch (color) {\n case \"gray370\":\n case \"destructive300\":\n case \"orange\":\n case \"tan\":\n case \"success300\":\n case \"sky\":\n case \"thistle\":\n case \"pink\":\n case \"lilac\":\n return \"gray900\";\n default:\n return \"white\";\n }\n};\n\n/**\n * [Badge](https://cambly-syntax.vercel.app/?path=/docs/components-badge--docs) is a component to display short text and give additional context to features and other components.\n */\nconst Badge = ({\n icon: Icon,\n text,\n color = \"sky\",\n}: {\n /**\n * The icon to be displayed. Please use a [Material Icon](https://material.io/resources/icons/)\n */\n icon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The text to display inside the badge\n */\n text: string;\n /**\n * The color of the badge\n *\n * @defaultValue \"sky\"\n */\n color?: (typeof badgeColor)[number];\n}): JSX.Element => {\n return (\n <Box\n display=\"inlineFlex\"\n paddingX={2}\n paddingY={1}\n rounding={\"sm\"}\n backgroundColor={color}\n alignItems=\"center\"\n justifyContent=\"center\"\n minHeight={24}\n >\n <Typography\n size={100}\n weight=\"medium\"\n color={textColorForBackgroundColor(color)}\n >\n <Box display=\"flex\" gap={1} alignItems=\"center\" justifyContent=\"start\">\n {Icon && <Icon className={styles.icon} size=\"xs\" />}\n <Typography\n color={textColorForBackgroundColor(color)}\n size={100}\n weight=\"medium\"\n >\n {text}\n </Typography>\n </Box>\n </Typography>\n </Box>\n );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,QAAO,gBAAe;;;AC+ExH,SACW,KADX;AA5DR,IAAM,8BAA8B,CAClC,UACwB;AACxB,UAAQ,OAAO;AAAA,IACb,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAKA,IAAM,QAAQ,CAAC;AAAA,EACb,MAAM;AAAA,EACN;AAAA,EACA,QAAQ;AACV,MAiBmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,WAAW;AAAA,MAEX;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,OAAO,4BAA4B,KAAK;AAAA,UAExC,+BAAC,eAAI,SAAQ,QAAO,KAAK,GAAG,YAAW,UAAS,gBAAe,SAC5D;AAAA,oBAAQ,oBAAC,QAAK,WAAW,qBAAO,MAAM,MAAK,MAAK;AAAA,YACjD;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,4BAA4B,KAAK;AAAA,gBACxC,MAAM;AAAA,gBACN,QAAO;AAAA,gBAEN;AAAA;AAAA,YACH;AAAA,aACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./HVA7R2EL.js";
|
|
5
5
|
import {
|
|
6
6
|
Heading_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./LMERC43E.js";
|
|
8
8
|
import {
|
|
9
9
|
StopScroll
|
|
10
10
|
} from "./QQT35OLE.js";
|
|
@@ -93,7 +93,7 @@ function Modal({
|
|
|
93
93
|
),
|
|
94
94
|
/* @__PURE__ */ jsxs(Box_default, { display: "flex", direction: "column", width: "100%", children: [
|
|
95
95
|
image && /* @__PURE__ */ jsx(Box_default, { children: image }),
|
|
96
|
-
/* @__PURE__ */ jsx(Box_default, { padding: 6, children: /* @__PURE__ */ jsx(Heading_default, { as: "h1", size:
|
|
96
|
+
/* @__PURE__ */ jsx(Box_default, { padding: 6, children: /* @__PURE__ */ jsx(Heading_default, { as: "h1", size: 700, fontStyle: "serif", children: header }) }),
|
|
97
97
|
/* @__PURE__ */ jsx(
|
|
98
98
|
Box_default,
|
|
99
99
|
{
|
|
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
|
|
|
130
130
|
export {
|
|
131
131
|
Modal
|
|
132
132
|
};
|
|
133
|
-
//# sourceMappingURL=
|
|
133
|
+
//# sourceMappingURL=54ZAQVGC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image\n * * Size should be 600w x 200h\n * * Be sure to set width=\"100%\" on the image\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={styles.backdrop}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding=\"md\"\n display=\"flex\"\n marginStart={4}\n marginEnd={4}\n marginTop={8}\n marginBottom={8}\n minWidth={240}\n maxHeight=\"calc(100vh - 64px)\"\n maxWidth={600}\n overflow=\"hidden\"\n position=\"relative\"\n width=\"100%\"\n >\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"md\"\n icon={XIcon}\n />\n </Box>\n\n <Box display=\"flex\" direction=\"column\" width=\"100%\">\n {image && <Box>{image}</Box>}\n <Box padding={6}>\n <Heading as=\"h1\" size={
|
|
1
|
+
{"version":3,"sources":["css-module:./Modal.module.css#css-module","../../src/Modal/Modal.tsx"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Modal/Modal.module.css\"; export default {\"backdrop\":\"_backdrop_17lbk_1\",\"closeButton\":\"_closeButton_17lbk_10\"}","import { type ReactElement } from \"react\";\n\nimport Heading from \"../Heading/Heading\";\nimport Box from \"../Box/Box\";\n\nimport FocusTrap from \"./FocusTrap\";\nimport StopScroll from \"./StopScroll\";\nimport Layer from \"./Layer\";\nimport styles from \"./Modal.module.css\";\nimport IconButton from \"../IconButton/IconButton\";\n\nfunction XIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n </svg>\n );\n}\n\n/**\n * [Modal](https://cambly-syntax.vercel.app/?path=/docs/components-modal--docs) is a dialog that appears on top of the main content and locks user interaction within the modal.\n *\n ```\n const [showModal, setShowModal] = useState(false)\n\n return (\n <>\n {showModal && <Modal\n header=\"header text\"\n onDismiss={() => setShowModal(false)}\n footer={\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n }\n >\n <Typography>\n Body text goes here!\n </Typography>\n </Modal> }\n </>\n )\n ```\n */\nexport default function Modal({\n header,\n children,\n image,\n onDismiss,\n footer,\n accessibilityCloseLabel = \"close modal\",\n zIndex = 1,\n \"data-testid\": dataTestId,\n}: {\n /**\n * The modal's main content. Should typically take in `Typography`'d text.\n */\n children: JSX.Element;\n /**\n * The header inside a modal as a string.\n */\n header: string;\n /**\n * What the X button (or clicking out of the modal area) does.\n * Typically used for closing the Modal\n */\n onDismiss: () => void;\n /**\n * The optional image rendered above the Modal.\n * Image\n * * Size should be 600w x 200h\n * * Be sure to set width=\"100%\" on the image\n * If images aren't that sized, should ask design to give another image.\n */\n image?: JSX.Element;\n /**\n * The footer for the bottom area of the Modal. Typically used for rendering buttons.\n * * Use Syntax `Button` and pass it into footer.\n * * If one button, just pass it in. If two, wrap in a React fragment (`<> </>`)\n * * If two(2) buttons, put primary button _second_.\n *\n <>\n <Button\n text=\"Cancel\"\n color=\"secondary\"\n onClick={() => {}}\n />\n <Button\n text=\"Confirm\"\n onClick={() => {}}\n />\n </>\n */\n footer?: JSX.Element;\n /**\n * The accessibilty text on the close button.\n * (Sets the aria-label of the button)\n *\n *\n * @defaultValue close modal\n */\n accessibilityCloseLabel?: string;\n /**\n * The z-index for the modal.\n * Typically used if there are other things on the page with higher z-index and you need this overlayed on top.\n *\n * @defaultValue 0\n */\n zIndex?: number;\n /**\n * Test id for the modal\n */\n \"data-testid\"?: string;\n}): ReactElement {\n return (\n <Layer zIndex={zIndex}>\n <StopScroll>\n <FocusTrap>\n <div\n className={styles.backdrop}\n role=\"presentation\"\n onClick={(e) => e.target === e.currentTarget && onDismiss()}\n onKeyDown={(e) => e.key === \"Escape\" && onDismiss()}\n >\n <Box\n data-testid={dataTestId}\n backgroundColor=\"white\"\n rounding=\"md\"\n display=\"flex\"\n marginStart={4}\n marginEnd={4}\n marginTop={8}\n marginBottom={8}\n minWidth={240}\n maxHeight=\"calc(100vh - 64px)\"\n maxWidth={600}\n overflow=\"hidden\"\n position=\"relative\"\n width=\"100%\"\n >\n <Box\n position=\"absolute\"\n dangerouslySetInlineStyle={{\n __style: { top: 4, right: 4 },\n }}\n >\n <IconButton\n accessibilityLabel={accessibilityCloseLabel}\n color={image ? \"primary\" : \"tertiary\"}\n on={image ? \"darkBackground\" : \"lightBackground\"}\n onClick={onDismiss}\n size=\"md\"\n icon={XIcon}\n />\n </Box>\n\n <Box display=\"flex\" direction=\"column\" width=\"100%\">\n {image && <Box>{image}</Box>}\n <Box padding={6}>\n <Heading as=\"h1\" size={700} fontStyle=\"serif\">\n {header}\n </Heading>\n </Box>\n <Box\n height=\"100%\"\n overflowY=\"auto\"\n paddingX={6}\n marginBottom={footer ? 0 : 6}\n >\n {children}\n </Box>\n {footer && (\n <Box\n display=\"flex\"\n direction=\"column\"\n gap={3}\n smDirection=\"row\"\n smJustifyContent=\"end\"\n lgDirection=\"row\"\n lgJustifyContent=\"end\"\n padding={6}\n >\n {footer}\n </Box>\n )}\n </Box>\n </Box>\n </div>\n </FocusTrap>\n </StopScroll>\n </Layer>\n );\n}\n\nModal.displayName = \"Modal\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAA0F,IAAO,uBAAQ,EAAC,YAAW,qBAAoB,eAAc,wBAAuB;;;ACoBxK,cAsJQ,YAtJR;AATN,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAQ;AAAA,MAER,8BAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA,EAClH;AAEJ;AAmCe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,0BAA0B;AAAA,EAC1B,SAAS;AAAA,EACT,eAAe;AACjB,GA4DiB;AACf,SACE,oBAAC,SAAM,QACL,8BAAC,cACC,8BAAC,aACC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,qBAAO;AAAA,MAClB,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,UAAU;AAAA,MAC1D,WAAW,CAAC,MAAM,EAAE,QAAQ,YAAY,UAAU;AAAA,MAElD;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,aAAa;AAAA,UACb,WAAW;AAAA,UACX,WAAW;AAAA,UACX,cAAc;AAAA,UACd,UAAU;AAAA,UACV,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAM;AAAA,UAEN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAS;AAAA,gBACT,2BAA2B;AAAA,kBACzB,SAAS,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,gBAC9B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAoB;AAAA,oBACpB,OAAO,QAAQ,YAAY;AAAA,oBAC3B,IAAI,QAAQ,mBAAmB;AAAA,oBAC/B,SAAS;AAAA,oBACT,MAAK;AAAA,oBACL,MAAM;AAAA;AAAA,gBACR;AAAA;AAAA,YACF;AAAA,YAEA,qBAAC,eAAI,SAAQ,QAAO,WAAU,UAAS,OAAM,QAC1C;AAAA,uBAAS,oBAAC,eAAK,iBAAM;AAAA,cACtB,oBAAC,eAAI,SAAS,GACZ,8BAAC,mBAAQ,IAAG,MAAK,MAAM,KAAK,WAAU,SACnC,kBACH,GACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,cAAc,SAAS,IAAI;AAAA,kBAE1B;AAAA;AAAA,cACH;AAAA,cACC,UACC;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,KAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,aAAY;AAAA,kBACZ,kBAAiB;AAAA,kBACjB,SAAS;AAAA,kBAER;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF,GACF;AAEJ;AAEA,MAAM,cAAc;","names":[]}
|
|
@@ -19,7 +19,7 @@ import {
|
|
|
19
19
|
} from "./T6PXFSRX.js";
|
|
20
20
|
import {
|
|
21
21
|
Typography_default
|
|
22
|
-
} from "./
|
|
22
|
+
} from "./JRDHZ3QL.js";
|
|
23
23
|
|
|
24
24
|
// src/LinkButton/LinkButton.tsx
|
|
25
25
|
import {
|
|
@@ -137,4 +137,4 @@ var LinkButton_default = LinkButton;
|
|
|
137
137
|
export {
|
|
138
138
|
LinkButton_default
|
|
139
139
|
};
|
|
140
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=67BJ4PC2.js.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
@@ -54,8 +54,8 @@ var TextArea = _react.forwardRef.call(void 0,
|
|
|
54
54
|
},
|
|
55
55
|
position: "relative",
|
|
56
56
|
children: [
|
|
57
|
-
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
58
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
57
|
+
label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: TextField_module_default.label, htmlFor: inputId, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: 100, color: "gray700", children: label }) }) }),
|
|
58
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: 100, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
59
59
|
"textarea",
|
|
60
60
|
{
|
|
61
61
|
"data-testid": dataTestId,
|
|
@@ -78,7 +78,7 @@ var TextArea = _react.forwardRef.call(void 0,
|
|
|
78
78
|
}
|
|
79
79
|
) }),
|
|
80
80
|
(helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
81
|
-
|
|
81
|
+
_PJLDYIB6cjs.Typography_default,
|
|
82
82
|
{
|
|
83
83
|
size: 100,
|
|
84
84
|
color: errorText ? "destructive-primary" : "gray700",
|
|
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
|
|
|
95
95
|
|
|
96
96
|
|
|
97
97
|
exports.TextArea_default = TextArea_default;
|
|
98
|
-
//# sourceMappingURL=
|
|
98
|
+
//# sourceMappingURL=67PBF26W.cjs.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./M36V23WR.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./JRDHZ3QL.js";
|
|
8
8
|
import {
|
|
9
9
|
useIsHydrated
|
|
10
10
|
} from "./JB65NEXK.js";
|
|
@@ -95,4 +95,4 @@ var TextArea_default = TextArea;
|
|
|
95
95
|
export {
|
|
96
96
|
TextArea_default
|
|
97
97
|
};
|
|
98
|
-
//# sourceMappingURL=
|
|
98
|
+
//# sourceMappingURL=74XKLZ4N.js.map
|
|
@@ -7,7 +7,7 @@ var _MF7LLV7Vcjs = require('./MF7LLV7V.cjs');
|
|
|
7
7
|
var _IL22HCBFcjs = require('./IL22HCBF.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
|
|
11
11
|
|
|
12
12
|
// src/RichSelect/RichSelectSection.tsx
|
|
13
13
|
var _react = require('react');
|
|
@@ -39,7 +39,7 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
|
|
|
39
39
|
}
|
|
40
40
|
),
|
|
41
41
|
children: [
|
|
42
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
42
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Header, { className: _classnames2.default.call(void 0, _MF7LLV7Vcjs.layout_module_default.fullWidth), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { children: label }) }),
|
|
43
43
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactariacomponents.Collection, { children })
|
|
44
44
|
]
|
|
45
45
|
}
|
|
@@ -50,4 +50,4 @@ var RichSelectSection_default = _react.forwardRef.call(void 0,
|
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
exports.RichSelectSection_default = RichSelectSection_default;
|
|
53
|
-
//# sourceMappingURL=
|
|
53
|
+
//# sourceMappingURL=7BZZUMJM.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
useAvatarGroup
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./LT6ELZIN.js";
|
|
5
5
|
import {
|
|
6
6
|
Box_default
|
|
7
7
|
} from "./M36V23WR.js";
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
import classNames from "classnames";
|
|
14
14
|
|
|
15
15
|
// css-module:./Avatar.module.css#css-module
|
|
16
|
-
var Avatar_module_default = { "avatar": "
|
|
16
|
+
var Avatar_module_default = { "avatar": "_avatar_gvbh2_1", "avatarImage": "_avatarImage_gvbh2_5", "avatarImageOutline": "_avatarImageOutline_gvbh2_13", "xs": "_xs_gvbh2_17", "sm": "_sm_gvbh2_22", "md": "_md_gvbh2_27", "lg": "_lg_gvbh2_32", "xl": "_xl_gvbh2_37" };
|
|
17
17
|
|
|
18
18
|
// src/Avatar/Avatar.tsx
|
|
19
19
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -21,13 +21,15 @@ var sizeToIconStyles = {
|
|
|
21
21
|
xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
|
|
22
22
|
sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
|
|
23
23
|
md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
|
|
24
|
-
lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 }
|
|
24
|
+
lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
|
|
25
|
+
xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 }
|
|
25
26
|
};
|
|
26
27
|
var sizeToMargin = {
|
|
27
28
|
xs: -10,
|
|
28
29
|
sm: -14,
|
|
29
30
|
md: -22,
|
|
30
|
-
lg: -28
|
|
31
|
+
lg: -28,
|
|
32
|
+
xl: -34
|
|
31
33
|
};
|
|
32
34
|
function AvatarInternal({
|
|
33
35
|
accessibilityLabel,
|
|
@@ -123,4 +125,4 @@ var Avatar_default = Avatar;
|
|
|
123
125
|
export {
|
|
124
126
|
Avatar_default
|
|
125
127
|
};
|
|
126
|
-
//# sourceMappingURL=
|
|
128
|
+
//# sourceMappingURL=AVTBLTHP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module"],"sourcesContent":["import { type ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\nimport Box from \"../Box/Box\";\nimport { useAvatarGroup } from \"../AvatarGroup/AvatarGroup\";\n\nconst sizeToIconStyles = {\n xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },\n md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },\n lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },\n xl: { bottom: 8, marginInlineEnd: 6, height: 12, width: 12 },\n} as const;\n\nconst sizeToMargin = {\n xs: -10,\n sm: -14,\n md: -22,\n lg: -28,\n xl: -34,\n} as const;\n\nfunction AvatarInternal({\n accessibilityLabel,\n icon,\n outline,\n size = \"md\",\n src,\n}: {\n accessibilityLabel: string;\n icon?: React.ReactElement;\n outline?: boolean;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n src: string;\n}): ReactElement {\n return (\n <div className={classNames(styles.avatar, styles[size])}>\n <img\n alt={accessibilityLabel}\n src={src}\n className={classNames(\n styles.avatarImage,\n outline && styles.avatarImageOutline,\n styles[size],\n )}\n />\n {icon && (\n <Box display=\"flex\" position=\"relative\" justifyContent=\"end\">\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n position=\"absolute\"\n backgroundColor=\"white\"\n dangerouslySetInlineStyle={{\n __style: {\n border: \"1px solid white\",\n ...sizeToIconStyles[size],\n },\n }}\n rounding=\"full\"\n >\n {icon}\n </Box>\n </Box>\n )}\n </div>\n );\n}\n\n/**\n * [Avatar](https://cambly-syntax.vercel.app/?path=/docs/components-avatar--docs) is a circular image that represents a user.\n */\nconst Avatar = ({\n accessibilityLabel,\n icon,\n size = \"md\",\n src,\n}: {\n /**\n * Alt text to use for the image.\n * This should describe the image to people using screen readers.\n */\n accessibilityLabel: string;\n /**\n * optional icon that appears on the bottom corner of the avatar\n */\n icon?: React.ReactElement;\n /**\n * Size of the avatar.\n *\n * * `xs`: 24px\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n * * `xl`: 80px\n *\n * @defaultValue `md`\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n /**\n * URL of the image to display as the avatar.\n */\n src: string;\n}): JSX.Element => {\n const avatarGroupContext = useAvatarGroup();\n\n if (avatarGroupContext !== null) {\n return (\n <Box\n position=\"relative\"\n dangerouslySetInlineStyle={{\n __style: {\n marginInlineEnd: sizeToMargin[avatarGroupContext.size],\n },\n }}\n >\n <Box\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor=\"white\"\n rounding=\"full\"\n >\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n outline\n size={avatarGroupContext.size}\n src={src}\n />\n </Box>\n </Box>\n );\n }\n\n return (\n <AvatarInternal\n accessibilityLabel={accessibilityLabel}\n icon={icon}\n size={size}\n src={src}\n />\n );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_gvbh2_1\",\"avatarImage\":\"_avatarImage_gvbh2_5\",\"avatarImageOutline\":\"_avatarImageOutline_gvbh2_13\",\"xs\":\"_xs_gvbh2_17\",\"sm\":\"_sm_gvbh2_22\",\"md\":\"_md_gvbh2_27\",\"lg\":\"_lg_gvbh2_32\",\"xl\":\"_xl_gvbh2_37\"}"],"mappings":";;;;;;;;;;;;AACA,OAAO,gBAAgB;;;ACDqE,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,eAAc,wBAAuB,sBAAqB,gCAA+B,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,MAAK,eAAc;;;ADoC/T,SACE,KADF;AA9BJ,IAAM,mBAAmB;AAAA,EACvB,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,OAAO,EAAE;AAAA,EACzD,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAAA,EAC3D,IAAI,EAAE,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,IAAI,OAAO,GAAG;AAC7D;AAEA,IAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAMiB;AACf,SACE,qBAAC,SAAI,WAAW,WAAW,sBAAO,QAAQ,sBAAO,IAAI,CAAC,GACpD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,sBAAO;AAAA,UACP,WAAW,sBAAO;AAAA,UAClB,sBAAO,IAAI;AAAA,QACb;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,eAAI,SAAQ,QAAO,UAAS,YAAW,gBAAe,OACrD;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,UAAS;AAAA,QACT,iBAAgB;AAAA,QAChB,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,QAAQ;AAAA,aACL,iBAAiB,IAAI;AAAA,QAE5B;AAAA,QACA,UAAS;AAAA,QAER;AAAA;AAAA,IACH,GACF;AAAA,KAEJ;AAEJ;AAKA,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MA0BmB;AACjB,QAAM,qBAAqB,eAAe;AAE1C,MAAI,uBAAuB,MAAM;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,2BAA2B;AAAA,UACzB,SAAS;AAAA,YACP,iBAAiB,aAAa,mBAAmB,IAAI;AAAA,UACvD;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,iBAAgB;AAAA,YAChB,UAAS;AAAA,YAET;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,SAAO;AAAA,gBACP,MAAM,mBAAmB;AAAA,gBACzB;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Wed, 22 May 2024 17:42:07 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 ColorCambioWhite = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#888077\";\nexport const ColorCambioGray800 = \"#5c554d\";\nexport const ColorCambioGray870 = \"#5c554d\";\nexport const ColorCambioGray900 = \"#312b23\";\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\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,UAAS,mBAAkB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADkDvO;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,KAAK,GAAc,QACpD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,UAAU,KAAK;AAAA,QACf,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./Icon.module.css\";\nimport textColor from \"../colors/textColors\";\nimport type Typography from \"../Typography/Typography\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"gray900\"\n */\n color?: ComponentProps<typeof Typography>[\"color\"];\n /**\n * The size of the Icon.\n * * `xs`: 16px x 16px\n * * `sm`: 20px x 20px\n * * `md`: 24px x 24px\n * * `lg`: 32px x 32px\n *\n * @defaultValue \"md\"\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n /**\n * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n */\n path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/Icon.tsx","css-module:./Icon.module.css#css-module"],"names":[],"mappings":";;;;;;AAAA,SAAS,kBAAuC;AAChD,OAAO,gBAAgB;;;ACDiE,IAAO,sBAAQ,EAAC,QAAO,iBAAgB,UAAS,mBAAkB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;ADkDvO;AAZN,IAAM,OAAO;AAAA,EACX,CAAC,EAAE,QAAQ,WAAW,MAAM,OAAO,KAAK,GAAc,QACpD;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,oBAAO;AAAA,QACP,UAAU,KAAK;AAAA,QACf,oBAAO,OAAO,MAAM;AAAA,MACtB;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MAEN,8BAAC,UAAK,GAAG,MAAM;AAAA;AAAA,EACjB;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ","sourcesContent":["import { forwardRef, type ComponentProps } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./Icon.module.css\";\nimport textColor from \"../colors/textColors\";\nimport type Typography from \"../Typography/Typography\";\n\ntype IconProps = {\n /**\n * The color of the Icon.\n *\n * @defaultValue \"gray900\"\n */\n color?: ComponentProps<typeof Typography>[\"color\"];\n /**\n * The size of the Icon.\n * * `xs`: 16px x 16px\n * * `sm`: 20px x 20px\n * * `md`: 24px x 24px\n * * `lg`: 32px x 32px\n *\n * @defaultValue \"md\"\n */\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n /**\n * The svg path of the icon. You should not use this prop directly, instead use the specific icon components.\n */\n path?: string;\n};\n\n/**\n * [Icon](http://localhost:6006/?path=/docs/icons-icons--docs) is the base component that renders an icon.\n * You shouldn't use this component directly, instead use the specific icon components.\n * @example\n * `import Book from \"@cambly/syntax-icons/Book\";`\n *\n * You can click on the icon to copy the import statement!\n */\nconst Icon = forwardRef<SVGSVGElement, IconProps>(\n ({ color = \"inherit\", path, size = \"md\" }: IconProps, ref) => (\n <svg\n className={classnames(\n styles.icon,\n textColor(color),\n styles[`icon${size}`],\n )}\n ref={ref}\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d={path} />\n </svg>\n ),\n);\n\nIcon.displayName = \"Icon\";\n\nexport default Icon;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Icon/Icon.module.css\"; export default {\"icon\":\"_icon_1ku5p_1\",\"iconxs\":\"_iconxs_1ku5p_8\",\"iconsm\":\"_iconsm_1ku5p_13\",\"iconmd\":\"_iconmd_1ku5p_18\",\"iconlg\":\"_iconlg_1ku5p_23\"}"]}
|
|
@@ -22,7 +22,7 @@ import {
|
|
|
22
22
|
} from "./T6PXFSRX.js";
|
|
23
23
|
import {
|
|
24
24
|
Typography_default
|
|
25
|
-
} from "./
|
|
25
|
+
} from "./JRDHZ3QL.js";
|
|
26
26
|
import {
|
|
27
27
|
useIsHydrated
|
|
28
28
|
} from "./JB65NEXK.js";
|
|
@@ -145,4 +145,4 @@ var Button_default = Button;
|
|
|
145
145
|
export {
|
|
146
146
|
Button_default
|
|
147
147
|
};
|
|
148
|
-
//# sourceMappingURL=
|
|
148
|
+
//# sourceMappingURL=DFGY3NSE.js.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./M36V23WR.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./JRDHZ3QL.js";
|
|
8
8
|
import {
|
|
9
9
|
useIsHydrated
|
|
10
10
|
} from "./JB65NEXK.js";
|
|
@@ -88,4 +88,4 @@ var Chip_default = Chip;
|
|
|
88
88
|
export {
|
|
89
89
|
Chip_default
|
|
90
90
|
};
|
|
91
|
-
//# sourceMappingURL=
|
|
91
|
+
//# sourceMappingURL=E7IFJPHC.js.map
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
var _C5XPZTFOcjs = require('./C5XPZTFO.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _HF4V7JJPcjs = require('./HF4V7JJP.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _DMA6PPUZcjs = require('./DMA6PPUZ.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _GJVLYIGIcjs = require('./GJVLYIGI.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _7BZZUMJMcjs = require('./7BZZUMJM.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
var
|
|
19
|
+
var _N7ZNFTV7cjs = require('./N7ZNFTV7.cjs');
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
@@ -169,7 +169,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
|
|
|
169
169
|
justifyContent: "end",
|
|
170
170
|
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _C5XPZTFOcjs.ButtonGroup_default, { orientation: "horizontal", children: [
|
|
171
171
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
172
|
-
|
|
172
|
+
_HF4V7JJPcjs.Button_default,
|
|
173
173
|
{
|
|
174
174
|
onClick: clearChanges,
|
|
175
175
|
color: "secondary",
|
|
@@ -179,7 +179,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
|
|
|
179
179
|
}
|
|
180
180
|
),
|
|
181
181
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
182
|
-
|
|
182
|
+
_HF4V7JJPcjs.Button_default,
|
|
183
183
|
{
|
|
184
184
|
onClick: saveChanges,
|
|
185
185
|
text: primaryButtonText,
|
|
@@ -198,9 +198,9 @@ var RichSelectBox = _react.forwardRef.call(void 0,
|
|
|
198
198
|
}
|
|
199
199
|
);
|
|
200
200
|
var RichSelectBox_default = Object.assign(RichSelectBox, {
|
|
201
|
-
Section:
|
|
202
|
-
Chip:
|
|
203
|
-
RadioButton:
|
|
201
|
+
Section: _7BZZUMJMcjs.RichSelectSection_default,
|
|
202
|
+
Chip: _GJVLYIGIcjs.RichSelectChip_default,
|
|
203
|
+
RadioButton: _N7ZNFTV7cjs.RichSelectRadioButton_default
|
|
204
204
|
});
|
|
205
205
|
|
|
206
206
|
|
|
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
|
|
|
208
208
|
|
|
209
209
|
|
|
210
210
|
exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
|
|
211
|
-
//# sourceMappingURL=
|
|
211
|
+
//# sourceMappingURL=EUBO6YEI.cjs.map
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
var
|
|
6
|
+
var _EUBO6YEIcjs = require('./EUBO6YEI.cjs');
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var _GJVLYIGIcjs = require('./GJVLYIGI.cjs');
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
var _ELEREGBWcjs = require('./ELEREGBW.cjs');
|
|
@@ -19,19 +19,19 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _BLCQNB25cjs = require('./BLCQNB25.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _7BZZUMJMcjs = require('./7BZZUMJM.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _N7ZNFTV7cjs = require('./N7ZNFTV7.cjs');
|
|
29
29
|
|
|
30
30
|
|
|
31
31
|
var _FESAFV44cjs = require('./FESAFV44.cjs');
|
|
32
32
|
|
|
33
33
|
|
|
34
|
-
var
|
|
34
|
+
var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
@@ -100,11 +100,11 @@ function RichSelectList(props) {
|
|
|
100
100
|
const disabled = !isHydrated || disabledProp;
|
|
101
101
|
const overlayHandlerRef = _react.useRef.call(void 0, {});
|
|
102
102
|
const selectedKeysProp = _react.useMemo.call(void 0,
|
|
103
|
-
() =>
|
|
103
|
+
() => _EUBO6YEIcjs.convertSelection.call(void 0, selectedValuesProp),
|
|
104
104
|
[selectedValuesProp]
|
|
105
105
|
);
|
|
106
106
|
const defaultSelectedKeys = _react.useMemo.call(void 0,
|
|
107
|
-
() =>
|
|
107
|
+
() => _EUBO6YEIcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
|
|
108
108
|
[defaultSelectedValuesProp]
|
|
109
109
|
);
|
|
110
110
|
const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
|
|
@@ -142,7 +142,7 @@ function RichSelectList(props) {
|
|
|
142
142
|
_reactariacomponents.Provider,
|
|
143
143
|
{
|
|
144
144
|
values: [
|
|
145
|
-
[
|
|
145
|
+
[_EUBO6YEIcjs.RichSelectBoxContext, { autoFocus: true }],
|
|
146
146
|
[_76LTWV2Qcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
|
|
147
147
|
// this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
|
|
148
148
|
],
|
|
@@ -166,7 +166,7 @@ function RichSelectList(props) {
|
|
|
166
166
|
(_a2 = fieldRef.current) == null ? void 0 : _a2.focus();
|
|
167
167
|
_interactions.setInteractionModality.call(void 0, "keyboard");
|
|
168
168
|
},
|
|
169
|
-
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
169
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: 100, color: "gray700", children: label }) })
|
|
170
170
|
})
|
|
171
171
|
) }),
|
|
172
172
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
@@ -182,7 +182,7 @@ function RichSelectList(props) {
|
|
|
182
182
|
padding: autosave ? void 0 : 5,
|
|
183
183
|
dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
|
|
184
184
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
185
|
-
|
|
185
|
+
_EUBO6YEIcjs.RichSelectBox_default,
|
|
186
186
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
187
187
|
autosave,
|
|
188
188
|
selectedValues: selectedKeys,
|
|
@@ -231,7 +231,7 @@ function RichSelectList(props) {
|
|
|
231
231
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
232
232
|
"path",
|
|
233
233
|
{
|
|
234
|
-
fill: errorText ?
|
|
234
|
+
fill: errorText ? _BLCQNB25cjs.ColorBaseDestructive700 : _BLCQNB25cjs.ColorBaseGray800,
|
|
235
235
|
d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
|
|
236
236
|
}
|
|
237
237
|
)
|
|
@@ -243,7 +243,7 @@ function RichSelectList(props) {
|
|
|
243
243
|
}
|
|
244
244
|
),
|
|
245
245
|
(helperText || errorText) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
246
|
-
|
|
246
|
+
_PJLDYIB6cjs.Typography_default,
|
|
247
247
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
248
248
|
size: 100,
|
|
249
249
|
color: errorText ? "destructive-primary" : "gray700"
|
|
@@ -258,12 +258,12 @@ function RichSelectList(props) {
|
|
|
258
258
|
);
|
|
259
259
|
}
|
|
260
260
|
var RichSelectList_default = Object.assign(RichSelectList, {
|
|
261
|
-
Section:
|
|
262
|
-
Chip:
|
|
263
|
-
RadioButton:
|
|
261
|
+
Section: _7BZZUMJMcjs.RichSelectSection_default,
|
|
262
|
+
Chip: _GJVLYIGIcjs.RichSelectChip_default,
|
|
263
|
+
RadioButton: _N7ZNFTV7cjs.RichSelectRadioButton_default
|
|
264
264
|
});
|
|
265
265
|
|
|
266
266
|
|
|
267
267
|
|
|
268
268
|
exports.RichSelectList_default = RichSelectList_default;
|
|
269
|
-
//# sourceMappingURL=
|
|
269
|
+
//# sourceMappingURL=FT35ULZS.cjs.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./M36V23WR.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./JRDHZ3QL.js";
|
|
8
8
|
import {
|
|
9
9
|
useIsHydrated
|
|
10
10
|
} from "./JB65NEXK.js";
|
|
@@ -85,4 +85,4 @@ function TextField({
|
|
|
85
85
|
export {
|
|
86
86
|
TextField
|
|
87
87
|
};
|
|
88
|
-
//# sourceMappingURL=
|
|
88
|
+
//# sourceMappingURL=GGK4OCW3.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _ZBBMY7Y7cjs = require('./ZBBMY7Y7.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
|
|
@@ -16,7 +16,7 @@ var _jsxruntime = require('react/jsx-runtime');
|
|
|
16
16
|
var RichSelectChip_default = _react.forwardRef.call(void 0,
|
|
17
17
|
function RichSelectChip(props, ref) {
|
|
18
18
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, props), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
19
|
-
|
|
19
|
+
_ZBBMY7Y7cjs.Chip_default,
|
|
20
20
|
{
|
|
21
21
|
text: props.label,
|
|
22
22
|
selected: isSelected,
|
|
@@ -31,4 +31,4 @@ var RichSelectChip_default = _react.forwardRef.call(void 0,
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
exports.RichSelectChip_default = RichSelectChip_default;
|
|
34
|
-
//# sourceMappingURL=
|
|
34
|
+
//# sourceMappingURL=GJVLYIGI.cjs.map
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "./KBIW5XV4.js";
|
|
11
11
|
import {
|
|
12
12
|
Typography_default
|
|
13
|
-
} from "./
|
|
13
|
+
} from "./JRDHZ3QL.js";
|
|
14
14
|
import {
|
|
15
15
|
colors_module_default
|
|
16
16
|
} from "./S6TNP7G5.js";
|
|
@@ -162,4 +162,4 @@ export {
|
|
|
162
162
|
AriaTooltip,
|
|
163
163
|
Tooltip_default
|
|
164
164
|
};
|
|
165
|
-
//# sourceMappingURL=
|
|
165
|
+
//# sourceMappingURL=GWRAEUKW.js.map
|
|
@@ -22,7 +22,7 @@ var _C3KZXHTVcjs = require('./C3KZXHTV.cjs');
|
|
|
22
22
|
var _RAL6R27Scjs = require('./RAL6R27S.cjs');
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
var
|
|
25
|
+
var _PJLDYIB6cjs = require('./PJLDYIB6.cjs');
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
@@ -93,7 +93,7 @@ var Button = _react.forwardRef.call(void 0,
|
|
|
93
93
|
size
|
|
94
94
|
}
|
|
95
95
|
),
|
|
96
|
-
(loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
96
|
+
(loading && loadingText || !loading && text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _FESAFV44cjs.Box_default, { paddingX: 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PJLDYIB6cjs.Typography_default, { size: _5JUNB754cjs.textVariant_default[size], weight: "medium", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
97
97
|
"span",
|
|
98
98
|
{
|
|
99
99
|
className: _classnames2.default.call(void 0,
|
|
@@ -145,4 +145,4 @@ var Button_default = Button;
|
|
|
145
145
|
|
|
146
146
|
|
|
147
147
|
exports.Button_default = Button_default;
|
|
148
|
-
//# sourceMappingURL=
|
|
148
|
+
//# sourceMappingURL=HF4V7JJP.cjs.map
|