@terraware/web-components 1.0.3 → 1.0.6

package/components/Autocomplete.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface Props {
+    id: string;
+    label: string;
+    values: string[];
+    onChange: (id: string, value: string) => void;
+    selected: string | undefined;
+    disabled?: boolean;
+    freeSolo: boolean;
+}
+export declare type DropdownItem = {
+    label: string;
+    value: string;
+};
+export default function Autocomplete({ id, label, values, onChange, selected, disabled, freeSolo, }: Props): JSX.Element;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/components/Autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/components/Autocomplete.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAyBrB"}

package/components/Autocomplete.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Autocomplete;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+function Autocomplete(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      values = _ref.values,
+      onChange = _ref.onChange,
+      selected = _ref.selected,
+      disabled = _ref.disabled,
+      freeSolo = _ref.freeSolo;
+
+  var onChangeHandler = function onChangeHandler(event, value) {
+    if (event) {
+      if (value) {
+        onChange(id, value);
+      } else {
+        onChange(id, '');
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_material.Autocomplete, {
+    disabled: disabled,
+    id: id,
+    options: values,
+    getOptionLabel: function getOptionLabel(option) {
+      return option ? option : '';
+    },
+    onChange: onChangeHandler,
+    onInputChange: onChangeHandler,
+    inputValue: selected,
+    freeSolo: freeSolo,
+    forcePopupIcon: true,
+    renderInput: function renderInput(params) {
+      return /*#__PURE__*/_react.default.createElement(_material.TextField, Object.assign({}, params, {
+        label: label,
+        variant: "outlined",
+        size: "small"
+      }));
+    }
+  });
+}

package/components/Button/Button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconName } from '../Icon/icons';
+import { Size } from '../Size';
+import './styles.scss';
+export interface Props {
+    onClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    label?: string;
+    type?: 'productive' | 'passive' | 'destructive';
+    priority?: 'primary' | 'secondary';
+    size?: Size;
+    disabled?: boolean;
+    icon?: IconName;
+    processing?: boolean;
+    id?: string;
+    className?: string;
+}
+export default function Button(props: Props): JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,aAAa,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4BxD"}

package/components/Button/Button.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Button;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+function Button(props) {
+  var onClick = props.onClick,
+      label = props.label,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'productive' : _props$type,
+      _props$priority = props.priority,
+      priority = _props$priority === void 0 ? 'primary' : _props$priority,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      disabled = props.disabled,
+      icon = props.icon,
+      processing = props.processing,
+      id = props.id,
+      className = props.className;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    id: id,
+    onClick: onClick,
+    className: "button ".concat(type, "-").concat(priority, " button--").concat(size, " ").concat(type, "-").concat(priority, "--").concat(size, " ").concat(icon && !processing ? 'button-with-icon' : '', " ").concat(!label ? 'button-no-label' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
+    disabled: disabled
+  }, processing && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "spinner",
+    size: size
+  }), !processing && icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: icon,
+    size: size
+  }), !processing && !!label && label);
+}

package/components/Button/button.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=button.test.d.ts.map

package/components/Button/button.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.test.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.test.tsx"],"names":[],"mappings":""}

package/components/Button/button.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+test('calls onClick prop when clicked', function () {
+  var handleClick = jest.fn();
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Button.default, {
+    onClick: handleClick,
+    label: "Click me"
+  }));
+
+  _react.fireEvent.click(_react.screen.getByText(/click me/i));
+
+  expect(handleClick).toHaveBeenCalledTimes(1);
+});
+test('should not call onClick prop when button is disabled', function () {
+  var handleClick = jest.fn();
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_Button.default, {
+    onClick: handleClick,
+    label: "Click me",
+    disabled: true
+  }));
+
+  _react.fireEvent.click(_react.screen.getByText(/click me/i));
+
+  expect(handleClick).toHaveBeenCalledTimes(0);
+});

package/components/Button/styles.scss

@@ -0,0 +1,443 @@
+@import '../../style-dictionary-dist/button_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.button {
+  border: 0;
+  border-style: solid;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--small {
+    height: $tw-sz-btn-small-height;
+    font-size: $tw-fnt-btn-label-small-font-size;
+    font-weight: $tw-fnt-btn-label-small-font-weight;
+    font-family: $tw-fnt-btn-label-small-font-family;
+    line-height: $tw-fnt-btn-label-small-line-height;
+    min-width: $tw-sz-btn-small-min-width;
+    padding: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2)
+      calc(#{$tw-sz-btn-small-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-small-height} / 2);
+
+    &:focus {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: calc(#{-$tw-sz-btn-stroke} * 2);
+        bottom: calc(#{-$tw-sz-btn-stroke} * 2);
+        left: calc(#{-$tw-sz-btn-stroke} * 2);
+        right: calc(#{-$tw-sz-btn-stroke} * 2);
+        border-radius: calc(#{$tw-sz-btn-small-height + $tw-sz-btn-stroke * 4} / 2);
+        border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
+      }
+    }
+
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-small-height} / 2) - (((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2))
+      );
+
+      .tw-icon--small {
+        margin-right: calc((#{$tw-sz-btn-small-height} - #{$tw-fnt-btn-label-small-line-height}) / 2);
+      }
+    }
+    &.button-no-label.button-with-icon {
+      padding: 6px;
+      .tw-icon--small {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--medium {
+    height: $tw-sz-btn-medium-height;
+    font-size: $tw-fnt-btn-label-medium-font-size;
+    font-weight: $tw-fnt-btn-label-medium-font-weight;
+    font-family: $tw-fnt-btn-label-medium-font-family;
+    line-height: $tw-fnt-btn-label-medium-line-height;
+    min-width: $tw-sz-btn-medium-min-width;
+    padding: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2)
+      calc(#{$tw-sz-btn-medium-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-medium-height} / 2);
+
+    &:focus {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: calc(#{-$tw-sz-btn-stroke} * 2);
+        bottom: calc(#{-$tw-sz-btn-stroke} * 2);
+        left: calc(#{-$tw-sz-btn-stroke} * 2);
+        right: calc(#{-$tw-sz-btn-stroke} * 2);
+        border-radius: calc(#{$tw-sz-btn-medium-height + $tw-sz-btn-stroke * 4} / 2);
+        border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
+      }
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-medium-height} / 2) -
+          (((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2))
+      );
+      .tw-icon--medium {
+        margin-right: calc((#{$tw-sz-btn-medium-height} - #{$tw-fnt-btn-label-medium-line-height}) / 2);
+      }
+    }
+    &.button-no-label.button-with-icon {
+      padding: 8px;
+      .tw-icon--medium {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--large {
+    height: $tw-sz-btn-large-height;
+    font-size: $tw-fnt-btn-label-large-font-size;
+    font-weight: $tw-fnt-btn-label-large-font-weight;
+    font-family: $tw-fnt-btn-label-large-font-family;
+    line-height: $tw-fnt-btn-label-large-line-height;
+    min-width: $tw-sz-btn-large-min-width;
+    padding: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2)
+      calc(#{$tw-sz-btn-large-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-large-height} / 2);
+
+    &:focus {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: calc(#{-$tw-sz-btn-stroke} * 2);
+        bottom: calc(#{-$tw-sz-btn-stroke} * 2);
+        left: calc(#{-$tw-sz-btn-stroke} * 2);
+        right: calc(#{-$tw-sz-btn-stroke} * 2);
+        border-radius: calc(#{$tw-sz-btn-large-height + $tw-sz-btn-stroke * 4} / 2);
+        border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
+      }
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-large-height} / 2) - (((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2))
+      );
+      .tw-icon--large {
+        margin-right: calc((#{$tw-sz-btn-large-height} - #{$tw-fnt-btn-label-large-line-height}) / 2);
+      }
+    }
+    &.button-no-label.button-with-icon {
+      padding: 10px;
+      .tw-icon--large {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &--xlarge {
+    height: $tw-sz-btn-x-large-height;
+    font-size: $tw-fnt-btn-label-x-large-font-size;
+    font-weight: $tw-fnt-btn-label-x-large-font-weight;
+    font-family: $tw-fnt-btn-label-x-large-font-family;
+    line-height: $tw-fnt-btn-label-x-large-line-height;
+    min-width: $tw-sz-btn-x-large-min-width;
+    padding: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2)
+      calc(#{$tw-sz-btn-x-large-height}/ 2);
+    border-radius: calc(#{$tw-sz-btn-x-large-height} / 2);
+
+    &:focus {
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: calc(#{-$tw-sz-btn-stroke} * 2);
+        bottom: calc(#{-$tw-sz-btn-stroke} * 2);
+        left: calc(#{-$tw-sz-btn-stroke} * 2);
+        right: calc(#{-$tw-sz-btn-stroke} * 2);
+        border-radius: calc(#{$tw-sz-btn-x-large-height + $tw-sz-btn-stroke * 4} / 2);
+        border: $tw-sz-btn-stroke solid $tw-clr-btn-stroke-focus;
+      }
+    }
+    &.button-with-icon {
+      padding-left: calc(
+        (#{$tw-sz-btn-x-large-height} / 2) -
+          (((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2))
+      );
+      .tw-icon--xlarge {
+        margin-right: calc((#{$tw-sz-btn-x-large-height} - #{$tw-fnt-btn-label-x-large-line-height}) / 2);
+      }
+    }
+
+    &.button-no-label.button-with-icon {
+      padding: 12px;
+      .tw-icon--xlarge {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.button-no-label {
+    min-width: auto;
+  }
+}
+
+.productive-primary {
+  background-color: $tw-clr-btn-productive-primary-fill;
+  color: $tw-clr-btn-productive-primary-label;
+
+  svg {
+    fill: $tw-clr-btn-productive-primary-label;
+  }
+
+  &:hover {
+    background: $tw-clr-btn-productive-primary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-productive-primary-fill-active;
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-productive-primary-fill, 0.4);
+    color: rgba($tw-clr-btn-productive-primary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-productive-primary-label, 0.4);
+    }
+  }
+}
+
+.productive-secondary {
+  background-color: $tw-clr-btn-productive-secondary-fill;
+  color: $tw-clr-btn-productive-secondary-label;
+  svg {
+    fill: $tw-clr-btn-productive-secondary-label;
+  }
+
+  border: $tw-sz-btn-stroke solid $tw-clr-btn-productive-secondary-stroke;
+  &:hover {
+    background: $tw-clr-btn-productive-secondary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-productive-secondary-fill-active;
+  }
+
+  &:focus {
+    &:after {
+      top: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      bottom: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      left: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      right: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+    }
+  }
+
+  &--small {
+    padding: calc(
+        (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--medium {
+    padding: calc(
+        (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--large {
+    padding: calc(
+        (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--xlarge {
+    padding: calc(
+        (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-productive-secondary-fill, 0.4);
+    border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-productive-secondary-stroke, 0.4);
+    color: rgba($tw-clr-btn-productive-secondary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-productive-secondary-label, 0.4);
+    }
+  }
+}
+
+.passive-primary {
+  background-color: $tw-clr-btn-passive-primary-fill;
+  color: $tw-clr-btn-passive-primary-label;
+  svg {
+    fill: $tw-clr-btn-passive-primary-label;
+  }
+  &:hover {
+    background: $tw-clr-btn-passive-primary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-passive-primary-fill-active;
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-passive-primary-fill, 0.4);
+    color: rgba($tw-clr-btn-passive-primary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-passive-primary-label, 0.4);
+    }
+  }
+}
+
+.passive-secondary {
+  background-color: $tw-clr-btn-passive-secondary-fill;
+  color: $tw-clr-btn-passive-secondary-label;
+  svg {
+    fill: $tw-clr-btn-passive-secondary-label;
+  }
+  border: $tw-sz-btn-stroke solid $tw-clr-btn-passive-secondary-stroke;
+  &:hover {
+    background: $tw-clr-btn-passive-secondary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-passive-secondary-fill-active;
+  }
+
+  &:focus {
+    &:after {
+      top: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      bottom: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      left: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      right: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+    }
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-passive-secondary-fill, 0.4);
+    border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-passive-secondary-stroke, 0.4);
+    color: rgba($tw-clr-btn-passive-secondary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-passive-secondary-label, 0.4);
+    }
+  }
+
+  &--small {
+    padding: calc(
+        (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--medium {
+    padding: calc(
+        (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--large {
+    padding: calc(
+        (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--xlarge {
+    padding: calc(
+        (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+}
+
+.destructive-primary {
+  background-color: $tw-clr-btn-destructive-primary-fill;
+  color: $tw-clr-btn-destructive-primary-label;
+  svg {
+    fill: $tw-clr-btn-destructive-primary-label;
+  }
+  &:hover {
+    background: $tw-clr-btn-destructive-primary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-destructive-primary-fill-active;
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-destructive-primary-fill, 0.4);
+    color: rgba($tw-clr-btn-destructive-primary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-destructive-primary-label, 0.4);
+    }
+  }
+}
+
+.destructive-secondary {
+  background-color: $tw-clr-btn-destructive-secondary-fill;
+  color: $tw-clr-btn-destructive-secondary-label;
+  svg {
+    fill: $tw-clr-btn-destructive-secondary-label;
+  }
+  border: $tw-sz-btn-stroke solid $tw-clr-btn-destructive-secondary-stroke;
+  &:hover {
+    background: $tw-clr-btn-destructive-secondary-fill-hover;
+  }
+
+  &:active {
+    background-color: $tw-clr-btn-destructive-secondary-fill-active;
+  }
+
+  &:disabled {
+    background-color: rgba($tw-clr-btn-destructive-secondary-fill, 0.4);
+    border: $tw-sz-btn-stroke solid rgba($tw-clr-btn-destructive-secondary-stroke, 0.4);
+    color: rgba($tw-clr-btn-destructive-secondary-label, 0.4);
+    svg {
+      fill: rgba($tw-clr-btn-destructive-secondary-label, 0.4);
+    }
+  }
+
+  &:focus {
+    &:after {
+      top: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      bottom: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      left: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+      right: calc((#{-$tw-sz-btn-stroke} * 2) + #{-$tw-sz-btn-stroke});
+    }
+  }
+
+  &--small {
+    padding: calc(
+        (#{$tw-sz-btn-small-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-small-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-small-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--medium {
+    padding: calc(
+        (#{$tw-sz-btn-medium-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-medium-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-medium-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--large {
+    padding: calc(
+        (#{$tw-sz-btn-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+
+  &--xlarge {
+    padding: calc(
+        (#{$tw-sz-btn-x-large-height} - (2 * #{$tw-sz-btn-stroke}) - #{$tw-fnt-btn-label-x-large-line-height}) / 2
+      )
+      calc((#{$tw-sz-btn-x-large-height} - 2 * #{$tw-sz-btn-stroke}) / 2);
+  }
+}

package/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Props {
+    id: string;
+    name: string;
+    label: React.ReactNode;
+    value?: boolean | null;
+    onChange: (id: string, value: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export default function Checkbox(props: Props): JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAe1D"}

package/components/Checkbox.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Checkbox;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+function Checkbox(props) {
+  var _props$value;
+
+  var onChange = function onChange(event, checked) {
+    props.onChange(props.id, checked);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    id: props.id,
+    onChange: onChange,
+    label: props.label,
+    disabled: props.disabled,
+    control: /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+      id: 'check-' + props.id,
+      color: "primary",
+      checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false
+    }),
+    className: props.className
+  });
+}

package/components/DatePicker.d.ts

@@ -0,0 +1,19 @@
+import 'moment/min/locales';
+import React, { KeyboardEventHandler } from 'react';
+export interface Props {
+    id: string;
+    label: React.ReactNode;
+    value?: string | null;
+    onChange: (id: string, value?: string | null) => void;
+    'aria-label': string;
+    onKeyPress?: KeyboardEventHandler;
+    maxDate?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    className?: string;
+    autocomplete?: string;
+    autoOk?: boolean;
+}
+export default function DatePicker(props: Props): JSX.Element;
+//# sourceMappingURL=DatePicker.d.ts.map