@cambly/syntax-core 1.10.0 → 1.12.0

package/dist/index.css

@@ -211,6 +211,60 @@
   margin: 0;
 }
 
+/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css/#css-module-data */
+._iconButton_dzhn0_1 {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  border: none;
+  border-radius: 50%;
+}
+._iconButton_dzhn0_1:hover {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
+  transition-duration: 0.2s;
+  cursor: pointer;
+}
+._iconButton_dzhn0_1:focus-visible {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+  box-shadow: 0 0 0 4px #000;
+  outline: solid 2px #fff;
+}
+._iconButton_dzhn0_1:active {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
+  transform: scale(0.97);
+  transition-duration: 0.2s;
+}
+._iconButton_dzhn0_1:disabled {
+  filter: opacity(30%);
+  background-image: none;
+  transform: none;
+  cursor: auto;
+}
+._sm_dzhn0_46 {
+  height: 32px;
+  width: 32px;
+}
+._md_dzhn0_51 {
+  height: 40px;
+  width: 40px;
+}
+._lg_dzhn0_56 {
+  height: 48px;
+  width: 48px;
+}
+._smIcon_dzhn0_61 {
+  height: 16px !important;
+  width: 16px !important;
+}
+._mdIcon_dzhn0_68 {
+  height: 20px !important;
+  width: 20px !important;
+}
+._lgIcon_dzhn0_75 {
+  height: 24px !important;
+  width: 24px !important;
+}
+
 /* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data */
 ._miniActionCard_qebkn_1 {
   border-radius: 24px;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data"],"sourcesContent":["._avatar_1s8z7_1 {\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border-radius: 50%;\n}\n\n._sm_1s8z7_8 {\n  width: 24px;\n  height: 24px;\n}\n\n._md_1s8z7_13 {\n  width: 40px;\n  height: 40px;\n}\n\n._lg_1s8z7_18 {\n  width: 72px;\n  height: 72px;\n}\n\n._xl_1s8z7_23 {\n  width: 128px;\n  height: 128px;\n}\n","/* Regular Colors */\n._primary700Color_18uh7_2 {\n  color: var(--color-base-primary-700);\n}\n\n._destructive700Color_18uh7_6 {\n  color: var(--color-base-destructive-700);\n}\n\n._gray900Color_18uh7_10 {\n  color: var(--color-base-gray-900);\n}\n\n._whiteColor_18uh7_14 {\n  color: var(--color-base-white);\n}\n\n/* Background Colors */\n._primary100BackgroundColor_18uh7_19 {\n  background-color: var(--color-base-primary-100);\n}\n\n._destructive700Background_18uh7_23 {\n  background-color: var(--color-base-destructive-700);\n}\n\n._destructive100BackgroundColor_18uh7_27 {\n  background-color: var(--color-base-destructive-100);\n}\n\n._success700BackgroundColor_18uh7_31 {\n  background-color: var(--color-base-success-700);\n}\n\n._whiteBackgroundColor_18uh7_35 {\n  background-color: var(--color-base-white);\n}\n\n._yellow700BackgroundColor_18uh7_39 {\n  background-color: var(--color-extended-yellow-700);\n}\n\n._primary700BackgroundColor_18uh7_43 {\n  background-color: var(--color-base-primary-700);\n}\n","._button_6lbba_1 {\n  border: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n\n._buttonGap_6lbba_9 {\n  gap: 4px;\n}\n\n._button_6lbba_1:hover {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 100%\n  );\n  transition-duration: 0.2s;\n  cursor: pointer;\n}\n\n._button_6lbba_1:focus-visible {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  box-shadow: 0 0 0 4px #000;\n  outline: solid 2px #fff;\n}\n\n._button_6lbba_1:active {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  transform: scale(0.97);\n  transition-duration: 0.2s;\n}\n\n._button_6lbba_1:disabled {\n  filter: opacity(30%);\n  background-image: none;\n  transform: none;\n  cursor: auto;\n}\n\n._fullWidth_6lbba_50 {\n  width: 100%;\n}\n\n._sm_6lbba_54 {\n  min-width: 52px;\n  height: 32px;\n  padding: 0 12px;\n  border-radius: 12px;\n}\n\n._md_6lbba_61 {\n  min-width: 72px;\n  height: 40px;\n  padding: 0 16px;\n  border-radius: 12px;\n}\n\n._lg_6lbba_68 {\n  min-width: 88px;\n  height: 48px;\n  padding: 0 20px;\n  border-radius: 16px;\n}\n\n._icon_6lbba_75 {\n  color: inherit;\n}\n\n._smIcon_6lbba_79 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 16px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 16px !important;\n}\n\n._mdIcon_6lbba_86 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 20px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 20px !important;\n}\n\n._lgIcon_6lbba_93 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 24px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 24px !important;\n}\n\n._textContainer_6lbba_100 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n\n@keyframes _syntaxButtonLoadingRotate_6lbba_1 {\n  0% {\n    transform-origin: 50% 50%;\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n._loading_6lbba_115 {\n  animation: _syntaxButtonLoadingRotate_6lbba_1 1.4s linear infinite;\n}\n\n._loadingCircle_6lbba_119 {\n  stroke: currentcolor;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0;\n  transform-origin: center;\n}\n\n/** TODO Change with `Typography` component when available */\n._buttonText_6lbba_127 {\n  color: inherit;\n  font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n  font-weight: 500;\n}\n\n._buttonTextSmall_6lbba_134 {\n  font-size: 12px;\n}\n\n._buttonTextMedium_6lbba_138 {\n  font-size: 14px;\n}\n\n._buttonTextLarge_6lbba_142 {\n  font-size: 16px;\n}\n","._buttonGroup_184aa_1 {\n  display: flex;\n  gap: 8px;\n}\n\n._horizontal_184aa_6 {\n  flex-direction: row;\n}\n\n._vertical_184aa_10 {\n  flex-direction: column;\n}\n\n._smallGap_184aa_14 {\n  gap: 8px;\n}\n\n._mediumGap_184aa_18 {\n  gap: 12px;\n}\n\n._largeGap_184aa_22 {\n  gap: 16px;\n}\n","._card_hvz2b_1 {\n  border-radius: 24px;\n  padding: 28px;\n  background-color: #fff;\n}\n\n@media (min-width: 480px) {\n  ._card_hvz2b_1 {\n    padding: 36px;\n  }\n}\n","._divider_1ddgq_1 {\n  background-color: var(--color-base-gray-10);\n  border-radius: 50px;\n  border: none;\n  height: 1px;\n  margin: 0;\n}\n","._miniActionCard_qebkn_1 {\n  border-radius: 24px;\n  padding: 20px;\n  width: 169px;\n  height: 156px;\n  background-color: #fff;\n}\n\n._card_qebkn_9 {\n  border-radius: 24px;\n  padding: 28px;\n  background-color: #fff;\n}\n\n@media (min-width: 480px) {\n  ._miniActionCard_qebkn_1 {\n    width: 232px;\n  }\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACvBF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEI;AAAA;AAAA;AAIA;AAAA;AAAA;AAIJ;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC9IF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACtBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;;;ACRJ;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACLF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css/#css-module-data","css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css/#css-module-data"],"sourcesContent":["._avatar_1s8z7_1 {\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border-radius: 50%;\n}\n\n._sm_1s8z7_8 {\n  width: 24px;\n  height: 24px;\n}\n\n._md_1s8z7_13 {\n  width: 40px;\n  height: 40px;\n}\n\n._lg_1s8z7_18 {\n  width: 72px;\n  height: 72px;\n}\n\n._xl_1s8z7_23 {\n  width: 128px;\n  height: 128px;\n}\n","/* Regular Colors */\n._primary700Color_18uh7_2 {\n  color: var(--color-base-primary-700);\n}\n\n._destructive700Color_18uh7_6 {\n  color: var(--color-base-destructive-700);\n}\n\n._gray900Color_18uh7_10 {\n  color: var(--color-base-gray-900);\n}\n\n._whiteColor_18uh7_14 {\n  color: var(--color-base-white);\n}\n\n/* Background Colors */\n._primary100BackgroundColor_18uh7_19 {\n  background-color: var(--color-base-primary-100);\n}\n\n._destructive700Background_18uh7_23 {\n  background-color: var(--color-base-destructive-700);\n}\n\n._destructive100BackgroundColor_18uh7_27 {\n  background-color: var(--color-base-destructive-100);\n}\n\n._success700BackgroundColor_18uh7_31 {\n  background-color: var(--color-base-success-700);\n}\n\n._whiteBackgroundColor_18uh7_35 {\n  background-color: var(--color-base-white);\n}\n\n._yellow700BackgroundColor_18uh7_39 {\n  background-color: var(--color-extended-yellow-700);\n}\n\n._primary700BackgroundColor_18uh7_43 {\n  background-color: var(--color-base-primary-700);\n}\n","._button_6lbba_1 {\n  border: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n\n._buttonGap_6lbba_9 {\n  gap: 4px;\n}\n\n._button_6lbba_1:hover {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 100%\n  );\n  transition-duration: 0.2s;\n  cursor: pointer;\n}\n\n._button_6lbba_1:focus-visible {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  box-shadow: 0 0 0 4px #000;\n  outline: solid 2px #fff;\n}\n\n._button_6lbba_1:active {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  transform: scale(0.97);\n  transition-duration: 0.2s;\n}\n\n._button_6lbba_1:disabled {\n  filter: opacity(30%);\n  background-image: none;\n  transform: none;\n  cursor: auto;\n}\n\n._fullWidth_6lbba_50 {\n  width: 100%;\n}\n\n._sm_6lbba_54 {\n  min-width: 52px;\n  height: 32px;\n  padding: 0 12px;\n  border-radius: 12px;\n}\n\n._md_6lbba_61 {\n  min-width: 72px;\n  height: 40px;\n  padding: 0 16px;\n  border-radius: 12px;\n}\n\n._lg_6lbba_68 {\n  min-width: 88px;\n  height: 48px;\n  padding: 0 20px;\n  border-radius: 16px;\n}\n\n._icon_6lbba_75 {\n  color: inherit;\n}\n\n._smIcon_6lbba_79 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 16px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 16px !important;\n}\n\n._mdIcon_6lbba_86 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 20px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 20px !important;\n}\n\n._lgIcon_6lbba_93 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 24px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 24px !important;\n}\n\n._textContainer_6lbba_100 {\n  padding-left: 4px;\n  padding-right: 4px;\n}\n\n@keyframes _syntaxButtonLoadingRotate_6lbba_1 {\n  0% {\n    transform-origin: 50% 50%;\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n._loading_6lbba_115 {\n  animation: _syntaxButtonLoadingRotate_6lbba_1 1.4s linear infinite;\n}\n\n._loadingCircle_6lbba_119 {\n  stroke: currentcolor;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0;\n  transform-origin: center;\n}\n\n/** TODO Change with `Typography` component when available */\n._buttonText_6lbba_127 {\n  color: inherit;\n  font-family: -apple-system, system-ui, BlinkMacSystemFont, \"Segoe UI\", Roboto,\n    Helvetica, Arial, sans-serif;\n  font-weight: 500;\n}\n\n._buttonTextSmall_6lbba_134 {\n  font-size: 12px;\n}\n\n._buttonTextMedium_6lbba_138 {\n  font-size: 14px;\n}\n\n._buttonTextLarge_6lbba_142 {\n  font-size: 16px;\n}\n","._buttonGroup_184aa_1 {\n  display: flex;\n  gap: 8px;\n}\n\n._horizontal_184aa_6 {\n  flex-direction: row;\n}\n\n._vertical_184aa_10 {\n  flex-direction: column;\n}\n\n._smallGap_184aa_14 {\n  gap: 8px;\n}\n\n._mediumGap_184aa_18 {\n  gap: 12px;\n}\n\n._largeGap_184aa_22 {\n  gap: 16px;\n}\n","._card_hvz2b_1 {\n  border-radius: 24px;\n  padding: 28px;\n  background-color: #fff;\n}\n\n@media (min-width: 480px) {\n  ._card_hvz2b_1 {\n    padding: 36px;\n  }\n}\n","._divider_1ddgq_1 {\n  background-color: var(--color-base-gray-10);\n  border-radius: 50px;\n  border: none;\n  height: 1px;\n  margin: 0;\n}\n","._iconButton_dzhn0_1 {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  border: none;\n  border-radius: 50%;\n}\n\n._iconButton_dzhn0_1:hover {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.1) 0%,\n    rgba(0, 0, 0, 0.1) 100%\n  );\n  transition-duration: 0.2s;\n  cursor: pointer;\n}\n\n._iconButton_dzhn0_1:focus-visible {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  box-shadow: 0 0 0 4px #000;\n  outline: solid 2px #fff;\n}\n\n._iconButton_dzhn0_1:active {\n  background-image: linear-gradient(\n    to bottom,\n    rgba(0, 0, 0, 0.2) 0%,\n    rgba(0, 0, 0, 0.2) 100%\n  );\n  transform: scale(0.97);\n  transition-duration: 0.2s;\n}\n\n._iconButton_dzhn0_1:disabled {\n  filter: opacity(30%);\n  background-image: none;\n  transform: none;\n  cursor: auto;\n}\n\n._sm_dzhn0_46 {\n  height: 32px;\n  width: 32px;\n}\n\n._md_dzhn0_51 {\n  height: 40px;\n  width: 40px;\n}\n\n._lg_dzhn0_56 {\n  height: 48px;\n  width: 48px;\n}\n\n._smIcon_dzhn0_61 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 16px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 16px !important;\n}\n\n._mdIcon_dzhn0_68 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 20px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 20px !important;\n}\n\n._lgIcon_dzhn0_75 {\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  height: 24px !important;\n  /* stylelint-disable-next-line declaration-no-important --  Need to use !important to override MUI icon sizes  */\n  width: 24px !important;\n}\n","._miniActionCard_qebkn_1 {\n  border-radius: 24px;\n  padding: 20px;\n  width: 169px;\n  height: 156px;\n  background-color: #fff;\n}\n\n._card_qebkn_9 {\n  border-radius: 24px;\n  padding: 28px;\n  background-color: #fff;\n}\n\n@media (min-width: 480px) {\n  ._miniActionCard_qebkn_1 {\n    width: 232px;\n  }\n}\n"],"mappings":";AAAA;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;;;ACvBF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC3CF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEI;AAAA;AAAA;AAIA;AAAA;AAAA;AAIJ;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC9IF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACtBF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;;;ACRJ;AACE;AACA;AACA;AACA;AACA;AAAA;;;ACLF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AAKA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;AAGF;AAEE;AAEA;AAAA;;;AC9EF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACE;AAAA;AAAA;","names":[]}

package/dist/index.d.ts

@@ -15,39 +15,17 @@ declare const Avatar: ({ src, accessibilityLabel, size, }: {
     accessibilityLabel: string;
     /**
      * Size of the avatar.
-     * sm: 24px, md: 40px, lg: 72px, xl: 128px.
+     *
+     * `sm`: 24px, `md`: 40px, `lg`: 72px, `xl`: 128px
      *
      * @defaultValue `md`
      */
     size?: "sm" | "md" | "lg" | "xl" | undefined;
 }) => JSX.Element;
 
-declare const Color: {
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly TERTIARY: "tertiary";
-    readonly BRANDED: "branded";
-    readonly DESTRUCTIVE_PRIMARY: "destructive-primary";
-    readonly DESTRUCTIVE_SECONDARY: "destructive-secondary";
-    readonly DESTRUCTIVE_TERTIARY: "destructive-tertiary";
-    readonly SUCCESS: "success";
-    readonly GRAY200: "gray200";
-    readonly GRAY700: "gray700";
-    readonly GRAY800: "gray800";
-    readonly GRAY900: "gray900";
-    readonly WHITE: "white";
-    readonly INHERIT: "inherit";
-};
-type ColorKeys = keyof typeof Color;
-type ColorValue = (typeof Color)[ColorKeys];
-declare const Size: {
-    readonly SMALL: "sm";
-    readonly MEDIUM: "md";
-    readonly LARGE: "lg";
-};
-type SizeKeys = keyof typeof Size;
-type SizeValue = (typeof Size)[SizeKeys];
-
+/**
+ * Button is a clickable element that is used to perform an action.
+ */
 declare const Button: ({ text, loadingText, color, size: sizeProp, accessibilityLabel, disabled: disabledProp, loading, fullWidth: fullWidthProp, startIcon: StartIcon, endIcon: EndIcon, onClick, tooltip, }: {
     /**
      * The text to be displayed inside the button
@@ -62,13 +40,15 @@ declare const Button: ({ text, loadingText, color, size: sizeProp, accessibility
      *
      * @defaultValue "primary"
      */
-    color?: ColorValue | undefined;
+    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
     /**
      * The size of the button
      *
-     * @defaultValue "medium"
+     * `sm`: 32px, `md`: 40px, `lg`: 48px
+     *
+     * @defaultValue "md"
      */
-    size?: SizeValue | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
     /**
      * The label to be used for accessibility
      */
@@ -138,9 +118,11 @@ declare const ButtonGroup: ({ disabled, fullWidth, orientation, size, children,
     /**
      * The size of the button group
      *
-     * @defaultValue "medium"
+     * `sm`: 32px, `md`: 40px, `lg`: 48px
+     *
+     * @defaultValue "md"
      */
-    size?: SizeValue | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
     /**
      * Buttons to be rendered inside the button group
      */
@@ -165,6 +147,50 @@ declare namespace Divider {
     var displayName: string;
 }
 
+/**
+ * IconButton is a clickable element that is used to perform an action.
+ */
+declare const IconButton: ({ accessibilityLabel, color, disabled: disabledProp, icon: Icon, size: sizeProp, tooltip, onClick, }: {
+    /**
+     * The color of the button
+     *
+     * @defaultValue "primary"
+     */
+    color?: "primary" | "secondary" | "tertiary" | "branded" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | "success" | "gray200" | "gray700" | "gray800" | "gray900" | "white" | "inherit" | undefined;
+    /**
+     * The size of the button
+     *
+     * `sm`: 32px, `md`: 40px, `lg`: 48px
+     *
+     * @defaultValue "md"
+     */
+    size?: "sm" | "md" | "lg" | undefined;
+    /**
+     * The label to be used for accessibility
+     */
+    accessibilityLabel?: string | undefined;
+    /**
+     * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
+     */
+    icon: React.ComponentType<{
+        className: string;
+    }>;
+    /**
+     * If `true`, the button will be disabled
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The callback to be called when the button is clicked
+     */
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The tooltip to be displayed when the user hovers over the button
+     */
+    tooltip?: string | undefined;
+}) => ReactElement;
+
 /**
  * MiniActionCard is component that alerts users to a call to action.
  */
@@ -175,4 +201,4 @@ declare const MiniActionCard: ({ children, }: {
     children: JSX.Element;
 }) => JSX.Element;
 
-export { Avatar, Button, ButtonGroup, Card, Divider, MiniActionCard };
+export { Avatar, Button, ButtonGroup, Card, Divider, IconButton, MiniActionCard };

package/dist/index.js

@@ -37,7 +37,7 @@ var require_classnames = __commonJS({
       "use strict";
       var hasOwn = {}.hasOwnProperty;
       var nativeCodeString = "[native code]";
-      function classNames4() {
+      function classNames5() {
         var classes = [];
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -48,7 +48,7 @@ var require_classnames = __commonJS({
             classes.push(arg);
           } else if (Array.isArray(arg)) {
             if (arg.length) {
-              var inner = classNames4.apply(null, arg);
+              var inner = classNames5.apply(null, arg);
               if (inner) {
                 classes.push(inner);
               }
@@ -68,14 +68,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames4.default = classNames4;
-        module2.exports = classNames4;
+        classNames5.default = classNames5;
+        module2.exports = classNames5;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames4;
+          return classNames5;
         });
       } else {
-        window.classNames = classNames4;
+        window.classNames = classNames5;
       }
     })();
   }
@@ -89,6 +89,7 @@ __export(src_exports, {
   ButtonGroup: () => ButtonGroup_default,
   Card: () => Card_default,
   Divider: () => Divider,
+  IconButton: () => IconButton_default,
   MiniActionCard: () => MiniActionCard_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -120,51 +121,24 @@ var Avatar_default = Avatar;
 // src/Button/Button.tsx
 var import_classnames2 = __toESM(require_classnames());
 
-// src/constants.ts
-var Color = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  TERTIARY: "tertiary",
-  BRANDED: "branded",
-  DESTRUCTIVE_PRIMARY: "destructive-primary",
-  DESTRUCTIVE_SECONDARY: "destructive-secondary",
-  DESTRUCTIVE_TERTIARY: "destructive-tertiary",
-  SUCCESS: "success",
-  GRAY200: "gray200",
-  GRAY700: "gray700",
-  GRAY800: "gray800",
-  GRAY900: "gray900",
-  WHITE: "white",
-  INHERIT: "inherit"
-};
-var Size = {
-  SMALL: "sm",
-  MEDIUM: "md",
-  LARGE: "lg"
-};
-var Orientation = {
-  HORIZONTAL: "horizontal",
-  VERTICAL: "vertical"
-};
-
 // css-module:./colors.module.css#css-module
 var colors_module_default = { "primary700Color": "_primary700Color_18uh7_2", "destructive700Color": "_destructive700Color_18uh7_6", "gray900Color": "_gray900Color_18uh7_10", "whiteColor": "_whiteColor_18uh7_14", "primary100BackgroundColor": "_primary100BackgroundColor_18uh7_19", "destructive700Background": "_destructive700Background_18uh7_23", "destructive100BackgroundColor": "_destructive100BackgroundColor_18uh7_27", "success700BackgroundColor": "_success700BackgroundColor_18uh7_31", "whiteBackgroundColor": "_whiteBackgroundColor_18uh7_35", "yellow700BackgroundColor": "_yellow700BackgroundColor_18uh7_39", "primary700BackgroundColor": "_primary700BackgroundColor_18uh7_43" };
 
 // src/colors/backgroundColor.ts
 function backgroundColor(color) {
   switch (color) {
-    case Color.SECONDARY:
+    case "secondary":
       return colors_module_default.primary100BackgroundColor;
-    case Color.DESTRUCTIVE_PRIMARY:
+    case "destructive-primary":
       return colors_module_default.destructive700Background;
-    case Color.DESTRUCTIVE_SECONDARY:
+    case "destructive-secondary":
       return colors_module_default.destructive100BackgroundColor;
-    case Color.SUCCESS:
+    case "success":
       return colors_module_default.success700BackgroundColor;
-    case Color.TERTIARY:
-    case Color.DESTRUCTIVE_TERTIARY:
+    case "tertiary":
+    case "destructive-tertiary":
       return colors_module_default.whiteBackgroundColor;
-    case Color.BRANDED:
+    case "branded":
       return colors_module_default.yellow700BackgroundColor;
     default:
       return colors_module_default.primary700BackgroundColor;
@@ -174,13 +148,13 @@ function backgroundColor(color) {
 // src/colors/foregroundColor.ts
 function foregroundColor(color) {
   switch (color) {
-    case Color.SECONDARY:
-    case Color.TERTIARY:
+    case "secondary":
+    case "tertiary":
       return colors_module_default.primary700Color;
-    case Color.DESTRUCTIVE_SECONDARY:
-    case Color.DESTRUCTIVE_TERTIARY:
+    case "destructive-secondary":
+    case "destructive-tertiary":
       return colors_module_default.destructive700Color;
-    case Color.BRANDED:
+    case "branded":
       return colors_module_default.gray900Color;
     default:
       return colors_module_default.whiteColor;
@@ -205,25 +179,25 @@ var Button_module_default = { "button": "_button_6lbba_1", "buttonGap": "_button
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var textVariant = {
   // Replace with `Typography` once it lands in `syntax-core`
-  [Size.SMALL]: Button_module_default.buttonTextSmall,
-  [Size.MEDIUM]: Button_module_default.buttonTextMedium,
-  [Size.LARGE]: Button_module_default.buttonTextLarge
+  ["sm"]: Button_module_default.buttonTextSmall,
+  ["md"]: Button_module_default.buttonTextMedium,
+  ["lg"]: Button_module_default.buttonTextLarge
 };
 var loadingIconSize = {
-  [Size.SMALL]: 16,
-  [Size.MEDIUM]: 20,
-  [Size.LARGE]: 24
+  ["sm"]: 16,
+  ["md"]: 20,
+  ["lg"]: 24
 };
 var iconSize = {
-  [Size.SMALL]: Button_module_default.smIcon,
-  [Size.MEDIUM]: Button_module_default.mdIcon,
-  [Size.LARGE]: Button_module_default.lgIcon
+  ["sm"]: Button_module_default.smIcon,
+  ["md"]: Button_module_default.mdIcon,
+  ["lg"]: Button_module_default.lgIcon
 };
 var Button = ({
   text,
   loadingText,
-  color = Color.PRIMARY,
-  size: sizeProp = Size.MEDIUM,
+  color = "primary",
+  size: sizeProp = "md",
   accessibilityLabel,
   disabled: disabledProp = false,
   loading = false,
@@ -252,7 +226,7 @@ var Button = ({
         Button_module_default[size],
         {
           [Button_module_default.fullWidth]: fullWidth,
-          [Button_module_default.buttonGap]: size === Size.LARGE || size === Size.MEDIUM
+          [Button_module_default.buttonGap]: size === "lg" || size === "md"
         }
       ),
       children: [
@@ -295,15 +269,15 @@ var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_184aa_1", "horiz
 var import_classnames3 = __toESM(require_classnames());
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var gap = {
-  [Size.SMALL]: ButtonGroup_module_default.smallGap,
-  [Size.MEDIUM]: ButtonGroup_module_default.mediumGap,
-  [Size.LARGE]: ButtonGroup_module_default.largeGap
+  ["sm"]: ButtonGroup_module_default.smallGap,
+  ["md"]: ButtonGroup_module_default.mediumGap,
+  ["lg"]: ButtonGroup_module_default.largeGap
 };
 var ButtonGroup = ({
   disabled = false,
   fullWidth = false,
-  orientation = Orientation.HORIZONTAL,
-  size = Size.MEDIUM,
+  orientation = "horizontal",
+  size = "md",
   children
 }) => {
   const context = (0, import_react3.useMemo)(
@@ -311,8 +285,8 @@ var ButtonGroup = ({
     [disabled, fullWidth, size]
   );
   const classnames = (0, import_classnames3.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
-    [ButtonGroup_module_default.horizontal]: orientation === Orientation.HORIZONTAL,
-    [ButtonGroup_module_default.vertical]: orientation === Orientation.VERTICAL
+    [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
+    [ButtonGroup_module_default.vertical]: orientation === "vertical"
   });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonGroupContext_default.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: classnames, children }) });
 };
@@ -338,14 +312,60 @@ function Divider({}) {
 }
 Divider.displayName = "Divider";
 
+// src/IconButton/IconButton.tsx
+var import_classnames4 = __toESM(require_classnames());
+var import_react4 = require("react");
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_dzhn0_1", "sm": "_sm_dzhn0_46", "md": "_md_dzhn0_51", "lg": "_lg_dzhn0_56", "smIcon": "_smIcon_dzhn0_61", "mdIcon": "_mdIcon_dzhn0_68", "lgIcon": "_lgIcon_dzhn0_75" };
+
+// src/IconButton/IconButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var iconSize2 = {
+  ["sm"]: IconButton_module_default.smIcon,
+  ["md"]: IconButton_module_default.mdIcon,
+  ["lg"]: IconButton_module_default.lgIcon
+};
+var IconButton = ({
+  accessibilityLabel,
+  color = "primary",
+  disabled: disabledProp = false,
+  icon: Icon,
+  size: sizeProp = "md",
+  tooltip,
+  onClick
+}) => {
+  const contextProps = (0, import_react4.useContext)(ButtonGroupContext_default);
+  const size = (contextProps == null ? void 0 : contextProps.size) || sizeProp;
+  const disabled = (contextProps == null ? void 0 : contextProps.disabled) || disabledProp;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "button",
+    {
+      "aria-label": accessibilityLabel,
+      type: "button",
+      title: tooltip,
+      disabled,
+      onClick,
+      className: (0, import_classnames4.default)(
+        IconButton_module_default.iconButton,
+        foregroundColor(color),
+        backgroundColor(color),
+        IconButton_module_default[size]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: iconSize2[size] })
+    }
+  );
+};
+var IconButton_default = IconButton;
+
 // css-module:./MiniActionCard.module.css#css-module
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -354,6 +374,7 @@ var MiniActionCard_default = MiniActionCard;
   ButtonGroup,
   Card,
   Divider,
+  IconButton,
   MiniActionCard
 });
 /*! Bundled license information:

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","../src/constants.ts","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import Avatar from \"./Avatar/Avatar\";\nimport Button from \"./Button/Button\";\nimport ButtonGroup from \"./ButtonGroup/ButtonGroup\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\nimport MiniActionCard from \"./MiniActionCard/MiniActionCard\";\n\nexport { Avatar, Button, ButtonGroup, Card, Divider, MiniActionCard };\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * Size of the avatar.\n   * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, ColorValue, Size, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n  // Replace with `Typography` once it lands in `syntax-core`\n  [Size.SMALL]: styles.buttonTextSmall,\n  [Size.MEDIUM]: styles.buttonTextMedium,\n  [Size.LARGE]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 20,\n  [Size.LARGE]: 24,\n};\n\nconst iconSize = {\n  [Size.SMALL]: styles.smIcon,\n  [Size.MEDIUM]: styles.mdIcon,\n  [Size.LARGE]: styles.lgIcon,\n};\n\nconst Button = ({\n  text,\n  loadingText,\n  color = Color.PRIMARY,\n  size: sizeProp = Size.MEDIUM,\n  accessibilityLabel,\n  disabled: disabledProp = false,\n  loading = false,\n  fullWidth: fullWidthProp = false,\n  startIcon: StartIcon,\n  endIcon: EndIcon,\n  onClick,\n  tooltip,\n}: {\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: ColorValue;\n  /**\n   * The size of the button\n   *\n   * @defaultValue \"medium\"\n   */\n  size?: SizeValue;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n  const fullWidth = contextProps?.fullWidth || fullWidthProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled || loading}\n      onClick={onClick}\n      className={classNames(\n        styles.button,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n        {\n          [styles.fullWidth]: fullWidth,\n          [styles.buttonGap]: size === Size.LARGE || size === Size.MEDIUM,\n        },\n      )}\n    >\n      {!loading && StartIcon && (\n        <StartIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {((loading && loadingText) || (!loading && text)) && (\n        <div className={styles.textContainer}>\n          {/* Replace with `Typography` once it lands in `syntax-core` */}\n          <div className={classNames(styles.buttonText, textVariant[size])}>\n            {loading ? loadingText : text}\n          </div>\n        </div>\n      )}\n      {!loading && EndIcon && (\n        <EndIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {loading && (\n        <svg\n          className={classNames(styles.loading, foregroundColor(color))}\n          viewBox=\"22 22 44 44\"\n          width={loadingIconSize[size]}\n          height={loadingIconSize[size]}\n        >\n          <circle\n            className={styles.loadingCircle}\n            cx=\"44\"\n            cy=\"44\"\n            r=\"20.2\"\n            fill=\"none\"\n            strokeWidth=\"3.6\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n","export const Color = {\n  PRIMARY: \"primary\",\n  SECONDARY: \"secondary\",\n  TERTIARY: \"tertiary\",\n  BRANDED: \"branded\",\n  DESTRUCTIVE_PRIMARY: \"destructive-primary\",\n  DESTRUCTIVE_SECONDARY: \"destructive-secondary\",\n  DESTRUCTIVE_TERTIARY: \"destructive-tertiary\",\n  SUCCESS: \"success\",\n  GRAY200: \"gray200\",\n  GRAY700: \"gray700\",\n  GRAY800: \"gray800\",\n  GRAY900: \"gray900\",\n  WHITE: \"white\",\n  INHERIT: \"inherit\",\n} as const;\n\nexport type ColorKeys = keyof typeof Color;\nexport type ColorValue = (typeof Color)[ColorKeys];\n\nexport const Size = {\n  SMALL: \"sm\",\n  MEDIUM: \"md\",\n  LARGE: \"lg\",\n} as const;\n\nexport type SizeKeys = keyof typeof Size;\nexport type SizeValue = (typeof Size)[SizeKeys];\n\nexport const Orientation = {\n  HORIZONTAL: \"horizontal\",\n  VERTICAL: \"vertical\",\n} as const;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: ColorValue): string {\n  switch (color) {\n    case Color.SECONDARY:\n      return styles.primary100BackgroundColor;\n    case Color.DESTRUCTIVE_PRIMARY:\n      return styles.destructive700Background;\n    case Color.DESTRUCTIVE_SECONDARY:\n      return styles.destructive100BackgroundColor;\n    case Color.SUCCESS:\n      return styles.success700BackgroundColor;\n    case Color.TERTIARY:\n    case Color.DESTRUCTIVE_TERTIARY:\n      return styles.whiteBackgroundColor;\n    case Color.BRANDED:\n      return styles.yellow700BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: ColorValue): string {\n  switch (color) {\n    case Color.SECONDARY:\n    case Color.TERTIARY:\n      return styles.primary700Color;\n    case Color.DESTRUCTIVE_SECONDARY:\n    case Color.DESTRUCTIVE_TERTIARY:\n      return styles.destructive700Color;\n    case Color.BRANDED:\n      return styles.gray900Color;\n    default:\n      return styles.whiteColor;\n  }\n}\n","import { SizeValue } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n  size?: SizeValue;\n  disabled?: boolean;\n  fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n  {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size, Orientation, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  [Size.SMALL]: styles.smallGap,\n  [Size.MEDIUM]: styles.mediumGap,\n  [Size.LARGE]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n  disabled = false,\n  fullWidth = false,\n  orientation = Orientation.HORIZONTAL,\n  size = Size.MEDIUM,\n  children,\n}: {\n  /**\n   * If `true`, all buttons will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, all buttons will be full width.\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group\n   *\n   * @defaultValue \"medium\"\n   */\n  size?: SizeValue;\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n}): ReactElement => {\n  const context = useMemo(\n    () => ({ disabled, fullWidth, size }),\n    [disabled, fullWidth, size],\n  );\n\n  const classnames = classNames(styles.buttonGroup, gap[size], {\n    [styles.horizontal]: orientation === Orientation.HORIZONTAL,\n    [styles.vertical]: orientation === Orientation.VERTICAL,\n  });\n\n  return (\n    <ButtonGroupContext.Provider value={context}>\n      <div className={classnames}>{children}</div>\n    </ButtonGroupContext.Provider>\n  );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n  children,\n}: {\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n  children,\n}: {\n  /**\n   * The child components to render within MiniActionCard.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["module","classNames","classNames","import_classnames","import_react","React","import_jsx_runtime","classNames","import_react","import_classnames","import_jsx_runtime","classNames","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/index.tsx","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import Avatar from \"./Avatar/Avatar\";\nimport Button from \"./Button/Button\";\nimport ButtonGroup from \"./ButtonGroup/ButtonGroup\";\nimport Card from \"./Card/Card\";\nimport Divider from \"./Divider/Divider\";\nimport IconButton from \"./IconButton/IconButton\";\nimport MiniActionCard from \"./MiniActionCard/MiniActionCard\";\n\nexport {\n  Avatar,\n  Button,\n  ButtonGroup,\n  Card,\n  Divider,\n  IconButton,\n  MiniActionCard,\n};\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * Size of the avatar.\n   *\n   * `sm`: 24px, `md`: 40px, `lg`: 72px, `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n  // Replace with `Typography` once it lands in `syntax-core`\n  [\"sm\"]: styles.buttonTextSmall,\n  [\"md\"]: styles.buttonTextMedium,\n  [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n  [\"sm\"]: 16,\n  [\"md\"]: 20,\n  [\"lg\"]: 24,\n};\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * Button is a clickable element that is used to perform an action.\n */\nconst Button = ({\n  text,\n  loadingText,\n  color = \"primary\",\n  size: sizeProp = \"md\",\n  accessibilityLabel,\n  disabled: disabledProp = false,\n  loading = false,\n  fullWidth: fullWidthProp = false,\n  startIcon: StartIcon,\n  endIcon: EndIcon,\n  onClick,\n  tooltip,\n}: {\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * The size of the button\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n  const fullWidth = contextProps?.fullWidth || fullWidthProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled || loading}\n      onClick={onClick}\n      className={classNames(\n        styles.button,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n        {\n          [styles.fullWidth]: fullWidth,\n          [styles.buttonGap]: size === \"lg\" || size === \"md\",\n        },\n      )}\n    >\n      {!loading && StartIcon && (\n        <StartIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {((loading && loadingText) || (!loading && text)) && (\n        <div className={styles.textContainer}>\n          {/* Replace with `Typography` once it lands in `syntax-core` */}\n          <div className={classNames(styles.buttonText, textVariant[size])}>\n            {loading ? loadingText : text}\n          </div>\n        </div>\n      )}\n      {!loading && EndIcon && (\n        <EndIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {loading && (\n        <svg\n          className={classNames(styles.loading, foregroundColor(color))}\n          viewBox=\"22 22 44 44\"\n          width={loadingIconSize[size]}\n          height={loadingIconSize[size]}\n        >\n          <circle\n            className={styles.loadingCircle}\n            cx=\"44\"\n            cy=\"44\"\n            r=\"20.2\"\n            fill=\"none\"\n            strokeWidth=\"3.6\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n      return styles.primary100BackgroundColor;\n    case \"destructive-primary\":\n      return styles.destructive700Background;\n    case \"destructive-secondary\":\n      return styles.destructive100BackgroundColor;\n    case \"success\":\n      return styles.success700BackgroundColor;\n    case \"tertiary\":\n    case \"destructive-tertiary\":\n      return styles.whiteBackgroundColor;\n    case \"branded\":\n      return styles.yellow700BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"branded\":\n      return styles.gray900Color;\n    default:\n      return styles.whiteColor;\n  }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n  size?: (typeof Size)[number];\n  disabled?: boolean;\n  fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n  {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  [\"sm\"]: styles.smallGap,\n  [\"md\"]: styles.mediumGap,\n  [\"lg\"]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n  disabled = false,\n  fullWidth = false,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n}: {\n  /**\n   * If `true`, all buttons will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, all buttons will be full width.\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n}): ReactElement => {\n  const context = useMemo(\n    () => ({ disabled, fullWidth, size }),\n    [disabled, fullWidth, size],\n  );\n\n  const classnames = classNames(styles.buttonGroup, gap[size], {\n    [styles.horizontal]: orientation === \"horizontal\",\n    [styles.vertical]: orientation === \"vertical\",\n  });\n\n  return (\n    <ButtonGroupContext.Provider value={context}>\n      <div className={classnames}>{children}</div>\n    </ButtonGroupContext.Provider>\n  );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n  children,\n}: {\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { ReactElement, useContext } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * IconButton is a clickable element that is used to perform an action.\n */\nconst IconButton = ({\n  accessibilityLabel,\n  color = \"primary\",\n  disabled: disabledProp = false,\n  icon: Icon,\n  size: sizeProp = \"md\",\n  tooltip,\n  onClick,\n}: {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * The size of the button\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        styles.iconButton,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n      )}\n    >\n      <Icon className={iconSize[size]} />\n    </button>\n  );\n};\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_dzhn0_1\",\"sm\":\"_sm_dzhn0_46\",\"md\":\"_md_dzhn0_51\",\"lg\":\"_lg_dzhn0_56\",\"smIcon\":\"_smIcon_dzhn0_61\",\"mdIcon\":\"_mdIcon_dzhn0_68\",\"lgIcon\":\"_lgIcon_dzhn0_75\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n  children,\n}: {\n  /**\n   * The child components to render within MiniActionCard.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["module","classNames","classNames","import_classnames","import_react","React","import_jsx_runtime","classNames","import_react","import_classnames","import_jsx_runtime","classNames","import_jsx_runtime","import_jsx_runtime","import_classnames","import_react","import_jsx_runtime","iconSize","classNames","import_jsx_runtime"]}

package/dist/index.mjs

@@ -31,7 +31,7 @@ var require_classnames = __commonJS({
       "use strict";
       var hasOwn = {}.hasOwnProperty;
       var nativeCodeString = "[native code]";
-      function classNames4() {
+      function classNames5() {
         var classes = [];
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -42,7 +42,7 @@ var require_classnames = __commonJS({
             classes.push(arg);
           } else if (Array.isArray(arg)) {
             if (arg.length) {
-              var inner = classNames4.apply(null, arg);
+              var inner = classNames5.apply(null, arg);
               if (inner) {
                 classes.push(inner);
               }
@@ -62,14 +62,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames4.default = classNames4;
-        module.exports = classNames4;
+        classNames5.default = classNames5;
+        module.exports = classNames5;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames4;
+          return classNames5;
         });
       } else {
-        window.classNames = classNames4;
+        window.classNames = classNames5;
       }
     })();
   }
@@ -102,51 +102,24 @@ var Avatar_default = Avatar;
 // src/Button/Button.tsx
 var import_classnames2 = __toESM(require_classnames());
 
-// src/constants.ts
-var Color = {
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  TERTIARY: "tertiary",
-  BRANDED: "branded",
-  DESTRUCTIVE_PRIMARY: "destructive-primary",
-  DESTRUCTIVE_SECONDARY: "destructive-secondary",
-  DESTRUCTIVE_TERTIARY: "destructive-tertiary",
-  SUCCESS: "success",
-  GRAY200: "gray200",
-  GRAY700: "gray700",
-  GRAY800: "gray800",
-  GRAY900: "gray900",
-  WHITE: "white",
-  INHERIT: "inherit"
-};
-var Size = {
-  SMALL: "sm",
-  MEDIUM: "md",
-  LARGE: "lg"
-};
-var Orientation = {
-  HORIZONTAL: "horizontal",
-  VERTICAL: "vertical"
-};
-
 // css-module:./colors.module.css#css-module
 var colors_module_default = { "primary700Color": "_primary700Color_18uh7_2", "destructive700Color": "_destructive700Color_18uh7_6", "gray900Color": "_gray900Color_18uh7_10", "whiteColor": "_whiteColor_18uh7_14", "primary100BackgroundColor": "_primary100BackgroundColor_18uh7_19", "destructive700Background": "_destructive700Background_18uh7_23", "destructive100BackgroundColor": "_destructive100BackgroundColor_18uh7_27", "success700BackgroundColor": "_success700BackgroundColor_18uh7_31", "whiteBackgroundColor": "_whiteBackgroundColor_18uh7_35", "yellow700BackgroundColor": "_yellow700BackgroundColor_18uh7_39", "primary700BackgroundColor": "_primary700BackgroundColor_18uh7_43" };
 
 // src/colors/backgroundColor.ts
 function backgroundColor(color) {
   switch (color) {
-    case Color.SECONDARY:
+    case "secondary":
       return colors_module_default.primary100BackgroundColor;
-    case Color.DESTRUCTIVE_PRIMARY:
+    case "destructive-primary":
       return colors_module_default.destructive700Background;
-    case Color.DESTRUCTIVE_SECONDARY:
+    case "destructive-secondary":
       return colors_module_default.destructive100BackgroundColor;
-    case Color.SUCCESS:
+    case "success":
       return colors_module_default.success700BackgroundColor;
-    case Color.TERTIARY:
-    case Color.DESTRUCTIVE_TERTIARY:
+    case "tertiary":
+    case "destructive-tertiary":
       return colors_module_default.whiteBackgroundColor;
-    case Color.BRANDED:
+    case "branded":
       return colors_module_default.yellow700BackgroundColor;
     default:
       return colors_module_default.primary700BackgroundColor;
@@ -156,13 +129,13 @@ function backgroundColor(color) {
 // src/colors/foregroundColor.ts
 function foregroundColor(color) {
   switch (color) {
-    case Color.SECONDARY:
-    case Color.TERTIARY:
+    case "secondary":
+    case "tertiary":
       return colors_module_default.primary700Color;
-    case Color.DESTRUCTIVE_SECONDARY:
-    case Color.DESTRUCTIVE_TERTIARY:
+    case "destructive-secondary":
+    case "destructive-tertiary":
       return colors_module_default.destructive700Color;
-    case Color.BRANDED:
+    case "branded":
       return colors_module_default.gray900Color;
     default:
       return colors_module_default.whiteColor;
@@ -187,25 +160,25 @@ var Button_module_default = { "button": "_button_6lbba_1", "buttonGap": "_button
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var textVariant = {
   // Replace with `Typography` once it lands in `syntax-core`
-  [Size.SMALL]: Button_module_default.buttonTextSmall,
-  [Size.MEDIUM]: Button_module_default.buttonTextMedium,
-  [Size.LARGE]: Button_module_default.buttonTextLarge
+  ["sm"]: Button_module_default.buttonTextSmall,
+  ["md"]: Button_module_default.buttonTextMedium,
+  ["lg"]: Button_module_default.buttonTextLarge
 };
 var loadingIconSize = {
-  [Size.SMALL]: 16,
-  [Size.MEDIUM]: 20,
-  [Size.LARGE]: 24
+  ["sm"]: 16,
+  ["md"]: 20,
+  ["lg"]: 24
 };
 var iconSize = {
-  [Size.SMALL]: Button_module_default.smIcon,
-  [Size.MEDIUM]: Button_module_default.mdIcon,
-  [Size.LARGE]: Button_module_default.lgIcon
+  ["sm"]: Button_module_default.smIcon,
+  ["md"]: Button_module_default.mdIcon,
+  ["lg"]: Button_module_default.lgIcon
 };
 var Button = ({
   text,
   loadingText,
-  color = Color.PRIMARY,
-  size: sizeProp = Size.MEDIUM,
+  color = "primary",
+  size: sizeProp = "md",
   accessibilityLabel,
   disabled: disabledProp = false,
   loading = false,
@@ -234,7 +207,7 @@ var Button = ({
         Button_module_default[size],
         {
           [Button_module_default.fullWidth]: fullWidth,
-          [Button_module_default.buttonGap]: size === Size.LARGE || size === Size.MEDIUM
+          [Button_module_default.buttonGap]: size === "lg" || size === "md"
         }
       ),
       children: [
@@ -277,15 +250,15 @@ var ButtonGroup_module_default = { "buttonGroup": "_buttonGroup_184aa_1", "horiz
 var import_classnames3 = __toESM(require_classnames());
 import { jsx as jsx3 } from "react/jsx-runtime";
 var gap = {
-  [Size.SMALL]: ButtonGroup_module_default.smallGap,
-  [Size.MEDIUM]: ButtonGroup_module_default.mediumGap,
-  [Size.LARGE]: ButtonGroup_module_default.largeGap
+  ["sm"]: ButtonGroup_module_default.smallGap,
+  ["md"]: ButtonGroup_module_default.mediumGap,
+  ["lg"]: ButtonGroup_module_default.largeGap
 };
 var ButtonGroup = ({
   disabled = false,
   fullWidth = false,
-  orientation = Orientation.HORIZONTAL,
-  size = Size.MEDIUM,
+  orientation = "horizontal",
+  size = "md",
   children
 }) => {
   const context = useMemo(
@@ -293,8 +266,8 @@ var ButtonGroup = ({
     [disabled, fullWidth, size]
   );
   const classnames = (0, import_classnames3.default)(ButtonGroup_module_default.buttonGroup, gap[size], {
-    [ButtonGroup_module_default.horizontal]: orientation === Orientation.HORIZONTAL,
-    [ButtonGroup_module_default.vertical]: orientation === Orientation.VERTICAL
+    [ButtonGroup_module_default.horizontal]: orientation === "horizontal",
+    [ButtonGroup_module_default.vertical]: orientation === "vertical"
   });
   return /* @__PURE__ */ jsx3(ButtonGroupContext_default.Provider, { value: context, children: /* @__PURE__ */ jsx3("div", { className: classnames, children }) });
 };
@@ -320,14 +293,60 @@ function Divider({}) {
 }
 Divider.displayName = "Divider";
 
+// src/IconButton/IconButton.tsx
+var import_classnames4 = __toESM(require_classnames());
+import { useContext as useContext2 } from "react";
+
+// css-module:./IconButton.module.css#css-module
+var IconButton_module_default = { "iconButton": "_iconButton_dzhn0_1", "sm": "_sm_dzhn0_46", "md": "_md_dzhn0_51", "lg": "_lg_dzhn0_56", "smIcon": "_smIcon_dzhn0_61", "mdIcon": "_mdIcon_dzhn0_68", "lgIcon": "_lgIcon_dzhn0_75" };
+
+// src/IconButton/IconButton.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var iconSize2 = {
+  ["sm"]: IconButton_module_default.smIcon,
+  ["md"]: IconButton_module_default.mdIcon,
+  ["lg"]: IconButton_module_default.lgIcon
+};
+var IconButton = ({
+  accessibilityLabel,
+  color = "primary",
+  disabled: disabledProp = false,
+  icon: Icon,
+  size: sizeProp = "md",
+  tooltip,
+  onClick
+}) => {
+  const contextProps = useContext2(ButtonGroupContext_default);
+  const size = (contextProps == null ? void 0 : contextProps.size) || sizeProp;
+  const disabled = (contextProps == null ? void 0 : contextProps.disabled) || disabledProp;
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      "aria-label": accessibilityLabel,
+      type: "button",
+      title: tooltip,
+      disabled,
+      onClick,
+      className: (0, import_classnames4.default)(
+        IconButton_module_default.iconButton,
+        foregroundColor(color),
+        backgroundColor(color),
+        IconButton_module_default[size]
+      ),
+      children: /* @__PURE__ */ jsx6(Icon, { className: iconSize2[size] })
+    }
+  );
+};
+var IconButton_default = IconButton;
+
 // css-module:./MiniActionCard.module.css#css-module
 var MiniActionCard_module_default = { "miniActionCard": "_miniActionCard_qebkn_1", "card": "_card_qebkn_9" };
 
 // src/MiniActionCard/MiniActionCard.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MiniActionCard = ({
   children
-}) => /* @__PURE__ */ jsx6("div", { className: MiniActionCard_module_default.miniActionCard, children });
+}) => /* @__PURE__ */ jsx7("div", { className: MiniActionCard_module_default.miniActionCard, children });
 var MiniActionCard_default = MiniActionCard;
 export {
   Avatar_default as Avatar,
@@ -335,6 +354,7 @@ export {
   ButtonGroup_default as ButtonGroup,
   Card_default as Card,
   Divider,
+  IconButton_default as IconButton,
   MiniActionCard_default as MiniActionCard
 };
 /*! Bundled license information:

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","../src/constants.ts","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * Size of the avatar.\n   * sm: 24px, md: 40px, lg: 72px, xl: 128px.\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, ColorValue, Size, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n  // Replace with `Typography` once it lands in `syntax-core`\n  [Size.SMALL]: styles.buttonTextSmall,\n  [Size.MEDIUM]: styles.buttonTextMedium,\n  [Size.LARGE]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n  [Size.SMALL]: 16,\n  [Size.MEDIUM]: 20,\n  [Size.LARGE]: 24,\n};\n\nconst iconSize = {\n  [Size.SMALL]: styles.smIcon,\n  [Size.MEDIUM]: styles.mdIcon,\n  [Size.LARGE]: styles.lgIcon,\n};\n\nconst Button = ({\n  text,\n  loadingText,\n  color = Color.PRIMARY,\n  size: sizeProp = Size.MEDIUM,\n  accessibilityLabel,\n  disabled: disabledProp = false,\n  loading = false,\n  fullWidth: fullWidthProp = false,\n  startIcon: StartIcon,\n  endIcon: EndIcon,\n  onClick,\n  tooltip,\n}: {\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: ColorValue;\n  /**\n   * The size of the button\n   *\n   * @defaultValue \"medium\"\n   */\n  size?: SizeValue;\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n  const fullWidth = contextProps?.fullWidth || fullWidthProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled || loading}\n      onClick={onClick}\n      className={classNames(\n        styles.button,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n        {\n          [styles.fullWidth]: fullWidth,\n          [styles.buttonGap]: size === Size.LARGE || size === Size.MEDIUM,\n        },\n      )}\n    >\n      {!loading && StartIcon && (\n        <StartIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {((loading && loadingText) || (!loading && text)) && (\n        <div className={styles.textContainer}>\n          {/* Replace with `Typography` once it lands in `syntax-core` */}\n          <div className={classNames(styles.buttonText, textVariant[size])}>\n            {loading ? loadingText : text}\n          </div>\n        </div>\n      )}\n      {!loading && EndIcon && (\n        <EndIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {loading && (\n        <svg\n          className={classNames(styles.loading, foregroundColor(color))}\n          viewBox=\"22 22 44 44\"\n          width={loadingIconSize[size]}\n          height={loadingIconSize[size]}\n        >\n          <circle\n            className={styles.loadingCircle}\n            cx=\"44\"\n            cy=\"44\"\n            r=\"20.2\"\n            fill=\"none\"\n            strokeWidth=\"3.6\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n","export const Color = {\n  PRIMARY: \"primary\",\n  SECONDARY: \"secondary\",\n  TERTIARY: \"tertiary\",\n  BRANDED: \"branded\",\n  DESTRUCTIVE_PRIMARY: \"destructive-primary\",\n  DESTRUCTIVE_SECONDARY: \"destructive-secondary\",\n  DESTRUCTIVE_TERTIARY: \"destructive-tertiary\",\n  SUCCESS: \"success\",\n  GRAY200: \"gray200\",\n  GRAY700: \"gray700\",\n  GRAY800: \"gray800\",\n  GRAY900: \"gray900\",\n  WHITE: \"white\",\n  INHERIT: \"inherit\",\n} as const;\n\nexport type ColorKeys = keyof typeof Color;\nexport type ColorValue = (typeof Color)[ColorKeys];\n\nexport const Size = {\n  SMALL: \"sm\",\n  MEDIUM: \"md\",\n  LARGE: \"lg\",\n} as const;\n\nexport type SizeKeys = keyof typeof Size;\nexport type SizeValue = (typeof Size)[SizeKeys];\n\nexport const Orientation = {\n  HORIZONTAL: \"horizontal\",\n  VERTICAL: \"vertical\",\n} as const;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: ColorValue): string {\n  switch (color) {\n    case Color.SECONDARY:\n      return styles.primary100BackgroundColor;\n    case Color.DESTRUCTIVE_PRIMARY:\n      return styles.destructive700Background;\n    case Color.DESTRUCTIVE_SECONDARY:\n      return styles.destructive100BackgroundColor;\n    case Color.SUCCESS:\n      return styles.success700BackgroundColor;\n    case Color.TERTIARY:\n    case Color.DESTRUCTIVE_TERTIARY:\n      return styles.whiteBackgroundColor;\n    case Color.BRANDED:\n      return styles.yellow700BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n","import { Color, ColorValue } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: ColorValue): string {\n  switch (color) {\n    case Color.SECONDARY:\n    case Color.TERTIARY:\n      return styles.primary700Color;\n    case Color.DESTRUCTIVE_SECONDARY:\n    case Color.DESTRUCTIVE_TERTIARY:\n      return styles.destructive700Color;\n    case Color.BRANDED:\n      return styles.gray900Color;\n    default:\n      return styles.whiteColor;\n  }\n}\n","import { SizeValue } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n  size?: SizeValue;\n  disabled?: boolean;\n  fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n  {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size, Orientation, SizeValue } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  [Size.SMALL]: styles.smallGap,\n  [Size.MEDIUM]: styles.mediumGap,\n  [Size.LARGE]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n  disabled = false,\n  fullWidth = false,\n  orientation = Orientation.HORIZONTAL,\n  size = Size.MEDIUM,\n  children,\n}: {\n  /**\n   * If `true`, all buttons will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, all buttons will be full width.\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group\n   *\n   * @defaultValue \"medium\"\n   */\n  size?: SizeValue;\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n}): ReactElement => {\n  const context = useMemo(\n    () => ({ disabled, fullWidth, size }),\n    [disabled, fullWidth, size],\n  );\n\n  const classnames = classNames(styles.buttonGroup, gap[size], {\n    [styles.horizontal]: orientation === Orientation.HORIZONTAL,\n    [styles.vertical]: orientation === Orientation.VERTICAL,\n  });\n\n  return (\n    <ButtonGroupContext.Provider value={context}>\n      <div className={classnames}>{children}</div>\n    </ButtonGroupContext.Provider>\n  );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n  children,\n}: {\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n  children,\n}: {\n  /**\n   * The child components to render within MiniActionCard.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["classNames","classNames","import_classnames","jsx","classNames","import_classnames","jsx","classNames","jsx","jsx","jsx"]}
+{"version":3,"sources":["../../../node_modules/classnames/index.js","../src/Avatar/Avatar.tsx","css-module:./Avatar.module.css#css-module","../src/Button/Button.tsx","css-module:./colors.module.css#css-module","../src/colors/backgroundColor.ts","../src/colors/foregroundColor.ts","../src/ButtonGroup/ButtonGroupContext.tsx","css-module:./Button.module.css#css-module","../src/ButtonGroup/ButtonGroup.tsx","css-module:./ButtonGroup.module.css#css-module","css-module:./Card.module.css#css-module","../src/Card/Card.tsx","css-module:./Divider.module.css#css-module","../src/Divider/Divider.tsx","../src/IconButton/IconButton.tsx","css-module:./IconButton.module.css#css-module","css-module:./MiniActionCard.module.css#css-module","../src/MiniActionCard/MiniActionCard.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import classNames from \"classnames\";\nimport styles from \"./Avatar.module.css\";\n\n/**\n * Avatar is a circular image that represents a user.\n */\nconst Avatar = ({\n  src,\n  accessibilityLabel,\n  size = \"md\",\n}: {\n  /**\n   * URL of the image to display as the avatar.\n   */\n  src: string;\n  /**\n   * Alt text to use for the image.\n   * This should describe the image to people using screen readers.\n   */\n  accessibilityLabel: string;\n  /**\n   * Size of the avatar.\n   *\n   * `sm`: 24px, `md`: 40px, `lg`: 72px, `xl`: 128px\n   *\n   * @defaultValue `md`\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}): JSX.Element => {\n  return (\n    <img\n      alt={accessibilityLabel}\n      src={src}\n      className={classNames(styles.avatar, styles[size])}\n    />\n  );\n};\n\nexport default Avatar;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Avatar/Avatar.module.css\"; export default {\"avatar\":\"_avatar_1s8z7_1\",\"sm\":\"_sm_1s8z7_8\",\"md\":\"_md_1s8z7_13\",\"lg\":\"_lg_1s8z7_18\",\"xl\":\"_xl_1s8z7_23\"}","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { useContext, ReactElement } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\nimport styles from \"./Button.module.css\";\n\nconst textVariant = {\n  // Replace with `Typography` once it lands in `syntax-core`\n  [\"sm\"]: styles.buttonTextSmall,\n  [\"md\"]: styles.buttonTextMedium,\n  [\"lg\"]: styles.buttonTextLarge,\n} as const;\n\nconst loadingIconSize = {\n  [\"sm\"]: 16,\n  [\"md\"]: 20,\n  [\"lg\"]: 24,\n};\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * Button is a clickable element that is used to perform an action.\n */\nconst Button = ({\n  text,\n  loadingText,\n  color = \"primary\",\n  size: sizeProp = \"md\",\n  accessibilityLabel,\n  disabled: disabledProp = false,\n  loading = false,\n  fullWidth: fullWidthProp = false,\n  startIcon: StartIcon,\n  endIcon: EndIcon,\n  onClick,\n  tooltip,\n}: {\n  /**\n   * The text to be displayed inside the button\n   */\n  text: string;\n  /**\n   * The text to be displayed inside the button when it is in a loading state\n   */\n  loadingText?: string;\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * The size of the button\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be in a loading state\n   *\n   * @defaultValue false\n   */\n  loading?: boolean;\n  /**\n   * If `true`, the button will take up the full width of its container\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  startIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  endIcon?: React.ComponentType<{ className: string }>;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n  const fullWidth = contextProps?.fullWidth || fullWidthProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled || loading}\n      onClick={onClick}\n      className={classNames(\n        styles.button,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n        {\n          [styles.fullWidth]: fullWidth,\n          [styles.buttonGap]: size === \"lg\" || size === \"md\",\n        },\n      )}\n    >\n      {!loading && StartIcon && (\n        <StartIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {((loading && loadingText) || (!loading && text)) && (\n        <div className={styles.textContainer}>\n          {/* Replace with `Typography` once it lands in `syntax-core` */}\n          <div className={classNames(styles.buttonText, textVariant[size])}>\n            {loading ? loadingText : text}\n          </div>\n        </div>\n      )}\n      {!loading && EndIcon && (\n        <EndIcon className={classNames(styles.icon, iconSize[size])} />\n      )}\n      {loading && (\n        <svg\n          className={classNames(styles.loading, foregroundColor(color))}\n          viewBox=\"22 22 44 44\"\n          width={loadingIconSize[size]}\n          height={loadingIconSize[size]}\n        >\n          <circle\n            className={styles.loadingCircle}\n            cx=\"44\"\n            cy=\"44\"\n            r=\"20.2\"\n            fill=\"none\"\n            strokeWidth=\"3.6\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/colors/colors.module.css\"; export default {\"primary700Color\":\"_primary700Color_18uh7_2\",\"destructive700Color\":\"_destructive700Color_18uh7_6\",\"gray900Color\":\"_gray900Color_18uh7_10\",\"whiteColor\":\"_whiteColor_18uh7_14\",\"primary100BackgroundColor\":\"_primary100BackgroundColor_18uh7_19\",\"destructive700Background\":\"_destructive700Background_18uh7_23\",\"destructive100BackgroundColor\":\"_destructive100BackgroundColor_18uh7_27\",\"success700BackgroundColor\":\"_success700BackgroundColor_18uh7_31\",\"whiteBackgroundColor\":\"_whiteBackgroundColor_18uh7_35\",\"yellow700BackgroundColor\":\"_yellow700BackgroundColor_18uh7_39\",\"primary700BackgroundColor\":\"_primary700BackgroundColor_18uh7_43\"}","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function backgroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n      return styles.primary100BackgroundColor;\n    case \"destructive-primary\":\n      return styles.destructive700Background;\n    case \"destructive-secondary\":\n      return styles.destructive100BackgroundColor;\n    case \"success\":\n      return styles.success700BackgroundColor;\n    case \"tertiary\":\n    case \"destructive-tertiary\":\n      return styles.whiteBackgroundColor;\n    case \"branded\":\n      return styles.yellow700BackgroundColor;\n    default:\n      return styles.primary700BackgroundColor;\n  }\n}\n","import { Color } from \"../constants\";\nimport styles from \"./colors.module.css\";\n\nexport default function foregroundColor(color: (typeof Color)[number]): string {\n  switch (color) {\n    case \"secondary\":\n    case \"tertiary\":\n      return styles.primary700Color;\n    case \"destructive-secondary\":\n    case \"destructive-tertiary\":\n      return styles.destructive700Color;\n    case \"branded\":\n      return styles.gray900Color;\n    default:\n      return styles.whiteColor;\n  }\n}\n","import { Size } from \"../constants\";\nimport React from \"react\";\n\ninterface ButtonGroupContextType {\n  size?: (typeof Size)[number];\n  disabled?: boolean;\n  fullWidth?: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(\n  {},\n);\n\nButtonGroupContext.displayName = \"ButtonGroupContext\";\n\nexport default ButtonGroupContext;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Button/Button.module.css\"; export default {\"button\":\"_button_6lbba_1\",\"buttonGap\":\"_buttonGap_6lbba_9\",\"fullWidth\":\"_fullWidth_6lbba_50\",\"sm\":\"_sm_6lbba_54\",\"md\":\"_md_6lbba_61\",\"lg\":\"_lg_6lbba_68\",\"icon\":\"_icon_6lbba_75\",\"smIcon\":\"_smIcon_6lbba_79\",\"mdIcon\":\"_mdIcon_6lbba_86\",\"lgIcon\":\"_lgIcon_6lbba_93\",\"textContainer\":\"_textContainer_6lbba_100\",\"loading\":\"_loading_6lbba_115\",\"syntaxButtonLoadingRotate\":\"_syntaxButtonLoadingRotate_6lbba_1\",\"loadingCircle\":\"_loadingCircle_6lbba_119\",\"buttonText\":\"_buttonText_6lbba_127\",\"buttonTextSmall\":\"_buttonTextSmall_6lbba_134\",\"buttonTextMedium\":\"_buttonTextMedium_6lbba_138\",\"buttonTextLarge\":\"_buttonTextLarge_6lbba_142\"}","import { useMemo, ReactElement, ReactNode } from \"react\";\nimport styles from \"./ButtonGroup.module.css\";\nimport { Size } from \"../constants\";\nimport ButtonGroupContext from \"./ButtonGroupContext\";\nimport classNames from \"classnames\";\n\nconst gap = {\n  [\"sm\"]: styles.smallGap,\n  [\"md\"]: styles.mediumGap,\n  [\"lg\"]: styles.largeGap,\n} as const;\n\n/**\n * Group buttons to render them in a row or column with consistent spacing in between each button\n */\nconst ButtonGroup = ({\n  disabled = false,\n  fullWidth = false,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n}: {\n  /**\n   * If `true`, all buttons will be disabled.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, all buttons will be full width.\n   *\n   * @defaultValue false\n   */\n  fullWidth?: boolean;\n  /**\n   * The orientation of the button group\n   *\n   * @defaultValue \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The size of the button group\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * Buttons to be rendered inside the button group\n   */\n  children?: ReactNode;\n}): ReactElement => {\n  const context = useMemo(\n    () => ({ disabled, fullWidth, size }),\n    [disabled, fullWidth, size],\n  );\n\n  const classnames = classNames(styles.buttonGroup, gap[size], {\n    [styles.horizontal]: orientation === \"horizontal\",\n    [styles.vertical]: orientation === \"vertical\",\n  });\n\n  return (\n    <ButtonGroupContext.Provider value={context}>\n      <div className={classnames}>{children}</div>\n    </ButtonGroupContext.Provider>\n  );\n};\n\nexport default ButtonGroup;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/ButtonGroup/ButtonGroup.module.css\"; export default {\"buttonGroup\":\"_buttonGroup_184aa_1\",\"horizontal\":\"_horizontal_184aa_6\",\"vertical\":\"_vertical_184aa_10\",\"smallGap\":\"_smallGap_184aa_14\",\"mediumGap\":\"_mediumGap_184aa_18\",\"largeGap\":\"_largeGap_184aa_22\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Card/Card.module.css\"; export default {\"card\":\"_card_hvz2b_1\"}","import styles from \"./Card.module.css\";\n\n/**\n * Card is a basic container component to apply consistent styling and render child components.\n */\nconst Card = ({\n  children,\n}: {\n  /**\n   * The child components to render within Card.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.card}>{children}</div>;\n\nexport default Card;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/Divider/Divider.module.css\"; export default {\"divider\":\"_divider_1ddgq_1\"}","import styles from \"./Divider.module.css\";\n\n/**\n * Divider is a thin horizontal line to group content in lists and layouts.\n */\nexport default function Divider({}: Record<string, never>) {\n  return <hr className={styles.divider} />;\n}\n\nDivider.displayName = \"Divider\";\n","import classNames from \"classnames\";\nimport backgroundColor from \"../colors//backgroundColor\";\nimport foregroundColor from \"../colors/foregroundColor\";\nimport React, { ReactElement, useContext } from \"react\";\nimport { Color, Size } from \"../constants\";\nimport styles from \"./IconButton.module.css\";\nimport ButtonGroupContext from \"../ButtonGroup/ButtonGroupContext\";\n\nconst iconSize = {\n  [\"sm\"]: styles.smIcon,\n  [\"md\"]: styles.mdIcon,\n  [\"lg\"]: styles.lgIcon,\n};\n\n/**\n * IconButton is a clickable element that is used to perform an action.\n */\nconst IconButton = ({\n  accessibilityLabel,\n  color = \"primary\",\n  disabled: disabledProp = false,\n  icon: Icon,\n  size: sizeProp = \"md\",\n  tooltip,\n  onClick,\n}: {\n  /**\n   * The color of the button\n   *\n   * @defaultValue \"primary\"\n   */\n  color?: (typeof Color)[number];\n  /**\n   * The size of the button\n   *\n   * `sm`: 32px, `md`: 40px, `lg`: 48px\n   *\n   * @defaultValue \"md\"\n   */\n  size?: (typeof Size)[number];\n  /**\n   * The label to be used for accessibility\n   */\n  accessibilityLabel?: string;\n  /**\n   * The icon to be displayed. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)\n   */\n  icon: React.ComponentType<{ className: string }>;\n  /**\n   * If `true`, the button will be disabled\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The callback to be called when the button is clicked\n   */\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The tooltip to be displayed when the user hovers over the button\n   */\n  tooltip?: string;\n}): ReactElement => {\n  const contextProps = useContext(ButtonGroupContext);\n\n  const size = contextProps?.size || sizeProp;\n  const disabled = contextProps?.disabled || disabledProp;\n\n  return (\n    <button\n      aria-label={accessibilityLabel}\n      type=\"button\"\n      title={tooltip}\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        styles.iconButton,\n        foregroundColor(color),\n        backgroundColor(color),\n        styles[size],\n      )}\n    >\n      <Icon className={iconSize[size]} />\n    </button>\n  );\n};\n\nexport default IconButton;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/IconButton/IconButton.module.css\"; export default {\"iconButton\":\"_iconButton_dzhn0_1\",\"sm\":\"_sm_dzhn0_46\",\"md\":\"_md_dzhn0_51\",\"lg\":\"_lg_dzhn0_56\",\"smIcon\":\"_smIcon_dzhn0_61\",\"mdIcon\":\"_mdIcon_dzhn0_68\",\"lgIcon\":\"_lgIcon_dzhn0_75\"}","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/MiniActionCard/MiniActionCard.module.css\"; export default {\"miniActionCard\":\"_miniActionCard_qebkn_1\",\"card\":\"_card_qebkn_9\"}","import styles from \"./MiniActionCard.module.css\";\n\n/**\n * MiniActionCard is component that alerts users to a call to action.\n */\nconst MiniActionCard = ({\n  children,\n}: {\n  /**\n   * The child components to render within MiniActionCard.\n   */\n  children: JSX.Element;\n}): JSX.Element => <div className={styles.miniActionCard}>{children}</div>;\n\nexport default MiniActionCard;\n"],"mappings":"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","names":["classNames","classNames","import_classnames","jsx","classNames","import_classnames","jsx","classNames","jsx","jsx","import_classnames","useContext","jsx","iconSize","useContext","classNames","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cambly/syntax-core",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",