@cambly/syntax-core 12.6.0 → 12.7.0

package/dist/Checkbox/Checkbox.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _K6VWXB7Mcjs = require('../__chunks/K6VWXB7M.cjs');
+var _HFWEVQNScjs = require('../__chunks/HFWEVQNS.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/GUACYIXB.cjs');
 require('../__chunks/72UQX6IX.cjs');
@@ -12,5 +12,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _K6VWXB7Mcjs.Checkbox_default;
+exports.default = _HFWEVQNScjs.Checkbox_default;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/Checkbox/Checkbox.d.ts

@@ -3,7 +3,7 @@ import React__default, { ReactElement } from 'react';
 /**
  * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.
  */
-declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled: disabledProp, size, label, error, onChange, }: {
+declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled: disabledProp, size, label, error, onChange, "aria-describedby": ariaDescribedby, }: {
     /**
      * Whether or not the box has been clicked
      *
@@ -43,6 +43,12 @@ declare const Checkbox: ({ checked, "data-testid": dataTestId, disabled: disable
      * @defaultValue false
      */
     error?: boolean | undefined;
+    /**
+     * The aria-describedby attribute for the checkbox. This aria- prop identifies the element that describes the element on which the attribute is set.
+     *
+     * @defaultValue undefined
+     */
+    "aria-describedby"?: string | undefined;
 }) => ReactElement;
 
 export { Checkbox as default };

package/dist/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   Checkbox_default
-} from "../__chunks/62PHRDGW.js";
+} from "../__chunks/TVR4TJKV.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/V562ZHQ7.js";
 import "../__chunks/ZVJGV6GH.js";

package/dist/RadioButton/RadioButton.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _YIDLOSTDcjs = require('../__chunks/YIDLOSTD.cjs');
+var _JW7TVUPBcjs = require('../__chunks/JW7TVUPB.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/FESAFV44.cjs');
 require('../__chunks/WFVGNGEP.cjs');
@@ -16,5 +16,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _YIDLOSTDcjs.RadioButton_default;
+exports.default = _JW7TVUPBcjs.RadioButton_default;
 //# sourceMappingURL=RadioButton.cjs.map

package/dist/RadioButton/RadioButton.d.ts

@@ -3,7 +3,7 @@ import React__default, { ReactElement } from 'react';
 /**
  * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text
  */
-declare const RadioButton: ({ checked, "data-testid": dataTestId, dangerouslyForceFocusStyles, disabled: disabledProp, error, id, label, name, onChange, size, value, }: {
+declare const RadioButton: ({ checked, "data-testid": dataTestId, dangerouslyForceFocusStyles, disabled: disabledProp, error, id, label, name, onChange, size, value, "aria-describedby": ariaDescribedby, }: {
     /**
      * Whether or not the radio button is checked
      *
@@ -57,6 +57,12 @@ declare const RadioButton: ({ checked, "data-testid": dataTestId, dangerouslyFor
     value: string | number;
     /** forces focus ring styling */
     dangerouslyForceFocusStyles?: boolean | undefined;
+    /**
+     * The aria-describedby attribute for the RadioButton. This aria- prop identifies the element that describes the element on which the attribute is set.
+     *
+     * @defaultValue undefined
+     */
+    "aria-describedby"?: string | undefined;
 }) => ReactElement;
 
 export { RadioButton as default };

package/dist/RadioButton/RadioButton.js

@@ -1,7 +1,7 @@
 "use client"
 import {
   RadioButton_default
-} from "../__chunks/4SYTZR75.js";
+} from "../__chunks/DR35U5KW.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/M36V23WR.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/RichSelect/RichSelectBox.cjs

@@ -3,7 +3,7 @@
 
 
 
-var _RKDIXZZUcjs = require('../__chunks/RKDIXZZU.cjs');
+var _HN4N2HE2cjs = require('../__chunks/HN4N2HE2.cjs');
 require('../__chunks/C5XPZTFO.cjs');
 require('../__chunks/S2VK4XNL.cjs');
 require('../__chunks/5JUNB754.cjs');
@@ -14,9 +14,9 @@ require('../__chunks/ID2WKUNH.cjs');
 require('../__chunks/SFZ2MHPA.cjs');
 require('../__chunks/ZTK7E42P.cjs');
 require('../__chunks/MF7LLV7V.cjs');
-require('../__chunks/6ER23PG5.cjs');
+require('../__chunks/7FBJ7XRE.cjs');
 require('../__chunks/RYUXG4AS.cjs');
-require('../__chunks/YIDLOSTD.cjs');
+require('../__chunks/JW7TVUPB.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/FESAFV44.cjs');
 require('../__chunks/MKZONAGT.cjs');
@@ -38,5 +38,5 @@ require('../__chunks/X2SDR4SD.cjs');
 
 
 
-exports.RichSelectBoxContext = _RKDIXZZUcjs.RichSelectBoxContext; exports.convertSelection = _RKDIXZZUcjs.convertSelection; exports.default = _RKDIXZZUcjs.RichSelectBox_default;
+exports.RichSelectBoxContext = _HN4N2HE2cjs.RichSelectBoxContext; exports.convertSelection = _HN4N2HE2cjs.convertSelection; exports.default = _HN4N2HE2cjs.RichSelectBox_default;
 //# sourceMappingURL=RichSelectBox.cjs.map

package/dist/RichSelect/RichSelectBox.js

@@ -3,7 +3,7 @@ import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "../__chunks/DJL67KQ3.js";
+} from "../__chunks/OQKBWMZ4.js";
 import "../__chunks/BOX3VY3Q.js";
 import "../__chunks/7EM2GOIC.js";
 import "../__chunks/Z5ZUAP2B.js";
@@ -14,9 +14,9 @@ import "../__chunks/TQ7D5O7L.js";
 import "../__chunks/Q6657TAT.js";
 import "../__chunks/HN2MMSUI.js";
 import "../__chunks/DDUJFFG7.js";
-import "../__chunks/Q7N54CYS.js";
+import "../__chunks/BU3EYSKD.js";
 import "../__chunks/ODMJANSX.js";
-import "../__chunks/4SYTZR75.js";
+import "../__chunks/DR35U5KW.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/M36V23WR.js";
 import "../__chunks/UVQS6LU3.js";

package/dist/RichSelect/RichSelectList.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _2CI32K5Mcjs = require('../__chunks/2CI32K5M.cjs');
-require('../__chunks/RKDIXZZU.cjs');
+var _6P4IEVBLcjs = require('../__chunks/6P4IEVBL.cjs');
+require('../__chunks/HN4N2HE2.cjs');
 require('../__chunks/C5XPZTFO.cjs');
 require('../__chunks/S2VK4XNL.cjs');
 require('../__chunks/5JUNB754.cjs');
@@ -16,12 +16,12 @@ require('../__chunks/TYPTB7HD.cjs');
 require('../__chunks/76LTWV2Q.cjs');
 require('../__chunks/63XQSPT7.cjs');
 require('../__chunks/3UEOKPM2.cjs');
-require('../__chunks/Y2IIT6PV.cjs');
+require('../__chunks/PKQXVJ75.cjs');
 require('../__chunks/ZTK7E42P.cjs');
 require('../__chunks/MF7LLV7V.cjs');
-require('../__chunks/6ER23PG5.cjs');
+require('../__chunks/7FBJ7XRE.cjs');
 require('../__chunks/RYUXG4AS.cjs');
-require('../__chunks/YIDLOSTD.cjs');
+require('../__chunks/JW7TVUPB.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/FESAFV44.cjs');
 require('../__chunks/MKZONAGT.cjs');
@@ -46,5 +46,5 @@ require('../__chunks/E5P6WRJD.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _2CI32K5Mcjs.RichSelectList_default;
+exports.default = _6P4IEVBLcjs.RichSelectList_default;
 //# sourceMappingURL=RichSelectList.cjs.map

package/dist/RichSelect/RichSelectList.js

@@ -1,8 +1,8 @@
 "use client"
 import {
   RichSelectList_default
-} from "../__chunks/AANQ5GIN.js";
-import "../__chunks/DJL67KQ3.js";
+} from "../__chunks/KKIY6JSO.js";
+import "../__chunks/OQKBWMZ4.js";
 import "../__chunks/BOX3VY3Q.js";
 import "../__chunks/7EM2GOIC.js";
 import "../__chunks/Z5ZUAP2B.js";
@@ -16,12 +16,12 @@ import "../__chunks/NPZBG5AK.js";
 import "../__chunks/TZGJS522.js";
 import "../__chunks/4JFE4NWI.js";
 import "../__chunks/77FFPQY6.js";
-import "../__chunks/4YLZ3ZKM.js";
+import "../__chunks/3CCYFL3K.js";
 import "../__chunks/HN2MMSUI.js";
 import "../__chunks/DDUJFFG7.js";
-import "../__chunks/Q7N54CYS.js";
+import "../__chunks/BU3EYSKD.js";
 import "../__chunks/ODMJANSX.js";
-import "../__chunks/4SYTZR75.js";
+import "../__chunks/DR35U5KW.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/M36V23WR.js";
 import "../__chunks/UVQS6LU3.js";

package/dist/RichSelect/RichSelectRadioButton.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _6ER23PG5cjs = require('../__chunks/6ER23PG5.cjs');
+var _7FBJ7XREcjs = require('../__chunks/7FBJ7XRE.cjs');
 require('../__chunks/RYUXG4AS.cjs');
-require('../__chunks/YIDLOSTD.cjs');
+require('../__chunks/JW7TVUPB.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/FESAFV44.cjs');
 require('../__chunks/WFVGNGEP.cjs');
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _6ER23PG5cjs.RichSelectRadioButton_default;
+exports.default = _7FBJ7XREcjs.RichSelectRadioButton_default;
 //# sourceMappingURL=RichSelectRadioButton.cjs.map

package/dist/RichSelect/RichSelectRadioButton.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   RichSelectRadioButton_default
-} from "../__chunks/Q7N54CYS.js";
+} from "../__chunks/BU3EYSKD.js";
 import "../__chunks/ODMJANSX.js";
-import "../__chunks/4SYTZR75.js";
+import "../__chunks/DR35U5KW.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/M36V23WR.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/SelectList/SelectList.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client"
 
 
-var _XD6YC7HPcjs = require('../__chunks/XD6YC7HP.cjs');
+var _XTVQVBURcjs = require('../__chunks/XTVQVBUR.cjs');
 require('../__chunks/JVGX637E.cjs');
-require('../__chunks/Y2IIT6PV.cjs');
+require('../__chunks/PKQXVJ75.cjs');
 require('../__chunks/XLUVINJW.cjs');
 require('../__chunks/FESAFV44.cjs');
 require('../__chunks/WFVGNGEP.cjs');
@@ -18,5 +18,5 @@ require('../__chunks/NOELZTQX.cjs');
 require('../__chunks/X2SDR4SD.cjs');
 
 
-exports.default = _XD6YC7HPcjs.SelectList;
+exports.default = _XTVQVBURcjs.SelectList;
 //# sourceMappingURL=SelectList.cjs.map

package/dist/SelectList/SelectList.js

@@ -1,9 +1,9 @@
 "use client"
 import {
   SelectList
-} from "../__chunks/D5RNAJCX.js";
+} from "../__chunks/QSHXZ5FW.js";
 import "../__chunks/SPQ7DQHG.js";
-import "../__chunks/4YLZ3ZKM.js";
+import "../__chunks/3CCYFL3K.js";
 import "../__chunks/KKADUD65.js";
 import "../__chunks/M36V23WR.js";
 import "../__chunks/4U4UW4AK.js";

package/dist/__chunks/{4YLZ3ZKM.js → 3CCYFL3K.js}

@@ -8,4 +8,4 @@ export {
   ColorBaseDestructive700,
   ColorBaseGray800
 };
-//# sourceMappingURL=4YLZ3ZKM.js.map
+//# sourceMappingURL=3CCYFL3K.js.map

package/dist/__chunks/{4YLZ3ZKM.js.map → 3CCYFL3K.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 10 May 2024 22:55:16 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":[]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 13 May 2024 22:51:32 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":[]}

package/dist/__chunks/{2CI32K5M.cjs → 6P4IEVBL.cjs}

@@ -3,7 +3,7 @@
 
 
 
-var _RKDIXZZUcjs = require('./RKDIXZZU.cjs');
+var _HN4N2HE2cjs = require('./HN4N2HE2.cjs');
 
 
 var _ID2WKUNHcjs = require('./ID2WKUNH.cjs');
@@ -19,13 +19,13 @@ var _3UEOKPM2cjs = require('./3UEOKPM2.cjs');
 
 
 
-var _Y2IIT6PVcjs = require('./Y2IIT6PV.cjs');
+var _PKQXVJ75cjs = require('./PKQXVJ75.cjs');
 
 
 var _ZTK7E42Pcjs = require('./ZTK7E42P.cjs');
 
 
-var _6ER23PG5cjs = require('./6ER23PG5.cjs');
+var _7FBJ7XREcjs = require('./7FBJ7XRE.cjs');
 
 
 var _FESAFV44cjs = require('./FESAFV44.cjs');
@@ -100,11 +100,11 @@ function RichSelectList(props) {
   const disabled = !isHydrated || disabledProp;
   const overlayHandlerRef = _react.useRef.call(void 0, {});
   const selectedKeysProp = _react.useMemo.call(void 0, 
-    () => _RKDIXZZUcjs.convertSelection.call(void 0, selectedValuesProp),
+    () => _HN4N2HE2cjs.convertSelection.call(void 0, selectedValuesProp),
     [selectedValuesProp]
   );
   const defaultSelectedKeys = _react.useMemo.call(void 0, 
-    () => _RKDIXZZUcjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
+    () => _HN4N2HE2cjs.convertSelection.call(void 0, defaultSelectedValuesProp, /* @__PURE__ */ new Set()),
     [defaultSelectedValuesProp]
   );
   const [selectedKeys, setSelectedKeys] = _utils.useControlledState.call(void 0, 
@@ -142,7 +142,7 @@ function RichSelectList(props) {
     _reactariacomponents.Provider,
     {
       values: [
-        [_RKDIXZZUcjs.RichSelectBoxContext, { autoFocus: true }],
+        [_HN4N2HE2cjs.RichSelectBoxContext, { autoFocus: true }],
         [_76LTWV2Qcjs.DialogContext, { padding: autosave ? void 0 : 0 }]
         // this is altering Popover's internal dialog padding to show the sticky save/close buttons. Ideally this could be avoided
       ],
@@ -182,7 +182,7 @@ function RichSelectList(props) {
                       padding: autosave ? void 0 : 5,
                       dangerouslySetInlineStyle: autosave ? void 0 : { __style: { paddingBottom: 0 } },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _RKDIXZZUcjs.RichSelectBox_default,
+                        _HN4N2HE2cjs.RichSelectBox_default,
                         _X2SDR4SDcjs.__spreadProps.call(void 0, _X2SDR4SDcjs.__spreadValues.call(void 0, {
                           autosave,
                           selectedValues: selectedKeys,
@@ -231,7 +231,7 @@ function RichSelectList(props) {
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             "path",
                             {
-                              fill: errorText ? _Y2IIT6PVcjs.ColorBaseDestructive700 : _Y2IIT6PVcjs.ColorBaseGray800,
+                              fill: errorText ? _PKQXVJ75cjs.ColorBaseDestructive700 : _PKQXVJ75cjs.ColorBaseGray800,
                               d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                             }
                           )
@@ -260,10 +260,10 @@ function RichSelectList(props) {
 var RichSelectList_default = Object.assign(RichSelectList, {
   Section: _ZTK7E42Pcjs.RichSelectSection_default,
   Chip: _ID2WKUNHcjs.RichSelectChip_default,
-  RadioButton: _6ER23PG5cjs.RichSelectRadioButton_default
+  RadioButton: _7FBJ7XREcjs.RichSelectRadioButton_default
 });
 
 
 
 exports.RichSelectList_default = RichSelectList_default;
-//# sourceMappingURL=2CI32K5M.cjs.map
+//# sourceMappingURL=6P4IEVBL.cjs.map

package/dist/__chunks/{6ER23PG5.cjs → 7FBJ7XRE.cjs}

@@ -4,7 +4,7 @@
 var _RYUXG4AScjs = require('./RYUXG4AS.cjs');
 
 
-var _YIDLOSTDcjs = require('./YIDLOSTD.cjs');
+var _JW7TVUPBcjs = require('./JW7TVUPB.cjs');
 
 
 
@@ -19,7 +19,7 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
   function RichSelectRadioButton(props, ref) {
     const _a = props, { size, name } = _a, otherProps = _X2SDR4SDcjs.__objRest.call(void 0, _a, ["size", "name"]);
     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, 
-      _YIDLOSTDcjs.RadioButton_default,
+      _JW7TVUPBcjs.RadioButton_default,
       {
         checked: isSelected,
         disabled: isDisabled,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = _react.forwardRef.call(void 0,
 
 
 exports.RichSelectRadioButton_default = RichSelectRadioButton_default;
-//# sourceMappingURL=6ER23PG5.cjs.map
+//# sourceMappingURL=7FBJ7XRE.cjs.map

package/dist/__chunks/{Q7N54CYS.js → BU3EYSKD.js}

@@ -4,7 +4,7 @@ import {
 } from "./ODMJANSX.js";
 import {
   RadioButton_default
-} from "./4SYTZR75.js";
+} from "./DR35U5KW.js";
 import {
   __objRest,
   __spreadProps,
@@ -37,4 +37,4 @@ var RichSelectRadioButton_default = forwardRef(
 export {
   RichSelectRadioButton_default
 };
-//# sourceMappingURL=Q7N54CYS.js.map
+//# sourceMappingURL=BU3EYSKD.js.map

package/dist/__chunks/{4SYTZR75.js → DR35U5KW.js}

@@ -38,7 +38,8 @@ var RadioButton = ({
   name,
   onChange,
   size = "md",
-  value
+  value,
+  "aria-describedby": ariaDescribedby
 }) => {
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
@@ -86,6 +87,7 @@ var RadioButton = ({
         /* @__PURE__ */ jsx(
           "input",
           {
+            "aria-describedby": ariaDescribedby,
             "data-testid": dataTestId,
             type: "radio",
             id,
@@ -127,4 +129,4 @@ var RadioButton_default = RadioButton;
 export {
   RadioButton_default
 };
-//# sourceMappingURL=4SYTZR75.js.map
+//# sourceMappingURL=DR35U5KW.js.map

package/dist/__chunks/DR35U5KW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n  \"aria-describedby\": ariaDescribedby,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n  /**\n   * The aria-describedby attribute for the RadioButton. This aria- prop identifies the element that describes the element on which the attribute is set.\n   *\n   * @defaultValue undefined\n   */\n  \"aria-describedby\"?: string;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        aria-describedby={ariaDescribedby}\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_1egeq_1\",\"disabled\":\"_disabled_1egeq_9\",\"cursorDisabled\":\"_cursorDisabled_1egeq_13\",\"cursorEnabled\":\"_cursorEnabled_1egeq_17\",\"smBase\":\"_smBase_1egeq_21\",\"mdBase\":\"_mdBase_1egeq_25\",\"radioStyleOverride\":\"_radioStyleOverride_1egeq_29\",\"smOverride\":\"_smOverride_1egeq_35\",\"mdOverride\":\"_mdOverride_1egeq_40\",\"background\":\"_background_1egeq_45\",\"sm\":\"_sm_1egeq_21\",\"md\":\"_md_1egeq_25\",\"neutralBorder\":\"_neutralBorder_1egeq_62\",\"smCheckedBorder\":\"_smCheckedBorder_1egeq_66\",\"mdCheckedBorder\":\"_mdCheckedBorder_1egeq_70\",\"errorBorderColor\":\"_errorBorderColor_1egeq_74\",\"borderColor\":\"_borderColor_1egeq_78\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;AD8FrvB,SASE,KATF;AAhFJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,oBAAoB;AACtB,MA4DoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,oBAAkB;AAAA,YAClB,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/{K6VWXB7M.cjs → HFWEVQNS.cjs}

@@ -39,7 +39,8 @@ var Checkbox = ({
   size = "md",
   label,
   error = false,
-  onChange
+  onChange,
+  "aria-describedby": ariaDescribedby
 }) => {
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
@@ -80,6 +81,7 @@ var Checkbox = ({
           "input",
           {
             "data-testid": dataTestId,
+            "aria-describedby": ariaDescribedby,
             type: "checkbox",
             className: _classnames2.default.call(void 0, 
               Checkbox_module_default.inputOverlay,
@@ -114,4 +116,4 @@ var Checkbox_default = Checkbox;
 
 
 exports.Checkbox_default = Checkbox_default;
-//# sourceMappingURL=K6VWXB7M.cjs.map
+//# sourceMappingURL=HFWEVQNS.cjs.map

package/dist/__chunks/HFWEVQNS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;ADoF/hB,SAwBQ,KAxBR;AA3EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,oBAAoB;AACtB,MA8CoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,oBAAkB;AAAA,YAClB,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n  \"aria-describedby\": ariaDescribedby,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * The aria-describedby attribute for the checkbox. This aria- prop identifies the element that describes the element on which the attribute is set.\n   *\n   * @defaultValue undefined\n   */\n  \"aria-describedby\"?: string;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        aria-describedby={ariaDescribedby}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1dut8_1\",\"inputOverlay\":\"_inputOverlay_1dut8_9\",\"checkbox\":\"_checkbox_1dut8_17\",\"disabled\":\"_disabled_1dut8_27\",\"cursorDisabled\":\"_cursorDisabled_1dut8_31\",\"cursorEnabled\":\"_cursorEnabled_1dut8_35\",\"sm\":\"_sm_1dut8_39\",\"md\":\"_md_1dut8_44\",\"smBorderRadius\":\"_smBorderRadius_1dut8_49\",\"mdBorderRadius\":\"_mdBorderRadius_1dut8_53\",\"checkmark\":\"_checkmark_1dut8_57\",\"checkmarkError\":\"_checkmarkError_1dut8_61\"}"]}

package/dist/__chunks/{RKDIXZZU.cjs → HN4N2HE2.cjs}

@@ -16,7 +16,7 @@ var _ID2WKUNHcjs = require('./ID2WKUNH.cjs');
 var _ZTK7E42Pcjs = require('./ZTK7E42P.cjs');
 
 
-var _6ER23PG5cjs = require('./6ER23PG5.cjs');
+var _7FBJ7XREcjs = require('./7FBJ7XRE.cjs');
 
 
 
@@ -200,7 +200,7 @@ var RichSelectBox = _react.forwardRef.call(void 0,
 var RichSelectBox_default = Object.assign(RichSelectBox, {
   Section: _ZTK7E42Pcjs.RichSelectSection_default,
   Chip: _ID2WKUNHcjs.RichSelectChip_default,
-  RadioButton: _6ER23PG5cjs.RichSelectRadioButton_default
+  RadioButton: _7FBJ7XREcjs.RichSelectRadioButton_default
 });
 
 
@@ -208,4 +208,4 @@ var RichSelectBox_default = Object.assign(RichSelectBox, {
 
 
 exports.convertSelection = convertSelection; exports.RichSelectBoxContext = RichSelectBoxContext; exports.RichSelectBox_default = RichSelectBox_default;
-//# sourceMappingURL=RKDIXZZU.cjs.map
+//# sourceMappingURL=HN4N2HE2.cjs.map

package/dist/__chunks/{YIDLOSTD.cjs → JW7TVUPB.cjs}

@@ -38,7 +38,8 @@ var RadioButton = ({
   name,
   onChange,
   size = "md",
-  value
+  value,
+  "aria-describedby": ariaDescribedby
 }) => {
   const isHydrated = _K4AUV2VKcjs.useIsHydrated.call(void 0, );
   const disabled = !isHydrated || disabledProp;
@@ -86,6 +87,7 @@ var RadioButton = ({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
+            "aria-describedby": ariaDescribedby,
             "data-testid": dataTestId,
             type: "radio",
             id,
@@ -127,4 +129,4 @@ var RadioButton_default = RadioButton;
 
 
 exports.RadioButton_default = RadioButton_default;
-//# sourceMappingURL=YIDLOSTD.cjs.map
+//# sourceMappingURL=JW7TVUPB.cjs.map

package/dist/__chunks/JW7TVUPB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;AD8FrvB,SASE,KATF;AAhFJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,oBAAoB;AACtB,MA4DoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,oBAAkB;AAAA,YAClB,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n  \"aria-describedby\": ariaDescribedby,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n  /**\n   * The aria-describedby attribute for the RadioButton. This aria- prop identifies the element that describes the element on which the attribute is set.\n   *\n   * @defaultValue undefined\n   */\n  \"aria-describedby\"?: string;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        aria-describedby={ariaDescribedby}\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_1egeq_1\",\"disabled\":\"_disabled_1egeq_9\",\"cursorDisabled\":\"_cursorDisabled_1egeq_13\",\"cursorEnabled\":\"_cursorEnabled_1egeq_17\",\"smBase\":\"_smBase_1egeq_21\",\"mdBase\":\"_mdBase_1egeq_25\",\"radioStyleOverride\":\"_radioStyleOverride_1egeq_29\",\"smOverride\":\"_smOverride_1egeq_35\",\"mdOverride\":\"_mdOverride_1egeq_40\",\"background\":\"_background_1egeq_45\",\"sm\":\"_sm_1egeq_21\",\"md\":\"_md_1egeq_25\",\"neutralBorder\":\"_neutralBorder_1egeq_62\",\"smCheckedBorder\":\"_smCheckedBorder_1egeq_66\",\"mdCheckedBorder\":\"_mdCheckedBorder_1egeq_70\",\"errorBorderColor\":\"_errorBorderColor_1egeq_74\",\"borderColor\":\"_borderColor_1egeq_78\"}"]}

package/dist/__chunks/{AANQ5GIN.js → KKIY6JSO.js}

@@ -3,7 +3,7 @@ import {
   RichSelectBoxContext,
   RichSelectBox_default,
   convertSelection
-} from "./DJL67KQ3.js";
+} from "./OQKBWMZ4.js";
 import {
   RichSelectChip_default
 } from "./TQ7D5O7L.js";
@@ -19,13 +19,13 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./4YLZ3ZKM.js";
+} from "./3CCYFL3K.js";
 import {
   RichSelectSection_default
 } from "./HN2MMSUI.js";
 import {
   RichSelectRadioButton_default
-} from "./Q7N54CYS.js";
+} from "./BU3EYSKD.js";
 import {
   Box_default
 } from "./M36V23WR.js";
@@ -266,4 +266,4 @@ var RichSelectList_default = Object.assign(RichSelectList, {
 export {
   RichSelectList_default
 };
-//# sourceMappingURL=AANQ5GIN.js.map
+//# sourceMappingURL=KKIY6JSO.js.map

package/dist/__chunks/{DJL67KQ3.js → OQKBWMZ4.js}

@@ -16,7 +16,7 @@ import {
 } from "./HN2MMSUI.js";
 import {
   RichSelectRadioButton_default
-} from "./Q7N54CYS.js";
+} from "./BU3EYSKD.js";
 import {
   RichSelectItemContext,
   RichSelect_module_default
@@ -208,4 +208,4 @@ export {
   RichSelectBoxContext,
   RichSelectBox_default
 };
-//# sourceMappingURL=DJL67KQ3.js.map
+//# sourceMappingURL=OQKBWMZ4.js.map

package/dist/__chunks/{Y2IIT6PV.cjs → PKQXVJ75.cjs}

@@ -8,4 +8,4 @@ var ColorBaseGray800 = "#353535";
 
 
 exports.ColorBaseDestructive700 = ColorBaseDestructive700; exports.ColorBaseGray800 = ColorBaseGray800;
-//# sourceMappingURL=Y2IIT6PV.cjs.map
+//# sourceMappingURL=PKQXVJ75.cjs.map

package/dist/__chunks/{Y2IIT6PV.cjs.map → PKQXVJ75.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Fri, 10 May 2024 22:55:16 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"]}
+{"version":3,"sources":["../../../syntax-design-tokens/dist/js/index.js"],"names":[],"mappings":";;;AASO,IAAM,0BAA0B;AAWhC,IAAM,mBAAmB","sourcesContent":["/**\n * Do not edit directly\n * Generated on Mon, 13 May 2024 22:51:32 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"]}

package/dist/__chunks/{D5RNAJCX.js → QSHXZ5FW.js}

@@ -5,7 +5,7 @@ import {
 import {
   ColorBaseDestructive700,
   ColorBaseGray800
-} from "./4YLZ3ZKM.js";
+} from "./3CCYFL3K.js";
 import {
   Focus_module_default
 } from "./KKADUD65.js";
@@ -122,4 +122,4 @@ SelectList.Option = SelectOption_default;
 export {
   SelectList
 };
-//# sourceMappingURL=D5RNAJCX.js.map
+//# sourceMappingURL=QSHXZ5FW.js.map

package/dist/__chunks/{62PHRDGW.js → TVR4TJKV.js}

@@ -39,7 +39,8 @@ var Checkbox = ({
   size = "md",
   label,
   error = false,
-  onChange
+  onChange,
+  "aria-describedby": ariaDescribedby
 }) => {
   const isHydrated = useIsHydrated();
   const disabled = !isHydrated || disabledProp;
@@ -80,6 +81,7 @@ var Checkbox = ({
           "input",
           {
             "data-testid": dataTestId,
+            "aria-describedby": ariaDescribedby,
             type: "checkbox",
             className: classNames(
               Checkbox_module_default.inputOverlay,
@@ -114,4 +116,4 @@ var Checkbox_default = Checkbox;
 export {
   Checkbox_default
 };
-//# sourceMappingURL=62PHRDGW.js.map
+//# sourceMappingURL=TVR4TJKV.js.map

package/dist/__chunks/TVR4TJKV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n  \"aria-describedby\": ariaDescribedby,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * The aria-describedby attribute for the checkbox. This aria- prop identifies the element that describes the element on which the attribute is set.\n   *\n   * @defaultValue undefined\n   */\n  \"aria-describedby\"?: string;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        aria-describedby={ariaDescribedby}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1dut8_1\",\"inputOverlay\":\"_inputOverlay_1dut8_9\",\"checkbox\":\"_checkbox_1dut8_17\",\"disabled\":\"_disabled_1dut8_27\",\"cursorDisabled\":\"_cursorDisabled_1dut8_31\",\"cursorEnabled\":\"_cursorEnabled_1dut8_35\",\"sm\":\"_sm_1dut8_39\",\"md\":\"_md_1dut8_44\",\"smBorderRadius\":\"_smBorderRadius_1dut8_49\",\"mdBorderRadius\":\"_mdBorderRadius_1dut8_53\",\"checkmark\":\"_checkmark_1dut8_57\",\"checkmarkError\":\"_checkmarkError_1dut8_61\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;ADoF/hB,SAwBQ,KAxBR;AA3EJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,oBAAoB;AACtB,MA8CoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,oBAAkB;AAAA,YAClB,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/{XD6YC7HP.cjs → XTVQVBUR.cjs}

@@ -5,7 +5,7 @@ var _JVGX637Ecjs = require('./JVGX637E.cjs');
 
 
 
-var _Y2IIT6PVcjs = require('./Y2IIT6PV.cjs');
+var _PKQXVJ75cjs = require('./PKQXVJ75.cjs');
 
 
 var _XLUVINJWcjs = require('./XLUVINJW.cjs');
@@ -98,7 +98,7 @@ function SelectList({
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "path",
                 {
-                  fill: errorText ? _Y2IIT6PVcjs.ColorBaseDestructive700 : _Y2IIT6PVcjs.ColorBaseGray800,
+                  fill: errorText ? _PKQXVJ75cjs.ColorBaseDestructive700 : _PKQXVJ75cjs.ColorBaseGray800,
                   d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
                 }
               )
@@ -122,4 +122,4 @@ SelectList.Option = _JVGX637Ecjs.SelectOption_default;
 
 
 exports.SelectList = SelectList;
-//# sourceMappingURL=XD6YC7HP.cjs.map
+//# sourceMappingURL=XTVQVBUR.cjs.map

package/dist/index.cjs

@@ -10,7 +10,7 @@ var _JRTUP3VPcjs = require('./__chunks/JRTUP3VP.cjs');
 var _CHOHIFJNcjs = require('./__chunks/CHOHIFJN.cjs');
 
 
-var _K6VWXB7Mcjs = require('./__chunks/K6VWXB7M.cjs');
+var _HFWEVQNScjs = require('./__chunks/HFWEVQNS.cjs');
 
 
 var _D5AQ3PGBcjs = require('./__chunks/D5AQ3PGB.cjs');
@@ -38,12 +38,12 @@ var _T5NFBPT6cjs = require('./__chunks/T5NFBPT6.cjs');
 require('./__chunks/WFVGNGEP.cjs');
 
 
-var _XD6YC7HPcjs = require('./__chunks/XD6YC7HP.cjs');
+var _XTVQVBURcjs = require('./__chunks/XTVQVBUR.cjs');
 require('./__chunks/JVGX637E.cjs');
 
 
-var _2CI32K5Mcjs = require('./__chunks/2CI32K5M.cjs');
-require('./__chunks/RKDIXZZU.cjs');
+var _6P4IEVBLcjs = require('./__chunks/6P4IEVBL.cjs');
+require('./__chunks/HN4N2HE2.cjs');
 
 
 var _C5XPZTFOcjs = require('./__chunks/C5XPZTFO.cjs');
@@ -71,14 +71,14 @@ var _63XQSPT7cjs = require('./__chunks/63XQSPT7.cjs');
 
 
 var _3UEOKPM2cjs = require('./__chunks/3UEOKPM2.cjs');
-require('./__chunks/Y2IIT6PV.cjs');
+require('./__chunks/PKQXVJ75.cjs');
 require('./__chunks/ZTK7E42P.cjs');
 require('./__chunks/MF7LLV7V.cjs');
-require('./__chunks/6ER23PG5.cjs');
+require('./__chunks/7FBJ7XRE.cjs');
 require('./__chunks/RYUXG4AS.cjs');
 
 
-var _YIDLOSTDcjs = require('./__chunks/YIDLOSTD.cjs');
+var _JW7TVUPBcjs = require('./__chunks/JW7TVUPB.cjs');
 require('./__chunks/XLUVINJW.cjs');
 
 
@@ -137,5 +137,5 @@ require('./__chunks/X2SDR4SD.cjs');
 
 
 
-exports.Avatar = _JRTUP3VPcjs.Avatar_default; exports.AvatarGroup = _CHOHIFJNcjs.AvatarGroup; exports.Badge = _CQQJROZEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _S2VK4XNLcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _K6VWXB7Mcjs.Checkbox_default; exports.Chip = _SFZ2MHPAcjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _2OJKC2AXcjs.Heading_default; exports.Icon = _XMKQJFU6cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _W45CFJI7cjs.LinkButton_default; exports.Modal = _HK7T4244cjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _YIDLOSTDcjs.RadioButton_default; exports.RichSelectList = _2CI32K5Mcjs.RichSelectList_default; exports.SelectList = _XD6YC7HPcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _T5NFBPT6cjs.TextArea_default; exports.TextField = _7X4KKISPcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _7FYS3TSRcjs.Tooltip_default; exports.Typography = _GUACYIXBcjs.Typography_default;
+exports.Avatar = _JRTUP3VPcjs.Avatar_default; exports.AvatarGroup = _CHOHIFJNcjs.AvatarGroup; exports.Badge = _CQQJROZEcjs.Badge_default; exports.Box = _FESAFV44cjs.Box_default; exports.Button = _S2VK4XNLcjs.Button_default; exports.ButtonGroup = _C5XPZTFOcjs.ButtonGroup_default; exports.Card = _D5AQ3PGBcjs.Card; exports.Checkbox = _HFWEVQNScjs.Checkbox_default; exports.Chip = _SFZ2MHPAcjs.Chip_default; exports.Divider = _DMA6PPUZcjs.Divider; exports.Heading = _2OJKC2AXcjs.Heading_default; exports.Icon = _XMKQJFU6cjs.Icon_default; exports.IconButton = _63XQSPT7cjs.IconButton_default; exports.LinkButton = _W45CFJI7cjs.LinkButton_default; exports.Modal = _HK7T4244cjs.Modal; exports.Popover = _ELEREGBWcjs.Popover_default; exports.RadioButton = _JW7TVUPBcjs.RadioButton_default; exports.RichSelectList = _6P4IEVBLcjs.RichSelectList_default; exports.SelectList = _XTVQVBURcjs.SelectList; exports.TapArea = _3UEOKPM2cjs.TapArea_default; exports.TextArea = _T5NFBPT6cjs.TextArea_default; exports.TextField = _7X4KKISPcjs.TextField; exports.ThemeProvider = _ASFZDRJJcjs.ThemeProvider; exports.Tooltip = _7FYS3TSRcjs.Tooltip_default; exports.Typography = _GUACYIXBcjs.Typography_default;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -10,7 +10,7 @@ import {
 } from "./__chunks/T32LVZ6S.js";
 import {
   Checkbox_default
-} from "./__chunks/62PHRDGW.js";
+} from "./__chunks/TVR4TJKV.js";
 import {
   Card
 } from "./__chunks/535SBVS5.js";
@@ -38,12 +38,12 @@ import {
 import "./__chunks/4U4UW4AK.js";
 import {
   SelectList
-} from "./__chunks/D5RNAJCX.js";
+} from "./__chunks/QSHXZ5FW.js";
 import "./__chunks/SPQ7DQHG.js";
 import {
   RichSelectList_default
-} from "./__chunks/AANQ5GIN.js";
-import "./__chunks/DJL67KQ3.js";
+} from "./__chunks/KKIY6JSO.js";
+import "./__chunks/OQKBWMZ4.js";
 import {
   ButtonGroup_default
 } from "./__chunks/BOX3VY3Q.js";
@@ -71,14 +71,14 @@ import {
 import {
   TapArea_default
 } from "./__chunks/77FFPQY6.js";
-import "./__chunks/4YLZ3ZKM.js";
+import "./__chunks/3CCYFL3K.js";
 import "./__chunks/HN2MMSUI.js";
 import "./__chunks/DDUJFFG7.js";
-import "./__chunks/Q7N54CYS.js";
+import "./__chunks/BU3EYSKD.js";
 import "./__chunks/ODMJANSX.js";
 import {
   RadioButton_default
-} from "./__chunks/4SYTZR75.js";
+} from "./__chunks/DR35U5KW.js";
 import "./__chunks/KKADUD65.js";
 import {
   Box_default

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cambly/syntax-core",
   "description": "Cambly design system core components",
-  "version": "12.6.0",
+  "version": "12.7.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/__chunks/4SYTZR75.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_1egeq_1\",\"disabled\":\"_disabled_1egeq_9\",\"cursorDisabled\":\"_cursorDisabled_1egeq_13\",\"cursorEnabled\":\"_cursorEnabled_1egeq_17\",\"smBase\":\"_smBase_1egeq_21\",\"mdBase\":\"_mdBase_1egeq_25\",\"radioStyleOverride\":\"_radioStyleOverride_1egeq_29\",\"smOverride\":\"_smOverride_1egeq_35\",\"mdOverride\":\"_mdOverride_1egeq_40\",\"background\":\"_background_1egeq_45\",\"sm\":\"_sm_1egeq_21\",\"md\":\"_md_1egeq_25\",\"neutralBorder\":\"_neutralBorder_1egeq_62\",\"smCheckedBorder\":\"_smCheckedBorder_1egeq_66\",\"mdCheckedBorder\":\"_mdCheckedBorder_1egeq_70\",\"errorBorderColor\":\"_errorBorderColor_1egeq_74\",\"borderColor\":\"_borderColor_1egeq_78\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SASE,KATF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/__chunks/62PHRDGW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1dut8_1\",\"inputOverlay\":\"_inputOverlay_1dut8_9\",\"checkbox\":\"_checkbox_1dut8_17\",\"disabled\":\"_disabled_1dut8_27\",\"cursorDisabled\":\"_cursorDisabled_1dut8_31\",\"cursorEnabled\":\"_cursorEnabled_1dut8_35\",\"sm\":\"_sm_1dut8_39\",\"md\":\"_md_1dut8_44\",\"smBorderRadius\":\"_smBorderRadius_1dut8_49\",\"mdBorderRadius\":\"_mdBorderRadius_1dut8_53\",\"checkmark\":\"_checkmark_1dut8_57\",\"checkmarkError\":\"_checkmarkError_1dut8_61\"}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/__chunks/K6VWXB7M.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Checkbox/Checkbox.tsx","css-module:./Checkbox.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACDyE,IAAO,0BAAQ,EAAC,iBAAgB,0BAAyB,gBAAe,yBAAwB,YAAW,sBAAqB,YAAW,sBAAqB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,MAAK,gBAAe,MAAK,gBAAe,kBAAiB,4BAA2B,kBAAiB,4BAA2B,aAAY,uBAAsB,kBAAiB,2BAA0B;;;AD6E/hB,SAwBQ,KAxBR;AApEJ,IAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAwCoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,wBAAO;AAAA,QACP,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,wBAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA,cACjB;AAAA,cACA,QACI,sBAAY,sCACZ,sBAAY;AAAA,YAClB;AAAA,YAEC,qBACC,oBAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,OAAO,UAAU,IAAI,GAC/D;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,QAAQ,wBAAO,iBAAiB,wBAAO;AAAA,gBAClD,GAAE;AAAA;AAAA,YACH,GACH;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL,WAAW;AAAA,cACT,wBAAO;AAAA,cACP,wBAAO,IAAI;AAAA,cACX,wBAAO,SAAS,WAAW,aAAa,WAAW;AAAA,YACrD;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,eAAe,IAAI;AAAA,YACzB,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classNames from \"classnames\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport styles from \"./Checkbox.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\n\nconst typographySize = {\n  sm: 100,\n  md: 200,\n} as const;\n\nconst iconWidth = {\n  sm: 12,\n  md: 20,\n};\n\n/**\n * [Checkbox](https://cambly-syntax.vercel.app/?path=/docs/components-checkbox--docs) is a clickable element that will show if an option has been selected or not.\n */\nconst Checkbox = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  disabled: disabledProp = false,\n  size = \"md\",\n  label,\n  error = false,\n  onChange,\n}: {\n  /**\n   * Whether or not the box has been clicked\n   *\n   * @defaultValue false\n   */\n  checked: boolean;\n  /**\n   * Test id for the checkbox\n   */\n  \"data-testid\"?: string;\n  /**\n   * The callback to be called when the checkbox value changes\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Whether or not the box is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The size of the checkbox and icon\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * The text accompanying the checkbox\n   */\n  label: string;\n  /**\n   * Whether or not there is an error with the input\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles.mainContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classNames(\n          styles.checkbox,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              isFocused && isFocusVisible,\n          },\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n        )}\n      >\n        {checked && (\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width={iconWidth[size]}>\n            <path\n              className={error ? styles.checkmarkError : styles.checkmark}\n              d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z\"\n            ></path>\n          </svg>\n        )}\n      </div>\n      <input\n        data-testid={dataTestId}\n        type=\"checkbox\"\n        className={classNames(\n          styles.inputOverlay,\n          styles[size],\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      <Typography\n        size={typographySize[size]}\n        color={error ? \"destructive-primary\" : \"gray900\"}\n      >\n        {label}\n      </Typography>\n    </label>\n  );\n};\n\nexport default Checkbox;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Checkbox/Checkbox.module.css\"; export default {\"mainContainer\":\"_mainContainer_1dut8_1\",\"inputOverlay\":\"_inputOverlay_1dut8_9\",\"checkbox\":\"_checkbox_1dut8_17\",\"disabled\":\"_disabled_1dut8_27\",\"cursorDisabled\":\"_cursorDisabled_1dut8_31\",\"cursorEnabled\":\"_cursorEnabled_1dut8_35\",\"sm\":\"_sm_1dut8_39\",\"md\":\"_md_1dut8_44\",\"smBorderRadius\":\"_smBorderRadius_1dut8_49\",\"mdBorderRadius\":\"_mdBorderRadius_1dut8_53\",\"checkmark\":\"_checkmark_1dut8_57\",\"checkmarkError\":\"_checkmarkError_1dut8_61\"}"]}

package/dist/__chunks/YIDLOSTD.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/RadioButton/RadioButton.tsx","css-module:./RadioButton.module.css#css-module"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAmC,gBAAgB;AACnD,OAAO,gBAAgB;;;ACD+E,IAAO,6BAAQ,EAAC,sBAAqB,+BAA8B,YAAW,qBAAoB,kBAAiB,4BAA2B,iBAAgB,2BAA0B,UAAS,oBAAmB,UAAS,oBAAmB,sBAAqB,gCAA+B,cAAa,wBAAuB,cAAa,wBAAuB,cAAa,wBAAuB,MAAK,gBAAe,MAAK,gBAAe,iBAAgB,2BAA0B,mBAAkB,6BAA4B,mBAAkB,6BAA4B,oBAAmB,8BAA6B,eAAc,wBAAuB;;;ADuFrvB,SASE,KATF;AAzEJ,IAAM,cAAc,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe;AAAA,EACf,8BAA8B;AAAA,EAC9B,UAAU,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,MAsDoB;AAClB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,2BAAO;AAAA,QACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,QACnD;AAAA,UACE,CAAC,2BAAO,QAAQ,GAAG;AAAA,QACrB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,QACI,sBAAY,sCACZ,sBAAY;AAAA,cAChB,2BAAO,IAAI;AAAA,cACX;AAAA,gBACE,CAAC,qBAAY,yBAAyB,GACnC,aAAa,kBAAmB;AAAA,cACrC;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,QAAQ,mBAAmB;AAAA,YAC5C,OAAO,SAAS,OAAO,KAAK;AAAA,YAC5B,QAAQ,SAAS,OAAO,KAAK;AAAA,YAC7B,UAAS;AAAA,YACT,UAAS;AAAA,YACT,2BAA2B;AAAA,cACzB,SAAS;AAAA,gBACP,MAAM,SAAS,OAAO,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,WAAW;AAAA,cACT,2BAAO;AAAA,cACP,2BAAO,SAAS,WAAW,aAAa,WAAW;AAAA,cACnD;AAAA,gBACE,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,gBAC9B,CAAC,2BAAO,UAAU,GAAG,SAAS;AAAA,cAChC;AAAA,YACF;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb,2BAAa,IAAI;AAAA,YACnB;AAAA,YACA,QAAQ,MAAM;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,QACC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,SAAS,OAAO,MAAM;AAAA,YAC5B,OAAO,QAAQ,wBAAwB;AAAA,YAEtC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,sBAAQ","sourcesContent":["import React, { type ReactElement, useState } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./RadioButton.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport Typography from \"../Typography/Typography\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\nimport colorStyles from \"../colors/colors.module.css\";\nimport Box from \"../Box/Box\";\n\n/**\n * [RadioButton](https://cambly-syntax.vercel.app/?path=/docs/components-radiobutton--docs) is a radio button with accompanying text\n */\nconst RadioButton = ({\n  checked = false,\n  \"data-testid\": dataTestId,\n  dangerouslyForceFocusStyles = false,\n  disabled: disabledProp = false,\n  error = false,\n  id,\n  label,\n  name,\n  onChange,\n  size = \"md\",\n  value,\n}: {\n  /**\n   * Whether or not the radio button is checked\n   *\n   * @defaultValue false\n   */\n  checked?: boolean;\n  /**\n   * Test id for the radio button\n   */\n  \"data-testid\"?: string;\n  /**\n   * Whether or not the radio button is disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether to show error color schema\n   *\n   * @defaultValue false\n   */\n  error?: boolean;\n  /**\n   * Id for the the radio button\n   */\n  id?: string;\n  /**\n   * Value to show end user\n   */\n  label: string;\n  /**\n   * The name of the grouping the radio buttons are in\n   */\n  name: string;\n  /**\n   * The callback to be called when the radio button is clicked\n   */\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Size of the components\n   *\n   * * `sm`: 16px\n   * * `md`: 24px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Value of the selected radio option\n   */\n  value: string | number;\n  /** forces focus ring styling */\n  dangerouslyForceFocusStyles?: boolean;\n}): ReactElement => {\n  const isHydrated = useIsHydrated();\n  const disabled = !isHydrated || disabledProp;\n  const [isFocused, setIsFocused] = useState(false);\n  const { isFocusVisible } = useFocusVisible();\n\n  return (\n    <label\n      className={classnames(\n        styles.radioBaseContainer,\n        styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n        {\n          [styles.disabled]: disabled,\n        },\n      )}\n    >\n      <div\n        className={classnames(\n          styles.background,\n          error\n            ? colorStyles.cambioDestructive370BackgroundColor\n            : colorStyles.cambioGray370BackgroundColor,\n          styles[size],\n          {\n            [focusStyles.accessibilityOutlineFocus]:\n              (isFocused && isFocusVisible) || dangerouslyForceFocusStyles,\n          },\n        )}\n      />\n      {checked && (\n        <Box\n          backgroundColor={error ? \"destructive900\" : \"gray900\"}\n          width={size === \"md\" ? 12 : 8}\n          height={size === \"md\" ? 12 : 8}\n          position=\"absolute\"\n          rounding=\"full\"\n          dangerouslySetInlineStyle={{\n            __style: {\n              left: size === \"md\" ? 6 : 4,\n            },\n          }}\n        />\n      )}\n      <input\n        data-testid={dataTestId}\n        type=\"radio\"\n        id={id}\n        name={name}\n        className={classnames(\n          styles.radioStyleOverride,\n          styles[`cursor${disabled ? \"Disabled\" : \"Enabled\"}`],\n          {\n            [styles.smOverride]: size === \"sm\",\n            [styles.mdOverride]: size === \"md\",\n          },\n        )}\n        checked={checked}\n        onChange={onChange}\n        disabled={disabled}\n        value={value}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => {\n          setIsFocused(false);\n        }}\n      />\n      {label && (\n        <Typography\n          size={size === \"md\" ? 200 : 100}\n          color={error ? \"destructive-primary\" : \"gray900\"}\n        >\n          {label}\n        </Typography>\n      )}\n    </label>\n  );\n};\n\nexport default RadioButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/RadioButton/RadioButton.module.css\"; export default {\"radioBaseContainer\":\"_radioBaseContainer_1egeq_1\",\"disabled\":\"_disabled_1egeq_9\",\"cursorDisabled\":\"_cursorDisabled_1egeq_13\",\"cursorEnabled\":\"_cursorEnabled_1egeq_17\",\"smBase\":\"_smBase_1egeq_21\",\"mdBase\":\"_mdBase_1egeq_25\",\"radioStyleOverride\":\"_radioStyleOverride_1egeq_29\",\"smOverride\":\"_smOverride_1egeq_35\",\"mdOverride\":\"_mdOverride_1egeq_40\",\"background\":\"_background_1egeq_45\",\"sm\":\"_sm_1egeq_21\",\"md\":\"_md_1egeq_25\",\"neutralBorder\":\"_neutralBorder_1egeq_62\",\"smCheckedBorder\":\"_smCheckedBorder_1egeq_66\",\"mdCheckedBorder\":\"_mdCheckedBorder_1egeq_70\",\"errorBorderColor\":\"_errorBorderColor_1egeq_74\",\"borderColor\":\"_borderColor_1egeq_78\"}"]}