@cambly/syntax-core 18.6.0 → 18.7.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/Button/Button.cjs +3 -3
- package/dist/Button/Button.css +21 -20
- package/dist/Button/Button.css.map +1 -1
- package/dist/Button/Button.js +2 -2
- package/dist/Button/constants/iconSize.cjs +2 -2
- package/dist/Button/constants/iconSize.css +21 -20
- package/dist/Button/constants/iconSize.css.map +1 -1
- package/dist/Button/constants/iconSize.js +1 -1
- package/dist/Dialog/ModalDialog.cjs +6 -5
- package/dist/Dialog/ModalDialog.css +21 -20
- package/dist/Dialog/ModalDialog.css.map +1 -1
- package/dist/Dialog/ModalDialog.js +4 -3
- package/dist/IconButton/IconButton.cjs +5 -4
- package/dist/IconButton/IconButton.css +21 -20
- package/dist/IconButton/IconButton.css.map +1 -1
- package/dist/IconButton/IconButton.js +3 -2
- package/dist/IconLinkButton/IconLinkButton.cjs +17 -0
- package/dist/IconLinkButton/IconLinkButton.cjs.map +1 -0
- package/dist/IconLinkButton/IconLinkButton.css +607 -0
- package/dist/IconLinkButton/IconLinkButton.css.map +1 -0
- package/dist/IconLinkButton/IconLinkButton.d.ts +76 -0
- package/dist/IconLinkButton/IconLinkButton.js +17 -0
- package/dist/IconLinkButton/IconLinkButton.js.map +1 -0
- package/dist/LinkButton/LinkButton.cjs +4 -3
- package/dist/LinkButton/LinkButton.css +21 -20
- package/dist/LinkButton/LinkButton.css.map +1 -1
- package/dist/LinkButton/LinkButton.js +3 -2
- package/dist/Modal/Modal.cjs +6 -5
- package/dist/Modal/Modal.css +21 -20
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.js +4 -3
- package/dist/Popover/Popover.cjs +7 -6
- package/dist/Popover/Popover.css +21 -20
- package/dist/Popover/Popover.css.map +1 -1
- package/dist/Popover/Popover.js +5 -4
- package/dist/RichSelect/RichSelectBox.cjs +5 -5
- package/dist/RichSelect/RichSelectBox.css +21 -20
- package/dist/RichSelect/RichSelectBox.css.map +1 -1
- package/dist/RichSelect/RichSelectBox.js +4 -4
- package/dist/RichSelect/RichSelectList.cjs +12 -11
- package/dist/RichSelect/RichSelectList.css +21 -20
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.js +10 -9
- package/dist/SelectList/SelectList.cjs +3 -3
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{H3QQNW5X.cjs → 33OLOKXZ.cjs} +5 -5
- package/dist/__chunks/{BZ546NNE.cjs → 5UGT7MVT.cjs} +18 -18
- package/dist/__chunks/{BZ546NNE.cjs.map → 5UGT7MVT.cjs.map} +1 -1
- package/dist/__chunks/64WM4STC.js +22 -0
- package/dist/__chunks/{ESVDNOSI.js.map → 64WM4STC.js.map} +1 -1
- package/dist/__chunks/65BTPZZT.cjs +22 -0
- package/dist/__chunks/{7TEFD526.cjs.map → 65BTPZZT.cjs.map} +1 -1
- package/dist/__chunks/{YJAKY2I2.cjs → 7QBU4DTX.cjs} +4 -4
- package/dist/__chunks/{XVYUFV22.cjs → A7LK5QZS.cjs} +12 -12
- package/dist/__chunks/{C4GAUB4Y.cjs → AHFP6M2N.cjs} +3 -3
- package/dist/__chunks/BFZKWCPH.cjs +83 -0
- package/dist/__chunks/BFZKWCPH.cjs.map +1 -0
- package/dist/__chunks/{OXSHUPNO.cjs → BIJUVIB4.cjs} +1 -1
- package/dist/__chunks/{OXSHUPNO.cjs.map → BIJUVIB4.cjs.map} +1 -1
- package/dist/__chunks/{BNRTELQX.js → CP27NWEM.js} +5 -5
- package/dist/__chunks/CP27NWEM.js.map +1 -0
- package/dist/__chunks/{GVDYEBNZ.js → F2UOAZUN.js} +2 -2
- package/dist/__chunks/{65PXO4OL.js → H4FEI25U.js} +2 -2
- package/dist/__chunks/JE76S4R4.js +83 -0
- package/dist/__chunks/JE76S4R4.js.map +1 -0
- package/dist/__chunks/{TU2BVOKD.js → JFPMPJ2P.js} +5 -5
- package/dist/__chunks/{RCCK2EW4.cjs → NIIFJYOC.cjs} +3 -3
- package/dist/__chunks/{IYYTLOO3.cjs → NNGCYWZA.cjs} +3 -3
- package/dist/__chunks/{BTBAAACD.js → NOPJE4A2.js} +3 -3
- package/dist/__chunks/{BTBAAACD.js.map → NOPJE4A2.js.map} +1 -1
- package/dist/__chunks/{4LS53X3H.js → OXV7VGXO.js} +1 -1
- package/dist/__chunks/{4LS53X3H.js.map → OXV7VGXO.js.map} +1 -1
- package/dist/__chunks/{LIUV3J2M.cjs → QKBS4OXL.cjs} +6 -6
- package/dist/__chunks/{PW6JTQVM.js → R47ZRXRK.js} +4 -4
- package/dist/__chunks/{BLW57GRR.js → RPWXCCIV.js} +2 -2
- package/dist/__chunks/TH4TA3JN.cjs +9 -0
- package/dist/__chunks/TH4TA3JN.cjs.map +1 -0
- package/dist/__chunks/{MZOGVH4K.js → UASXKT55.js} +2 -2
- package/dist/__chunks/{TSMYMWWE.cjs → UYUCK2UE.cjs} +7 -7
- package/dist/__chunks/{TSMYMWWE.cjs.map → UYUCK2UE.cjs.map} +1 -1
- package/dist/__chunks/{SNLD3DG6.js → W7VHIMWJ.js} +2 -2
- package/dist/__chunks/YLWWTB4I.js +9 -0
- package/dist/__chunks/YLWWTB4I.js.map +1 -0
- package/dist/index.cjs +24 -18
- package/dist/index.css +21 -20
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +25 -19
- package/package.json +1 -1
- package/dist/__chunks/7TEFD526.cjs +0 -22
- package/dist/__chunks/BNRTELQX.js.map +0 -1
- package/dist/__chunks/ESVDNOSI.js +0 -22
- /package/dist/__chunks/{H3QQNW5X.cjs.map → 33OLOKXZ.cjs.map} +0 -0
- /package/dist/__chunks/{YJAKY2I2.cjs.map → 7QBU4DTX.cjs.map} +0 -0
- /package/dist/__chunks/{XVYUFV22.cjs.map → A7LK5QZS.cjs.map} +0 -0
- /package/dist/__chunks/{C4GAUB4Y.cjs.map → AHFP6M2N.cjs.map} +0 -0
- /package/dist/__chunks/{GVDYEBNZ.js.map → F2UOAZUN.js.map} +0 -0
- /package/dist/__chunks/{65PXO4OL.js.map → H4FEI25U.js.map} +0 -0
- /package/dist/__chunks/{TU2BVOKD.js.map → JFPMPJ2P.js.map} +0 -0
- /package/dist/__chunks/{RCCK2EW4.cjs.map → NIIFJYOC.cjs.map} +0 -0
- /package/dist/__chunks/{IYYTLOO3.cjs.map → NNGCYWZA.cjs.map} +0 -0
- /package/dist/__chunks/{LIUV3J2M.cjs.map → QKBS4OXL.cjs.map} +0 -0
- /package/dist/__chunks/{PW6JTQVM.js.map → R47ZRXRK.js.map} +0 -0
- /package/dist/__chunks/{BLW57GRR.js.map → RPWXCCIV.js.map} +0 -0
- /package/dist/__chunks/{MZOGVH4K.js.map → UASXKT55.js.map} +0 -0
- /package/dist/__chunks/{SNLD3DG6.js.map → W7VHIMWJ.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module
|
|
1
|
+
{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACL6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADqIpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ","sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n buttonStyles[size],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n [buttonStyles.disabled]: loading,\n },\n )}\n onClick={onClick}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {!loading && text && (\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n >\n {text}\n </span>\n </Typography>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {loading && (\n <svg\n className={classNames(buttonStyles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={buttonStyles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
// css-module:../Button.module.css#css-module
|
|
4
|
+
var Button_module_default = { "button": "_button_v2jgj_1", "buttonGap": "_buttonGap_v2jgj_8", "disabled": "_disabled_v2jgj_42", "disabledPrimary": "_disabledPrimary_v2jgj_57", "fullWidth": "_fullWidth_v2jgj_61", "sm": "_sm_v2jgj_65", "md": "_md_v2jgj_72", "lg": "_lg_v2jgj_79", "icon": "_icon_v2jgj_86", "smIcon": "_smIcon_v2jgj_90", "mdIcon": "_mdIcon_v2jgj_97", "lgIcon": "_lgIcon_v2jgj_104", "loading": "_loading_v2jgj_121", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_v2jgj_1", "loadingCircle": "_loadingCircle_v2jgj_125" };
|
|
5
|
+
|
|
6
|
+
// src/Button/constants/iconSize.ts
|
|
7
|
+
var materialIconSize = {
|
|
8
|
+
sm: Button_module_default.smIcon,
|
|
9
|
+
md: Button_module_default.mdIcon,
|
|
10
|
+
lg: Button_module_default.lgIcon
|
|
11
|
+
};
|
|
12
|
+
var internalIconSize = {
|
|
13
|
+
sm: 100,
|
|
14
|
+
md: 200,
|
|
15
|
+
lg: 300
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
materialIconSize,
|
|
20
|
+
internalIconSize
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=64WM4STC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"
|
|
1
|
+
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}","import styles from \"../Button.module.css\";\n\nexport const materialIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nexport const internalIconSize = {\n sm: 100,\n md: 200,\n lg: 300,\n} as const;\n"],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEpkB,IAAM,mBAAmB;AAAA,EAC9B,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEO,IAAM,mBAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
|
|
2
|
+
|
|
3
|
+
// css-module:../Button.module.css#css-module
|
|
4
|
+
var Button_module_default = { "button": "_button_v2jgj_1", "buttonGap": "_buttonGap_v2jgj_8", "disabled": "_disabled_v2jgj_42", "disabledPrimary": "_disabledPrimary_v2jgj_57", "fullWidth": "_fullWidth_v2jgj_61", "sm": "_sm_v2jgj_65", "md": "_md_v2jgj_72", "lg": "_lg_v2jgj_79", "icon": "_icon_v2jgj_86", "smIcon": "_smIcon_v2jgj_90", "mdIcon": "_mdIcon_v2jgj_97", "lgIcon": "_lgIcon_v2jgj_104", "loading": "_loading_v2jgj_121", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_v2jgj_1", "loadingCircle": "_loadingCircle_v2jgj_125" };
|
|
5
|
+
|
|
6
|
+
// src/Button/constants/iconSize.ts
|
|
7
|
+
var materialIconSize = {
|
|
8
|
+
sm: Button_module_default.smIcon,
|
|
9
|
+
md: Button_module_default.mdIcon,
|
|
10
|
+
lg: Button_module_default.lgIcon
|
|
11
|
+
};
|
|
12
|
+
var internalIconSize = {
|
|
13
|
+
sm: 100,
|
|
14
|
+
md: 200,
|
|
15
|
+
lg: 300
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
exports.materialIconSize = materialIconSize; exports.internalIconSize = internalIconSize;
|
|
22
|
+
//# sourceMappingURL=65BTPZZT.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"names":[],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEpkB,IAAM,mBAAmB;AAAA,EAC9B,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEO,IAAM,mBAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"
|
|
1
|
+
{"version":3,"sources":["css-module:../Button.module.css#css-module","../../src/Button/constants/iconSize.ts"],"names":[],"mappings":";;;AAA4F,IAAO,wBAAQ,EAAC,UAAS,mBAAkB,aAAY,sBAAqB,YAAW,sBAAqB,mBAAkB,6BAA4B,aAAY,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,QAAO,kBAAiB,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,qBAAoB,WAAU,sBAAqB,6BAA4B,sCAAqC,iBAAgB,2BAA0B;;;ACEpkB,IAAM,mBAAmB;AAAA,EAC9B,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AAAA,EACX,IAAI,sBAAO;AACb;AAEO,IAAM,mBAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN","sourcesContent":["import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_v2jgj_1\",\"buttonGap\":\"_buttonGap_v2jgj_8\",\"disabled\":\"_disabled_v2jgj_42\",\"disabledPrimary\":\"_disabledPrimary_v2jgj_57\",\"fullWidth\":\"_fullWidth_v2jgj_61\",\"sm\":\"_sm_v2jgj_65\",\"md\":\"_md_v2jgj_72\",\"lg\":\"_lg_v2jgj_79\",\"icon\":\"_icon_v2jgj_86\",\"smIcon\":\"_smIcon_v2jgj_90\",\"mdIcon\":\"_mdIcon_v2jgj_97\",\"lgIcon\":\"_lgIcon_v2jgj_104\",\"loading\":\"_loading_v2jgj_121\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_v2jgj_1\",\"loadingCircle\":\"_loadingCircle_v2jgj_125\"}","import styles from \"../Button.module.css\";\n\nexport const materialIconSize = {\n sm: styles.smIcon,\n md: styles.mdIcon,\n lg: styles.lgIcon,\n};\n\nexport const internalIconSize = {\n sm: 100,\n md: 200,\n lg: 300,\n} as const;\n"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _65BTPZZTcjs = require('./65BTPZZT.cjs');
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
var _LZYX5BWDcjs = require('./LZYX5BWD.cjs');
|
|
@@ -60,8 +60,8 @@ var IconButton = _react.forwardRef.call(void 0,
|
|
|
60
60
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
61
61
|
Icon,
|
|
62
62
|
{
|
|
63
|
-
className:
|
|
64
|
-
size:
|
|
63
|
+
className: _65BTPZZTcjs.materialIconSize[size],
|
|
64
|
+
size: _65BTPZZTcjs.internalIconSize[size]
|
|
65
65
|
}
|
|
66
66
|
)
|
|
67
67
|
}
|
|
@@ -74,4 +74,4 @@ var IconButton_default = IconButton;
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
exports.IconButton_default = IconButton_default;
|
|
77
|
-
//# sourceMappingURL=
|
|
77
|
+
//# sourceMappingURL=7QBU4DTX.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _AHFP6M2Ncjs = require('./AHFP6M2N.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _J27AGJQBcjs = require('./J27AGJQB.cjs');
|
|
@@ -9,12 +9,12 @@ var _J27AGJQBcjs = require('./J27AGJQB.cjs');
|
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _BIJUVIB4cjs = require('./BIJUVIB4.cjs');
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
var
|
|
17
|
+
var _QKBS4OXLcjs = require('./QKBS4OXL.cjs');
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
var _I76WKOLEcjs = require('./I76WKOLE.cjs');
|
|
@@ -103,11 +103,11 @@ function RichSelectList(props) {
|
|
|
103
103
|
const disabled = !isHydrated || disabledProp;
|
|
104
104
|
const overlayHandlerRef = _react.useRef.call(void 0, {});
|
|
105
105
|
const selectedKeysProp = _react.useMemo.call(void 0,
|
|
106
|
-
() =>
|
|
106
|
+
() => _QKBS4OXLcjs.convertSelection.call(void 0, selectedValuesProp),
|
|
107
107
|
[selectedValuesProp]
|
|
108
108
|
);
|
|
109
109
|
const defaultSelectedKeys = _react.useMemo.call(void 0,
|
|
110
|
-
() =>
|
|
110
|
+
() => _QKBS4OXLcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
|
|
111
111
|
[defaultSelectedValuesProp]
|
|
112
112
|
);
|
|
113
113
|
const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0,
|
|
@@ -147,12 +147,12 @@ function RichSelectList(props) {
|
|
|
147
147
|
};
|
|
148
148
|
const getArrowIconColor = () => {
|
|
149
149
|
if (errorText) {
|
|
150
|
-
return
|
|
150
|
+
return _BIJUVIB4cjs.ColorBaseDestructive700;
|
|
151
151
|
} else {
|
|
152
152
|
if (color === "clear") {
|
|
153
|
-
return
|
|
153
|
+
return _BIJUVIB4cjs.ColorCambioWhite100;
|
|
154
154
|
} else {
|
|
155
|
-
return
|
|
155
|
+
return _BIJUVIB4cjs.ColorBaseGray700;
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
};
|
|
@@ -160,7 +160,7 @@ function RichSelectList(props) {
|
|
|
160
160
|
_reactariacomponents.Provider,
|
|
161
161
|
{
|
|
162
162
|
values: [
|
|
163
|
-
[
|
|
163
|
+
[_QKBS4OXLcjs.RichSelectBoxContext, { autoFocus: true }],
|
|
164
164
|
[_J27AGJQBcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
|
|
165
165
|
// this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
|
|
166
166
|
],
|
|
@@ -188,7 +188,7 @@ function RichSelectList(props) {
|
|
|
188
188
|
})
|
|
189
189
|
) }),
|
|
190
190
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
191
|
-
|
|
191
|
+
_AHFP6M2Ncjs.Popover_default,
|
|
192
192
|
{
|
|
193
193
|
ref: overlayHandlerRef,
|
|
194
194
|
disabled,
|
|
@@ -201,7 +201,7 @@ function RichSelectList(props) {
|
|
|
201
201
|
dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
|
|
202
202
|
role: "menu",
|
|
203
203
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
204
|
-
|
|
204
|
+
_QKBS4OXLcjs.RichSelectBox_default,
|
|
205
205
|
_X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
|
|
206
206
|
autosave,
|
|
207
207
|
selectedValues: selectedKeys,
|
|
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
|
|
|
286
286
|
|
|
287
287
|
|
|
288
288
|
exports.RichSelectList_default = RichSelectList_default;
|
|
289
|
-
//# sourceMappingURL=
|
|
289
|
+
//# sourceMappingURL=A7LK5QZS.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _NIIFJYOCcjs = require('./NIIFJYOC.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var _J27AGJQBcjs = require('./J27AGJQB.cjs');
|
|
@@ -100,7 +100,7 @@ var Popover = _react.forwardRef.call(void 0, function Popover2(props, ref) {
|
|
|
100
100
|
} = props;
|
|
101
101
|
const modal = !children || modalProp;
|
|
102
102
|
const modalNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
103
|
-
|
|
103
|
+
_NIIFJYOCcjs.ModalDialog_default,
|
|
104
104
|
{
|
|
105
105
|
accessibilityLabel,
|
|
106
106
|
accessibilityCloseLabel,
|
|
@@ -141,4 +141,4 @@ var Popover_default = Popover;
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
exports.AriaPopover = AriaPopover; exports.Popover_default = Popover_default;
|
|
144
|
-
//# sourceMappingURL=
|
|
144
|
+
//# sourceMappingURL=AHFP6M2N.cjs.map
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var _TH4TA3JNcjs = require('./TH4TA3JN.cjs');
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var _65BTPZZTcjs = require('./65BTPZZT.cjs');
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
var _LZYX5BWDcjs = require('./LZYX5BWD.cjs');
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _SFBTR56Icjs = require('./SFBTR56I.cjs');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
var _65LHF5WDcjs = require('./65LHF5WD.cjs');
|
|
18
|
+
|
|
19
|
+
// src/IconLinkButton/IconLinkButton.tsx
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
var _react = require('react');
|
|
23
|
+
var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
|
|
24
|
+
|
|
25
|
+
// css-module:../IconButton/IconButton.module.css#css-module
|
|
26
|
+
var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_sm_txjkh_46", "md": "_md_txjkh_51", "lg": "_lg_txjkh_56", "smIcon": "_smIcon_txjkh_61", "mdIcon": "_mdIcon_txjkh_68", "lgIcon": "_lgIcon_txjkh_75" };
|
|
27
|
+
|
|
28
|
+
// src/IconLinkButton/IconLinkButton.tsx
|
|
29
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
30
|
+
var IconLinkButton = _react.forwardRef.call(void 0,
|
|
31
|
+
({
|
|
32
|
+
href,
|
|
33
|
+
target,
|
|
34
|
+
rel,
|
|
35
|
+
"data-testid": dataTestId,
|
|
36
|
+
color = "primary",
|
|
37
|
+
size = "md",
|
|
38
|
+
icon: Icon,
|
|
39
|
+
on = "lightBackground",
|
|
40
|
+
onClick,
|
|
41
|
+
disabled = false,
|
|
42
|
+
accessibilityLabel
|
|
43
|
+
}, ref) => {
|
|
44
|
+
const foregroundColorClass = _LZYX5BWDcjs.foregroundColor.call(void 0, color, on);
|
|
45
|
+
const backgroundColorClass = _65LHF5WDcjs.backgroundColor.call(void 0, color, on);
|
|
46
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
47
|
+
"a",
|
|
48
|
+
{
|
|
49
|
+
ref,
|
|
50
|
+
href,
|
|
51
|
+
target,
|
|
52
|
+
rel,
|
|
53
|
+
"data-testid": dataTestId,
|
|
54
|
+
"aria-label": accessibilityLabel,
|
|
55
|
+
className: _classnames2.default.call(void 0,
|
|
56
|
+
IconButton_module_default.iconButton,
|
|
57
|
+
foregroundColorClass,
|
|
58
|
+
backgroundColorClass,
|
|
59
|
+
_SFBTR56Icjs.border.call(void 0, color, on),
|
|
60
|
+
IconButton_module_default[size],
|
|
61
|
+
{
|
|
62
|
+
[_TH4TA3JNcjs.Button_module_default.disabled]: disabled
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
onClick,
|
|
66
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
67
|
+
Icon,
|
|
68
|
+
{
|
|
69
|
+
className: _65BTPZZTcjs.materialIconSize[size],
|
|
70
|
+
size: _65BTPZZTcjs.internalIconSize[size]
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
IconLinkButton.displayName = "IconLinkButton";
|
|
78
|
+
var IconLinkButton_default = IconLinkButton;
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
exports.IconLinkButton_default = IconLinkButton_default;
|
|
83
|
+
//# sourceMappingURL=BFZKWCPH.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconLinkButton/IconLinkButton.tsx","css-module:../IconButton/IconButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACL6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;AD8I9R;AAxCR,IAAM,iBAAiB;AAAA,EACrB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,0BAAiB;AAAA,UACjB;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAiB,IAAI;AAAA,UACrB;AAAA,YACE,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,IAAI;AAAA,YAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,IAAO,yBAAQ","sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport { border } from \"../colors/border\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\n\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\n\ntype IconLinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The link that the IconLinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The label to be used for accessibility\n */\n\n accessibilityLabel: string;\n\n /**\n * The icon to be displayed.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaultValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [IconLinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconlinkbutton--docs) is a \"variation\" of IconButton that should look identical to IconButton, but should be used to render links instead.\n */\nconst IconLinkButton = forwardRef<HTMLAnchorElement, IconLinkButtonProps>(\n (\n {\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n icon: Icon,\n on = \"lightBackground\",\n onClick,\n disabled = false,\n accessibilityLabel,\n }: IconLinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n ref={ref}\n href={href}\n target={target}\n rel={rel}\n data-testid={dataTestId}\n aria-label={accessibilityLabel}\n className={classNames(\n iconButtonStyles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n iconButtonStyles[size],\n {\n [buttonStyles.disabled]: disabled,\n },\n )}\n onClick={onClick}\n >\n <Icon\n className={materialIconSize[size]}\n size={internalIconSize[size]}\n />\n </a>\n );\n },\n);\n\nIconLinkButton.displayName = \"IconLinkButton\";\n\nexport default IconLinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"]}
|
|
@@ -10,4 +10,4 @@ var ColorCambioWhite100 = "#ffffff";
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray700 = ColorBaseGray700; exports.ColorCambioWhite100 = ColorCambioWhite100;
|
|
13
|
-
//# sourceMappingURL=
|
|
13
|
+
//# sourceMappingURL=BIJUVIB4.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on
|
|
1
|
+
{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAUhC,IAAM,mBAAmB;AAqCzB,IAAM,sBAAsB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Tue, 23 Jul 2024 17:34: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 ColorCambioWhite40 = \"#ffffff\";\nexport const ColorCambioWhite70 = \"#ffffff\";\nexport const ColorCambioWhite100 = \"#ffffff\";\nexport const ColorCambioGray100 = \"#faf4eb\";\nexport const ColorCambioGray200 = \"#e4dbd3\";\nexport const ColorCambioGray270 = \"#e4dbd3\";\nexport const ColorCambioGray300 = \"#beb4ab\";\nexport const ColorCambioGray370 = \"#beb4ab\";\nexport const ColorCambioGray700 = \"#5e5952\";\nexport const ColorCambioGray800 = \"#363432\";\nexport const ColorCambioGray870 = \"#5e5952\";\nexport const ColorCambioGray900 = \"#262625\";\nexport const ColorCambioDestructive100 = \"#ffdeda\";\nexport const ColorCambioDestructive300 = \"#ff8071\";\nexport const ColorCambioDestructive370 = \"#ff8071\";\nexport const ColorCambioDestructive700 = \"#c93f32\";\nexport const ColorCambioDestructive770 = \"#c93f32\";\nexport const ColorCambioDestructive900 = \"#6d0002\";\nexport const ColorCambioSuccess100 = \"#daf2c8\";\nexport const ColorCambioSuccess300 = \"#84ce64\";\nexport const ColorCambioSuccess370 = \"#84ce64\";\nexport const ColorCambioSuccess700 = \"#3c7f20\";\nexport const ColorCambioSuccess770 = \"#3c7f20\";\nexport const ColorCambioSuccess900 = \"#103e00\";\nexport const ColorCambioRed = \"#f56e56\";\nexport const ColorCambioOrange = \"#ff8f57\";\nexport const ColorCambioTan = \"#ffb47d\";\nexport const ColorCambioCream = \"#fffad1\";\nexport const ColorCambioPurple = \"#6840a8\";\nexport const ColorCambioLilac = \"#b59ef0\";\nexport const ColorCambioThistle = \"#d69ca4\";\nexport const ColorCambioPink = \"#ffccea\";\nexport const ColorCambioNavy = \"#191142\";\nexport const ColorCambioTeal = \"#44a6cf\";\nexport const ColorCambioSlate = \"#7c9fc6\";\nexport const ColorCambioSky = \"#b1e8fc\";\nexport const ColorCambioYellow700 = \"#ffe733\";\nexport const ColorCambioTransparentFull = \"#000000\";\nexport const Elevation400 = \"0px 16px 32px 0px #00000040\";\nexport const SyntaxFontSansSerif = \"-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif\";\nexport const ShadowInteractive = \"0px 3px 16px 0px rgba(144, 134, 130, 0.05), 0px 2px 30px 0px rgba(144, 134, 130, 0.02)\";\n"]}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import {
|
|
3
|
+
Button_module_default
|
|
4
|
+
} from "./YLWWTB4I.js";
|
|
2
5
|
import {
|
|
3
6
|
textVariant_default
|
|
4
7
|
} from "./Z5ZUAP2B.js";
|
|
@@ -8,7 +11,7 @@ import {
|
|
|
8
11
|
import {
|
|
9
12
|
internalIconSize,
|
|
10
13
|
materialIconSize
|
|
11
|
-
} from "./
|
|
14
|
+
} from "./64WM4STC.js";
|
|
12
15
|
import {
|
|
13
16
|
foregroundColor
|
|
14
17
|
} from "./VRJAMHSI.js";
|
|
@@ -28,9 +31,6 @@ import {
|
|
|
28
31
|
} from "react";
|
|
29
32
|
import classNames from "classnames";
|
|
30
33
|
|
|
31
|
-
// css-module:../Button/Button.module.css#css-module
|
|
32
|
-
var Button_module_default = { "button": "_button_1hpt0_1", "buttonGap": "_buttonGap_1hpt0_8", "disabled": "_disabled_1hpt0_42", "disabledPrimary": "_disabledPrimary_1hpt0_56", "fullWidth": "_fullWidth_1hpt0_60", "sm": "_sm_1hpt0_64", "md": "_md_1hpt0_71", "lg": "_lg_1hpt0_78", "icon": "_icon_1hpt0_85", "smIcon": "_smIcon_1hpt0_89", "mdIcon": "_mdIcon_1hpt0_96", "lgIcon": "_lgIcon_1hpt0_103", "loading": "_loading_1hpt0_120", "syntaxButtonLoadingRotate": "_syntaxButtonLoadingRotate_1hpt0_1", "loadingCircle": "_loadingCircle_1hpt0_124" };
|
|
33
|
-
|
|
34
34
|
// css-module:./LinkButton.module.css#css-module
|
|
35
35
|
var LinkButton_module_default = { "linkButton": "_linkButton_1qjrb_1", "fitContent": "_fitContent_1qjrb_11" };
|
|
36
36
|
|
|
@@ -138,4 +138,4 @@ var LinkButton_default = LinkButton;
|
|
|
138
138
|
export {
|
|
139
139
|
LinkButton_default
|
|
140
140
|
};
|
|
141
|
-
//# sourceMappingURL=
|
|
141
|
+
//# sourceMappingURL=CP27NWEM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/LinkButton/LinkButton.tsx","css-module:./LinkButton.module.css#css-module"],"sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport Typography from \"../Typography/Typography\";\nimport buttonStyles from \"../Button/Button.module.css\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport textVariant from \"../Button/constants/textVariant\";\nimport loadingIconSize from \"../Button/constants/loadingIconSize\";\nimport styles from \"./LinkButton.module.css\";\nimport { backgroundColor } from \"../colors//backgroundColor\";\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { border } from \"../colors/border\";\nimport type InternalIcon from \"../Icon/Icon\";\n\ntype LinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The text to be displayed inside the button\n */\n text: string;\n /**\n * The link that the LinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will be in a loading state\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * If `true`, the button will take up the full width of its container\n *\n * @defaultValue false\n */\n fullWidth?: boolean;\n /**\n * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n startIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n */\n endIcon?:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [LinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-linkbutton--docs) is a \"variation\" of Button that should look identical to Button, but should be used to render links instead.\n */\nconst LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n (\n {\n text,\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n loading = false,\n fullWidth = false,\n startIcon: StartIcon,\n endIcon: EndIcon,\n on = \"lightBackground\",\n onClick,\n }: LinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n href={href}\n data-testid={dataTestId}\n target={target}\n ref={ref}\n rel={rel}\n className={classNames(\n styles.linkButton,\n buttonStyles.button,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n buttonStyles[size],\n {\n [buttonStyles.fullWidth]: fullWidth,\n [styles.fitContent]: !fullWidth,\n [buttonStyles.buttonGap]: size === \"lg\" || size === \"md\",\n [buttonStyles.disabled]: loading,\n },\n )}\n onClick={onClick}\n >\n {!loading && StartIcon && (\n <StartIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {!loading && text && (\n <Typography size={textVariant[size]} weight=\"medium\">\n <span\n // Temporary - until we have cambio colors on Typogrphay\n className={foregroundColorClass}\n >\n {text}\n </span>\n </Typography>\n )}\n {!loading && EndIcon && (\n <EndIcon\n className={classNames(\n buttonStyles.icon,\n materialIconSize[size],\n foregroundColorClass,\n )}\n size={internalIconSize[size]}\n />\n )}\n {loading && (\n <svg\n className={classNames(buttonStyles.loading, foregroundColorClass)}\n viewBox=\"22 22 44 44\"\n width={loadingIconSize[size]}\n height={loadingIconSize[size]}\n >\n <circle\n className={buttonStyles.loadingCircle}\n cx=\"44\"\n cy=\"44\"\n r=\"20.2\"\n fill=\"none\"\n strokeWidth=\"3.6\"\n />\n </svg>\n )}\n </a>\n );\n },\n);\n\nLinkButton.displayName = \"LinkButton\";\n\nexport default LinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/LinkButton/LinkButton.module.css\"; export default {\"linkButton\":\"_linkButton_1qjrb_1\",\"fitContent\":\"_fitContent_1qjrb_11\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACL6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,cAAa,uBAAsB;;;ADqIpL,SAuBI,KAvBJ;AAvBN,IAAM,aAAa;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,0BAAO;AAAA,UACP,sBAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,sBAAa,IAAI;AAAA,UACjB;AAAA,YACE,CAAC,sBAAa,SAAS,GAAG;AAAA,YAC1B,CAAC,0BAAO,UAAU,GAAG,CAAC;AAAA,YACtB,CAAC,sBAAa,SAAS,GAAG,SAAS,QAAQ,SAAS;AAAA,YACpD,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA,WAAC,WAAW,aACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,CAAC,WAAW,QACX,oBAAC,sBAAW,MAAM,oBAAY,IAAI,GAAG,QAAO,UAC1C;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,GACF;AAAA,UAED,CAAC,WAAW,WACX;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT,sBAAa;AAAA,gBACb,iBAAiB,IAAI;AAAA,gBACrB;AAAA,cACF;AAAA,cACA,MAAM,iBAAiB,IAAI;AAAA;AAAA,UAC7B;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,WAAW,sBAAa,SAAS,oBAAoB;AAAA,cAChE,SAAQ;AAAA,cACR,OAAO,wBAAgB,IAAI;AAAA,cAC3B,QAAQ,wBAAgB,IAAI;AAAA,cAE5B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,sBAAa;AAAA,kBACxB,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAE;AAAA,kBACF,MAAK;AAAA,kBACL,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AAEzB,IAAO,qBAAQ;","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
ColorBaseDestructive700,
|
|
4
4
|
ColorBaseGray700,
|
|
5
5
|
ColorCambioWhite100
|
|
6
|
-
} from "./
|
|
6
|
+
} from "./OXV7VGXO.js";
|
|
7
7
|
import {
|
|
8
8
|
Focus_module_default
|
|
9
9
|
} from "./KKADUD65.js";
|
|
@@ -148,4 +148,4 @@ SelectList.Option = SelectOption_default;
|
|
|
148
148
|
export {
|
|
149
149
|
SelectList
|
|
150
150
|
};
|
|
151
|
-
//# sourceMappingURL=
|
|
151
|
+
//# sourceMappingURL=F2UOAZUN.js.map
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
} from "./HVA7R2EL.js";
|
|
14
14
|
import {
|
|
15
15
|
IconButton_default
|
|
16
|
-
} from "./
|
|
16
|
+
} from "./UASXKT55.js";
|
|
17
17
|
import {
|
|
18
18
|
Box_default
|
|
19
19
|
} from "./65PMWIHY.js";
|
|
@@ -130,4 +130,4 @@ Modal.displayName = "Modal";
|
|
|
130
130
|
export {
|
|
131
131
|
Modal
|
|
132
132
|
};
|
|
133
|
-
//# sourceMappingURL=
|
|
133
|
+
//# sourceMappingURL=H4FEI25U.js.map
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import {
|
|
3
|
+
Button_module_default
|
|
4
|
+
} from "./YLWWTB4I.js";
|
|
5
|
+
import {
|
|
6
|
+
internalIconSize,
|
|
7
|
+
materialIconSize
|
|
8
|
+
} from "./64WM4STC.js";
|
|
9
|
+
import {
|
|
10
|
+
foregroundColor
|
|
11
|
+
} from "./VRJAMHSI.js";
|
|
12
|
+
import {
|
|
13
|
+
border
|
|
14
|
+
} from "./FMNQCHIR.js";
|
|
15
|
+
import {
|
|
16
|
+
backgroundColor
|
|
17
|
+
} from "./3CYMW6HT.js";
|
|
18
|
+
|
|
19
|
+
// src/IconLinkButton/IconLinkButton.tsx
|
|
20
|
+
import {
|
|
21
|
+
forwardRef
|
|
22
|
+
} from "react";
|
|
23
|
+
import classNames from "classnames";
|
|
24
|
+
|
|
25
|
+
// css-module:../IconButton/IconButton.module.css#css-module
|
|
26
|
+
var IconButton_module_default = { "iconButton": "_iconButton_txjkh_1", "sm": "_sm_txjkh_46", "md": "_md_txjkh_51", "lg": "_lg_txjkh_56", "smIcon": "_smIcon_txjkh_61", "mdIcon": "_mdIcon_txjkh_68", "lgIcon": "_lgIcon_txjkh_75" };
|
|
27
|
+
|
|
28
|
+
// src/IconLinkButton/IconLinkButton.tsx
|
|
29
|
+
import { jsx } from "react/jsx-runtime";
|
|
30
|
+
var IconLinkButton = forwardRef(
|
|
31
|
+
({
|
|
32
|
+
href,
|
|
33
|
+
target,
|
|
34
|
+
rel,
|
|
35
|
+
"data-testid": dataTestId,
|
|
36
|
+
color = "primary",
|
|
37
|
+
size = "md",
|
|
38
|
+
icon: Icon,
|
|
39
|
+
on = "lightBackground",
|
|
40
|
+
onClick,
|
|
41
|
+
disabled = false,
|
|
42
|
+
accessibilityLabel
|
|
43
|
+
}, ref) => {
|
|
44
|
+
const foregroundColorClass = foregroundColor(color, on);
|
|
45
|
+
const backgroundColorClass = backgroundColor(color, on);
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
47
|
+
"a",
|
|
48
|
+
{
|
|
49
|
+
ref,
|
|
50
|
+
href,
|
|
51
|
+
target,
|
|
52
|
+
rel,
|
|
53
|
+
"data-testid": dataTestId,
|
|
54
|
+
"aria-label": accessibilityLabel,
|
|
55
|
+
className: classNames(
|
|
56
|
+
IconButton_module_default.iconButton,
|
|
57
|
+
foregroundColorClass,
|
|
58
|
+
backgroundColorClass,
|
|
59
|
+
border(color, on),
|
|
60
|
+
IconButton_module_default[size],
|
|
61
|
+
{
|
|
62
|
+
[Button_module_default.disabled]: disabled
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
onClick,
|
|
66
|
+
children: /* @__PURE__ */ jsx(
|
|
67
|
+
Icon,
|
|
68
|
+
{
|
|
69
|
+
className: materialIconSize[size],
|
|
70
|
+
size: internalIconSize[size]
|
|
71
|
+
}
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
IconLinkButton.displayName = "IconLinkButton";
|
|
78
|
+
var IconLinkButton_default = IconLinkButton;
|
|
79
|
+
|
|
80
|
+
export {
|
|
81
|
+
IconLinkButton_default
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=JE76S4R4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconLinkButton/IconLinkButton.tsx","css-module:../IconButton/IconButton.module.css#css-module"],"sourcesContent":["import {\n forwardRef,\n type HtmlHTMLAttributes,\n type ComponentProps,\n} from \"react\";\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport { type Size } from \"../constants\";\nimport {\n materialIconSize,\n internalIconSize,\n} from \"../Button/constants/iconSize\";\nimport { border } from \"../colors/border\";\n\nimport buttonStyles from \"../Button/Button.module.css\";\nimport type InternalIcon from \"../Icon/Icon\";\nimport iconButtonStyles from \"../IconButton/IconButton.module.css\";\n\nimport { foregroundColor } from \"../colors/foregroundColor\";\nimport { backgroundColor } from \"../colors/backgroundColor\";\n\ntype IconLinkButtonProps = {\n /**\n * Test id for the button\n */\n \"data-testid\"?: string;\n /**\n * The link that the IconLinkButton should route to.\n *\n */\n href?: string;\n /**\n * The target attribute specifies where to open the linked document.\n *\n */\n target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n /**\n * The rel attribute specifies the relationship between the document and the link.\n *\n */\n rel?: HtmlHTMLAttributes<HTMLAnchorElement>[\"rel\"];\n /**\n * The color of the button\n *\n * @defaultValue \"primary\"\n */\n color?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"destructive-primary\"\n | \"destructive-secondary\"\n | \"destructive-tertiary\"\n | \"branded\"\n | \"success-primary\"\n | \"success-secondary\"\n | \"success-tertiary\";\n /**\n * The size of the button\n * * `sm`: 32px\n * * `md`: 48px\n * * `lg`: 64px\n *\n * @defaultValue \"md\"\n */\n size?: (typeof Size)[number];\n /**\n * If `true`, the button will be disabled\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The label to be used for accessibility\n */\n\n accessibilityLabel: string;\n\n /**\n * The icon to be displayed.\n *\n * Deprecated: [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n * Preferred: Syntax icon\n */\n icon:\n | React.ComponentType<{ className?: string }>\n | React.ComponentType<ComponentProps<typeof InternalIcon>>;\n /**\n * Indicate whether the button renders on a light or dark background. Changes the color of the button\n *\n * @defaultValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * An optional onClick event. This is used for certain wrapper's support (such as react-router-dom).\n */\n onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n};\n\n/**\n * [IconLinkButton](https://cambly-syntax.vercel.app/?path=/docs/components-iconlinkbutton--docs) is a \"variation\" of IconButton that should look identical to IconButton, but should be used to render links instead.\n */\nconst IconLinkButton = forwardRef<HTMLAnchorElement, IconLinkButtonProps>(\n (\n {\n href,\n target,\n rel,\n \"data-testid\": dataTestId,\n color = \"primary\",\n size = \"md\",\n icon: Icon,\n on = \"lightBackground\",\n onClick,\n disabled = false,\n accessibilityLabel,\n }: IconLinkButtonProps,\n ref,\n ) => {\n const foregroundColorClass = foregroundColor(color, on);\n const backgroundColorClass = backgroundColor(color, on);\n\n return (\n <a\n ref={ref}\n href={href}\n target={target}\n rel={rel}\n data-testid={dataTestId}\n aria-label={accessibilityLabel}\n className={classNames(\n iconButtonStyles.iconButton,\n foregroundColorClass,\n backgroundColorClass,\n border(color, on),\n iconButtonStyles[size],\n {\n [buttonStyles.disabled]: disabled,\n },\n )}\n onClick={onClick}\n >\n <Icon\n className={materialIconSize[size]}\n size={internalIconSize[size]}\n />\n </a>\n );\n },\n);\n\nIconLinkButton.displayName = \"IconLinkButton\";\n\nexport default IconLinkButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_txjkh_1\",\"sm\":\"_sm_txjkh_46\",\"md\":\"_md_txjkh_51\",\"lg\":\"_lg_txjkh_56\",\"smIcon\":\"_smIcon_txjkh_61\",\"mdIcon\":\"_mdIcon_txjkh_68\",\"lgIcon\":\"_lgIcon_txjkh_75\"}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,OAGK;AACP,OAAO,gBAAgB;;;ACL6E,IAAO,4BAAQ,EAAC,cAAa,uBAAsB,MAAK,gBAAe,MAAK,gBAAe,MAAK,gBAAe,UAAS,oBAAmB,UAAS,oBAAmB,UAAS,mBAAkB;;;AD8I9R;AAxCR,IAAM,iBAAiB;AAAA,EACrB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,KAAK;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACF,GACA,QACG;AACH,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AACtD,UAAM,uBAAuB,gBAAgB,OAAO,EAAE;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,WAAW;AAAA,UACT,0BAAiB;AAAA,UACjB;AAAA,UACA;AAAA,UACA,OAAO,OAAO,EAAE;AAAA,UAChB,0BAAiB,IAAI;AAAA,UACrB;AAAA,YACE,CAAC,sBAAa,QAAQ,GAAG;AAAA,UAC3B;AAAA,QACF;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,iBAAiB,IAAI;AAAA,YAChC,MAAM,iBAAiB,IAAI;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,IAAO,yBAAQ;","names":[]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import {
|
|
3
|
+
ButtonGroup_default
|
|
4
|
+
} from "./BOX3VY3Q.js";
|
|
2
5
|
import {
|
|
3
6
|
Button_default
|
|
4
|
-
} from "./
|
|
7
|
+
} from "./NOPJE4A2.js";
|
|
5
8
|
import {
|
|
6
9
|
Divider
|
|
7
10
|
} from "./YAZOHZLW.js";
|
|
8
|
-
import {
|
|
9
|
-
ButtonGroup_default
|
|
10
|
-
} from "./BOX3VY3Q.js";
|
|
11
11
|
import {
|
|
12
12
|
RichSelectSection_default
|
|
13
13
|
} from "./YPUA2AJT.js";
|
|
@@ -208,4 +208,4 @@ export {
|
|
|
208
208
|
RichSelectBoxContext,
|
|
209
209
|
RichSelectBox_default
|
|
210
210
|
};
|
|
211
|
-
//# sourceMappingURL=
|
|
211
|
+
//# sourceMappingURL=JFPMPJ2P.js.map
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
var _J27AGJQBcjs = require('./J27AGJQB.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _7QBU4DTXcjs = require('./7QBU4DTX.cjs');
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
var _KJLBDAZHcjs = require('./KJLBDAZH.cjs');
|
|
@@ -130,7 +130,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
|
|
|
130
130
|
}
|
|
131
131
|
},
|
|
132
132
|
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
133
|
-
|
|
133
|
+
_7QBU4DTXcjs.IconButton_default,
|
|
134
134
|
{
|
|
135
135
|
onClick: () => state.close(),
|
|
136
136
|
color: "tertiary",
|
|
@@ -157,4 +157,4 @@ var ModalDialog_default = ModalDialog;
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
exports.AriaModalOverlay = AriaModalOverlay; exports.AriaModal = AriaModal; exports.ModalDialog_default = ModalDialog_default;
|
|
160
|
-
//# sourceMappingURL=
|
|
160
|
+
//# sourceMappingURL=NIIFJYOC.cjs.map
|