@cambly/syntax-core 10.28.0 → 10.30.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.d.ts +1 -1
- package/dist/Badge/Badge.cjs +3 -3
- package/dist/Badge/Badge.css +59 -59
- package/dist/Badge/Badge.css.map +1 -1
- package/dist/Badge/Badge.d.ts +1 -1
- package/dist/Badge/Badge.js +2 -2
- package/dist/Button/Button.cjs +3 -3
- package/dist/Button/Button.css +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- package/dist/Heading/Heading.css.map +1 -1
- package/dist/Heading/Heading.d.ts +2 -2
- package/dist/Heading/Heading.js +2 -2
- package/dist/LinkButton/LinkButton.cjs +3 -3
- package/dist/LinkButton/LinkButton.css +59 -59
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.js +2 -2
- package/dist/Modal/FocusTrap.cjs +3 -2
- package/dist/Modal/FocusTrap.js +2 -1
- package/dist/Modal/Modal.cjs +5 -5
- package/dist/Modal/Modal.css +70 -72
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.d.ts +6 -8
- package/dist/Modal/Modal.js +4 -4
- package/dist/RadioButton/RadioButton.cjs +3 -3
- package/dist/RadioButton/RadioButton.css +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- 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 +59 -59
- package/dist/Typography/Typography.css.map +1 -1
- package/dist/Typography/Typography.d.ts +5 -5
- package/dist/Typography/Typography.js +1 -1
- package/dist/__chunks/{SRAYR7UN.cjs → 2HNPYS3S.cjs} +17 -17
- package/dist/__chunks/{RJX7ZVAG.cjs → 2RWNBVOK.cjs} +4 -4
- package/dist/__chunks/{CVYKJOHP.js → 3CNALXRL.js} +5 -5
- package/dist/__chunks/{ICLT5QY2.cjs → 3FMGCZP2.cjs} +4 -4
- package/dist/__chunks/{UENUF2KR.js → 3HBVE6VG.js} +2 -2
- package/dist/__chunks/{5JUAIXVN.js → 3OWAOKRW.js} +7 -7
- package/dist/__chunks/{4HPBU76L.cjs → 5MKCDCHQ.cjs} +3 -3
- package/dist/__chunks/{JUB3D7BZ.js → 5PWYNWVE.js} +2 -2
- package/dist/__chunks/{JDOSJDOR.cjs → 6OCOGTM5.cjs} +6 -6
- package/dist/__chunks/{O2J3F7UE.cjs → 7SCBZPIF.cjs} +1 -1
- package/dist/__chunks/{O2J3F7UE.cjs.map → 7SCBZPIF.cjs.map} +1 -1
- package/dist/__chunks/AKKJTW7U.js +148 -0
- package/dist/__chunks/AKKJTW7U.js.map +1 -0
- package/dist/__chunks/{4IJQ4BTF.js → AYTJYJHI.js} +2 -2
- package/dist/__chunks/{4VJHC5OM.js → BQOD4WU7.js} +2 -2
- package/dist/__chunks/{6NYPDPF4.cjs → BVYHALMT.cjs} +3 -3
- package/dist/__chunks/CPIFXRXD.cjs +148 -0
- package/dist/__chunks/CPIFXRXD.cjs.map +1 -0
- package/dist/__chunks/{QZZW6BPP.cjs → CS66HKUB.cjs} +3 -3
- package/dist/__chunks/{HVYLG5OC.cjs → EKHHYK7U.cjs} +5 -5
- package/dist/__chunks/{6IRH354B.cjs → FH2W3CI2.cjs} +3 -3
- package/dist/__chunks/{KG6XG47I.js → FLFJRP4T.js} +2 -2
- package/dist/__chunks/{PDKMXSDQ.cjs → GEGGHBSM.cjs} +10 -10
- package/dist/__chunks/{J7FCX3U6.js → HVA7R2EL.js} +7 -3
- package/dist/__chunks/HVA7R2EL.js.map +1 -0
- package/dist/__chunks/{AWT6KV7A.js → I6CGA2ER.js} +2 -2
- package/dist/__chunks/{WEBZYCKQ.js → ICDRMDXD.js} +1 -1
- package/dist/__chunks/{WEBZYCKQ.js.map → ICDRMDXD.js.map} +1 -1
- package/dist/__chunks/{2HNKN7IN.js → JNYNLJGY.js} +2 -2
- package/dist/__chunks/{MBTIELOD.js → K27Z66LH.js} +2 -2
- package/dist/__chunks/{AAJM5GTF.js → KTTIFVGY.js} +2 -2
- package/dist/__chunks/{J25IK5J2.cjs → KYIRM6PZ.cjs} +3 -3
- package/dist/__chunks/{G7N4BOR7.js → MONMI3LS.js} +2 -2
- package/dist/__chunks/{XYPM2PWU.js → N5B6KNJR.js} +2 -2
- package/dist/__chunks/{4S6APU2V.cjs → NCUQOLOV.cjs} +3 -3
- package/dist/__chunks/{KR53ODQQ.js → OU5C2MBA.js} +2 -2
- package/dist/__chunks/{Y2TA6QLY.cjs → SFOAZYZG.cjs} +3 -3
- package/dist/__chunks/{WPKU2FTA.js → TDR3JRXZ.js} +3 -3
- package/dist/__chunks/{ZDQ6WQM3.cjs → THM3NAFO.cjs} +7 -3
- package/dist/__chunks/THM3NAFO.cjs.map +1 -0
- package/dist/__chunks/{GMKJSXXQ.cjs → THYSYYWS.cjs} +3 -3
- package/dist/__chunks/{MDAWMKBY.js → UVROGDYB.js} +2 -2
- package/dist/__chunks/{MDAWMKBY.js.map → UVROGDYB.js.map} +1 -1
- package/dist/__chunks/{AGJ2QSEP.cjs → WOIJRASP.cjs} +3 -3
- package/dist/__chunks/{AW4Z42KI.js → X5KCRFFF.js} +2 -2
- package/dist/__chunks/{YJWKUNYU.cjs → XU3CLITI.cjs} +2 -2
- package/dist/__chunks/{YJWKUNYU.cjs.map → XU3CLITI.cjs.map} +1 -1
- package/dist/__chunks/{M2CJONYS.cjs → ZUQC37VB.cjs} +3 -3
- package/dist/index.cjs +21 -21
- package/dist/index.css +70 -72
- package/dist/index.css.map +1 -1
- package/dist/index.js +20 -20
- package/package.json +1 -1
- package/dist/__chunks/432LXWXX.cjs +0 -177
- package/dist/__chunks/432LXWXX.cjs.map +0 -1
- package/dist/__chunks/J7FCX3U6.js.map +0 -1
- package/dist/__chunks/NKYN63G7.js +0 -177
- package/dist/__chunks/NKYN63G7.js.map +0 -1
- package/dist/__chunks/ZDQ6WQM3.cjs.map +0 -1
- /package/dist/__chunks/{SRAYR7UN.cjs.map → 2HNPYS3S.cjs.map} +0 -0
- /package/dist/__chunks/{RJX7ZVAG.cjs.map → 2RWNBVOK.cjs.map} +0 -0
- /package/dist/__chunks/{CVYKJOHP.js.map → 3CNALXRL.js.map} +0 -0
- /package/dist/__chunks/{ICLT5QY2.cjs.map → 3FMGCZP2.cjs.map} +0 -0
- /package/dist/__chunks/{UENUF2KR.js.map → 3HBVE6VG.js.map} +0 -0
- /package/dist/__chunks/{5JUAIXVN.js.map → 3OWAOKRW.js.map} +0 -0
- /package/dist/__chunks/{4HPBU76L.cjs.map → 5MKCDCHQ.cjs.map} +0 -0
- /package/dist/__chunks/{JUB3D7BZ.js.map → 5PWYNWVE.js.map} +0 -0
- /package/dist/__chunks/{JDOSJDOR.cjs.map → 6OCOGTM5.cjs.map} +0 -0
- /package/dist/__chunks/{4IJQ4BTF.js.map → AYTJYJHI.js.map} +0 -0
- /package/dist/__chunks/{4VJHC5OM.js.map → BQOD4WU7.js.map} +0 -0
- /package/dist/__chunks/{6NYPDPF4.cjs.map → BVYHALMT.cjs.map} +0 -0
- /package/dist/__chunks/{QZZW6BPP.cjs.map → CS66HKUB.cjs.map} +0 -0
- /package/dist/__chunks/{HVYLG5OC.cjs.map → EKHHYK7U.cjs.map} +0 -0
- /package/dist/__chunks/{6IRH354B.cjs.map → FH2W3CI2.cjs.map} +0 -0
- /package/dist/__chunks/{KG6XG47I.js.map → FLFJRP4T.js.map} +0 -0
- /package/dist/__chunks/{PDKMXSDQ.cjs.map → GEGGHBSM.cjs.map} +0 -0
- /package/dist/__chunks/{AWT6KV7A.js.map → I6CGA2ER.js.map} +0 -0
- /package/dist/__chunks/{2HNKN7IN.js.map → JNYNLJGY.js.map} +0 -0
- /package/dist/__chunks/{MBTIELOD.js.map → K27Z66LH.js.map} +0 -0
- /package/dist/__chunks/{AAJM5GTF.js.map → KTTIFVGY.js.map} +0 -0
- /package/dist/__chunks/{J25IK5J2.cjs.map → KYIRM6PZ.cjs.map} +0 -0
- /package/dist/__chunks/{G7N4BOR7.js.map → MONMI3LS.js.map} +0 -0
- /package/dist/__chunks/{XYPM2PWU.js.map → N5B6KNJR.js.map} +0 -0
- /package/dist/__chunks/{4S6APU2V.cjs.map → NCUQOLOV.cjs.map} +0 -0
- /package/dist/__chunks/{KR53ODQQ.js.map → OU5C2MBA.js.map} +0 -0
- /package/dist/__chunks/{Y2TA6QLY.cjs.map → SFOAZYZG.cjs.map} +0 -0
- /package/dist/__chunks/{WPKU2FTA.js.map → TDR3JRXZ.js.map} +0 -0
- /package/dist/__chunks/{GMKJSXXQ.cjs.map → THYSYYWS.cjs.map} +0 -0
- /package/dist/__chunks/{AGJ2QSEP.cjs.map → WOIJRASP.cjs.map} +0 -0
- /package/dist/__chunks/{AW4Z42KI.js.map → X5KCRFFF.js.map} +0 -0
- /package/dist/__chunks/{M2CJONYS.cjs.map → ZUQC37VB.cjs.map} +0 -0
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
var _RVFY33X2cjs = require('./RVFY33X2.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _CS66HKUBcjs = require('./CS66HKUB.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _HYRATHVKcjs = require('./HYRATHVK.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
var
|
|
13
|
+
var _ZUQC37VBcjs = require('./ZUQC37VB.cjs');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _SFOAZYZGcjs = require('./SFOAZYZG.cjs');
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
var
|
|
19
|
+
var _WOIJRASPcjs = require('./WOIJRASP.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, _RVFY33X2cjs.ButtonGroup_default, { orientation: "horizontal", children: [
|
|
171
171
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
172
|
-
|
|
172
|
+
_CS66HKUBcjs.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
|
+
_CS66HKUBcjs.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: _SFOAZYZGcjs.RichSelectSection_default,
|
|
202
|
+
Chip: _ZUQC37VBcjs.RichSelectChip_default,
|
|
203
|
+
RadioButton: _WOIJRASPcjs.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=GEGGHBSM.cjs.map
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import {
|
|
3
|
+
useIsHydrated
|
|
4
|
+
} from "./JB65NEXK.js";
|
|
2
5
|
|
|
3
6
|
// src/Modal/FocusTrap.tsx
|
|
4
7
|
import { useEffect, useRef } from "react";
|
|
@@ -33,6 +36,7 @@ function FocusTrap({
|
|
|
33
36
|
}) {
|
|
34
37
|
const elRef = useRef(null);
|
|
35
38
|
const previouslyFocusedElRef = useRef(null);
|
|
39
|
+
const isHydrated = useIsHydrated();
|
|
36
40
|
useEffect(() => {
|
|
37
41
|
const { current: element } = elRef;
|
|
38
42
|
const focusFirstChild = () => {
|
|
@@ -50,7 +54,7 @@ function FocusTrap({
|
|
|
50
54
|
}
|
|
51
55
|
event.stopPropagation();
|
|
52
56
|
event.preventDefault();
|
|
53
|
-
focusFirstChild();
|
|
57
|
+
isHydrated && focusFirstChild();
|
|
54
58
|
};
|
|
55
59
|
previouslyFocusedElRef.current = document.activeElement;
|
|
56
60
|
focusFirstChild();
|
|
@@ -62,11 +66,11 @@ function FocusTrap({
|
|
|
62
66
|
focusElement(previouslyFocusedEl);
|
|
63
67
|
}
|
|
64
68
|
};
|
|
65
|
-
}, [elRef, previouslyFocusedElRef]);
|
|
69
|
+
}, [isHydrated, elRef, previouslyFocusedElRef]);
|
|
66
70
|
return /* @__PURE__ */ jsx("div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
export {
|
|
70
74
|
FocusTrap
|
|
71
75
|
};
|
|
72
|
-
//# sourceMappingURL=
|
|
76
|
+
//# sourceMappingURL=HVA7R2EL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n // Focusable, interactive elements that could possibly be in children\n const selector = [\n \"a[href]\",\n \"area[href]\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"button:not([disabled])\",\n \"iframe\",\n \"object\",\n \"embed\",\n '[tabindex=\"-1\"]',\n '[tabindex=\"0\"]',\n \"[contenteditable]\",\n \"audio[controls]\",\n \"video[controls]\",\n \"summary\",\n ].join(\",\");\n return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el?: HTMLElement) => {\n if (el && typeof el.focus === \"function\") {\n el.focus();\n }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n children,\n}: {\n children?: ReactElement | null;\n}): ReactElement {\n const elRef = useRef<HTMLDivElement | null>(null);\n const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n const isHydrated = useIsHydrated();\n\n useEffect(() => {\n const { current: element } = elRef;\n\n // Focus the first child element among all the focusable, interactive elements within `children`\n const focusFirstChild = () => {\n const withinIframe = window !== window.parent;\n if (element && !withinIframe) {\n focusElement(queryFocusableAll(element)[0]);\n }\n };\n\n const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n if (\n !element ||\n (event.target instanceof Node && element.contains(event.target))\n ) {\n return;\n }\n\n // This prevents stack overflow when multiple FocusTraps are rendered\n if (\n event.target instanceof Element &&\n event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n ) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n isHydrated && focusFirstChild();\n };\n\n // If an element has focus currently, keep a reference to that element\n previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n focusFirstChild();\n document.addEventListener(\"focus\", handleFocus, true);\n\n return function cleanup() {\n const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n document.removeEventListener(\"focus\", handleFocus, true);\n // If we previously stored a reference to a focused element, return focus to that element\n if (previouslyFocusedEl) {\n focusElement(previouslyFocusedEl);\n }\n };\n }, [isHydrated, elRef, previouslyFocusedElRef]);\n\n return (\n <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAgB,WAAW,cAAiC;AA2FxD;AAxFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAqB;AACzC,MAAI,MAAM,OAAO,GAAG,UAAU,YAAY;AACxC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAC9D,QAAM,aAAa,cAAc;AAEjC,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,oBAAc,gBAAgB;AAAA,IAChC;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,sBAAsB,CAAC;AAE9C,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ;","names":[]}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
} from "./SHHN3SRR.js";
|
|
11
11
|
import {
|
|
12
12
|
Typography_default
|
|
13
|
-
} from "./
|
|
13
|
+
} from "./UVROGDYB.js";
|
|
14
14
|
import {
|
|
15
15
|
colors_module_default
|
|
16
16
|
} from "./B7PDT66P.js";
|
|
@@ -166,4 +166,4 @@ export {
|
|
|
166
166
|
AriaTooltip,
|
|
167
167
|
Tooltip_default
|
|
168
168
|
};
|
|
169
|
-
//# sourceMappingURL=
|
|
169
|
+
//# sourceMappingURL=I6CGA2ER.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Thu, 28 Mar 2024 21:04:09 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"],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB;","names":[]}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./KKADUD65.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./UVROGDYB.js";
|
|
8
8
|
import {
|
|
9
9
|
colors_module_default
|
|
10
10
|
} from "./B7PDT66P.js";
|
|
@@ -134,4 +134,4 @@ var Checkbox_default = Checkbox;
|
|
|
134
134
|
export {
|
|
135
135
|
Checkbox_default
|
|
136
136
|
};
|
|
137
|
-
//# sourceMappingURL=
|
|
137
|
+
//# sourceMappingURL=JNYNLJGY.js.map
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from "./AVREYFSM.js";
|
|
8
8
|
import {
|
|
9
9
|
Typography_default
|
|
10
|
-
} from "./
|
|
10
|
+
} from "./UVROGDYB.js";
|
|
11
11
|
|
|
12
12
|
// src/RichSelect/RichSelectSection.tsx
|
|
13
13
|
import { forwardRef } from "react";
|
|
@@ -50,4 +50,4 @@ var RichSelectSection_default = forwardRef(
|
|
|
50
50
|
export {
|
|
51
51
|
RichSelectSection_default
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=
|
|
53
|
+
//# sourceMappingURL=K27Z66LH.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
Chip_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./5PWYNWVE.js";
|
|
5
5
|
import {
|
|
6
6
|
RichSelectItem_default
|
|
7
7
|
} from "./ODMJANSX.js";
|
|
@@ -31,4 +31,4 @@ var RichSelectChip_default = forwardRef(
|
|
|
31
31
|
export {
|
|
32
32
|
RichSelectChip_default
|
|
33
33
|
};
|
|
34
|
-
//# sourceMappingURL=
|
|
34
|
+
//# sourceMappingURL=KTTIFVGY.js.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _XLUVINJWcjs = require('./XLUVINJW.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _XU3CLITIcjs = require('./XU3CLITI.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _QAS3KERZcjs = require('./QAS3KERZ.cjs');
|
|
@@ -118,7 +118,7 @@ var Checkbox = ({
|
|
|
118
118
|
}
|
|
119
119
|
),
|
|
120
120
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
121
|
-
|
|
121
|
+
_XU3CLITIcjs.Typography_default,
|
|
122
122
|
{
|
|
123
123
|
size: typographySize[size],
|
|
124
124
|
color: error ? "destructive-primary" : "gray900",
|
|
@@ -134,4 +134,4 @@ var Checkbox_default = Checkbox;
|
|
|
134
134
|
|
|
135
135
|
|
|
136
136
|
exports.Checkbox_default = Checkbox_default;
|
|
137
|
-
//# sourceMappingURL=
|
|
137
|
+
//# sourceMappingURL=KYIRM6PZ.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import {
|
|
3
3
|
RadioButton_default
|
|
4
|
-
} from "./
|
|
4
|
+
} from "./N5B6KNJR.js";
|
|
5
5
|
import {
|
|
6
6
|
RichSelectItem_default
|
|
7
7
|
} from "./ODMJANSX.js";
|
|
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
|
|
|
37
37
|
export {
|
|
38
38
|
RichSelectRadioButton_default
|
|
39
39
|
};
|
|
40
|
-
//# sourceMappingURL=
|
|
40
|
+
//# sourceMappingURL=MONMI3LS.js.map
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
} from "./HCHFPFNX.js";
|
|
8
8
|
import {
|
|
9
9
|
Typography_default
|
|
10
|
-
} from "./
|
|
10
|
+
} from "./UVROGDYB.js";
|
|
11
11
|
import {
|
|
12
12
|
colors_module_default
|
|
13
13
|
} from "./B7PDT66P.js";
|
|
@@ -137,4 +137,4 @@ var RadioButton_default = RadioButton;
|
|
|
137
137
|
export {
|
|
138
138
|
RadioButton_default
|
|
139
139
|
};
|
|
140
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=N5B6KNJR.js.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _GANR5JVVcjs = require('./GANR5JVV.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _XU3CLITIcjs = require('./XU3CLITI.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
|
|
@@ -93,7 +93,7 @@ var Chip = _react.forwardRef.call(void 0,
|
|
|
93
93
|
children: [
|
|
94
94
|
Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: iconStyles }),
|
|
95
95
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _GANR5JVVcjs.Box_default, { paddingX: Icon ? 1 : 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
96
|
-
|
|
96
|
+
_XU3CLITIcjs.Typography_default,
|
|
97
97
|
{
|
|
98
98
|
size: themeName === "classic" ? typographySize[transformedSize] : 100,
|
|
99
99
|
color,
|
|
@@ -112,4 +112,4 @@ var Chip_default = Chip;
|
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
exports.Chip_default = Chip_default;
|
|
115
|
-
//# sourceMappingURL=
|
|
115
|
+
//# sourceMappingURL=NCUQOLOV.cjs.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./HCHFPFNX.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./UVROGDYB.js";
|
|
8
8
|
import {
|
|
9
9
|
useTheme
|
|
10
10
|
} from "./4GTNQPPD.js";
|
|
@@ -111,4 +111,4 @@ var Badge_default = Badge;
|
|
|
111
111
|
export {
|
|
112
112
|
Badge_default
|
|
113
113
|
};
|
|
114
|
-
//# sourceMappingURL=
|
|
114
|
+
//# sourceMappingURL=OU5C2MBA.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 _XU3CLITIcjs = require('./XU3CLITI.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, _XU3CLITIcjs.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=SFOAZYZG.cjs.map
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
ColorBaseDestructive700,
|
|
7
7
|
ColorBaseGray800
|
|
8
|
-
} from "./
|
|
8
|
+
} from "./ICDRMDXD.js";
|
|
9
9
|
import {
|
|
10
10
|
Focus_module_default
|
|
11
11
|
} from "./KKADUD65.js";
|
|
@@ -14,7 +14,7 @@ import {
|
|
|
14
14
|
} from "./HCHFPFNX.js";
|
|
15
15
|
import {
|
|
16
16
|
Typography_default
|
|
17
|
-
} from "./
|
|
17
|
+
} from "./UVROGDYB.js";
|
|
18
18
|
import {
|
|
19
19
|
useTheme
|
|
20
20
|
} from "./4GTNQPPD.js";
|
|
@@ -137,4 +137,4 @@ SelectList.Option = SelectOption_default;
|
|
|
137
137
|
export {
|
|
138
138
|
SelectList
|
|
139
139
|
};
|
|
140
|
-
//# sourceMappingURL=
|
|
140
|
+
//# sourceMappingURL=TDR3JRXZ.js.map
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
|
+
|
|
4
|
+
var _K4AUV2VKcjs = require('./K4AUV2VK.cjs');
|
|
5
|
+
|
|
3
6
|
// src/Modal/FocusTrap.tsx
|
|
4
7
|
var _react = require('react');
|
|
5
8
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -33,6 +36,7 @@ function FocusTrap({
|
|
|
33
36
|
}) {
|
|
34
37
|
const elRef = _react.useRef.call(void 0, null);
|
|
35
38
|
const previouslyFocusedElRef = _react.useRef.call(void 0, null);
|
|
39
|
+
const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
|
|
36
40
|
_react.useEffect.call(void 0, () => {
|
|
37
41
|
const { current: element } = elRef;
|
|
38
42
|
const focusFirstChild = () => {
|
|
@@ -50,7 +54,7 @@ function FocusTrap({
|
|
|
50
54
|
}
|
|
51
55
|
event.stopPropagation();
|
|
52
56
|
event.preventDefault();
|
|
53
|
-
focusFirstChild();
|
|
57
|
+
isHydrated && focusFirstChild();
|
|
54
58
|
};
|
|
55
59
|
previouslyFocusedElRef.current = document.activeElement;
|
|
56
60
|
focusFirstChild();
|
|
@@ -62,11 +66,11 @@ function FocusTrap({
|
|
|
62
66
|
focusElement(previouslyFocusedEl);
|
|
63
67
|
}
|
|
64
68
|
};
|
|
65
|
-
}, [elRef, previouslyFocusedElRef]);
|
|
69
|
+
}, [isHydrated, elRef, previouslyFocusedElRef]);
|
|
66
70
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-testid": "syntax-focus-trap", ref: elRef, children });
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
|
|
70
74
|
|
|
71
75
|
exports.FocusTrap = FocusTrap;
|
|
72
|
-
//# sourceMappingURL=
|
|
76
|
+
//# sourceMappingURL=THM3NAFO.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Modal/FocusTrap.tsx"],"names":[],"mappings":";;;;;;AAAA,SAAgB,WAAW,cAAiC;AA2FxD;AAxFJ,SAAS,kBAAkB,IAA6C;AAEtE,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AACV,SAAO,GAAG,iBAAiB,QAAQ;AACrC;AAEA,IAAM,eAAe,CAAC,OAAqB;AACzC,MAAI,MAAM,OAAO,GAAG,UAAU,YAAY;AACxC,OAAG,MAAM;AAAA,EACX;AACF;AAKe,SAAR,UAA2B;AAAA,EAChC;AACF,GAEiB;AACf,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,yBAAyB,OAA2B,IAAI;AAC9D,QAAM,aAAa,cAAc;AAEjC,YAAU,MAAM;AACd,UAAM,EAAE,SAAS,QAAQ,IAAI;AAG7B,UAAM,kBAAkB,MAAM;AAC5B,YAAM,eAAe,WAAW,OAAO;AACvC,UAAI,WAAW,CAAC,cAAc;AAC5B,qBAAa,kBAAkB,OAAO,EAAE,CAAC,CAAC;AAAA,MAC5C;AAAA,IACF;AAEA,UAAM,cAA2C,CAAC,UAAsB;AACtE,UACE,CAAC,WACA,MAAM,kBAAkB,QAAQ,QAAQ,SAAS,MAAM,MAAM,GAC9D;AACA;AAAA,MACF;AAGA,UACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,mCAAmC,MAAM,MAC9D;AACA;AAAA,MACF;AAEA,YAAM,gBAAgB;AACtB,YAAM,eAAe;AACrB,oBAAc,gBAAgB;AAAA,IAChC;AAGA,2BAAuB,UAAU,SAAS;AAC1C,oBAAgB;AAChB,aAAS,iBAAiB,SAAS,aAAa,IAAI;AAEpD,WAAO,SAAS,UAAU;AACxB,YAAM,EAAE,SAAS,oBAAoB,IAAI;AACzC,eAAS,oBAAoB,SAAS,aAAa,IAAI;AAEvD,UAAI,qBAAqB;AACvB,qBAAa,mBAAmB;AAAA,MAClC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,YAAY,OAAO,sBAAsB,CAAC;AAE9C,SACE,oBAAC,SAAI,eAAY,qBAAoB,KAAK,OACvC,UACH;AAEJ","sourcesContent":["import React, { useEffect, useRef, type ReactElement } from \"react\";\nimport useIsHydrated from \"../useIsHydrated\";\n\nfunction queryFocusableAll(el: HTMLDivElement): NodeListOf<HTMLElement> {\n // Focusable, interactive elements that could possibly be in children\n const selector = [\n \"a[href]\",\n \"area[href]\",\n \"input:not([disabled])\",\n \"select:not([disabled])\",\n \"textarea:not([disabled])\",\n \"button:not([disabled])\",\n \"iframe\",\n \"object\",\n \"embed\",\n '[tabindex=\"-1\"]',\n '[tabindex=\"0\"]',\n \"[contenteditable]\",\n \"audio[controls]\",\n \"video[controls]\",\n \"summary\",\n ].join(\",\");\n return el.querySelectorAll(selector);\n}\n\nconst focusElement = (el?: HTMLElement) => {\n if (el && typeof el.focus === \"function\") {\n el.focus();\n }\n};\n\n/**\n * FocusTrap is used by components like Modal to ensure that only elements within children components can be focused.\n */\nexport default function FocusTrap({\n children,\n}: {\n children?: ReactElement | null;\n}): ReactElement {\n const elRef = useRef<HTMLDivElement | null>(null);\n const previouslyFocusedElRef = useRef<HTMLElement | null>(null);\n const isHydrated = useIsHydrated();\n\n useEffect(() => {\n const { current: element } = elRef;\n\n // Focus the first child element among all the focusable, interactive elements within `children`\n const focusFirstChild = () => {\n const withinIframe = window !== window.parent;\n if (element && !withinIframe) {\n focusElement(queryFocusableAll(element)[0]);\n }\n };\n\n const handleFocus: (event: FocusEvent) => void = (event: FocusEvent) => {\n if (\n !element ||\n (event.target instanceof Node && element.contains(event.target))\n ) {\n return;\n }\n\n // This prevents stack overflow when multiple FocusTraps are rendered\n if (\n event.target instanceof Element &&\n event.target.closest('[data-testid=\"syntax-focus-trap\"]') !== null\n ) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n isHydrated && focusFirstChild();\n };\n\n // If an element has focus currently, keep a reference to that element\n previouslyFocusedElRef.current = document.activeElement as HTMLElement;\n focusFirstChild();\n document.addEventListener(\"focus\", handleFocus, true);\n\n return function cleanup() {\n const { current: previouslyFocusedEl } = previouslyFocusedElRef;\n document.removeEventListener(\"focus\", handleFocus, true);\n // If we previously stored a reference to a focused element, return focus to that element\n if (previouslyFocusedEl) {\n focusElement(previouslyFocusedEl);\n }\n };\n }, [isHydrated, elRef, previouslyFocusedElRef]);\n\n return (\n <div data-testid=\"syntax-focus-trap\" ref={elRef}>\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _XU3CLITIcjs = require('./XU3CLITI.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _JXOKXBDZcjs = require('./JXOKXBDZ.cjs');
|
|
@@ -33,7 +33,7 @@ var Heading = ({
|
|
|
33
33
|
const { themeName } = _JXOKXBDZcjs.useTheme.call(void 0, );
|
|
34
34
|
const classicWeight = [700, 800].includes(size) ? "heavy" : "bold";
|
|
35
35
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
36
|
-
|
|
36
|
+
_XU3CLITIcjs.Typography_default,
|
|
37
37
|
{
|
|
38
38
|
align,
|
|
39
39
|
as,
|
|
@@ -52,4 +52,4 @@ var Heading_default = Heading;
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
exports.Heading_default = Heading_default;
|
|
55
|
-
//# sourceMappingURL=
|
|
55
|
+
//# sourceMappingURL=THYSYYWS.cjs.map
|
|
@@ -11,7 +11,7 @@ import classNames from "classnames";
|
|
|
11
11
|
import { forwardRef } from "react";
|
|
12
12
|
|
|
13
13
|
// css-module:./Typography.module.css#css-module
|
|
14
|
-
var Typography_module_default = { "typography": "
|
|
14
|
+
var Typography_module_default = { "typography": "_typography_emvev_1", "sansSerif": "_sansSerif_emvev_22", "serif": "_serif_emvev_27", "size100": "_size100_emvev_71", "size200": "_size200_emvev_75", "size300": "_size300_emvev_79", "size500": "_size500_emvev_83", "size600": "_size600_emvev_87", "size700": "_size700_emvev_91", "size800": "_size800_emvev_95", "size100Cambio": "_size100Cambio_emvev_100", "size200Cambio": "_size200Cambio_emvev_104", "size300Cambio": "_size300Cambio_emvev_108", "size400Cambio": "_size400Cambio_emvev_112", "size500Cambio": "_size500Cambio_emvev_116", "size600Cambio": "_size600Cambio_emvev_120", "size700Cambio": "_size700Cambio_emvev_124", "size800Cambio": "_size800Cambio_emvev_128", "size900Cambio": "_size900Cambio_emvev_132", "size1000Cambio": "_size1000Cambio_emvev_173", "size1100Cambio": "_size1100Cambio_emvev_177", "center": "_center_emvev_183", "forceLeft": "_forceLeft_emvev_187", "forceRight": "_forceRight_emvev_191", "start": "_start_emvev_195", "end": "_end_emvev_199", "bold": "_bold_emvev_204", "regular": "_regular_emvev_208", "interactive": "_interactive_emvev_212", "semiBold": "_semiBold_emvev_216", "heavy": "_heavy_emvev_220", "regularCambio": "_regularCambio_emvev_224", "mediumCambio": "_mediumCambio_emvev_228", "semiBoldCambio": "_semiBoldCambio_emvev_232", "boldCambio": "_boldCambio_emvev_236", "underline": "_underline_emvev_240", "inline": "_inline_emvev_244", "uppercase": "_uppercase_emvev_248", "lineClamp": "_lineClamp_emvev_252" };
|
|
15
15
|
|
|
16
16
|
// src/Typography/Typography.tsx
|
|
17
17
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -125,4 +125,4 @@ var Typography_default = Typography;
|
|
|
125
125
|
export {
|
|
126
126
|
Typography_default
|
|
127
127
|
};
|
|
128
|
-
//# sourceMappingURL=
|
|
128
|
+
//# sourceMappingURL=UVROGDYB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction classicTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.gray700Color;\n case \"white\":\n return colorStyles.whiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"primary\":\n return colorStyles.primary700Color;\n case \"destructive-primary\":\n case \"destructive-darkBackground\":\n return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\n }\n}\n\nfunction cambioTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n\nfunction classicWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\" {\n switch (weight) {\n case \"medium\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\nfunction cambioWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"medium\" | \"semiBold\" | \"bold\" {\n switch (weight) {\n case \"interactive\":\n return \"medium\";\n case \"heavy\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n HTMLDivElement,\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 \"div\"\n */\n as?: \"div\" | \"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 * Cambio only: `success-darkBackground` / `destructive-darkBackground`\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\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 id for the element\n */\n id?: string;\n /**\n * Whether the text should flow inline with other elements.\n *\n * @defaultValue false\n */\n inline?: boolean;\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 * Classic:\n * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * Cambio Mobile:\n * * `100`: 14px\n * * `200`: 16px\n * * `300`: 18px\n * * `400`: 20px\n * * `500`: 23px\n * * `600`: 26px\n * * `700`: 29px\n * * `800`: 33px\n * * `900`: 37px\n * * `1000`: 41px\n * * `1100`: 46px\n *\n * Cambio Desktop (viewport width > 480px):\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 31px\n * * `600`: 39px\n * * `700`: 49px\n * * `800`: 61px\n * * `900`: 76px\n * * `1000`: 95px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n /**\n * The tooltip to be displayed when the user hovers the text\n */\n tooltip?: string;\n /**\n * Whether the text should be transformed to uppercase.\n *\n * @defaultValue \"none\"\n */\n transform?: \"none\" | \"uppercase\";\n /**\n * Whether the text has an underline.\n *\n * @defaultValue false\n */\n underline?: boolean;\n /**\n * Indicates the boldness of the text.\n *\n * Classic:\n * * `regular`: 400\n * * `interactive`: 500 (Classic only)\n * * `semiBold`: 600\n * * `bold`: 700\n * * `heavy`: 860 (Classic only)\n *\n * Cambio:\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n * * `bold`: 710\n *\n *\n * @defaultValue \"regular\"\n */\n weight?:\n | \"regular\"\n | \"interactive\"\n | \"medium\"\n | \"semiBold\"\n | \"bold\"\n | \"heavy\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n fontStyle = \"sans-serif\",\n id,\n inline = false,\n lineClamp = undefined,\n size = 200,\n tooltip,\n transform = \"none\",\n underline = false,\n weight = \"regular\",\n },\n ref,\n): ReactElement {\n const Tag = as;\n\n const { themeName } = useTheme();\n\n const weightStyles =\n themeName === \"classic\"\n ? styles[classicWeight(weight)]\n : styles[`${cambioWeight(weight)}Cambio`];\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n weightStyles,\n themeName === \"cambio\" && fontStyle === \"serif\"\n ? styles.serif\n : styles.sansSerif,\n themeName === \"cambio\"\n ? cambioTextColor(color)\n : classicTextColor(color),\n inline && styles.inline,\n themeName === \"classic\"\n ? styles[\n `size${\n // TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually\n // https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433\n // One we ship Cambio, we can remove these checks\n size === 100 ||\n size === 200 ||\n size === 300 ||\n size === 500 ||\n size === 600 ||\n size === 700 ||\n size === 800\n ? size\n : 200\n }`\n ]\n : styles[`size${size}Cambio`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\n )}\n data-testid={dataTestId}\n style={{\n WebkitLineClamp: lineClamp,\n }}\n title={tooltip}\n ref={ref}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_crxq1_1\",\"sansSerif\":\"_sansSerif_crxq1_22\",\"serif\":\"_serif_crxq1_27\",\"size100\":\"_size100_crxq1_71\",\"size200\":\"_size200_crxq1_75\",\"size300\":\"_size300_crxq1_79\",\"size500\":\"_size500_crxq1_83\",\"size600\":\"_size600_crxq1_87\",\"size700\":\"_size700_crxq1_91\",\"size800\":\"_size800_crxq1_95\",\"size100Cambio\":\"_size100Cambio_crxq1_100\",\"size200Cambio\":\"_size200Cambio_crxq1_104\",\"size300Cambio\":\"_size300Cambio_crxq1_108\",\"size400Cambio\":\"_size400Cambio_crxq1_112\",\"size500Cambio\":\"_size500Cambio_crxq1_116\",\"size600Cambio\":\"_size600Cambio_crxq1_120\",\"size700Cambio\":\"_size700Cambio_crxq1_124\",\"size800Cambio\":\"_size800Cambio_crxq1_128\",\"size900Cambio\":\"_size900Cambio_crxq1_132\",\"size1000Cambio\":\"_size1000Cambio_crxq1_173\",\"size1100Cambio\":\"_size1100Cambio_crxq1_177\",\"center\":\"_center_crxq1_183\",\"forceLeft\":\"_forceLeft_crxq1_187\",\"forceRight\":\"_forceRight_crxq1_191\",\"start\":\"_start_crxq1_195\",\"end\":\"_end_crxq1_199\",\"bold\":\"_bold_crxq1_204\",\"regular\":\"_regular_crxq1_208\",\"interactive\":\"_interactive_crxq1_212\",\"semiBold\":\"_semiBold_crxq1_216\",\"heavy\":\"_heavy_crxq1_220\",\"regularCambio\":\"_regularCambio_crxq1_224\",\"mediumCambio\":\"_mediumCambio_crxq1_228\",\"semiBoldCambio\":\"_semiBoldCambio_crxq1_232\",\"boldCambio\":\"_boldCambio_crxq1_236\",\"underline\":\"_underline_crxq1_240\",\"inline\":\"_inline_crxq1_244\",\"uppercase\":\"_uppercase_crxq1_248\",\"lineClamp\":\"_lineClamp_crxq1_252\"}"],"mappings":"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","names":["Typography"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Typography/Typography.tsx","css-module:./Typography.module.css#css-module"],"sourcesContent":["import classNames from \"classnames\";\nimport { forwardRef, type ReactElement, type ReactNode } from \"react\";\nimport styles from \"./Typography.module.css\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport { useTheme } from \"../ThemeProvider/ThemeProvider\";\n\nfunction classicTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.gray700Color;\n case \"white\":\n return colorStyles.whiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"primary\":\n return colorStyles.primary700Color;\n case \"destructive-primary\":\n case \"destructive-darkBackground\":\n return colorStyles.destructive700Color;\n case \"success\":\n return colorStyles.success700Color;\n default:\n return colorStyles.gray900Color;\n }\n}\n\nfunction cambioTextColor(\n color:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\n | \"white\"\n | \"inherit\",\n): string {\n switch (color) {\n case \"gray700\":\n return colorStyles.cambioGray800Color;\n case \"white\":\n return colorStyles.cambioWhiteColor;\n case \"inherit\":\n return colorStyles.inheritColor;\n case \"destructive-primary\":\n return colorStyles.cambioDestructive900Color;\n case \"destructive-darkBackground\":\n return colorStyles.cambioDestructive100Color;\n case \"success\":\n return colorStyles.cambioSuccess900Color;\n case \"success-darkBackground\":\n return colorStyles.cambioSuccess100Color;\n // primary / gray900\n default:\n return colorStyles.cambioBlackColor;\n }\n}\n\nfunction classicWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"interactive\" | \"semiBold\" | \"bold\" | \"heavy\" {\n switch (weight) {\n case \"medium\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\nfunction cambioWeight(\n weight: \"regular\" | \"interactive\" | \"medium\" | \"semiBold\" | \"bold\" | \"heavy\",\n): \"regular\" | \"medium\" | \"semiBold\" | \"bold\" {\n switch (weight) {\n case \"interactive\":\n return \"medium\";\n case \"heavy\":\n return \"regular\";\n default:\n return weight;\n }\n}\n\n/**\n * [Typography](https://cambly-syntax.vercel.app/?path=/docs/components-typography--docs) is a component that renders text.\n */\nconst Typography = forwardRef<\n HTMLDivElement,\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 \"div\"\n */\n as?: \"div\" | \"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 * Cambio only: `success-darkBackground` / `destructive-darkBackground`\n *\n * @defaultValue \"gray900\"\n */\n color?:\n | \"gray900\"\n | \"gray700\"\n | \"primary\"\n | \"destructive-primary\"\n | \"destructive-darkBackground\"\n | \"success\"\n | \"success-darkBackground\"\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 id for the element\n */\n id?: string;\n /**\n * Whether the text should flow inline with other elements.\n *\n * @defaultValue false\n */\n inline?: boolean;\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 * Classic:\n * * `100`: 12px\n * * `200`: 14px\n * * `300`: 16px\n * * `500`: 20px\n * * `600`: 28px\n * * `700`: 40px\n * * `800`: 64px\n *\n * Cambio Mobile:\n * * `100`: 14px\n * * `200`: 16px\n * * `300`: 18px\n * * `400`: 20px\n * * `500`: 23px\n * * `600`: 26px\n * * `700`: 29px\n * * `800`: 33px\n * * `900`: 37px\n * * `1000`: 41px\n * * `1100`: 46px\n *\n * Cambio Desktop (viewport width > 480px):\n * * `100`: 13px\n * * `200`: 16px\n * * `300`: 20px\n * * `400`: 25px\n * * `500`: 31px\n * * `600`: 39px\n * * `700`: 49px\n * * `800`: 61px\n * * `900`: 76px\n * * `1000`: 95px\n * * `1100`: 119px\n *\n * @defaultValue 200\n */\n size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000 | 1100;\n /**\n * The tooltip to be displayed when the user hovers the text\n */\n tooltip?: string;\n /**\n * Whether the text should be transformed to uppercase.\n *\n * @defaultValue \"none\"\n */\n transform?: \"none\" | \"uppercase\";\n /**\n * Whether the text has an underline.\n *\n * @defaultValue false\n */\n underline?: boolean;\n /**\n * Indicates the boldness of the text.\n *\n * Classic:\n * * `regular`: 400\n * * `interactive`: 500 (Classic only)\n * * `semiBold`: 600\n * * `bold`: 700\n * * `heavy`: 860 (Classic only)\n *\n * Cambio:\n * * `regular`: 400\n * * `medium`: 510\n * * `semiBold`: 590\n * * `bold`: 710\n *\n *\n * @defaultValue \"regular\"\n */\n weight?:\n | \"regular\"\n | \"interactive\"\n | \"medium\"\n | \"semiBold\"\n | \"bold\"\n | \"heavy\";\n }\n>(function Typography(\n {\n align = \"start\",\n as = \"div\",\n children,\n color = \"gray900\",\n \"data-testid\": dataTestId,\n fontStyle = \"sans-serif\",\n id,\n inline = false,\n lineClamp = undefined,\n size = 200,\n tooltip,\n transform = \"none\",\n underline = false,\n weight = \"regular\",\n },\n ref,\n): ReactElement {\n const Tag = as;\n\n const { themeName } = useTheme();\n\n const weightStyles =\n themeName === \"classic\"\n ? styles[classicWeight(weight)]\n : styles[`${cambioWeight(weight)}Cambio`];\n\n return (\n <Tag\n id={id}\n className={classNames(\n styles.typography,\n styles[align],\n weightStyles,\n themeName === \"cambio\" && fontStyle === \"serif\"\n ? styles.serif\n : styles.sansSerif,\n themeName === \"cambio\"\n ? cambioTextColor(color)\n : classicTextColor(color),\n inline && styles.inline,\n themeName === \"classic\"\n ? styles[\n `size${\n // TypeScript doesn't narrow the type of size with `.includes` so we have to do it manually\n // https://github.com/microsoft/TypeScript/issues/36275#issuecomment-643376433\n // One we ship Cambio, we can remove these checks\n size === 100 ||\n size === 200 ||\n size === 300 ||\n size === 500 ||\n size === 600 ||\n size === 700 ||\n size === 800\n ? size\n : 200\n }`\n ]\n : styles[`size${size}Cambio`],\n transform === \"uppercase\" && styles.uppercase,\n underline && styles.underline,\n lineClamp != null && styles.lineClamp,\n )}\n data-testid={dataTestId}\n style={{\n WebkitLineClamp: lineClamp,\n }}\n title={tooltip}\n ref={ref}\n >\n {children}\n </Tag>\n );\n});\n\nexport default Typography;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Typography/Typography.module.css\"; export default {\"typography\":\"_typography_emvev_1\",\"sansSerif\":\"_sansSerif_emvev_22\",\"serif\":\"_serif_emvev_27\",\"size100\":\"_size100_emvev_71\",\"size200\":\"_size200_emvev_75\",\"size300\":\"_size300_emvev_79\",\"size500\":\"_size500_emvev_83\",\"size600\":\"_size600_emvev_87\",\"size700\":\"_size700_emvev_91\",\"size800\":\"_size800_emvev_95\",\"size100Cambio\":\"_size100Cambio_emvev_100\",\"size200Cambio\":\"_size200Cambio_emvev_104\",\"size300Cambio\":\"_size300Cambio_emvev_108\",\"size400Cambio\":\"_size400Cambio_emvev_112\",\"size500Cambio\":\"_size500Cambio_emvev_116\",\"size600Cambio\":\"_size600Cambio_emvev_120\",\"size700Cambio\":\"_size700Cambio_emvev_124\",\"size800Cambio\":\"_size800Cambio_emvev_128\",\"size900Cambio\":\"_size900Cambio_emvev_132\",\"size1000Cambio\":\"_size1000Cambio_emvev_173\",\"size1100Cambio\":\"_size1100Cambio_emvev_177\",\"center\":\"_center_emvev_183\",\"forceLeft\":\"_forceLeft_emvev_187\",\"forceRight\":\"_forceRight_emvev_191\",\"start\":\"_start_emvev_195\",\"end\":\"_end_emvev_199\",\"bold\":\"_bold_emvev_204\",\"regular\":\"_regular_emvev_208\",\"interactive\":\"_interactive_emvev_212\",\"semiBold\":\"_semiBold_emvev_216\",\"heavy\":\"_heavy_emvev_220\",\"regularCambio\":\"_regularCambio_emvev_224\",\"mediumCambio\":\"_mediumCambio_emvev_228\",\"semiBoldCambio\":\"_semiBoldCambio_emvev_232\",\"boldCambio\":\"_boldCambio_emvev_236\",\"underline\":\"_underline_emvev_240\",\"inline\":\"_inline_emvev_244\",\"uppercase\":\"_uppercase_emvev_248\",\"lineClamp\":\"_lineClamp_emvev_252\"}"],"mappings":"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","names":["Typography"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _5MKCDCHQcjs = require('./5MKCDCHQ.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
|
|
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
19
19
|
function RichSelectRadioButton(props, ref) {
|
|
20
20
|
const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
|
|
21
21
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _RYUXG4AScjs.RichSelectItem_default, _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {}, otherProps), { ref, children: ({ isSelected, isFocusVisible, isDisabled }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
22
|
-
|
|
22
|
+
_5MKCDCHQcjs.RadioButton_default,
|
|
23
23
|
{
|
|
24
24
|
checked: isSelected,
|
|
25
25
|
disabled: isDisabled,
|
|
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
|
|
40
|
-
//# sourceMappingURL=
|
|
40
|
+
//# sourceMappingURL=WOIJRASP.cjs.map
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
} from "./HCHFPFNX.js";
|
|
5
5
|
import {
|
|
6
6
|
Typography_default
|
|
7
|
-
} from "./
|
|
7
|
+
} from "./UVROGDYB.js";
|
|
8
8
|
import {
|
|
9
9
|
useTheme
|
|
10
10
|
} from "./4GTNQPPD.js";
|
|
@@ -101,4 +101,4 @@ var TextArea_default = TextArea;
|
|
|
101
101
|
export {
|
|
102
102
|
TextArea_default
|
|
103
103
|
};
|
|
104
|
-
//# sourceMappingURL=
|
|
104
|
+
//# sourceMappingURL=X5KCRFFF.js.map
|
|
@@ -11,7 +11,7 @@ var _classnames = require('classnames'); var _classnames2 = _interopRequireDefau
|
|
|
11
11
|
var _react = require('react');
|
|
12
12
|
|
|
13
13
|
// css-module:./Typography.module.css#css-module
|
|
14
|
-
var Typography_module_default = { "typography": "
|
|
14
|
+
var Typography_module_default = { "typography": "_typography_emvev_1", "sansSerif": "_sansSerif_emvev_22", "serif": "_serif_emvev_27", "size100": "_size100_emvev_71", "size200": "_size200_emvev_75", "size300": "_size300_emvev_79", "size500": "_size500_emvev_83", "size600": "_size600_emvev_87", "size700": "_size700_emvev_91", "size800": "_size800_emvev_95", "size100Cambio": "_size100Cambio_emvev_100", "size200Cambio": "_size200Cambio_emvev_104", "size300Cambio": "_size300Cambio_emvev_108", "size400Cambio": "_size400Cambio_emvev_112", "size500Cambio": "_size500Cambio_emvev_116", "size600Cambio": "_size600Cambio_emvev_120", "size700Cambio": "_size700Cambio_emvev_124", "size800Cambio": "_size800Cambio_emvev_128", "size900Cambio": "_size900Cambio_emvev_132", "size1000Cambio": "_size1000Cambio_emvev_173", "size1100Cambio": "_size1100Cambio_emvev_177", "center": "_center_emvev_183", "forceLeft": "_forceLeft_emvev_187", "forceRight": "_forceRight_emvev_191", "start": "_start_emvev_195", "end": "_end_emvev_199", "bold": "_bold_emvev_204", "regular": "_regular_emvev_208", "interactive": "_interactive_emvev_212", "semiBold": "_semiBold_emvev_216", "heavy": "_heavy_emvev_220", "regularCambio": "_regularCambio_emvev_224", "mediumCambio": "_mediumCambio_emvev_228", "semiBoldCambio": "_semiBoldCambio_emvev_232", "boldCambio": "_boldCambio_emvev_236", "underline": "_underline_emvev_240", "inline": "_inline_emvev_244", "uppercase": "_uppercase_emvev_248", "lineClamp": "_lineClamp_emvev_252" };
|
|
15
15
|
|
|
16
16
|
// src/Typography/Typography.tsx
|
|
17
17
|
var _jsxruntime = require('react/jsx-runtime');
|
|
@@ -125,4 +125,4 @@ var Typography_default = Typography;
|
|
|
125
125
|
|
|
126
126
|
|
|
127
127
|
exports.Typography_default = Typography_default;
|
|
128
|
-
//# sourceMappingURL=
|
|
128
|
+
//# sourceMappingURL=XU3CLITI.cjs.map
|