@utahdts/utah-design-system 1.2.0 → 1.2.1

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 (13) hide show
  1. package/css/2-tools/_tools-index.scss +3 -0
  2. package/css/6-components/base-components/forms/_info-box.scss +3 -0
  3. package/css/6-components/base-components/navigation/_main-menu.scss +4 -1
  4. package/css/6-components/base-components/navigation/_menu-item.scss +3 -0
  5. package/css/6-components/base-components/navigation/_vertical-menu.scss +1 -0
  6. package/css/6-components/base-components/popups/_popups.scss +3 -1
  7. package/dist/style.css +24 -1
  8. package/dist/utah-design-system.es.js +51 -41
  9. package/dist/utah-design-system.umd.js +51 -41
  10. package/package.json +2 -2
  11. package/react/components/navigation/MenuItem.jsx +6 -3
  12. package/react/hooks/useGlobalKeyEvent.js +38 -23
  13. package/react/jsDocTypes.js +2 -0
package/css/2-tools/_tools-index.scss CHANGED
@@ -47,6 +47,9 @@ scss mixins and functions
47
47
  }
48
48
 
49
49
  @mixin selected-vertical-menu-item {
50
+ &.menu-item--selected_parent {
51
+ font-weight: bold;
52
+ }
50
53
  &.menu-item--selected {
51
54
  font-weight: bold;
52
55
  border-top-left-radius: 0;
package/css/6-components/base-components/forms/_info-box.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  background: white;
9
9
  position: relative;
10
10
  border-radius: var(--radius-small);
11
+ padding-left: var(--spacing-xs);
11
12
 
12
13
  &::before {
13
14
  content: '';
@@ -17,6 +18,8 @@
17
18
  border-top-left-radius: var(--radius-small);
18
19
  border-bottom-left-radius: var(--radius-small);
19
20
  background-color: var(--secondary-color);
21
+ position: absolute;
22
+ left: 0;
20
23
  }
21
24
  &__content {
22
25
  display: flex;
package/css/6-components/base-components/navigation/_main-menu.scss CHANGED
@@ -64,7 +64,10 @@
64
64
  color: black;
65
65
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
66
66
  }
67
-
67
+ &.menu-item--selected_parent + span.menu-chiclet {
68
+ font-weight: bold;
69
+ }
70
+
68
71
  &.menu-item--selected + span.menu-chiclet {
69
72
  &::after {
70
73
  content: "";
package/css/6-components/base-components/navigation/_menu-item.scss CHANGED
@@ -23,6 +23,9 @@
23
23
  &.menu-item--selected {
24
24
  color: var(--primary-color);
25
25
  }
26
+ &.menu-item--selected_parent {
27
+ font-weight: bold;
28
+ }
26
29
  }
27
30
  &__chevron {
28
31
  transform: rotate(-90deg);
package/css/6-components/base-components/navigation/_vertical-menu.scss CHANGED
@@ -63,6 +63,7 @@
63
63
  transition: transform var(--timing-quick) ease;
64
64
  &::before {
65
65
  margin-right: 0;
66
+ margin-left: var(--spacing-xs);
66
67
  }
67
68
  &.is-open {
68
69
  transform: rotate(90deg);
package/css/6-components/base-components/popups/_popups.scss CHANGED
@@ -43,7 +43,9 @@ $dsc: rgb(0,0,0);
43
43
  border-radius: var(--radius-small);
44
44
  border: 1px solid var(--gray-3-1-contrast);
45
45
  box-sizing: border-box;
46
- min-width: 180px;
46
+ min-width: 200px;
47
+ max-width: 420px;
48
+ width: max-content;
47
49
  padding: var(--spacing-s);
48
50
  transition: transform 100ms ease-in-out;
49
51
  box-shadow: var(--elevation-small);
package/dist/style.css CHANGED
@@ -2751,6 +2751,7 @@ base color swatches for the design system
2751
2751
  background: white;
2752
2752
  position: relative;
2753
2753
  border-radius: var(--radius-small);
2754
+ padding-left: var(--spacing-xs);
2754
2755
  }
2755
2756
 
2756
2757
  .utah-design-system .info-box::before {
@@ -2761,6 +2762,8 @@ base color swatches for the design system
2761
2762
  border-top-left-radius: var(--radius-small);
2762
2763
  border-bottom-left-radius: var(--radius-small);
2763
2764
  background-color: var(--secondary-color);
2765
+ position: absolute;
2766
+ left: 0;
2764
2767
  }
2765
2768
 
2766
2769
  .utah-design-system .info-box__content {
@@ -3076,6 +3079,10 @@ base color swatches for the design system
3076
3079
  box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
3077
3080
  }
3078
3081
 
3082
+ .utah-design-system .horizontal-menu > ul li a[href].menu-item--selected_parent + span.menu-chiclet, .utah-design-system .horizontal-menu > ul li button.menu-item--selected_parent + span.menu-chiclet {
3083
+ font-weight: bold;
3084
+ }
3085
+
3079
3086
  .utah-design-system .horizontal-menu > ul li a[href].menu-item--selected + span.menu-chiclet::after, .utah-design-system .horizontal-menu > ul li button.menu-item--selected + span.menu-chiclet::after {
3080
3087
  content: "";
3081
3088
  width: 100%;
@@ -3117,6 +3124,10 @@ base color swatches for the design system
3117
3124
  color: var(--primary-color);
3118
3125
  }
3119
3126
 
3127
+ .utah-design-system .menu-item a[href].menu-item--selected_parent {
3128
+ font-weight: bold;
3129
+ }
3130
+
3120
3131
  .utah-design-system .menu-item__chevron {
3121
3132
  transform: rotate(-90deg);
3122
3133
  }
@@ -3249,6 +3260,10 @@ base color swatches for the design system
3249
3260
  color: var(--primary-color);
3250
3261
  }
3251
3262
 
3263
+ .utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected_parent {
3264
+ font-weight: bold;
3265
+ }
3266
+
3252
3267
  .utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected {
3253
3268
  font-weight: bold;
3254
3269
  border-top-left-radius: 0;
@@ -3334,6 +3349,11 @@ base color swatches for the design system
3334
3349
  transform: none;
3335
3350
  }
3336
3351
 
3352
+ .utah-design-system .vertical-menu button.vertical-menu__button-title.menu-item--selected_parent,
3353
+ .utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected_parent {
3354
+ font-weight: bold;
3355
+ }
3356
+
3337
3357
  .utah-design-system .vertical-menu button.vertical-menu__button-title.menu-item--selected,
3338
3358
  .utah-design-system .vertical-menu a[href].vertical-menu__link-title.menu-item--selected {
3339
3359
  font-weight: bold;
@@ -3379,6 +3399,7 @@ base color swatches for the design system
3379
3399
 
3380
3400
  .utah-design-system .vertical-menu .utds-icon-before-chevron-right::before {
3381
3401
  margin-right: 0;
3402
+ margin-left: var(--spacing-xs);
3382
3403
  }
3383
3404
 
3384
3405
  .utah-design-system .vertical-menu .utds-icon-before-chevron-right.is-open {
@@ -4314,7 +4335,9 @@ Media Sizes - SCSS Variables
4314
4335
  border-radius: var(--radius-small);
4315
4336
  border: 1px solid var(--gray-3-1-contrast);
4316
4337
  box-sizing: border-box;
4317
- min-width: 180px;
4338
+ min-width: 200px;
4339
+ max-width: 420px;
4340
+ width: max-content;
4318
4341
  padding: var(--spacing-s);
4319
4342
  transition: transform 100ms ease-in-out;
4320
4343
  box-shadow: var(--elevation-small);
package/dist/utah-design-system.es.js CHANGED
@@ -7,7 +7,7 @@ const index = "";
7
7
  const name = "@utahdts/utah-design-system";
8
8
  const description = "Utah Design System React Library";
9
9
  const displayName = "Utah Design System React Library";
10
- const version$1 = "1.2.0";
10
+ const version$1 = "1.2.1";
11
11
  const exports = {
12
12
  ".": {
13
13
  "development-local": "./index.js",
@@ -64,7 +64,7 @@ const bugs = {
64
64
  };
65
65
  const homepage = "https://github.com/utahdts/utah-design-system";
66
66
  const dependencies = {
67
- "@utahdts/utah-design-system-header": "1.2.0",
67
+ "@utahdts/utah-design-system-header": "1.2.1",
68
68
  lodash: "4.17.21",
69
69
  "prop-types": "15.8.1",
70
70
  react: "18.x",
@@ -4725,20 +4725,6 @@ const MenuShape = PropTypes.exact({
4725
4725
  titleTagClassName: PropTypes.string,
4726
4726
  titleTagName: PropTypes.string
4727
4727
  });
4728
- const Icons = {
4729
- IconArrowLeft: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
4730
- IconArrowRight: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
4731
- IconChevron: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
4732
- IconCheck: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
4733
- IconLightMode: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) }),
4734
- IconSlack: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-slack ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" }) }),
4735
- IconGitHub: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-github ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" }) }),
4736
- IconEnvelope: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-envelope ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM218 271.7L64.2 172.4C66 156.4 79.5 144 96 144H352c16.5 0 30 12.4 31.8 28.4L230 271.7c-1.8 1.2-3.9 1.8-6 1.8s-4.2-.6-6-1.8zm29.4 26.9L384 210.4V336c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V210.4l136.6 88.2c7 4.5 15.1 6.9 23.4 6.9s16.4-2.4 23.4-6.9z" }) }),
4737
- IconShare: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-share ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M263.717-48Q234-48 213-69.15T192-120v-432q0-29.7 21.15-50.85Q234.3-624 264-624h120v72H264v432h432v-432H576v-72h120q30 0 51 21.15T768-552v432q0 29.7-21.162 50.85Q725.676-48 695.96-48H263.717ZM444-336v-438l-57 57-51-51 144-144 144 144-51 51-57-57v438h-72Z" }) }),
4738
- IconReset: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-reset ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M444-144q-107-14-179.5-94.5T192-430q0-61 23-113.5t63-91.5l51 51q-30 29-47.5 69T264-430q0 81 51.5 140T444-217v73Zm72 0v-73q77-13 128.5-72.5T696-430q0-90-63-153t-153-63h-7l46 46-51 50-132-132 132-132 51 51-45 45h6q120 0 204 84t84 204q0 111-72.5 192T516-144Z" }) }),
4739
- IconDangerous: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-dangerous ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M341-144 144-342v-277l197-197h278l197 197v278L618-144H341Zm32-179 107-106 107 106 50-50-106-107 106-107-50-50-107 106-107-106-50 50 106 107-106 107 50 50Zm-2 107h218l155-155v-218L588-744H371L216-589v218l155 155Zm109-264Z" }) }),
4740
- IconSadFace: ({ className, altText }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-sad ${className || ""}`, "aria-label": altText, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M612-504q25 0 42.5-17.5T672-564q0-25-17.5-42.5T612-624q-25 0-42.5 17.5T552-564q0 25 17.5 42.5T612-504Zm-264 0q25 0 42.5-17.5T408-564q0-25-17.5-42.5T348-624q-25 0-42.5 17.5T288-564q0 25 17.5 42.5T348-504Zm132.101 72Q411-432 354.5-393T277-288h79q19.916-33.3 52.958-52.65T480-360q38 0 71.042 19.35T604-288h79q-21-66-77.399-105t-125.5-39Zm.175 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-480Zm0 312q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Z" }) })
4741
- };
4742
4728
  const useStateEffect = ({ calculateValueFn, onUnmountFn, dependencyList }) => {
4743
4729
  const [state, setState] = useState(() => calculateValueFn(null));
4744
4730
  useEffect(
@@ -4835,6 +4821,20 @@ function IconButton({
4835
4821
  }
4836
4822
  IconButton.propTypes = propTypes$K;
4837
4823
  IconButton.defaultProps = defaultProps$K;
4824
+ const Icons = {
4825
+ IconArrowLeft: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
4826
+ IconArrowRight: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
4827
+ IconChevron: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
4828
+ IconCheck: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
4829
+ IconLightMode: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) }),
4830
+ IconSlack: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-slack ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" }) }),
4831
+ IconGitHub: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-github ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" }) }),
4832
+ IconEnvelope: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-envelope ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM218 271.7L64.2 172.4C66 156.4 79.5 144 96 144H352c16.5 0 30 12.4 31.8 28.4L230 271.7c-1.8 1.2-3.9 1.8-6 1.8s-4.2-.6-6-1.8zm29.4 26.9L384 210.4V336c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V210.4l136.6 88.2c7 4.5 15.1 6.9 23.4 6.9s16.4-2.4 23.4-6.9z" }) }),
4833
+ IconShare: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-share ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M263.717-48Q234-48 213-69.15T192-120v-432q0-29.7 21.15-50.85Q234.3-624 264-624h120v72H264v432h432v-432H576v-72h120q30 0 51 21.15T768-552v432q0 29.7-21.162 50.85Q725.676-48 695.96-48H263.717ZM444-336v-438l-57 57-51-51 144-144 144 144-51 51-57-57v438h-72Z" }) }),
4834
+ IconReset: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-reset ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M444-144q-107-14-179.5-94.5T192-430q0-61 23-113.5t63-91.5l51 51q-30 29-47.5 69T264-430q0 81 51.5 140T444-217v73Zm72 0v-73q77-13 128.5-72.5T696-430q0-90-63-153t-153-63h-7l46 46-51 50-132-132 132-132 51 51-45 45h6q120 0 204 84t84 204q0 111-72.5 192T516-144Z" }) }),
4835
+ IconDangerous: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-dangerous ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M341-144 144-342v-277l197-197h278l197 197v278L618-144H341Zm32-179 107-106 107 106 50-50-106-107 106-107-50-50-107 106-107-106-50 50 106 107-106 107 50 50Zm-2 107h218l155-155v-218L588-744H371L216-589v218l155 155Zm109-264Z" }) }),
4836
+ IconSadFace: ({ className, altText }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-sad ${className || ""}`, "aria-label": altText, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M612-504q25 0 42.5-17.5T672-564q0-25-17.5-42.5T612-624q-25 0-42.5 17.5T552-564q0 25 17.5 42.5T612-504Zm-264 0q25 0 42.5-17.5T408-564q0-25-17.5-42.5T348-624q-25 0-42.5 17.5T288-564q0 25 17.5 42.5T348-504Zm132.101 72Q411-432 354.5-393T277-288h79q19.916-33.3 52.958-52.65T480-360q38 0 71.042 19.35T604-288h79q-21-66-77.399-105t-125.5-39Zm.175 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-480Zm0 312q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Z" }) })
4837
+ };
4838
4838
  const propTypes$J = {
4839
4839
  currentMenuItem: MenuItemShape$2,
4840
4840
  menuItem: MenuItemShape$2.isRequired
@@ -4883,8 +4883,10 @@ function MenuItem({ currentMenuItem, menuItem: menuItem2 }) {
4883
4883
  NavLink,
4884
4884
  {
4885
4885
  className: (navData) => {
4886
- var _a2;
4887
- return joinClassNames((((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link)) || navData.isActive) && "menu-item--selected");
4886
+ var _a2, _b2;
4887
+ return joinClassNames(
4888
+ (((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link)) || navData.isActive) && (((_b2 = currentMenuItem == null ? void 0 : currentMenuItem.children) == null ? void 0 : _b2.length) ? "menu-item--selected_parent" : "menu-item--selected")
4889
+ );
4888
4890
  },
4889
4891
  end: true,
4890
4892
  to: menuItem2.link,
@@ -35792,31 +35794,39 @@ function useClickOutside(ref, handler, isDisabled = false) {
35792
35794
  }
35793
35795
  const useGlobalKeyEvent = ({ whichKeyCode, onKeyDown, onKeyUp }) => {
35794
35796
  const [keyPressed, setKeyPressed] = useState(false);
35795
- const keydownFuncRef = useRef();
35796
- useEffect(() => {
35797
- keydownFuncRef.current = (e) => {
35798
- if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
35799
- if (e.type === "keydown") {
35800
- setKeyPressed(true);
35801
- if (onKeyDown) {
35802
- onKeyDown(e);
35803
- }
35804
- } else if (e.type === "keyup") {
35805
- setKeyPressed(false);
35806
- if (onKeyUp) {
35807
- onKeyUp(e);
35797
+ const keydownFuncRef = useRef(
35798
+ /** @type {EventAction | null} */
35799
+ null
35800
+ );
35801
+ useEffect(
35802
+ () => {
35803
+ keydownFuncRef.current = (e) => {
35804
+ if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
35805
+ if (e.type === "keydown") {
35806
+ setKeyPressed(true);
35807
+ if (onKeyDown) {
35808
+ onKeyDown(e);
35809
+ }
35810
+ } else if (e.type === "keyup") {
35811
+ setKeyPressed(false);
35812
+ if (onKeyUp) {
35813
+ onKeyUp(e);
35814
+ }
35808
35815
  }
35809
35816
  }
35810
- }
35811
- };
35812
- document.addEventListener("keydown", keydownFuncRef.current);
35813
- document.addEventListener("keyup", keydownFuncRef.current);
35814
- return () => {
35815
- document.removeEventListener("keydown", keydownFuncRef.current);
35816
- document.removeEventListener("keyup", keydownFuncRef.current);
35817
- keydownFuncRef.current = null;
35818
- };
35819
- }, []);
35817
+ };
35818
+ document.addEventListener("keydown", keydownFuncRef.current);
35819
+ document.addEventListener("keyup", keydownFuncRef.current);
35820
+ return () => {
35821
+ if (keydownFuncRef.current) {
35822
+ document.removeEventListener("keydown", keydownFuncRef.current);
35823
+ document.removeEventListener("keyup", keydownFuncRef.current);
35824
+ }
35825
+ keydownFuncRef.current = null;
35826
+ };
35827
+ },
35828
+ []
35829
+ );
35820
35830
  return keyPressed;
35821
35831
  };
35822
35832
  const propTypes$B = {
package/dist/utah-design-system.umd.js CHANGED
@@ -23,7 +23,7 @@
23
23
  const name = "@utahdts/utah-design-system";
24
24
  const description = "Utah Design System React Library";
25
25
  const displayName = "Utah Design System React Library";
26
- const version$1 = "1.2.0";
26
+ const version$1 = "1.2.1";
27
27
  const exports$1 = {
28
28
  ".": {
29
29
  "development-local": "./index.js",
@@ -80,7 +80,7 @@
80
80
  };
81
81
  const homepage = "https://github.com/utahdts/utah-design-system";
82
82
  const dependencies = {
83
- "@utahdts/utah-design-system-header": "1.2.0",
83
+ "@utahdts/utah-design-system-header": "1.2.1",
84
84
  lodash: "4.17.21",
85
85
  "prop-types": "15.8.1",
86
86
  react: "18.x",
@@ -4741,20 +4741,6 @@
4741
4741
  titleTagClassName: PropTypes.string,
4742
4742
  titleTagName: PropTypes.string
4743
4743
  });
4744
- const Icons = {
4745
- IconArrowLeft: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
4746
- IconArrowRight: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
4747
- IconChevron: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
4748
- IconCheck: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
4749
- IconLightMode: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) }),
4750
- IconSlack: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-slack ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" }) }),
4751
- IconGitHub: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-github ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" }) }),
4752
- IconEnvelope: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-envelope ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM218 271.7L64.2 172.4C66 156.4 79.5 144 96 144H352c16.5 0 30 12.4 31.8 28.4L230 271.7c-1.8 1.2-3.9 1.8-6 1.8s-4.2-.6-6-1.8zm29.4 26.9L384 210.4V336c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V210.4l136.6 88.2c7 4.5 15.1 6.9 23.4 6.9s16.4-2.4 23.4-6.9z" }) }),
4753
- IconShare: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-share ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M263.717-48Q234-48 213-69.15T192-120v-432q0-29.7 21.15-50.85Q234.3-624 264-624h120v72H264v432h432v-432H576v-72h120q30 0 51 21.15T768-552v432q0 29.7-21.162 50.85Q725.676-48 695.96-48H263.717ZM444-336v-438l-57 57-51-51 144-144 144 144-51 51-57-57v438h-72Z" }) }),
4754
- IconReset: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-reset ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M444-144q-107-14-179.5-94.5T192-430q0-61 23-113.5t63-91.5l51 51q-30 29-47.5 69T264-430q0 81 51.5 140T444-217v73Zm72 0v-73q77-13 128.5-72.5T696-430q0-90-63-153t-153-63h-7l46 46-51 50-132-132 132-132 51 51-45 45h6q120 0 204 84t84 204q0 111-72.5 192T516-144Z" }) }),
4755
- IconDangerous: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-dangerous ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M341-144 144-342v-277l197-197h278l197 197v278L618-144H341Zm32-179 107-106 107 106 50-50-106-107 106-107-50-50-107 106-107-106-50 50 106 107-106 107 50 50Zm-2 107h218l155-155v-218L588-744H371L216-589v218l155 155Zm109-264Z" }) }),
4756
- IconSadFace: ({ className, altText }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-sad ${className || ""}`, "aria-label": altText, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M612-504q25 0 42.5-17.5T672-564q0-25-17.5-42.5T612-624q-25 0-42.5 17.5T552-564q0 25 17.5 42.5T612-504Zm-264 0q25 0 42.5-17.5T408-564q0-25-17.5-42.5T348-624q-25 0-42.5 17.5T288-564q0 25 17.5 42.5T348-504Zm132.101 72Q411-432 354.5-393T277-288h79q19.916-33.3 52.958-52.65T480-360q38 0 71.042 19.35T604-288h79q-21-66-77.399-105t-125.5-39Zm.175 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-480Zm0 312q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Z" }) })
4757
- };
4758
4744
  const useStateEffect = ({ calculateValueFn, onUnmountFn, dependencyList }) => {
4759
4745
  const [state, setState] = React.useState(() => calculateValueFn(null));
4760
4746
  React.useEffect(
@@ -4851,6 +4837,20 @@
4851
4837
  }
4852
4838
  IconButton.propTypes = propTypes$K;
4853
4839
  IconButton.defaultProps = defaultProps$K;
4840
+ const Icons = {
4841
+ IconArrowLeft: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-left ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0,6.167L6.167,0l1.458,1.438-3.708,3.708H12.334v2.042H3.917s3.708,3.708,3.708,3.708l-1.458,1.438L0,6.167Z" }) }) }),
4842
+ IconArrowRight: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 12.334 12.334", className: `icon-svg icon-arrow-right ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.167,12.334l-1.458-1.438,3.708-3.708H0v-2.042H8.417L4.709,1.438l1.458-1.438,6.167,6.167-6.167,6.167Z" }) }) }),
4843
+ IconChevron: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 10.75 6.834", className: `icon-svg icon-chevron ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5.375,6.834L0,1.438,1.437,0l3.938,3.938L9.313,0l1.437,1.438L5.375,6.834Z" }) }) }),
4844
+ IconCheck: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 11.334 8.896", className: `icon-svg icon-check ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.896,8.896L0,4.979l1.438-1.438,2.458,2.459L9.896,0l1.438,1.458L3.896,8.896Z" }) }) }),
4845
+ IconLightMode: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 18.542 18.542", className: `icon-svg icon-light-mode ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("g", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.271,11.229c.5413,0,1.003-.191,1.385-.573,.382-.382,.573-.8437,.573-1.385s-.191-1.003-.573-1.385c-.382-.382-.8437-.573-1.385-.573s-1.003,.191-1.385,.573-.573,.8437-.573,1.385,.191,1.003,.573,1.385c.382,.382,.8437,.573,1.385,.573Zm0,2.042c-1.1113,0-2.0557-.389-2.833-1.167-.778-.7773-1.167-1.7217-1.167-2.833s.389-2.0557,1.167-2.833c.7773-.778,1.7217-1.167,2.833-1.167s2.0557,.389,2.833,1.167c.778,.7773,1.167,1.7217,1.167,2.833s-.389,2.0557-1.167,2.833c-.7773,.778-1.7217,1.167-2.833,1.167ZM1.021,10.292c-.278,0-.5177-.0973-.719-.292C.1007,9.806,0,9.563,0,9.271c0-.278,.1007-.5177,.302-.719s.441-.302,.719-.302H3.021c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302H1.021Zm14.5,0c-.278,0-.5177-.0973-.719-.292-.2013-.194-.302-.437-.302-.729,0-.278,.1007-.5177,.302-.719,.2013-.2013,.441-.302,.719-.302h2c.278,0,.5177,.0973,.719,.292,.2013,.194,.302,.437,.302,.729,0,.278-.1007,.5177-.302,.719-.2013,.2013-.441,.302-.719,.302h-2Zm-6.25-6.25c-.278,0-.5177-.1007-.719-.302s-.302-.441-.302-.719V1.021c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719V3.021c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302Zm0,14.5c-.278,0-.5177-.1007-.719-.302-.2013-.2013-.302-.441-.302-.719v-2c0-.278,.0973-.5177,.292-.719,.194-.2013,.437-.302,.729-.302,.278,0,.5177,.1007,.719,.302,.2013,.2013,.302,.441,.302,.719v2c0,.278-.0973,.5177-.292,.719-.194,.2013-.437,.302-.729,.302ZM4.125,5.583l-1.042-1.062c-.208-.1947-.312-.4307-.312-.708,0-.278,.104-.5213,.312-.73,.1947-.208,.431-.312,.709-.312s.514,.104,.708,.312l1.083,1.042c.2087,.1947,.3097,.431,.303,.709-.0073,.2773-.1083,.5203-.303,.729-.194,.208-.4333,.3157-.718,.323-.2847,.0067-.5313-.0943-.74-.303ZM14.042,15.459l-1.083-1.042c-.2087-.1947-.313-.4307-.313-.708,0-.278,.1043-.5213,.313-.73,.194-.208,.4333-.312,.718-.312s.5313,.104,.74,.312l1.042,1.042c.208,.1947,.312,.4307,.312,.708,0,.278-.0973,.5213-.292,.73-.208,.208-.4473,.312-.718,.312-.2713,0-.511-.104-.719-.312Zm-1.063-9.876c-.208-.194-.312-.4333-.312-.718s.104-.5313,.312-.74l1.042-1.042c.208-.208,.4477-.3087,.719-.302,.2707,.0073,.5103,.108,.719,.302,.208,.1947,.312,.4273,.312,.698,0,.2713-.104,.511-.312,.719l-1.042,1.083c-.1947,.2087-.4307,.3097-.708,.303-.278-.0073-.5213-.1083-.73-.303ZM3.083,15.459c-.208-.1947-.312-.431-.312-.709s.104-.514,.312-.708l1.042-1.083c.1947-.1947,.4307-.292,.708-.292,.278,0,.5213,.0973,.73,.292,.208,.208,.3087,.451,.302,.729-.0073,.2773-.108,.5203-.302,.729l-1.042,1.042c-.1947,.208-.4307,.312-.708,.312-.278,0-.5213-.104-.73-.312Z" }) }) }),
4846
+ IconSlack: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-slack ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" }) }),
4847
+ IconGitHub: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-github ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z" }) }),
4848
+ IconEnvelope: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-envelope ${className || ""}`, viewBox: "0 0 448 512", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM218 271.7L64.2 172.4C66 156.4 79.5 144 96 144H352c16.5 0 30 12.4 31.8 28.4L230 271.7c-1.8 1.2-3.9 1.8-6 1.8s-4.2-.6-6-1.8zm29.4 26.9L384 210.4V336c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V210.4l136.6 88.2c7 4.5 15.1 6.9 23.4 6.9s16.4-2.4 23.4-6.9z" }) }),
4849
+ IconShare: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-share ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M263.717-48Q234-48 213-69.15T192-120v-432q0-29.7 21.15-50.85Q234.3-624 264-624h120v72H264v432h432v-432H576v-72h120q30 0 51 21.15T768-552v432q0 29.7-21.162 50.85Q725.676-48 695.96-48H263.717ZM444-336v-438l-57 57-51-51 144-144 144 144-51 51-57-57v438h-72Z" }) }),
4850
+ IconReset: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-reset ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M444-144q-107-14-179.5-94.5T192-430q0-61 23-113.5t63-91.5l51 51q-30 29-47.5 69T264-430q0 81 51.5 140T444-217v73Zm72 0v-73q77-13 128.5-72.5T696-430q0-90-63-153t-153-63h-7l46 46-51 50-132-132 132-132 51 51-45 45h6q120 0 204 84t84 204q0 111-72.5 192T516-144Z" }) }),
4851
+ IconDangerous: (className) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-dangerous ${className || ""}`, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M341-144 144-342v-277l197-197h278l197 197v278L618-144H341Zm32-179 107-106 107 106 50-50-106-107 106-107-50-50-107 106-107-106-50 50 106 107-106 107 50 50Zm-2 107h218l155-155v-218L588-744H371L216-589v218l155 155Zm109-264Z" }) }),
4852
+ IconSadFace: ({ className, altText }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: `icon-svg icon-sad ${className || ""}`, "aria-label": altText, viewBox: "0 -960 960 960", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M612-504q25 0 42.5-17.5T672-564q0-25-17.5-42.5T612-624q-25 0-42.5 17.5T552-564q0 25 17.5 42.5T612-504Zm-264 0q25 0 42.5-17.5T408-564q0-25-17.5-42.5T348-624q-25 0-42.5 17.5T288-564q0 25 17.5 42.5T348-504Zm132.101 72Q411-432 354.5-393T277-288h79q19.916-33.3 52.958-52.65T480-360q38 0 71.042 19.35T604-288h79q-21-66-77.399-105t-125.5-39Zm.175 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-480Zm0 312q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Z" }) })
4853
+ };
4854
4854
  const propTypes$J = {
4855
4855
  currentMenuItem: MenuItemShape$2,
4856
4856
  menuItem: MenuItemShape$2.isRequired
@@ -4899,8 +4899,10 @@
4899
4899
  reactRouterDom.NavLink,
4900
4900
  {
4901
4901
  className: (navData) => {
4902
- var _a2;
4903
- return joinClassNames((((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link)) || navData.isActive) && "menu-item--selected");
4902
+ var _a2, _b2;
4903
+ return joinClassNames(
4904
+ (((_a2 = currentMenuItem == null ? void 0 : currentMenuItem.parentLinks) == null ? void 0 : _a2.includes(menuItem2.link)) || navData.isActive) && (((_b2 = currentMenuItem == null ? void 0 : currentMenuItem.children) == null ? void 0 : _b2.length) ? "menu-item--selected_parent" : "menu-item--selected")
4905
+ );
4904
4906
  },
4905
4907
  end: true,
4906
4908
  to: menuItem2.link,
@@ -35808,31 +35810,39 @@
35808
35810
  }
35809
35811
  const useGlobalKeyEvent = ({ whichKeyCode, onKeyDown, onKeyUp }) => {
35810
35812
  const [keyPressed, setKeyPressed] = React.useState(false);
35811
- const keydownFuncRef = React.useRef();
35812
- React.useEffect(() => {
35813
- keydownFuncRef.current = (e) => {
35814
- if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
35815
- if (e.type === "keydown") {
35816
- setKeyPressed(true);
35817
- if (onKeyDown) {
35818
- onKeyDown(e);
35819
- }
35820
- } else if (e.type === "keyup") {
35821
- setKeyPressed(false);
35822
- if (onKeyUp) {
35823
- onKeyUp(e);
35813
+ const keydownFuncRef = React.useRef(
35814
+ /** @type {EventAction | null} */
35815
+ null
35816
+ );
35817
+ React.useEffect(
35818
+ () => {
35819
+ keydownFuncRef.current = (e) => {
35820
+ if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
35821
+ if (e.type === "keydown") {
35822
+ setKeyPressed(true);
35823
+ if (onKeyDown) {
35824
+ onKeyDown(e);
35825
+ }
35826
+ } else if (e.type === "keyup") {
35827
+ setKeyPressed(false);
35828
+ if (onKeyUp) {
35829
+ onKeyUp(e);
35830
+ }
35824
35831
  }
35825
35832
  }
35826
- }
35827
- };
35828
- document.addEventListener("keydown", keydownFuncRef.current);
35829
- document.addEventListener("keyup", keydownFuncRef.current);
35830
- return () => {
35831
- document.removeEventListener("keydown", keydownFuncRef.current);
35832
- document.removeEventListener("keyup", keydownFuncRef.current);
35833
- keydownFuncRef.current = null;
35834
- };
35835
- }, []);
35833
+ };
35834
+ document.addEventListener("keydown", keydownFuncRef.current);
35835
+ document.addEventListener("keyup", keydownFuncRef.current);
35836
+ return () => {
35837
+ if (keydownFuncRef.current) {
35838
+ document.removeEventListener("keydown", keydownFuncRef.current);
35839
+ document.removeEventListener("keyup", keydownFuncRef.current);
35840
+ }
35841
+ keydownFuncRef.current = null;
35842
+ };
35843
+ },
35844
+ []
35845
+ );
35836
35846
  return keyPressed;
35837
35847
  };
35838
35848
  const propTypes$B = {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@utahdts/utah-design-system",
3
3
  "description": "Utah Design System React Library",
4
4
  "displayName": "Utah Design System React Library",
5
- "version": "1.2.0",
5
+ "version": "1.2.1",
6
6
  "exports": {
7
7
  ".": {
8
8
  "development-local": "./index.js",
@@ -59,7 +59,7 @@
59
59
  },
60
60
  "homepage": "https://github.com/utahdts/utah-design-system",
61
61
  "dependencies": {
62
- "@utahdts/utah-design-system-header": "1.2.0",
62
+ "@utahdts/utah-design-system-header": "1.2.1",
63
63
  "lodash": "4.17.21",
64
64
  "prop-types": "15.8.1",
65
65
  "react": "18.x",
package/react/components/navigation/MenuItem.jsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import { useLayoutEffect, useRef } from 'react';
2
2
  import { NavLink, useLocation } from 'react-router-dom';
3
- import Icons from '../icons/Icons';
3
+ import { ICON_BUTTON_APPEARANCE } from '../../enums/buttonEnums';
4
4
  import useStateEffect from '../../hooks/useStateEffect';
5
5
  import MenuItemShape from '../../propTypesShapes/MenuItemShape';
6
6
  import joinClassNames from '../../util/joinClassNames';
7
7
  import IconButton from '../buttons/IconButton';
8
- import { ICON_BUTTON_APPEARANCE } from '../../enums/buttonEnums';
8
+ import Icons from '../icons/Icons';
9
9
 
10
10
  const propTypes = {
11
11
  currentMenuItem: MenuItemShape,
@@ -61,7 +61,10 @@ function MenuItem({ currentMenuItem, menuItem }) {
61
61
  )
62
62
  : (
63
63
  <NavLink
64
- className={(navData) => joinClassNames((currentMenuItem?.parentLinks?.includes(menuItem.link) || navData.isActive) && 'menu-item--selected')}
64
+ className={(navData) => joinClassNames(
65
+ (currentMenuItem?.parentLinks?.includes(menuItem.link) || navData.isActive)
66
+ && (currentMenuItem?.children?.length ? 'menu-item--selected_parent' : 'menu-item--selected')
67
+ )}
65
68
  end
66
69
  to={menuItem.link}
67
70
  ref={navLinkRef}
package/react/hooks/useGlobalKeyEvent.js CHANGED
@@ -1,34 +1,49 @@
1
+ // @ts-check
1
2
  import { useEffect, useRef, useState } from 'react';
2
3
 
4
+ /** @typedef {import('../jsDocTypes').EventAction} EventAction */
5
+
6
+ /**
7
+ * @param {Object} params
8
+ * @param {string} params.whichKeyCode
9
+ * @param {EventAction} params.onKeyDown
10
+ * @param {EventAction} params.onKeyUp
11
+ */
3
12
  export default ({ whichKeyCode, onKeyDown, onKeyUp }) => {
4
13
  const [keyPressed, setKeyPressed] = useState(false);
5
14
 
6
- const keydownFuncRef = useRef();
7
- useEffect(() => {
8
- keydownFuncRef.current = (e) => {
9
- if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
10
- if (e.type === 'keydown') {
11
- setKeyPressed(true);
12
- if (onKeyDown) {
13
- onKeyDown(e);
14
- }
15
- } else if (e.type === 'keyup') {
16
- setKeyPressed(false);
17
- if (onKeyUp) {
18
- onKeyUp(e);
15
+ const keydownFuncRef = useRef(/** @type {EventAction | null} */(null));
16
+ useEffect(
17
+ () => {
18
+ keydownFuncRef.current = (e) => {
19
+ // @ts-ignore
20
+ if (e.code === whichKeyCode || e.keyCode === whichKeyCode || e.key === whichKeyCode) {
21
+ if (e.type === 'keydown') {
22
+ setKeyPressed(true);
23
+ if (onKeyDown) {
24
+ onKeyDown(e);
25
+ }
26
+ } else if (e.type === 'keyup') {
27
+ setKeyPressed(false);
28
+ if (onKeyUp) {
29
+ onKeyUp(e);
30
+ }
19
31
  }
20
32
  }
21
- }
22
- };
23
- document.addEventListener('keydown', keydownFuncRef.current);
24
- document.addEventListener('keyup', keydownFuncRef.current);
33
+ };
34
+ document.addEventListener('keydown', keydownFuncRef.current);
35
+ document.addEventListener('keyup', keydownFuncRef.current);
25
36
 
26
- return () => {
27
- document.removeEventListener('keydown', keydownFuncRef.current);
28
- document.removeEventListener('keyup', keydownFuncRef.current);
29
- keydownFuncRef.current = null;
30
- };
31
- }, []);
37
+ return () => {
38
+ if (keydownFuncRef.current) {
39
+ document.removeEventListener('keydown', keydownFuncRef.current);
40
+ document.removeEventListener('keyup', keydownFuncRef.current);
41
+ }
42
+ keydownFuncRef.current = null;
43
+ };
44
+ },
45
+ []
46
+ );
32
47
 
33
48
  return keyPressed;
34
49
  };
package/react/jsDocTypes.js CHANGED
@@ -1,6 +1,8 @@
1
1
  // @ts-check
2
2
 
3
3
  /**
4
+ *
5
+ * @typedef {(function(MouseEvent | TouchEvent | KeyboardEvent): void)} EventAction
4
6
  *
5
7
  * @typedef {(value: string) => boolean} TableFilterFunction
6
8
  *