@charcoal-ui/react 4.0.0-beta.3 → 4.0.0-beta.4

package/dist/index.css

@@ -114,4 +114,90 @@
 .charcoal-button[data-full-width=true] {
   width: 100%;
 }
+
+/* src/components/Checkbox/index.css */
+.charcoal-checkbox__label {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+}
+.charcoal-checkbox__label[aria-disabled=true] {
+  cursor: default;
+  opacity: 0.32;
+}
+.charcoal-checkbox__label[aria-disabled=true] > input {
+  opacity: 1;
+}
+.charcoal-checkbox__text {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+  margin-left: 4px;
+}
+
+/* src/components/CheckboxInput/index.css */
+.charcoal-checkbox-input__root {
+  position: relative;
+}
+.charcoal-checkbox-input__input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  transition: 0.2s box-shadow, 0.2s background-color;
+}
+.charcoal-checkbox-input__input:disabled,
+.charcoal-checkbox-input__input[readonly] {
+  opacity: 0.32;
+  cursor: default;
+}
+.charcoal-checkbox-input__input:checked {
+  background-color: var(--charcoal-brand);
+}
+.charcoal-checkbox-input__input:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+.charcoal-checkbox-input__input:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-checkbox-input__input:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-checkbox-input__input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.charcoal-checkbox-input__input:checked:not(:disabled):hover {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-checkbox-input__input:checked:not(:disabled):active {
+  background-color: var(--charcoal-brand-press);
+}
+.charcoal-checkbox-input__input[aria-invalid=true],
+.charcoal-checkbox-input__input[aria-invalid=true]:not(:disabled):focus {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+.charcoal-checkbox-input__overlay {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  display: none;
+  pointer-events: none;
+}
+.charcoal-checkbox-input__input:checked + .charcoal-checkbox-input__overlay {
+  display: flex;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/index.css"],"sourcesContent":[".charcoal-button {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-style: none;\n  outline: none;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  width: -moz-min-content;\n  width: min-content;\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n  height: 40px;\n}\n\n.charcoal-button:disabled {\n  cursor: default;\n  opacity: 0.32;\n}\n\n.charcoal-button:not(:disabled):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-button:not(:disabled):hover {\n  color: var(--charcoal-text2-hover);\n  background-color: var(--charcoal-surface3-hover);\n}\n\n.charcoal-button:not(:disabled):active,\n.charcoal-button[data-active='true'] {\n  color: var(--charcoal-text2-press);\n  background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-button[data-variant='Primary'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-brand);\n}\n\n.charcoal-button[data-variant='Primary']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-button[data-variant='Primary']:active:not(:disabled),\n.charcoal-button[data-variant='Primary'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-button[data-variant='Overlay'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-surface4);\n}\n\n.charcoal-button[data-variant='Overlay']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-surface4-hover);\n}\n\n.charcoal-button[data-variant='Overlay']:active:not(:disabled),\n.charcoal-button[data-variant='Overlay'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-surface4-press);\n}\n\n.charcoal-button[data-variant='Navigation'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-surface6);\n}\n\n.charcoal-button[data-variant='Navigation']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-surface6-hover);\n}\n\n.charcoal-button[data-variant='Navigation']:active:not(:disabled),\n.charcoal-button[data-variant='Navigation'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-surface6-press);\n}\n\n.charcoal-button[data-variant='Danger'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-assertive);\n}\n.charcoal-button[data-variant='Danger']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-assertive-hover);\n}\n\n.charcoal-button[data-variant='Danger']:active:not(:disabled),\n.charcoal-button[data-variant='Danger'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-assertive-press);\n}\n\n.charcoal-button[data-size='S'] {\n  padding: 0 16px;\n  height: 32px;\n}\n\n.charcoal-button[data-full-width='true'] {\n  width: 100%;\n}\n"],"mappings":";AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;","names":[]}
+{"version":3,"sources":["../src/components/Button/index.css","../src/components/Checkbox/index.css","../src/components/CheckboxInput/index.css"],"sourcesContent":[".charcoal-button {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: 0 24px;\n  border-style: none;\n  outline: none;\n  text-rendering: inherit;\n  letter-spacing: inherit;\n  word-spacing: inherit;\n  text-decoration: none;\n  font: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  width: -moz-min-content;\n  width: min-content;\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  white-space: nowrap;\n  border-radius: 999999px;\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: bold;\n  color: var(--charcoal-text2);\n  background-color: var(--charcoal-surface3);\n  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;\n  height: 40px;\n}\n\n.charcoal-button:disabled {\n  cursor: default;\n  opacity: 0.32;\n}\n\n.charcoal-button:not(:disabled):focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n\n.charcoal-button:not(:disabled):hover {\n  color: var(--charcoal-text2-hover);\n  background-color: var(--charcoal-surface3-hover);\n}\n\n.charcoal-button:not(:disabled):active,\n.charcoal-button[data-active='true'] {\n  color: var(--charcoal-text2-press);\n  background-color: var(--charcoal-surface3-press);\n}\n\n.charcoal-button[data-variant='Primary'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-brand);\n}\n\n.charcoal-button[data-variant='Primary']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-brand-hover);\n}\n\n.charcoal-button[data-variant='Primary']:active:not(:disabled),\n.charcoal-button[data-variant='Primary'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-button[data-variant='Overlay'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-surface4);\n}\n\n.charcoal-button[data-variant='Overlay']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-surface4-hover);\n}\n\n.charcoal-button[data-variant='Overlay']:active:not(:disabled),\n.charcoal-button[data-variant='Overlay'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-surface4-press);\n}\n\n.charcoal-button[data-variant='Navigation'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-surface6);\n}\n\n.charcoal-button[data-variant='Navigation']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-surface6-hover);\n}\n\n.charcoal-button[data-variant='Navigation']:active:not(:disabled),\n.charcoal-button[data-variant='Navigation'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-surface6-press);\n}\n\n.charcoal-button[data-variant='Danger'] {\n  color: var(--charcoal-text5);\n  background-color: var(--charcoal-assertive);\n}\n.charcoal-button[data-variant='Danger']:hover:not(:disabled) {\n  color: var(--charcoal-text5-hover);\n  background-color: var(--charcoal-assertive-hover);\n}\n\n.charcoal-button[data-variant='Danger']:active:not(:disabled),\n.charcoal-button[data-variant='Danger'][data-active='true'] {\n  color: var(--charcoal-text5-press);\n  background-color: var(--charcoal-assertive-press);\n}\n\n.charcoal-button[data-size='S'] {\n  padding: 0 16px;\n  height: 32px;\n}\n\n.charcoal-button[data-full-width='true'] {\n  width: 100%;\n}\n",".charcoal-checkbox__label {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n}\n\n.charcoal-checkbox__label[aria-disabled='true'] {\n  cursor: default;\n  opacity: 0.32;\n}\n\n.charcoal-checkbox__label[aria-disabled='true'] > input {\n  opacity: 1;\n}\n\n.charcoal-checkbox__text {\n  color: var(--charcoal-text2);\n  font-size: 14px;\n  line-height: 20px;\n  margin-left: 4px;\n}\n","/* root div */\n\n.charcoal-checkbox-input__root {\n  position: relative;\n}\n\n/* input */\n\n.charcoal-checkbox-input__input {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  display: block;\n  cursor: pointer;\n  margin: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  transition: 0.2s box-shadow, 0.2s background-color;\n}\n\n.charcoal-checkbox-input__input:disabled,\n.charcoal-checkbox-input__input[readonly] {\n  opacity: 0.32;\n  cursor: default;\n}\n\n.charcoal-checkbox-input__input:checked {\n  background-color: var(--charcoal-brand);\n}\n\n.charcoal-checkbox-input__input:not(:checked) {\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--charcoal-text4);\n}\n\n.charcoal-checkbox-input__input:not(:disabled):focus {\n  outline: none;\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input__input:not(:disabled):focus-visible {\n  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);\n}\n.charcoal-checkbox-input__input:not(:disabled):focus:not(:focus-visible) {\n  box-shadow: none;\n}\n\n.charcoal-checkbox-input__input:checked:not(:disabled):hover {\n  background-color: var(--charcoal-brand-hover);\n}\n.charcoal-checkbox-input__input:checked:not(:disabled):active {\n  background-color: var(--charcoal-brand-press);\n}\n\n.charcoal-checkbox-input__input[aria-invalid='true'],\n.charcoal-checkbox-input__input[aria-invalid='true']:not(:disabled):focus {\n  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);\n}\n\n/* overlay div */\n\n.charcoal-checkbox-input__overlay {\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--charcoal-text5);\n  display: none;\n  pointer-events: none;\n}\n\n.charcoal-checkbox-input__input:checked + .charcoal-checkbox-input__overlay {\n  display: flex;\n}\n"],"mappings":";AAAA;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;AC/HF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACjBF;AACE;AAAA;AAKF;AACE;AACG;AACK;AACR;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;","names":[]}