@cambly/syntax-core 20.2.0 → 20.3.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.
Files changed (47) hide show
  1. package/dist/Dialog/Dialog.cjs +2 -2
  2. package/dist/Dialog/Dialog.css +2 -8
  3. package/dist/Dialog/Dialog.css.map +1 -1
  4. package/dist/Dialog/Dialog.js +1 -1
  5. package/dist/Dialog/ModalDialog.cjs +3 -3
  6. package/dist/Dialog/ModalDialog.css +2 -8
  7. package/dist/Dialog/ModalDialog.css.map +1 -1
  8. package/dist/Dialog/ModalDialog.js +2 -2
  9. package/dist/Popover/Popover.cjs +4 -4
  10. package/dist/Popover/Popover.css +2 -8
  11. package/dist/Popover/Popover.css.map +1 -1
  12. package/dist/Popover/Popover.js +3 -3
  13. package/dist/RichSelect/RichSelectList.cjs +6 -6
  14. package/dist/RichSelect/RichSelectList.css +2 -8
  15. package/dist/RichSelect/RichSelectList.css.map +1 -1
  16. package/dist/RichSelect/RichSelectList.js +5 -5
  17. package/dist/SelectList/SelectList.cjs +3 -3
  18. package/dist/SelectList/SelectList.js +2 -2
  19. package/dist/__chunks/{VZTP4FJU.cjs → 34KWYODX.cjs} +5 -5
  20. package/dist/__chunks/{HKWOBYWV.cjs → ARG3EXY4.cjs} +1 -1
  21. package/dist/__chunks/{HKWOBYWV.cjs.map → ARG3EXY4.cjs.map} +1 -1
  22. package/dist/__chunks/{LE2W6Z2R.js → F2QRADHL.js} +2 -2
  23. package/dist/__chunks/{DJCHJ6JD.js → FVE7IUGA.js} +1 -1
  24. package/dist/__chunks/{DJCHJ6JD.js.map → FVE7IUGA.js.map} +1 -1
  25. package/dist/__chunks/{ATUBU46J.js → IKOJX6EH.js} +3 -3
  26. package/dist/__chunks/{4Y2AWRAG.cjs → JKREBCJY.cjs} +9 -9
  27. package/dist/__chunks/{3RX4RMGC.cjs → OKT24L6D.cjs} +2 -2
  28. package/dist/__chunks/{3RX4RMGC.cjs.map → OKT24L6D.cjs.map} +1 -1
  29. package/dist/__chunks/{Y5R3XLL7.cjs → P3YRUAAE.cjs} +3 -3
  30. package/dist/__chunks/{WXCTEEON.js → PQOA7RCC.js} +4 -4
  31. package/dist/__chunks/{CXENLD6O.js → QVK3VV5M.js} +2 -2
  32. package/dist/__chunks/{CXENLD6O.js.map → QVK3VV5M.js.map} +1 -1
  33. package/dist/__chunks/{OCNJ63NC.cjs → S3NKZJST.cjs} +5 -5
  34. package/dist/__chunks/{QURJJHRN.js → YN2ORRKZ.js} +2 -2
  35. package/dist/index.cjs +7 -7
  36. package/dist/index.css +2 -8
  37. package/dist/index.css.map +1 -1
  38. package/dist/index.js +6 -6
  39. package/package.json +1 -1
  40. /package/dist/__chunks/{VZTP4FJU.cjs.map → 34KWYODX.cjs.map} +0 -0
  41. /package/dist/__chunks/{LE2W6Z2R.js.map → F2QRADHL.js.map} +0 -0
  42. /package/dist/__chunks/{ATUBU46J.js.map → IKOJX6EH.js.map} +0 -0
  43. /package/dist/__chunks/{4Y2AWRAG.cjs.map → JKREBCJY.cjs.map} +0 -0
  44. /package/dist/__chunks/{Y5R3XLL7.cjs.map → P3YRUAAE.cjs.map} +0 -0
  45. /package/dist/__chunks/{WXCTEEON.js.map → PQOA7RCC.js.map} +0 -0
  46. /package/dist/__chunks/{OCNJ63NC.cjs.map → S3NKZJST.cjs.map} +0 -0
  47. /package/dist/__chunks/{QURJJHRN.js.map → YN2ORRKZ.js.map} +0 -0
@@ -1,10 +1,10 @@
1
1
  "use client"
2
2
  import {
3
3
  ModalDialog_default
4
- } from "./QURJJHRN.js";
4
+ } from "./YN2ORRKZ.js";
5
5
  import {
6
6
  Dialog_default
7
- } from "./CXENLD6O.js";
7
+ } from "./QVK3VV5M.js";
8
8
  import {
9
9
  layout_module_default
10
10
  } from "./DDUJFFG7.js";
@@ -141,4 +141,4 @@ export {
141
141
  AriaPopover,
142
142
  Popover_default
143
143
  };
144
- //# sourceMappingURL=ATUBU46J.js.map
144
+ //# sourceMappingURL=IKOJX6EH.js.map
@@ -1,15 +1,15 @@
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 _VZTP4FJUcjs = require('./VZTP4FJU.cjs');
4
+ var _34KWYODXcjs = require('./34KWYODX.cjs');
5
5
 
6
6
 
7
- var _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
7
+ var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
8
8
 
9
9
 
10
10
 
11
11
 
12
- var _HKWOBYWVcjs = require('./HKWOBYWV.cjs');
12
+ var _ARG3EXY4cjs = require('./ARG3EXY4.cjs');
13
13
 
14
14
 
15
15
 
@@ -147,12 +147,12 @@ function RichSelectList(props) {
147
147
  };
148
148
  const getArrowIconColor = () => {
149
149
  if (errorText) {
150
- return _HKWOBYWVcjs.ColorBaseDestructive700;
150
+ return _ARG3EXY4cjs.ColorBaseDestructive700;
151
151
  } else {
152
152
  if (color === "clear") {
153
- return _HKWOBYWVcjs.ColorCambioWhite100;
153
+ return _ARG3EXY4cjs.ColorCambioWhite100;
154
154
  } else {
155
- return _HKWOBYWVcjs.ColorBaseGray700;
155
+ return _ARG3EXY4cjs.ColorBaseGray700;
156
156
  }
157
157
  }
158
158
  };
@@ -161,7 +161,7 @@ function RichSelectList(props) {
161
161
  {
162
162
  values: [
163
163
  [_6FA2AYTDcjs.RichSelectBoxContext, { autoFocus: true }],
164
- [_3RX4RMGCcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
164
+ [_OKT24L6Dcjs.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
  ],
167
167
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
@@ -188,7 +188,7 @@ function RichSelectList(props) {
188
188
  })
189
189
  ) }),
190
190
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
191
- _VZTP4FJUcjs.Popover_default,
191
+ _34KWYODXcjs.Popover_default,
192
192
  {
193
193
  ref: overlayHandlerRef,
194
194
  disabled,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
286
286
 
287
287
 
288
288
  exports.RichSelectList_default = RichSelectList_default;
289
- //# sourceMappingURL=4Y2AWRAG.cjs.map
289
+ //# sourceMappingURL=JKREBCJY.cjs.map
@@ -25,7 +25,7 @@ var _react = require('react'); var _react2 = _interopRequireDefault(_react);
25
25
  var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
26
26
 
27
27
  // css-module:./Dialog.module.css#css-module
28
- var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
28
+ var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
29
29
 
30
30
  // src/Dialog/Dialog.tsx
31
31
  var _reactariacomponents = require('react-aria-components');
@@ -77,4 +77,4 @@ var Dialog_default = Dialog;
77
77
 
78
78
 
79
79
  exports.DialogContext = DialogContext; exports.Dialog_default = Dialog_default;
80
- //# sourceMappingURL=3RX4RMGC.cjs.map
80
+ //# sourceMappingURL=OKT24L6D.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"]}
1
+ {"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"names":["Dialog"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ","sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"]}
@@ -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 _3RX4RMGCcjs = require('./3RX4RMGC.cjs');
4
+ var _OKT24L6Dcjs = require('./OKT24L6D.cjs');
5
5
 
6
6
 
7
7
  var _VJWLFFADcjs = require('./VJWLFFAD.cjs');
@@ -113,7 +113,7 @@ var ModalDialog = _react.forwardRef.call(void 0,
113
113
  "aria-label": accessibilityLabel,
114
114
  onChangeContentVisibility,
115
115
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
116
- _3RX4RMGCcjs.Dialog_default,
116
+ _OKT24L6Dcjs.Dialog_default,
117
117
  {
118
118
  accessibilityLabel,
119
119
  "data-testid": dataTestId,
@@ -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=Y5R3XLL7.cjs.map
160
+ //# sourceMappingURL=P3YRUAAE.cjs.map
@@ -1,15 +1,15 @@
1
1
  "use client"
2
2
  import {
3
3
  Popover_default
4
- } from "./ATUBU46J.js";
4
+ } from "./IKOJX6EH.js";
5
5
  import {
6
6
  DialogContext
7
- } from "./CXENLD6O.js";
7
+ } from "./QVK3VV5M.js";
8
8
  import {
9
9
  ColorBaseDestructive700,
10
10
  ColorBaseGray700,
11
11
  ColorCambioWhite100
12
- } from "./DJCHJ6JD.js";
12
+ } from "./FVE7IUGA.js";
13
13
  import {
14
14
  RichSelectBoxContext,
15
15
  RichSelectBox_default,
@@ -286,4 +286,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
286
286
  export {
287
287
  RichSelectList_default
288
288
  };
289
- //# sourceMappingURL=WXCTEEON.js.map
289
+ //# sourceMappingURL=PQOA7RCC.js.map
@@ -25,7 +25,7 @@ import React, {
25
25
  var elevation_module_default = { "elevation400BoxShadow": "_elevation400BoxShadow_vw6sp_1" };
26
26
 
27
27
  // css-module:./Dialog.module.css#css-module
28
- var Dialog_module_default = { "dialog": "_dialog_1bme6_1" };
28
+ var Dialog_module_default = { "dialog": "_dialog_1ds6e_1" };
29
29
 
30
30
  // src/Dialog/Dialog.tsx
31
31
  import { Dialog as ReactAriaDialog } from "react-aria-components";
@@ -77,4 +77,4 @@ export {
77
77
  DialogContext,
78
78
  Dialog_default
79
79
  };
80
- //# sourceMappingURL=CXENLD6O.js.map
80
+ //# sourceMappingURL=QVK3VV5M.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1bme6_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}
1
+ {"version":3,"sources":["../../src/Dialog/Dialog.tsx","css-module:../elevation/elevation.module.css#css-module","css-module:./Dialog.module.css#css-module"],"sourcesContent":["import React, {\n type ReactNode,\n forwardRef,\n type ReactElement,\n useContext,\n type ComponentProps,\n} from \"react\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport elevationStyles from \"../elevation/elevation.module.css\";\nimport layoutStyles from \"../layout.module.css\";\nimport paddingStyles from \"../Box/padding.module.css\";\nimport roundingStyles from \"../rounding.module.css\";\nimport boxStyles from \"../Box/Box.module.css\";\nimport styles from \"./Dialog.module.css\";\nimport { Dialog as ReactAriaDialog } from \"react-aria-components\";\nimport classNames from \"classnames\";\nimport type Box from \"../Box/Box\";\n\ntype DialogSize = \"sm\" | \"md\" | \"lg\";\nexport type DialogProps = {\n /** Test id for the floating dialog */\n \"data-testid\"?: string;\n /** aria-label for the dialog */\n accessibilityLabel?: string;\n /** Content to be shown inside the dialog. */\n children?: ReactNode;\n /** Optional size of the dialog box */\n size?: DialogSize;\n};\n\nconst sizeToPadding: Record<DialogSize, 4 | 5 | 6> = {\n sm: 4,\n md: 5,\n lg: 6,\n};\n\ntype DialogContextType = {\n /** padding of dialog content. overrides \\\"size\\\" prop's padding\" */\n padding?: ComponentProps<typeof Box>[\"padding\"];\n};\nexport const DialogContext = React.createContext<DialogContextType>({});\n\n/**\n * Dialog is a display component for showing content in Popovers, Modals, etc...\n *\n * Example Usage:\n ```\n <Dialog accessibilityLabel=\"Select some options\">\n <Box padding={2} maxWidth={400}>\n ... some content goes here\n </Box>\n </Dialog>\n ```\n */\nconst Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n props,\n ref,\n): ReactElement {\n const {\n \"data-testid\": dataTestId,\n accessibilityLabel,\n children,\n size = \"md\",\n } = props;\n\n const { padding } = useContext(DialogContext);\n\n return (\n <ReactAriaDialog\n ref={ref}\n data-testid={dataTestId}\n // first thing screen reader reads\n // e.g. \"<this was the label prop>, dialog, 4 items...\"\n aria-label={accessibilityLabel}\n className={classNames([\n boxStyles.box,\n boxStyles.flex,\n boxStyles.column,\n boxStyles.gap4,\n boxStyles.relative,\n boxStyles.overflowauto,\n colorStyles.whiteBackgroundColor,\n paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],\n paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],\n roundingStyles.roundingmd,\n elevationStyles.elevation400BoxShadow,\n layoutStyles.fullMaxHeight,\n layoutStyles.visibilityVisible,\n styles.dialog,\n ])}\n >\n {children}\n </ReactAriaDialog>\n );\n});\n\nexport default Dialog;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/elevation/elevation.module.css\"; export default {\"elevation400BoxShadow\":\"_elevation400BoxShadow_vw6sp_1\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css\"; export default {\"dialog\":\"_dialog_1ds6e_1\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO;AAAA,EAEL;AAAA,EAEA;AAAA,OAEK;;;ACN2F,IAAO,2BAAQ,EAAC,yBAAwB,iCAAgC;;;ACA9E,IAAO,wBAAQ,EAAC,UAAS,kBAAiB;;;AFctI,SAAS,UAAU,uBAAuB;AAC1C,OAAO,gBAAgB;AAqDnB;AAtCJ,IAAM,gBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,gBAAgB,MAAM,cAAiC,CAAC,CAAC;AActE,IAAM,SAAS,WAAwC,SAASA,QAC9D,OACA,KACc;AACd,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MAGb,cAAY;AAAA,MACZ,WAAW,WAAW;AAAA,QACpB,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,mBAAU;AAAA,QACV,sBAAY;AAAA,QACZ,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,uBAAc,WAAW,4BAAW,cAAc,IAAI,GAAG;AAAA,QACzD,wBAAe;AAAA,QACf,yBAAgB;AAAA,QAChB,sBAAa;AAAA,QACb,sBAAa;AAAA,QACb,sBAAO;AAAA,MACT,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Dialog"]}
@@ -6,7 +6,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
6
6
 
7
7
 
8
8
 
9
- var _HKWOBYWVcjs = require('./HKWOBYWV.cjs');
9
+ var _ARG3EXY4cjs = require('./ARG3EXY4.cjs');
10
10
 
11
11
 
12
12
  var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -66,12 +66,12 @@ function SelectList({
66
66
  };
67
67
  const getArrowIconColor = () => {
68
68
  if (errorText) {
69
- return _HKWOBYWVcjs.ColorBaseDestructive700;
69
+ return _ARG3EXY4cjs.ColorBaseDestructive700;
70
70
  } else {
71
71
  if (on === "darkBackground") {
72
- return _HKWOBYWVcjs.ColorCambioWhite100;
72
+ return _ARG3EXY4cjs.ColorCambioWhite100;
73
73
  } else {
74
- return _HKWOBYWVcjs.ColorBaseGray700;
74
+ return _ARG3EXY4cjs.ColorBaseGray700;
75
75
  }
76
76
  }
77
77
  };
@@ -140,4 +140,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
140
140
 
141
141
 
142
142
  exports.SelectList = SelectList;
143
- //# sourceMappingURL=OCNJ63NC.cjs.map
143
+ //# sourceMappingURL=S3NKZJST.cjs.map
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  Dialog_default
4
- } from "./CXENLD6O.js";
4
+ } from "./QVK3VV5M.js";
5
5
  import {
6
6
  IconButton_default
7
7
  } from "./GDXRRA57.js";
@@ -157,4 +157,4 @@ export {
157
157
  AriaModal,
158
158
  ModalDialog_default
159
159
  };
160
- //# sourceMappingURL=QURJJHRN.js.map
160
+ //# sourceMappingURL=YN2ORRKZ.js.map
package/dist/index.cjs CHANGED
@@ -32,21 +32,21 @@ var _RUXLZWRZcjs = require('./__chunks/RUXLZWRZ.cjs');
32
32
  require('./__chunks/TH4TA3JN.cjs');
33
33
 
34
34
 
35
- var _OCNJ63NCcjs = require('./__chunks/OCNJ63NC.cjs');
35
+ var _S3NKZJSTcjs = require('./__chunks/S3NKZJST.cjs');
36
36
  require('./__chunks/JVGX637E.cjs');
37
37
 
38
38
 
39
- var _4Y2AWRAGcjs = require('./__chunks/4Y2AWRAG.cjs');
39
+ var _JKREBCJYcjs = require('./__chunks/JKREBCJY.cjs');
40
40
 
41
41
 
42
- var _VZTP4FJUcjs = require('./__chunks/VZTP4FJU.cjs');
43
- require('./__chunks/Y5R3XLL7.cjs');
44
- require('./__chunks/3RX4RMGC.cjs');
42
+ var _34KWYODXcjs = require('./__chunks/34KWYODX.cjs');
43
+ require('./__chunks/P3YRUAAE.cjs');
44
+ require('./__chunks/OKT24L6D.cjs');
45
45
 
46
46
 
47
47
  var _VJWLFFADcjs = require('./__chunks/VJWLFFAD.cjs');
48
48
  require('./__chunks/WFVGNGEP.cjs');
49
- require('./__chunks/HKWOBYWV.cjs');
49
+ require('./__chunks/ARG3EXY4.cjs');
50
50
  require('./__chunks/6FA2AYTD.cjs');
51
51
 
52
52
 
@@ -162,5 +162,5 @@ require('./__chunks/X2SDR4SD.cjs');
162
162
 
163
163
 
164
164
 
165
- exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _44EISWI2cjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _TTUGZZPVcjs.LinkButton_default; exports.Modal = _67PPAFHWcjs.Modal; exports.Popover = _VZTP4FJUcjs.Popover_default; exports.RadioButton = _DHXH7ZSGcjs.RadioButton_default; exports.RichSelectList = _4Y2AWRAGcjs.RichSelectList_default; exports.SelectList = _OCNJ63NCcjs.SelectList; exports.TabButton = _DJSQRPF3cjs.TabButton; exports.TabLink = _3XOGCBCJcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _VVRMCACEcjs.TextArea_default; exports.TextField = _PMNFDB6Ccjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _3ULBWSHTcjs.Tooltip_default; exports.Typography = _4TYOP5XMcjs.Typography_default; exports.WordConfetti = _YGFJ2STLcjs.WordConfetti_default;
165
+ exports.Avatar = _GQUBAKFOcjs.Avatar_default; exports.AvatarGroup = _GEXK47GRcjs.AvatarGroup; exports.Badge = _J5XNUGR3cjs.Badge_default; exports.Box = _QODNNCT2cjs.Box_default; exports.Button = _44EISWI2cjs.Button_default; exports.ButtonGroup = _6KSVCCCBcjs.ButtonGroup_default; exports.Card = _AVJQ2E2Gcjs.Card_default; exports.Checkbox = _XUDOYOWHcjs.Checkbox_default; exports.Chip = _MENEINOOcjs.Chip_default; exports.Divider = _A3B4YKGNcjs.Divider; exports.Heading = _O7M2NMNZcjs.Heading_default; exports.Icon = _IBT4YOI5cjs.Icon_default; exports.IconButton = _VJWLFFADcjs.IconButton_default; exports.IconLinkButton = _RUXLZWRZcjs.IconLinkButton_default; exports.LinkButton = _TTUGZZPVcjs.LinkButton_default; exports.Modal = _67PPAFHWcjs.Modal; exports.Popover = _34KWYODXcjs.Popover_default; exports.RadioButton = _DHXH7ZSGcjs.RadioButton_default; exports.RichSelectList = _JKREBCJYcjs.RichSelectList_default; exports.SelectList = _S3NKZJSTcjs.SelectList; exports.TabButton = _DJSQRPF3cjs.TabButton; exports.TabLink = _3XOGCBCJcjs.TabLink_default; exports.Tabs = _4QUXUGJPcjs.Tabs; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _VVRMCACEcjs.TextArea_default; exports.TextField = _PMNFDB6Ccjs.TextField; exports.ThemeProvider = _36JMUQOLcjs.ThemeProvider; exports.Tooltip = _3ULBWSHTcjs.Tooltip_default; exports.Typography = _4TYOP5XMcjs.Typography_default; exports.WordConfetti = _YGFJ2STLcjs.WordConfetti_default;
166
166
  //# sourceMappingURL=index.cjs.map
package/dist/index.css CHANGED
@@ -2867,15 +2867,9 @@
2867
2867
  }
2868
2868
 
2869
2869
  /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/Dialog.module.css/#css-module-data */
2870
- ._dialog_1bme6_1 {
2871
- min-width: var(--trigger-width);
2872
- }
2873
- ._dialog_1bme6_1:focus-visible {
2870
+ ._dialog_1ds6e_1 {
2874
2871
  outline: none;
2875
- box-shadow:
2876
- 0 0 0 2px #fff,
2877
- 0 0 0 4px #000,
2878
- var(--elevation-400);
2872
+ min-width: var(--trigger-width);
2879
2873
  }
2880
2874
 
2881
2875
  /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Dialog/ModalDialog.module.css/#css-module-data */