@justfixnyc/component-library 0.26.1 → 0.29.0

package/README.md

@@ -22,6 +22,7 @@ This package is live on both GitHub Package Registry (GPR) and NPM registry
 GitHub Actions triggers a publish to GPR from any branch that runs the version bump. Should probably change to allow this version bump to only happen on `main` before we fully integrate this library
 
 ``` shell
+npm run lint
 npm version [major]|[minor]|[patch]
 git push --follow-tags
 ```

package/dist/src/assets/index.css

@@ -0,0 +1,199 @@
+@font-face {
+  font-family: "Suisse Int'l Mono";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./SuisseIntlMono-Regular-WebS-2b4f81e5.woff2") format("woff2"), url("./SuisseIntlMono-Regular-WebS-3efe1a93.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./Degular-Medium-8a48b9b1.woff2") format("woff2"), url("./Degular-Medium-c91f21ea.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular";
+  font-weight: 600;
+  font-style: normal;
+  src: url("./Degular-Semibold-2eb662b8.woff2") format("woff2"), url("./Degular-Semibold-c05732b4.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular Display";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
+}
+.jfcl-button {
+  font-family: "Suisse Int'l Mono";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%; /* 16.1px */
+  letter-spacing: 0.42px;
+  text-transform: uppercase;
+  cursor: pointer;
+  user-select: none;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  white-space: normal;
+  word-wrap: break-word;
+  vertical-align: middle;
+  width: fit-content;
+  padding: 22px 32px;
+  border: 1px solid;
+  border-radius: 100px;
+  box-shadow: 4px 4px 0px #d4d5d0;
+  transition: all 0.1s linear;
+  transform: translateX(0rem);
+}
+.jfcl-button:hover {
+  box-shadow: 0px 4px 0px #d4d5d0;
+}
+.jfcl-button:active {
+  box-shadow: 0px -4px 0px 0px #d4d5d0;
+}
+.jfcl-button:disabled {
+  cursor: inherit;
+  box-shadow: none;
+}
+.jfcl-button:disabled.is-primary {
+  background-color: GREY_400;
+  color: #242323;
+}
+.jfcl-button:disabled.is-secondary {
+  background-color: #f2f2f2;
+}
+.jfcl-button:focus {
+  box-shadow: none;
+  border: 1px solid #efe9dc;
+}
+.jfcl-button .jfcl-button__label {
+  display: flex;
+}
+.jfcl-button .jfcl-button__icon {
+  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+}
+.jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
+  margin-right: 0;
+  margin-left: 10px;
+  order: 2;
+}
+.jfcl-button.jfcl-size-small {
+  padding: 12px 32px;
+}
+.jfcl-button.jfcl-variant-primary {
+  color: #faf8f4;
+  background-color: #242323;
+  border-color: #faf8f4;
+}
+.jfcl-button.jfcl-variant-primary:disabled {
+  color: #242323;
+  background-color: #9a9898;
+}
+.jfcl-button.jfcl-variant-primary.jfcl-is-loading {
+  background-color: #676565;
+}
+.jfcl-button.jfcl-variant-secondary {
+  color: #242323;
+  background-color: #faf8f4;
+  border-color: #242323;
+}
+.jfcl-button.jfcl-variant-secondary:disabled {
+  background-color: #f2f2f2;
+}
+.jfcl-button.jfcl-variant-text {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 120%;
+  text-align: center;
+  color: #242323;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-text .jfcl-button__text {
+  border-bottom: 1px solid;
+}
+.jfcl-button.jfcl-variant-text:disabled {
+  cursor: inherit;
+  color: #676565;
+}
+.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
+  border-bottom: none;
+}
+.jf-alert {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  padding-left: calc(12px + 0.75rem);
+  position: relative;
+  width: fit-content;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 120%;
+  text-align: center;
+}
+.jf-alert .jf-alert__content {
+  display: flex;
+  align-items: center;
+}
+.jf-alert .jf-alert__content .jf-alert__icon {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+}
+.jf-alert::before {
+  content: "";
+  width: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.jf-alert .jf-alert__btn {
+  display: flex;
+  background: transparent;
+  padding: 0;
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.jf-alert .jf-alert__btn.jfcl-type-text {
+  border-bottom: 1px solid;
+}
+.jf-alert.jfcl-type-info::before {
+  background-color: #5188ff;
+}
+.jf-alert.jfcl-type-error::before {
+  background-color: #ff813a;
+}
+.jf-alert.jfcl-type-success::before {
+  background-color: #1aa551;
+}
+.jf-alert.jfcl-variant-primary {
+  background-color: #242323;
+  color: #faf8f4;
+}
+.jf-alert.jfcl-variant-primary .jf-alert__btn {
+  color: #faf8f4;
+  border-color: #faf8f4;
+}
+.jf-alert.jfcl-variant-secondary {
+  background-color: #faf8f4;
+  border: 1px solid #9a9898;
+  color: #242323;
+}
+.jf-alert.jfcl-variant-secondary .jf-alert__btn {
+  color: #242323;
+  border-color: #242323;
+}

package/dist/src/assets/index.es.css

@@ -0,0 +1,199 @@
+@font-face {
+  font-family: "Suisse Int'l Mono";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./SuisseIntlMono-Regular-WebS-2b4f81e5.woff2") format("woff2"), url("./SuisseIntlMono-Regular-WebS-3efe1a93.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./Degular-Medium-8a48b9b1.woff2") format("woff2"), url("./Degular-Medium-c91f21ea.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular";
+  font-weight: 600;
+  font-style: normal;
+  src: url("./Degular-Semibold-2eb662b8.woff2") format("woff2"), url("./Degular-Semibold-c05732b4.woff") format("woff");
+}
+@font-face {
+  font-family: "Degular Display";
+  font-weight: normal;
+  font-style: normal;
+  src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
+}
+.jfcl-button {
+  font-family: "Suisse Int'l Mono";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%; /* 16.1px */
+  letter-spacing: 0.42px;
+  text-transform: uppercase;
+  cursor: pointer;
+  user-select: none;
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  white-space: normal;
+  word-wrap: break-word;
+  vertical-align: middle;
+  width: fit-content;
+  padding: 22px 32px;
+  border: 1px solid;
+  border-radius: 100px;
+  box-shadow: 4px 4px 0px #d4d5d0;
+  transition: all 0.1s linear;
+  transform: translateX(0rem);
+}
+.jfcl-button:hover {
+  box-shadow: 0px 4px 0px #d4d5d0;
+}
+.jfcl-button:active {
+  box-shadow: 0px -4px 0px 0px #d4d5d0;
+}
+.jfcl-button:disabled {
+  cursor: inherit;
+  box-shadow: none;
+}
+.jfcl-button:disabled.is-primary {
+  background-color: GREY_400;
+  color: #242323;
+}
+.jfcl-button:disabled.is-secondary {
+  background-color: #f2f2f2;
+}
+.jfcl-button:focus {
+  box-shadow: none;
+  border: 1px solid #efe9dc;
+}
+.jfcl-button .jfcl-button__label {
+  display: flex;
+}
+.jfcl-button .jfcl-button__icon {
+  margin-right: 10px;
+  width: 16px;
+  height: 16px;
+}
+.jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
+  margin-right: 0;
+  margin-left: 10px;
+  order: 2;
+}
+.jfcl-button.jfcl-size-small {
+  padding: 12px 32px;
+}
+.jfcl-button.jfcl-variant-primary {
+  color: #faf8f4;
+  background-color: #242323;
+  border-color: #faf8f4;
+}
+.jfcl-button.jfcl-variant-primary:disabled {
+  color: #242323;
+  background-color: #9a9898;
+}
+.jfcl-button.jfcl-variant-primary.jfcl-is-loading {
+  background-color: #676565;
+}
+.jfcl-button.jfcl-variant-secondary {
+  color: #242323;
+  background-color: #faf8f4;
+  border-color: #242323;
+}
+.jfcl-button.jfcl-variant-secondary:disabled {
+  background-color: #f2f2f2;
+}
+.jfcl-button.jfcl-variant-text {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 120%;
+  text-align: center;
+  color: #242323;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.jfcl-button.jfcl-variant-text .jfcl-button__text {
+  border-bottom: 1px solid;
+}
+.jfcl-button.jfcl-variant-text:disabled {
+  cursor: inherit;
+  color: #676565;
+}
+.jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
+  border-bottom: none;
+}
+.jf-alert {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  padding-left: calc(12px + 0.75rem);
+  position: relative;
+  width: fit-content;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 120%;
+  text-align: center;
+}
+.jf-alert .jf-alert__content {
+  display: flex;
+  align-items: center;
+}
+.jf-alert .jf-alert__content .jf-alert__icon {
+  margin-right: 8px;
+  width: 20px;
+  height: 20px;
+}
+.jf-alert::before {
+  content: "";
+  width: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+.jf-alert .jf-alert__btn {
+  display: flex;
+  background: transparent;
+  padding: 0;
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+}
+.jf-alert .jf-alert__btn.jfcl-type-text {
+  border-bottom: 1px solid;
+}
+.jf-alert.jfcl-type-info::before {
+  background-color: #5188ff;
+}
+.jf-alert.jfcl-type-error::before {
+  background-color: #ff813a;
+}
+.jf-alert.jfcl-type-success::before {
+  background-color: #1aa551;
+}
+.jf-alert.jfcl-variant-primary {
+  background-color: #242323;
+  color: #faf8f4;
+}
+.jf-alert.jfcl-variant-primary .jf-alert__btn {
+  color: #faf8f4;
+  border-color: #faf8f4;
+}
+.jf-alert.jfcl-variant-secondary {
+  background-color: #faf8f4;
+  border: 1px solid #9a9898;
+  color: #242323;
+}
+.jf-alert.jfcl-variant-secondary .jf-alert__btn {
+  color: #242323;
+  border-color: #242323;
+}

package/dist/src/index.es.js

@@ -0,0 +1,249 @@
+import _extends from '@babel/runtime/helpers/extends';
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+
+const IconLoading = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentcolor",
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
+})));
+IconLoading.displayName = 'IconLoading';
+var IconLoading$1 = IconLoading;
+
+/**
+ * Accepts all `ButtonHTMLAttributes`
+ */
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    labelText,
+    variant = 'primary',
+    size = 'large',
+    loading,
+    labelIcon,
+    iconOnRight,
+    ...props
+  } = _ref;
+  const buttonClassNames = classNames('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''));
+  const iconClassNames = classNames('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
+  return /*#__PURE__*/React.createElement("button", _extends({
+    ref: ref,
+    type: "button",
+    className: buttonClassNames,
+    "data-testid": "jfcl-button"
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "jfcl-button__label"
+  }, loading && variant != 'text' ? /*#__PURE__*/React.createElement("span", {
+    className: iconClassNames
+  }, /*#__PURE__*/React.createElement(IconLoading$1, null)) : null, !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
+    className: iconClassNames
+  }, labelIcon) : null, /*#__PURE__*/React.createElement("span", {
+    className: "jfcl-button__text"
+  }, labelText)));
+});
+Button.displayName = 'Button';
+
+const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentcolor",
+  d: "M11.9895 0C11.987 0 11.9845 0 11.9815 0C11.666 0 11.4105 0.256 11.4105 0.571C11.4105 0.886 11.666 1.142 11.9815 1.142C11.9845 1.142 11.987 1.142 11.99 1.142H14.037L4.735 10.444C4.6315 10.5475 4.5675 10.69 4.5675 10.848C4.5675 11.1635 4.8235 11.419 5.1385 11.419C5.296 11.419 5.439 11.355 5.542 11.252L14.844 1.95V3.997C14.844 3.9995 14.844 4.002 14.844 4.005C14.844 4.3205 15.0995 4.576 15.415 4.576C15.7305 4.576 15.986 4.3205 15.986 4.005C15.986 4.002 15.986 3.9995 15.986 3.9965V3.997V0.664C15.991 0.6365 15.9935 0.604 15.9935 0.5715C15.9935 0.256 15.738 0.0005 15.4225 0.0005C15.42 0.0005 15.4175 0.0005 15.4145 0.0005H11.989L11.9895 0ZM0.571 3.4255C0.256 3.4255 0 3.681 0 3.9965V15.415C0 15.7305 0.256 15.986 0.571 15.986H11.9895C12.305 15.986 12.5605 15.7305 12.5605 15.415V6.8C12.5605 6.7975 12.5605 6.795 12.5605 6.792C12.5605 6.4765 12.305 6.221 11.9895 6.221C11.674 6.221 11.4185 6.4765 11.4185 6.792C11.4185 6.795 11.4185 6.7975 11.4185 6.8005V6.8V14.844H1.1415V4.567H9.22C9.2225 4.567 9.225 4.567 9.228 4.567C9.5435 4.567 9.799 4.3115 9.799 3.996C9.799 3.6805 9.5435 3.425 9.228 3.425C9.225 3.425 9.2225 3.425 9.2195 3.425L0.571 3.4255Z"
+})));
+IconHamburger$2.displayName = 'IconHamburger';
+var IconHamburger$3 = IconHamburger$2;
+
+const IconCheck = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "18",
+  height: "12",
+  viewBox: "0 0 18 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M1.66666 6.33333L6.33332 11L16.3333 1",
+  stroke: "currentcolor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+})));
+IconCheck.displayName = 'IconCheck';
+var IconCheck$1 = IconCheck;
+
+const IconError = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 18C5.58857 18 2 14.4113 2 10C2 5.58865 5.58865 2 10 2C14.4113 2 18 5.58865 18 10C18 14.3886 14.4113 18 10 18ZM10 3.34857C6.34278 3.34857 3.37143 6.32004 3.37143 9.97714C3.37143 13.6344 6.3429 16.6057 10 16.6057C13.6572 16.6057 16.6286 13.6342 16.6286 9.97714C16.6286 6.32004 13.6573 3.34857 10 3.34857Z",
+  fill: "currentcolor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9.99996 11.1657C9.61141 11.1657 9.31421 10.8685 9.31421 10.48V6.98281C9.31421 6.59426 9.6114 6.29706 9.99996 6.29706C10.3885 6.29706 10.6857 6.59425 10.6857 6.98281V10.48C10.6857 10.8687 10.3885 11.1657 9.99996 11.1657Z",
+  fill: "currentcolor"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9.99997 13.68C9.81709 13.68 9.63422 13.6114 9.51989 13.4743C9.38277 13.3372 9.31421 13.1771 9.31421 12.9942C9.31421 12.9485 9.31421 12.9029 9.33701 12.8571C9.33701 12.8114 9.35981 12.7658 9.38277 12.72C9.40557 12.6743 9.42853 12.6514 9.45133 12.6057C9.47413 12.5599 9.49709 12.5371 9.54269 12.4914C9.79412 12.2399 10.2512 12.2399 10.5027 12.4914C10.5255 12.5142 10.5712 12.5599 10.594 12.6057C10.6168 12.6514 10.6398 12.6743 10.6626 12.72C10.6854 12.7658 10.6854 12.8114 10.7084 12.8571C10.7084 12.9029 10.7312 12.9485 10.7312 12.9942C10.7312 13.1771 10.6626 13.36 10.5255 13.4743C10.3657 13.6114 10.1829 13.68 9.99998 13.68H9.99997Z",
+  fill: "currentcolor"
+})));
+IconError.displayName = 'IconError';
+var IconError$1 = IconError;
+
+const IconChevron = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "14",
+  height: "8",
+  viewBox: "0 0 14 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M1 1L7 7L13 1",
+  stroke: "currentcolor"
+})));
+IconChevron.displayName = 'IconChevron';
+var IconChevron$1 = IconChevron;
+
+const IconClose = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M2 2L14 14",
+  stroke: "currentcolor",
+  strokeWidth: "2",
+  strokeLinecap: "square"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M14 2L2 14",
+  stroke: "currentcolor",
+  strokeWidth: "2",
+  strokeLinecap: "square"
+})));
+IconClose.displayName = 'IconClose';
+var IconClose$1 = IconClose;
+
+const IconGlobe = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 1.2C14.8553 1.2 18.8 5.14466 18.8 10C18.8 14.8553 14.8553 18.8 10 18.8C5.14468 18.8 1.20001 14.8553 1.20001 10C1.20001 5.14466 5.14468 1.2 10 1.2ZM10.4 2.05V5.8H13.2313C13.0625 5.22735 12.8606 4.69966 12.6313 4.2375C12.013 2.99081 11.2278 2.23616 10.4 2.05ZM9.60001 2.05C8.77235 2.23613 7.98706 2.99081 7.36868 4.2375C7.13945 4.69966 6.9375 5.22735 6.76868 5.8H9.60001V2.05ZM12.3125 2.34375C12.7029 2.76725 13.0488 3.28658 13.3438 3.88125C13.6274 4.45318 13.869 5.09973 14.0625 5.79991H16.8125C15.7974 4.15565 14.2027 2.91225 12.3125 2.34358V2.34375ZM7.68751 2.34375C5.79735 2.9123 4.20268 4.15575 3.18751 5.80008H5.93751C6.131 5.09981 6.3726 4.45326 6.65626 3.88141C6.95118 3.28675 7.29708 2.76741 7.68751 2.34391V2.34375ZM17.2438 6.60008H14.2563C14.4535 7.52996 14.57 8.54175 14.5938 9.60008H17.9875C17.935 8.52996 17.6753 7.51858 17.2438 6.60008H17.2438ZM13.4375 6.60008H10.4V9.60008H13.7937C13.7683 8.53171 13.6431 7.51708 13.4374 6.60008H13.4375ZM9.60001 6.60008H6.56251C6.35685 7.51701 6.23165 8.53175 6.20626 9.60008H9.59993L9.60001 6.60008ZM5.74368 6.60008H2.75618C2.3246 7.51863 2.0649 8.52991 2.01243 9.60008H5.4061C5.42992 8.54181 5.54646 7.52991 5.7436 6.60008H5.74368ZM17.9873 10.4001H14.5937C14.5702 11.4601 14.4536 12.4699 14.2562 13.4001H17.2437C17.6738 12.4829 17.935 11.4682 17.9874 10.4001H17.9873ZM13.7937 10.4001H10.4V13.4001H13.4375C13.6432 12.4821 13.7687 11.4696 13.7938 10.4001H13.7937ZM9.60001 10.4001H6.20635C6.23141 11.4696 6.35693 12.4821 6.5626 13.4001H9.6001L9.60001 10.4001ZM5.40635 10.4001H2.01268C2.06509 11.4682 2.32628 12.4829 2.75643 13.4001H5.74393C5.5464 12.4699 5.42993 11.4601 5.40643 10.4001H5.40635ZM16.8127 14.2001H14.0627C13.8692 14.8993 13.6276 15.5406 13.3439 16.1126C13.0489 16.7072 12.7031 17.238 12.3127 17.6626C14.2028 17.094 15.7975 15.8444 16.8127 14.2001ZM13.2313 14.2001H10.4V17.9564C11.2277 17.7703 12.013 17.0093 12.6313 15.7627C12.8614 15.299 13.0621 14.7751 13.2313 14.2002V14.2001ZM9.60001 14.2001H6.76868C6.93788 14.7749 7.13866 15.2988 7.36868 15.7626C7.98698 17.0093 8.77226 17.7702 9.60001 17.9562V14.2001ZM5.93751 14.2001H3.18751C4.20261 15.8443 5.79735 17.0941 7.68751 17.6626C7.29708 17.238 6.95118 16.7072 6.65626 16.1126C6.3726 15.5406 6.13106 14.8993 5.93751 14.2001Z",
+  fill: "currentcolor"
+})));
+IconGlobe.displayName = 'IconGlobe';
+var IconGlobe$1 = IconGlobe;
+
+const IconHamburger = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "16",
+  height: "14",
+  viewBox: "0 0 16 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M0 1H16",
+  stroke: "currentcolor",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M0 7H16",
+  stroke: "currentcolor",
+  strokeWidth: "2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M0 13H16",
+  stroke: "currentcolor",
+  strokeWidth: "2"
+})));
+IconHamburger.displayName = 'IconHamburger';
+var IconHamburger$1 = IconHamburger;
+
+const IconInternet = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM5.19705 8.25847H6.46474L7.44936 12.7631L8.11397 5.53847H9.2832L8.38474 14.4615H6.87089L5.83705 9.80924L4.8032 14.4615H3.27705L2.39089 5.53847H3.56013L4.21243 12.7631L5.19705 8.25847ZM13.523 8.25847H14.7907L15.7753 12.7631L16.4399 5.53847H17.6092L16.7107 14.4615H15.1969L14.163 9.80924L13.1292 14.4615H11.603L10.7169 5.53847H11.8861L12.5384 12.7631L13.523 8.25847Z",
+  fill: "currentcolor"
+})));
+IconInternet.displayName = 'IconInternet';
+var IconInternet$1 = IconInternet;
+
+const IconPerson = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  ref: ref
+}, props, {
+  width: "18",
+  height: "20",
+  viewBox: "0 0 18 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.1395 18.8372C17.1395 19.476 16.6212 20 15.98 20H2.0199C1.38172 20 0.860443 19.4778 0.860443 18.8372C0.860443 14.3419 4.50463 10.6977 8.99999 10.6977C13.4953 10.6977 17.1395 14.3419 17.1395 18.8372ZM8.99991 12.093C5.35301 12.093 2.38246 14.9876 2.25959 18.6047H15.7402C15.6176 14.9876 12.6469 12.093 8.99991 12.093ZM8.99991 9.76744C6.30277 9.76744 4.11618 7.58085 4.11618 4.88372C4.11618 2.18659 6.30277 0 8.99991 0C11.697 0 13.8836 2.18659 13.8836 4.88372C13.8836 7.58085 11.697 9.76744 8.99991 9.76744ZM8.99991 8.37209C10.9265 8.37209 12.4883 6.81035 12.4883 4.88372C12.4883 2.95709 10.9265 1.39535 8.99991 1.39535C7.07328 1.39535 5.51153 2.95709 5.51153 4.88372C5.51153 6.81035 7.07328 8.37209 8.99991 8.37209Z",
+  fill: "currentcolor"
+})));
+IconPerson.displayName = 'IconPerson';
+var IconPerson$1 = IconPerson;
+
+const Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    type = 'info',
+    variant = 'primary',
+    text,
+    action,
+    actionLabel,
+    className,
+    ...props
+  } = _ref;
+  const alertClassNames = classNames('jf-alert', "jfcl-variant-".concat(variant), "jfcl-type-".concat(type), className);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    "data-testid": "jf-alert",
+    className: alertClassNames
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "jf-alert__content"
+  }, type === 'error' && /*#__PURE__*/React.createElement("div", {
+    className: "jf-alert__icon",
+    "data-testid": "jf-alert__icon"
+  }, /*#__PURE__*/React.createElement(IconError$1, null)), type === 'success' && /*#__PURE__*/React.createElement("div", {
+    className: "jf-alert__icon",
+    "data-testid": "jf-alert__icon"
+  }, /*#__PURE__*/React.createElement(IconCheck$1, null)), text), !!action && /*#__PURE__*/React.createElement("button", {
+    className: actionLabel ? 'jf-alert__btn is-text' : 'jf-alert__btn',
+    "data-testid": "jf-alert__btn",
+    onClick: action
+  }, actionLabel ? actionLabel : /*#__PURE__*/React.createElement(IconClose$1, {
+    "aria-label": "Dismiss"
+  })));
+});
+Alert.displayName = 'Alert';
+
+export { Alert, Button, IconCheck$1 as IconCheck, IconChevron$1 as IconChevron, IconClose$1 as IconClose, IconError$1 as IconError, IconGlobe$1 as IconGlobe, IconHamburger$1 as IconHamburger, IconInternet$1 as IconInternet, IconHamburger$3 as IconLinkExternal, IconLoading$1 as IconLoading, IconPerson$1 as IconPerson };