@abgov/react-components 3.4.0-beta.34 → 3.4.0-beta.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/experimental/react-components.esm.js +9 -9
  2. package/experimental/react-components.umd.js +9 -9
  3. package/package.json +1 -1
  4. package/react-components.esm.js +1 -1
  5. package/react-components.umd.js +1 -1
package/experimental/react-components.esm.js CHANGED
@@ -805,7 +805,7 @@ var GoATransitionSequence = function GoATransitionSequence(props) {
805
805
  }, null);
806
806
  };
807
807
 
808
- var css_248z$6 = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
808
+ var css_248z$6 = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n";
809
809
  styleInject(css_248z$6);
810
810
 
811
811
  /**
@@ -867,7 +867,7 @@ var GoAModal = function GoAModal(_ref) {
867
867
  className: "modal-root",
868
868
  "data-testid": testId,
869
869
  "data-state": getState()
870
- }, /*#__PURE__*/React.createElement(Content, {
870
+ }, /*#__PURE__*/React.createElement(Container, {
871
871
  onClick: onClose
872
872
  }, children), /*#__PURE__*/React.createElement(Background, {
873
873
  onClick: function onClick() {
@@ -897,7 +897,7 @@ var GoAModalContent = function GoAModalContent(_ref3) {
897
897
  return /*#__PURE__*/React.createElement(GoAScrollable, {
898
898
  testId: testId,
899
899
  vertical: true,
900
- hPadding: 1.5
900
+ hPadding: 1.75
901
901
  }, children);
902
902
  }; // *************
903
903
  // GoAModalTitle
@@ -913,11 +913,11 @@ var GoAModalTitle = function GoAModalTitle(_ref4) {
913
913
  }; // ******************************************************************************
914
914
  // Private Components
915
915
  // ******************************************************************************
916
- // *************
917
- // Content
918
- // *************
916
+ // ******************************************
917
+ // Container - Contains all the content items
918
+ // ******************************************
919
919
 
920
- var Content = function Content(_ref5) {
920
+ var Container = function Container(_ref5) {
921
921
  var children = _ref5.children,
922
922
  onClick = _ref5.onClick;
923
923
  return /*#__PURE__*/React.createElement("div", {
@@ -929,10 +929,10 @@ var Content = function Content(_ref5) {
929
929
  variant: "simple",
930
930
  onClick: onClick
931
931
  })), /*#__PURE__*/React.createElement("div", {
932
- className: "modal-content"
932
+ className: "modal-container"
933
933
  }, children), onClick && /*#__PURE__*/React.createElement("div", {
934
934
  style: {
935
- minHeight: '1rem'
935
+ minHeight: '1.75rem'
936
936
  }
937
937
  }));
938
938
  }; // ****************
package/experimental/react-components.umd.js CHANGED
@@ -811,7 +811,7 @@
811
811
  }, null);
812
812
  };
813
813
 
814
- var css_248z$6 = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
814
+ var css_248z$6 = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n";
815
815
  styleInject(css_248z$6);
816
816
 
817
817
  /**
@@ -873,7 +873,7 @@
873
873
  className: "modal-root",
874
874
  "data-testid": testId,
875
875
  "data-state": getState()
876
- }, /*#__PURE__*/React__default.createElement(Content, {
876
+ }, /*#__PURE__*/React__default.createElement(Container, {
877
877
  onClick: onClose
878
878
  }, children), /*#__PURE__*/React__default.createElement(Background, {
879
879
  onClick: function onClick() {
@@ -903,7 +903,7 @@
903
903
  return /*#__PURE__*/React__default.createElement(GoAScrollable, {
904
904
  testId: testId,
905
905
  vertical: true,
906
- hPadding: 1.5
906
+ hPadding: 1.75
907
907
  }, children);
908
908
  }; // *************
909
909
  // GoAModalTitle
@@ -919,11 +919,11 @@
919
919
  }; // ******************************************************************************
920
920
  // Private Components
921
921
  // ******************************************************************************
922
- // *************
923
- // Content
924
- // *************
922
+ // ******************************************
923
+ // Container - Contains all the content items
924
+ // ******************************************
925
925
 
926
- var Content = function Content(_ref5) {
926
+ var Container = function Container(_ref5) {
927
927
  var children = _ref5.children,
928
928
  onClick = _ref5.onClick;
929
929
  return /*#__PURE__*/React__default.createElement("div", {
@@ -935,10 +935,10 @@
935
935
  variant: "simple",
936
936
  onClick: onClick
937
937
  })), /*#__PURE__*/React__default.createElement("div", {
938
- className: "modal-content"
938
+ className: "modal-container"
939
939
  }, children), onClick && /*#__PURE__*/React__default.createElement("div", {
940
940
  style: {
941
- minHeight: '1rem'
941
+ minHeight: '1.75rem'
942
942
  }
943
943
  }));
944
944
  }; // ****************
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/react-components",
3
- "version": "3.4.0-beta.34",
3
+ "version": "3.4.0-beta.35",
4
4
  "description": "Government of Alberta - DIO - Shared UI components for React JS",
5
5
  "bugs": {
6
6
  "url": "https://github.com/GovAlta/ui-components/issues"
package/react-components.esm.js CHANGED
@@ -2095,7 +2095,7 @@ var GoAScrollable = function GoAScrollable(_ref) {
2095
2095
  var css_248z$g = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-up-active {\n transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-down-active {\n transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n/* ======= Slide in/out Left */\n\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-left-active {\n transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-right-active {\n transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-right-active {\n transform: translateX(100vw);\n}\n";
2096
2096
  styleInject(css_248z$g);
2097
2097
 
2098
- var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
2098
+ var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n";
2099
2099
  styleInject(css_248z$h);
2100
2100
 
2101
2101
  var css_248z$i = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";
package/react-components.umd.js CHANGED
@@ -2101,7 +2101,7 @@
2101
2101
  var css_248z$g = "/* Fade in */\n.fade-in-init {\n display: none;\n}\n.fade-in-start {\n display: block;\n opacity: 0;\n transition: opacity 200ms ease-in;\n}\n.fade-in-active {\n opacity: 1;\n}\n\n/* Fade out */\n.fade-out-init {\n display: block;\n}\n.fade-out-start {\n display: block;\n opacity: 1;\n transition: opacity 200ms ease-in;\n}\n.fade-out-active {\n opacity: 0;\n}\n\n/* ======= Slide in/out Up */\n\n/* Slide in up */\n.slide-in-up-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-up-start {\n display: block;\n transform: translateY(100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-up-active {\n transform: translateY(0);\n}\n\n/* Slide out up */\n.slide-out-up-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-up-start {\n transition: transform 300ms ease-in;\n}\n.slide-out-up-active {\n transform: translateY(-100vh);\n}\n\n/* ======= Slide in/out Down */\n\n/* Slide in down */\n.slide-in-down-init {\n transition: translateY(0);\n display: none;\n}\n.slide-in-down-start {\n display: block;\n transform: translateY(-100vh);\n transition: transform 300ms ease-out;\n}\n.slide-in-down-active {\n transform: translateY(0);\n}\n\n/* Slide out down */\n.slide-out-down-init {\n transform: translateY(0);\n display: block;\n}\n.slide-out-down-start {\n transform: translateY(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-down-active {\n transform: translateY(100vh);\n}\n/* ======= Slide in/out Left */\n\n/* Slide in left */\n.slide-in-left-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-left-start {\n display: block;\n transform: translateX(-100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-left-active {\n transform: translateX(0);\n}\n\n/* Slide out left */\n.slide-out-left-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-left-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-left-active {\n transform: translateX(-100vw);\n}\n\n/* ======= Slide in/out Right */\n\n/* Slide in left */\n.slide-in-right-init {\n transition: translateX(0);\n display: none;\n}\n.slide-in-right-start {\n display: block;\n transform: translateX(100vw);\n transition: transform 300ms ease-out;\n}\n.slide-in-right-active {\n transform: translateX(0);\n}\n\n/* Slide out right */\n.slide-out-right-init {\n transform: translateX(0);\n display: block;\n}\n.slide-out-right-start {\n transform: translateX(0);\n transition: transform 300ms ease-in;\n}\n.slide-out-right-active {\n transform: translateX(100vw);\n}\n";
2102
2102
  styleInject(css_248z$g);
2103
2103
 
2104
- var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Content ============================================================================== */\n\n.modal-content {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: 1.5rem;\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem 1.5rem;\n margin-right: 40px; /* close icon spacing */\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n}\n";
2104
+ var css_248z$h = "/* Root ============================================================================== */\n\n.modal-root {\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n\n --modal-spacing: 1.75rem;\n --button-min-width: 5rem;\n}\n\n/* Modal ============================================================================== */\n\n.modal {\n position: relative;\n background: #fff;\n z-index: 1002;\n box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n}\n\n@media (max-width: 639px) {\n .modal {\n width: 90%;\n max-height: 90%;\n }\n}\n\n@media (min-width: 640px) {\n .modal {\n margin: 1rem;\n max-height: 80%;\n width: 600px;\n }\n}\n@media (min-width: 1024px) {\n .modal {\n width: 65ch;\n }\n}\n\n/* Modal Container =========================================================================== */\n.modal-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n/* Modal Actions ============================================================================== */\n\n.modal-actions {\n text-align: right;\n margin: var(--modal-spacing);\n flex: 0 0 auto;\n}\n\n.modal-actions button {\n min-width: var(--button-min-width);\n}\n\n@media (max-width: 639px) {\n .modal-actions button + button {\n margin-top: 0.5rem;\n }\n .modal-actions button {\n display: block;\n width: 100%;\n }\n}\n\n@media (min-width: 640px) {\n .modal-actions > button {\n margin-right: 0;\n }\n .modal-actions > button + button {\n margin-left: 0.5rem;\n }\n}\n\n/* Modal Title ============================================================================ */\n\n.modal-title {\n font-size: var(--fs-xl);\n padding: 1rem var(--modal-spacing);\n margin-right: 40px; /* close icon spacing */\n flex: 0 0 auto;\n}\n\n/* Modal Background ======================================================================= */\n\n.modal-background {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1001;\n}\n\n/* Modal Close Icon ======================================================================= */\n\n.modal-close {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n";
2105
2105
  styleInject(css_248z$h);
2106
2106
 
2107
2107
  var css_248z$i = ":root {\n --color-white: #fff;\n --color-black: #333;\n --color-gray-l5: #f1f1f1;\n --color-gray-l2: #adadad;\n --color-gray-l1: #dcdcdc;\n --color-gray-d1: #666;\n --color-gray-d3: #333;\n --color-orange: #feba35;\n --color-red: #ec040b;\n --color-green: hsl(148, 100%, 26%);\n --color-primary: #0070c4;\n --color-primary-d1: #004f84;\n --color-primary--hover: var(--color-primary-d1);\n --color-text: var(--color-gray-d3);\n --color-error: var(--color-red);\n --color-disabled: var(--color-gray-l2);\n --color-input-background: var(--color-white);\n --color-input-border: var(--color-gray-d1);\n --color-input-border--hover: var(--color-primary-d1);\n --color-input: var(--color-gray-d3);\n --color-input--focused: var(--color-orange);\n --color-button-primary: var(--color-primary);\n --color-button-primary--hover: var(--color-primary-d1);\n --color-button-tertiary: var(--color-gray-l2);\n --color-button-tertiary--hover: var(--color-gray-l5); }\n\n:root {\n /* font-size */\n --fs-xs: 0.75rem;\n --fs-sm: 0.875rem;\n --fs-base: 1.125rem;\n --fs-lg: 1.25rem;\n --fs-xl: 1.5rem;\n --fs-2xl: 2.25rem;\n --fs-3xl: 3rem;\n /* font-weight */\n --fw-thin: 100;\n --fw-light: 300;\n --fw-regular: 400;\n --fw-medium: 500;\n --fw-bold: 700;\n --fw-black: 900;\n --input-padding: 0.5rem;\n --input-border-radius: 0.25rem;\n --input-font-size: var(--fs-base); }\n\n.goa-form {\n box-sizing: border-box; }\n\n.goa-form *,\n.goa-form *:before,\n.goa-form *:after {\n box-sizing: inherit; }\n\n.goa-form-row {\n display: flex;\n flex-direction: column;\n justify-content: space-between; }\n\n@media screen and (min-width: 640px) {\n .goa-form-row {\n gap: 1.75rem;\n flex-direction: row; } }\n\n.goa-form-item {\n flex: 1 1 auto;\n margin-bottom: 1rem; }\n .goa-form-item label {\n display: block;\n font-weight: bold;\n color: #333;\n font-size: var(--fs-base);\n line-height: calc(var(--fs-base) + 1rem); }\n .goa-form-item label em {\n color: var(--color-gray-d1);\n font-style: normal;\n font-weight: var(--fw-regular);\n font-size: var(--fs-sm); }\n .goa-form-item input,\n .goa-form-item textarea {\n display: block;\n width: 100%;\n font-size: var(--fs-base); }\n .goa-form-item.goa-state--error .error-msg {\n font-size: var(--fs-sm);\n line-height: calc(var(--fs-sm) + 0.5rem);\n color: var(--color-red); }\n\n.help-msg {\n font-size: var(--fs-sm);\n color: var(--color-gray-d3);\n line-height: calc(var(--fs-sm) + 0.5rem); }\n\n.goa-form-actions {\n display: flex;\n flex-wrap: wrap;\n margin-top: 2rem; }\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n margin: 0; }\n @media (max-width: 639px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n width: 100%; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-top: 0.5rem; } }\n @media (min-width: 640px) {\n .goa-form-actions button,\n .goa-form-actions .goa-link-button {\n min-width: 6rem; }\n .goa-form-actions button + button,\n .goa-form-actions button + .goa-link-button,\n .goa-form-actions .goa-link-button + button,\n .goa-form-actions .goa-link-button + .goa-link-button {\n margin-left: 0.5rem; } }\n\n.goa-form-actions--left {\n justify-content: flex-start; }\n\n.goa-form-actions--right {\n justify-content: flex-end; }\n";