@activecollab/components 2.0.377 → 2.0.379

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 (95) hide show
  1. package/dist/cjs/components/DatePicker/Styles.js +2 -1
  2. package/dist/cjs/components/DatePicker/Styles.js.map +1 -1
  3. package/dist/cjs/components/GlobalStyle.js +2 -1
  4. package/dist/cjs/components/GlobalStyle.js.map +1 -1
  5. package/dist/cjs/components/Icons/collection/TextAlignCenter.js +62 -0
  6. package/dist/cjs/components/Icons/collection/TextAlignCenter.js.map +1 -0
  7. package/dist/cjs/components/Icons/collection/TextAlignJustify.js +62 -0
  8. package/dist/cjs/components/Icons/collection/TextAlignJustify.js.map +1 -0
  9. package/dist/cjs/components/Icons/collection/TextAlignLeft.js +62 -0
  10. package/dist/cjs/components/Icons/collection/TextAlignLeft.js.map +1 -0
  11. package/dist/cjs/components/Icons/collection/TextAlignRight.js +62 -0
  12. package/dist/cjs/components/Icons/collection/TextAlignRight.js.map +1 -0
  13. package/dist/cjs/components/Icons/collection/TextStyleBold.js +62 -0
  14. package/dist/cjs/components/Icons/collection/TextStyleBold.js.map +1 -0
  15. package/dist/cjs/components/Icons/collection/TextStyleItalic.js +62 -0
  16. package/dist/cjs/components/Icons/collection/TextStyleItalic.js.map +1 -0
  17. package/dist/cjs/components/Icons/collection/TextStyleStrike.js +68 -0
  18. package/dist/cjs/components/Icons/collection/TextStyleStrike.js.map +1 -0
  19. package/dist/cjs/components/Icons/collection/TextStyleUnderline.js +68 -0
  20. package/dist/cjs/components/Icons/collection/TextStyleUnderline.js.map +1 -0
  21. package/dist/cjs/components/Icons/collection/index.js +56 -0
  22. package/dist/cjs/components/Icons/collection/index.js.map +1 -1
  23. package/dist/cjs/components/Loaders/Skeleton/Styles.js +2 -1
  24. package/dist/cjs/components/Loaders/Skeleton/Styles.js.map +1 -1
  25. package/dist/cjs/components/Tables/Styles.js +3 -2
  26. package/dist/cjs/components/Tables/Styles.js.map +1 -1
  27. package/dist/cjs/presentation/shared/PresentationShell.js +1 -1
  28. package/dist/cjs/presentation/shared/PresentationShell.js.map +1 -1
  29. package/dist/cjs/utils/index.js +12 -0
  30. package/dist/cjs/utils/index.js.map +1 -1
  31. package/dist/cjs/utils/themes.js +59 -0
  32. package/dist/cjs/utils/themes.js.map +1 -0
  33. package/dist/esm/components/DatePicker/Styles.d.ts.map +1 -1
  34. package/dist/esm/components/DatePicker/Styles.js +2 -1
  35. package/dist/esm/components/DatePicker/Styles.js.map +1 -1
  36. package/dist/esm/components/GlobalStyle.d.ts.map +1 -1
  37. package/dist/esm/components/GlobalStyle.js +2 -1
  38. package/dist/esm/components/GlobalStyle.js.map +1 -1
  39. package/dist/esm/components/Icons/collection/TextAlignCenter.d.ts +32 -0
  40. package/dist/esm/components/Icons/collection/TextAlignCenter.d.ts.map +1 -0
  41. package/dist/esm/components/Icons/collection/TextAlignCenter.js +55 -0
  42. package/dist/esm/components/Icons/collection/TextAlignCenter.js.map +1 -0
  43. package/dist/esm/components/Icons/collection/TextAlignJustify.d.ts +32 -0
  44. package/dist/esm/components/Icons/collection/TextAlignJustify.d.ts.map +1 -0
  45. package/dist/esm/components/Icons/collection/TextAlignJustify.js +55 -0
  46. package/dist/esm/components/Icons/collection/TextAlignJustify.js.map +1 -0
  47. package/dist/esm/components/Icons/collection/TextAlignLeft.d.ts +32 -0
  48. package/dist/esm/components/Icons/collection/TextAlignLeft.d.ts.map +1 -0
  49. package/dist/esm/components/Icons/collection/TextAlignLeft.js +55 -0
  50. package/dist/esm/components/Icons/collection/TextAlignLeft.js.map +1 -0
  51. package/dist/esm/components/Icons/collection/TextAlignRight.d.ts +32 -0
  52. package/dist/esm/components/Icons/collection/TextAlignRight.d.ts.map +1 -0
  53. package/dist/esm/components/Icons/collection/TextAlignRight.js +55 -0
  54. package/dist/esm/components/Icons/collection/TextAlignRight.js.map +1 -0
  55. package/dist/esm/components/Icons/collection/TextStyleBold.d.ts +32 -0
  56. package/dist/esm/components/Icons/collection/TextStyleBold.d.ts.map +1 -0
  57. package/dist/esm/components/Icons/collection/TextStyleBold.js +55 -0
  58. package/dist/esm/components/Icons/collection/TextStyleBold.js.map +1 -0
  59. package/dist/esm/components/Icons/collection/TextStyleItalic.d.ts +32 -0
  60. package/dist/esm/components/Icons/collection/TextStyleItalic.d.ts.map +1 -0
  61. package/dist/esm/components/Icons/collection/TextStyleItalic.js +55 -0
  62. package/dist/esm/components/Icons/collection/TextStyleItalic.js.map +1 -0
  63. package/dist/esm/components/Icons/collection/TextStyleStrike.d.ts +32 -0
  64. package/dist/esm/components/Icons/collection/TextStyleStrike.d.ts.map +1 -0
  65. package/dist/esm/components/Icons/collection/TextStyleStrike.js +61 -0
  66. package/dist/esm/components/Icons/collection/TextStyleStrike.js.map +1 -0
  67. package/dist/esm/components/Icons/collection/TextStyleUnderline.d.ts +32 -0
  68. package/dist/esm/components/Icons/collection/TextStyleUnderline.d.ts.map +1 -0
  69. package/dist/esm/components/Icons/collection/TextStyleUnderline.js +61 -0
  70. package/dist/esm/components/Icons/collection/TextStyleUnderline.js.map +1 -0
  71. package/dist/esm/components/Icons/collection/index.d.ts +8 -0
  72. package/dist/esm/components/Icons/collection/index.d.ts.map +1 -1
  73. package/dist/esm/components/Icons/collection/index.js +8 -0
  74. package/dist/esm/components/Icons/collection/index.js.map +1 -1
  75. package/dist/esm/components/Loaders/Skeleton/Styles.d.ts.map +1 -1
  76. package/dist/esm/components/Loaders/Skeleton/Styles.js +2 -1
  77. package/dist/esm/components/Loaders/Skeleton/Styles.js.map +1 -1
  78. package/dist/esm/components/Tables/Styles.d.ts.map +1 -1
  79. package/dist/esm/components/Tables/Styles.js +3 -2
  80. package/dist/esm/components/Tables/Styles.js.map +1 -1
  81. package/dist/esm/presentation/shared/PresentationShell.js +2 -2
  82. package/dist/esm/presentation/shared/PresentationShell.js.map +1 -1
  83. package/dist/esm/utils/index.d.ts +1 -0
  84. package/dist/esm/utils/index.d.ts.map +1 -1
  85. package/dist/esm/utils/index.js +1 -0
  86. package/dist/esm/utils/index.js.map +1 -1
  87. package/dist/esm/utils/themes.d.ts +12 -0
  88. package/dist/esm/utils/themes.d.ts.map +1 -0
  89. package/dist/esm/utils/themes.js +43 -0
  90. package/dist/esm/utils/themes.js.map +1 -0
  91. package/dist/index.js +1103 -616
  92. package/dist/index.js.map +1 -1
  93. package/dist/index.min.js +1 -1
  94. package/dist/index.min.js.map +1 -1
  95. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["styled","keyframes","linearAnimation","StyledSkeletonLoader","div","withConfig","displayName","componentId"],"sources":["../../../../../src/components/Loaders/Skeleton/Styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\n\nconst linearAnimation = keyframes`\n 0% {\n background-position: left;\n }\n 100% {\n background-position: right;\n }\n`;\n\nexport const StyledSkeletonLoader = styled.div`\n width: 70%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 20%,\n rgba(0, 0, 0, 0.05) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n background-size: 400%;\n height: 16px;\n border-radius: 8px;\n .neon & {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 20%,\n rgba(0, 0, 0, 0.2) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n background-size: 500%;\n }\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: ${linearAnimation};\n animation-timing-function: linear;\n animation-direction: reverse;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAErD,MAAMC,eAAe,GAAGD,SAAS,mEAOhC;AAED,OAAO,MAAME,oBAAoB,GAAGH,MAAM,CAACI,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+bAsB1BL,eAAe,CAGlC","ignoreList":[]}
1
+ {"version":3,"file":"Styles.js","names":["styled","keyframes","DARK_THEME_SELECTOR","linearAnimation","StyledSkeletonLoader","div","withConfig","displayName","componentId"],"sources":["../../../../../src/components/Loaders/Skeleton/Styles.ts"],"sourcesContent":["import styled, { keyframes } from \"styled-components\";\n\nimport { DARK_THEME_SELECTOR } from \"../../../utils/themes\";\n\nconst linearAnimation = keyframes`\n 0% {\n background-position: left;\n }\n 100% {\n background-position: right;\n }\n`;\n\nexport const StyledSkeletonLoader = styled.div`\n width: 70%;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 20%,\n rgba(0, 0, 0, 0.05) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n background-size: 400%;\n height: 16px;\n border-radius: 8px;\n ${DARK_THEME_SELECTOR} & {\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0) 20%,\n rgba(0, 0, 0, 0.2) 50%,\n rgba(255, 255, 255, 0) 60%\n );\n background-size: 500%;\n }\n animation-duration: 1s;\n animation-iteration-count: infinite;\n animation-name: ${linearAnimation};\n animation-timing-function: linear;\n animation-direction: reverse;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AAErD,SAASC,mBAAmB,QAAQ,uBAAuB;AAE3D,MAAMC,eAAe,GAAGF,SAAS,mEAOhC;AAED,OAAO,MAAMG,oBAAoB,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8bAW1CN,mBAAmB,EAWHC,eAAe,CAGlC","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe;oBACV,SAAS,GAAG,WAAW;SA6CxC,CAAC;AAGF,eAAO,MAAM,eAAe,sEAsB3B,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAY9B,CAAC;AAGF,eAAO,MAAM,WAAW;cACZ,OAAO;SAyBlB,CAAC;AAGF,eAAO,MAAM,eAAe,oEA8L3B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tables/Styles.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe;oBACV,SAAS,GAAG,WAAW;SA6CxC,CAAC;AAGF,eAAO,MAAM,eAAe,sEAsB3B,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAY9B,CAAC;AAGF,eAAO,MAAM,WAAW;cACZ,OAAO;SAyBlB,CAAC;AAGF,eAAO,MAAM,eAAe,oEA8L3B,CAAC"}
@@ -1,4 +1,5 @@
1
1
  import styled, { css } from "styled-components";
2
+ import { DARK_THEME_SELECTOR } from "../../utils/themes";
2
3
  import { BoxSizingStyle } from "../BoxSizingStyle";
3
4
  import { FontStyle } from "../FontStyle";
4
5
  export const StyledTableHead = styled.thead.withConfig({
@@ -87,7 +88,7 @@ StyledTable.displayName = "StyledTable";
87
88
  export const StyledDataTable = styled.div.withConfig({
88
89
  displayName: "Styles__StyledDataTable",
89
90
  componentId: "sc-e16t6w-4"
90
- })(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);.neon &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
91
+ })(["", " ", " &.c-table__collapsible{.c-table__head{tr{th{position:sticky;top:0;z-index:1;}}}}&.c-table__grouped{.c-table__head th{", " &:last-child{", "}}}&.c-data-table{position:relative;.c-table__head th{&:last-child{", "}}}.c-table__cell{", " &:hover{.c-table__icon{", "}}}.c-table__overlay{", " top:0px;border-top-left-radius:8px;border-top-right-radius:8px;background:rgba(0,0,0,0.02);", " &{background:rgba(0,0,0,0.1);}z-index:5;}.c-table__icon-wrapper{", "}.c-table__label{", "}.c-table__icon{transform:translateY(1px);", " fill:var(--color-theme-900);&:hover{", "}}.c-table__icon--inactive{", "}.c-table__icon--active{", "}.c-table__icon--desc{transform:rotate(-180deg) scale(-1,1);}.c-table__grouped__head{", " > :first-child{", "}a:first-child{", "}}.c-table__head--hidden{", "}.c-table__collapse_icon--expanded{transition-duration:0.3s;", "}.c-table__collapse_icon--collapsed{transform:rotate(180deg);transition-duration:0.3s;", "}.c-table__head__icon-wrapper__icon{", " transform:translate(-24px,-5px);}&.c-table__collapsible{.c-table__group{.c-table__row:last-child .c-table__cell{border-bottom:1px solid var(--border-primary);}&:last-child{.c-table__row:last-child .c-table__cell{border-bottom:0;}}}.c-table__grouped__head{tr td{border-bottom:1px solid var(--border-primary);}.c-table__body__collapse td{border-bottom:0;}&.last{tr td{border-bottom:0 !important;}}}.c-table__grouped__head--expanded{tr:last-child td{border-bottom:0;}}}.c-table__collapse_body{tr{background-color:transparent !important;}td:last-child{", "}", "}.c-table__row{td:first-child{position:sticky;left:0;z-index:1;}&:nth-child(odd){td{", "}}&:nth-child(even){td{", "}}}.c-table__row{th:first-child{position:sticky;left:0;z-index:2 !important;}}&.c-table__collapsible .c-table__body{tr{td:first-child,th:first-child{", "}}}.c-table__body__icon{", " padding-left:0 !important;transform:translateY(8px);}&.padding-b-0{", "}.cursor-pointer{", "}.text-center{", "}.opacity-75{", "}.hidden{", "}"], FontStyle, BoxSizingStyle, {
91
92
  "paddingBottom": "1rem"
92
93
  }, {
93
94
  "paddingRight": "0px"
@@ -102,7 +103,7 @@ export const StyledDataTable = styled.div.withConfig({
102
103
  "position": "absolute",
103
104
  "left": "0px",
104
105
  "width": "100%"
105
- }, {
106
+ }, DARK_THEME_SELECTOR, {
106
107
  "display": "inline-block",
107
108
  "userSelect": "none"
108
109
  }, {
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTableHead","thead","withConfig","displayName","componentId","props","$headerVariant","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","$striped","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead<{\n $headerVariant: \"primary\" | \"secondary\";\n}>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n ${tw`tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"primary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n `}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"secondary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap`}\n }\n\n tr {\n th {\n padding-bottom: 8px;\n padding-left: 16px;\n }\n }\n\n tr {\n th:last-child {\n padding-right: 16px;\n }\n }\n `}\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n .neon & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Styles.js","names":["styled","css","DARK_THEME_SELECTOR","BoxSizingStyle","FontStyle","StyledTableHead","thead","withConfig","displayName","componentId","props","$headerVariant","StyledTableBody","tbody","StyledTableWrapper","div","StyledTable","table","$striped","StyledDataTable"],"sources":["../../../../src/components/Tables/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { DARK_THEME_SELECTOR } from \"../../utils/themes\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledTableHead = styled.thead<{\n $headerVariant: \"primary\" | \"secondary\";\n}>`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-text-left tw-uppercase`}\n ${tw`tw-text-theme-700 tw-font-semibold tw-text-xxs`}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"primary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap tw-pl-4 tw-pr-4 tw-pb-8 tw-pt-2`}\n }\n\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n `}\n\n ${(props) =>\n props.$headerVariant &&\n props.$headerVariant === \"secondary\" &&\n css`\n th {\n ${tw`tw-whitespace-nowrap`}\n }\n\n tr {\n th {\n padding-bottom: 8px;\n padding-left: 16px;\n }\n }\n\n tr {\n th:last-child {\n padding-right: 16px;\n }\n }\n `}\n`;\nStyledTableHead.displayName = \"StyledTableHead\";\n\nexport const StyledTableBody = styled.tbody`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-truncate`}\n\n td {\n ${tw`tw-truncate`}\n }\n\n &:not(.c-table__grouped__head) {\n td {\n ${tw`tw-text-theme-700`}\n }\n }\n\n a {\n ${tw`tw-no-underline tw-text-primary`}\n &:hover {\n ${tw`tw-underline`}\n }\n }\n`;\nStyledTableBody.displayName = \"StyledTableBody\";\n\nexport const StyledTableWrapper = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-mt-8 tw-mx-4 tw-overflow-x-auto tw-overflow-y-hidden`}\n\n &:before {\n ${tw`tw-absolute tw-left-0 tw-right-0 tw-bottom-0 tw-bg-page-paper-main tw-rounded-lg tw-shadow-lg`}\n content: \"\";\n top: 39px;\n z-index: -1;\n }\n`;\nStyledTableWrapper.displayName = \"StyledTableWrapper\";\n\nexport const StyledTable = styled.table<{\n $striped: boolean;\n}>`\n ${tw`tw-w-full tw-p-0 tw-text-xs tw-pb-4`}\n border-spacing: 0;\n\n ${StyledTableHead} tr th,\n ${StyledTableBody} tr td {\n &:last-child {\n ${tw`tw-text-right`}\n }\n }\n\n td {\n ${tw`tw-py-3 tw-px-4`}\n }\n\n ${(props) =>\n props.$striped &&\n css`\n ${StyledTableBody}:not(.c-table__grouped__head) {\n tr:nth-child(odd) {\n ${tw`tw-bg-theme-200`}\n }\n }\n `}\n`;\nStyledTable.displayName = \"StyledTable\";\n\nexport const StyledDataTable = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n &.c-table__collapsible {\n .c-table__head {\n tr {\n th {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n }\n }\n }\n &.c-table__grouped {\n .c-table__head th {\n ${tw`tw-pb-4`}\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n &.c-data-table {\n position: relative;\n .c-table__head th {\n &:last-child {\n ${tw`tw-pr-0`}\n }\n }\n }\n .c-table__cell {\n ${tw`tw-relative`}\n &:hover {\n .c-table__icon {\n ${tw`tw-opacity-50`}\n }\n }\n }\n .c-table__overlay {\n ${tw`tw-absolute tw-w-full tw-left-0 tw-pointer-events-none`}\n top: 0px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n background: rgba(0, 0, 0, 0.02);\n ${DARK_THEME_SELECTOR} & {\n background: rgba(0, 0, 0, 0.1);\n }\n z-index: 5;\n }\n .c-table__icon-wrapper {\n ${tw`tw-inline-block tw-select-none`}\n }\n .c-table__label {\n ${tw`tw-border-0 tw-border-0 tw-border-transparent tw-border-solid`}\n }\n .c-table__icon {\n transform: translateY(1px);\n ${tw`tw-ml-1`}\n fill: var(--color-theme-900);\n\n &:hover {\n ${tw`tw-opacity-100`}\n }\n }\n .c-table__icon--inactive {\n ${tw`tw-opacity-0`}\n }\n .c-table__icon--active {\n ${tw`tw-opacity-100`}\n }\n .c-table__icon--desc {\n transform: rotate(-180deg) scale(-1, 1);\n }\n .c-table__grouped__head {\n ${tw`tw-font-bold`}\n > :first-child {\n ${tw`tw-text-theme-900`}\n }\n a:first-child {\n ${tw`tw-text-primary`}\n }\n }\n .c-table__head--hidden {\n ${tw`tw-pointer-events-none tw-opacity-0`}\n }\n .c-table__collapse_icon--expanded {\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__collapse_icon--collapsed {\n transform: rotate(180deg);\n transition-duration: 0.3s;\n ${tw`tw-cursor-pointer`}\n }\n .c-table__head__icon-wrapper__icon {\n ${tw`tw-absolute tw-cursor-pointer`}\n transform: translate(-24px, -5px);\n }\n &.c-table__collapsible {\n .c-table__group {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 1px solid var(--border-primary);\n }\n &:last-child {\n .c-table__row:last-child .c-table__cell {\n border-bottom: 0;\n }\n }\n }\n .c-table__grouped__head {\n tr td {\n border-bottom: 1px solid var(--border-primary);\n }\n .c-table__body__collapse td {\n border-bottom: 0;\n }\n &.last {\n tr td {\n border-bottom: 0 !important;\n }\n }\n }\n .c-table__grouped__head--expanded {\n tr:last-child td {\n border-bottom: 0;\n }\n }\n }\n .c-table__collapse_body {\n tr {\n background-color: transparent !important;\n }\n td:last-child {\n ${tw`tw-border-0`}\n }\n ${tw`tw-absolute`}\n }\n .c-table__row {\n td:first-child {\n position: sticky;\n left: 0;\n z-index: 1;\n }\n &:nth-child(odd) {\n td {\n ${tw`tw-bg-theme-200`}\n }\n }\n &:nth-child(even) {\n td {\n ${tw`tw-bg-page-paper-main`}\n }\n }\n }\n .c-table__row {\n th:first-child {\n position: sticky;\n left: 0;\n z-index: 2 !important;\n }\n }\n &.c-table__collapsible .c-table__body {\n tr {\n td:first-child,\n th:first-child {\n ${tw`tw-pl-6`}\n }\n }\n }\n .c-table__body__icon {\n ${tw`tw-p-0`}\n padding-left: 0 !important;\n transform: translateY(8px);\n }\n &.padding-b-0 {\n ${tw`tw-pb-0`}\n }\n .cursor-pointer {\n ${tw`tw-cursor-pointer`}\n }\n .text-center {\n ${tw`tw-text-center`}\n }\n .opacity-75 {\n ${tw`tw-opacity-75`}\n }\n .hidden {\n ${tw`tw-hidden`}\n }\n`;\nStyledDataTable.displayName = \"StyledDataTable\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,mBAAmB,QAAQ,oBAAoB;AACxD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,eAAe,GAAGL,MAAM,CAACM,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sCAGvCL,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;AAA0B,CAAC,EAC3B;EAAA;EAAA;EAAA;AAA+C,CAAC,EAEjDO,KAAK,IACNA,KAAK,CAACC,cAAc,IACpBD,KAAK,CAACC,cAAc,KAAK,SAAS,IAClCV,GAAG,sDAEK;EAAA;EAAA;EAAA;EAAA;EAAA;AAAqD,CAAC,EAMpD;EAAA;AAAQ,CAAC,CAGlB,EAEES,KAAK,IACRA,KAAK,CAACC,cAAc,IACpBD,KAAK,CAACC,cAAc,KAAK,WAAW,IACpCV,GAAG,kGAEK;EAAA;AAAqB,CAAC,CAe7B,CACJ;AACDI,eAAe,CAACG,WAAW,GAAG,iBAAiB;AAE/C,OAAO,MAAMI,eAAe,GAAGZ,MAAM,CAACa,KAAK,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6FACvCL,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;AAAY,CAAC,EAGX;EAAA;EAAA;EAAA;AAAY,CAAC,EAKX;EAAA;AAAkB,CAAC,EAKrB;EAAA;EAAA;AAAgC,CAAC,EAE/B;EAAA;AAAa,CAAC,CAGvB;AACDS,eAAe,CAACJ,WAAW,GAAG,iBAAiB;AAE/C,OAAO,MAAMM,kBAAkB,GAAGd,MAAM,CAACe,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEACxCL,SAAS,EACTD,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAGvD;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAA8F,CAAC,CAKtG;AACDW,kBAAkB,CAACN,WAAW,GAAG,oBAAoB;AAErD,OAAO,MAAMQ,WAAW,GAAGhB,MAAM,CAACiB,KAAK,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oFAGjC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAoC,CAAC,EAGvCJ,eAAe,EACfO,eAAe,EAET;EAAA;AAAc,CAAC,EAKjB;EAAA;EAAA;EAAA;EAAA;AAAgB,CAAC,EAGpBF,KAAK,IACNA,KAAK,CAACQ,QAAQ,IACdjB,GAAG,iEACCW,eAAe,EAET;EAAA;AAAgB,CAAC,CAG1B,CACJ;AACDI,WAAW,CAACR,WAAW,GAAG,aAAa;AAEvC,OAAO,MAAMW,eAAe,GAAGnB,MAAM,CAACe,GAAG,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+7DACrCL,SAAS,EACTD,cAAc,EAeR;EAAA;AAAQ,CAAC,EAEP;EAAA;AAAQ,CAAC,EAQT;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAY,CAAC,EAGT;EAAA;AAAc,CAAC,EAKnB;EAAA;EAAA;EAAA;EAAA;AAAuD,CAAC,EAK1DD,mBAAmB,EAMjB;EAAA;EAAA;AAA+B,CAAC,EAGhC;EAAA;EAAA;EAAA;AAA8D,CAAC,EAI/D;EAAA;AAAQ,CAAC,EAIP;EAAA;AAAe,CAAC,EAIlB;EAAA;AAAa,CAAC,EAGd;EAAA;AAAe,CAAC,EAMhB;EAAA;AAAa,CAAC,EAEZ;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAgB,CAAC,EAInB;EAAA;EAAA;AAAoC,CAAC,EAIrC;EAAA;AAAkB,CAAC,EAKnB;EAAA;AAAkB,CAAC,EAGnB;EAAA;EAAA;AAA8B,CAAC,EAsC7B;EAAA;AAAY,CAAC,EAEf;EAAA;AAAY,CAAC,EAUT;EAAA;AAAgB,CAAC,EAKjB;EAAA;AAAsB,CAAC,EAevB;EAAA;AAAQ,CAAC,EAKb;EAAA;AAAO,CAAC,EAKR;EAAA;AAAQ,CAAC,EAGT;EAAA;AAAkB,CAAC,EAGnB;EAAA;AAAe,CAAC,EAGhB;EAAA;AAAc,CAAC,EAGf;EAAA;AAAU,CAAC,CAElB;AACDiB,eAAe,CAACX,WAAW,GAAG,iBAAiB","ignoreList":[]}
@@ -8,7 +8,7 @@ import { Modal } from "../../components/Modal";
8
8
  import { Paper } from "../../components/Paper";
9
9
  import { Tooltip } from "../../components/Tooltip";
10
10
  import { Body2, Caption1 } from "../../components/Typography";
11
- import { useResizeObserver } from "../../utils";
11
+ import { DARK_THEME_SELECTOR, useResizeObserver } from "../../utils";
12
12
  const MENU_ITEMS = [{
13
13
  icon: RocketIcon,
14
14
  text: "Getting Started"
@@ -107,7 +107,7 @@ const StyledTopRightControls = styled.div.withConfig({
107
107
  const StyledHeaderAvatar = styled.div.withConfig({
108
108
  displayName: "PresentationShell__StyledHeaderAvatar",
109
109
  componentId: "sc-12j90o1-12"
110
- })(["width:28px;height:28px;border-radius:50%;background-color:var(--color-secondary);color:var(--only-white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin:0 8px;flex-shrink:0;cursor:pointer;.neon &{color:var(--page-paper-main);}"]);
110
+ })(["width:28px;height:28px;border-radius:50%;background-color:var(--color-secondary);color:var(--only-white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin:0 8px;flex-shrink:0;cursor:pointer;", " &{color:var(--page-paper-main);}"], DARK_THEME_SELECTOR);
111
111
 
112
112
  /* ------------------------------------------------------------------ */
113
113
  /* Page region (mirrors Page.jsx / PageBody.jsx) */
@@ -1 +1 @@
1
- {"version":3,"file":"PresentationShell.js","names":["React","useCallback","useEffect","useRef","useState","styled","MainLogo","BREAKPOINT","SM","TRANSITION","XL","IconButton","ActivityIcon","CalendarIcon","ClockStopwatchIndicatorIcon","CloseIcon","CollapsIcon","EstimatesIcon","InvoicesIcon","MobileMenuIcon","MyWorkIcon","NotificationBellIcon","PeopleIcon","ProjectsIcon","ReportTimeIcon","ReportsIcon","RocketIcon","SearchIcon","Modal","Paper","Tooltip","Body2","Caption1","useResizeObserver","MENU_ITEMS","icon","text","active","StyledLayout","div","withConfig","displayName","componentId","StyledContentRow","StyledRightWindow","StyledMainMenu","StyledMenuHeader","StyledMenuScroll","StyledMenuSection","StyledMenuItem","a","StyledMobileMenuClose","StyledMobileMenuHeader","StyledIconRow","StyledTopRightControls","StyledHeaderAvatar","StyledPage","StyledPageBody","StyledPagePaper","MenuItemsMock","_ref","_ref$mobile","mobile","createElement","className","weight","color","map","_ref2","Icon","key","title","placement","disable","undefined","whitespace","MainMenuMock","_ref3","collapsed","onToggleCollapsed","footer","variant","size","onClick","MainMenuMobileMock","_ref4","open","close","onClose","MobileMenuHeaderMock","_ref5","onOpenMobileMenu","TopRightControlsMock","PresentationShell","_ref6","header","children","floating","menuFooter","_useState","mobileMenuOpen","setMobileMenuOpen","_useState2","setCollapsed","_useState3","isMobileView","setIsMobileView","ref","dimensions","width","handleOpenMobileMenu","handleCloseMobileMenu","handleToggleCollapsed","prev","id"],"sources":["../../../../src/presentation/shared/PresentationShell.tsx"],"sourcesContent":["import React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MainLogo } from \"./MainLogo\";\nimport { BREAKPOINT, SM, TRANSITION, XL } from \"./tokens\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n ActivityIcon,\n CalendarIcon,\n ClockStopwatchIndicatorIcon,\n CloseIcon,\n CollapsIcon,\n EstimatesIcon,\n InvoicesIcon,\n MobileMenuIcon,\n MyWorkIcon,\n NotificationBellIcon,\n PeopleIcon,\n ProjectsIcon,\n ReportTimeIcon,\n ReportsIcon,\n RocketIcon,\n SearchIcon,\n} from \"../../components/Icons\";\nimport { Modal } from \"../../components/Modal\";\nimport { Paper } from \"../../components/Paper\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1 } from \"../../components/Typography\";\nimport { useResizeObserver } from \"../../utils\";\n\nconst MENU_ITEMS: {\n icon: React.FC<React.SVGProps<SVGSVGElement>>;\n text: string;\n active?: boolean;\n}[] = [\n { icon: RocketIcon, text: \"Getting Started\" },\n { icon: ProjectsIcon, text: \"Projects\", active: true },\n { icon: MyWorkIcon, text: \"My Work\" },\n { icon: ActivityIcon, text: \"Activity\" },\n { icon: CalendarIcon, text: \"Calendar\" },\n { icon: PeopleIcon, text: \"People\" },\n { icon: ReportTimeIcon, text: \"Time\" },\n { icon: ReportsIcon, text: \"Reports\" },\n { icon: InvoicesIcon, text: \"Invoices\" },\n { icon: EstimatesIcon, text: \"Estimates\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* Layout shell (mirrors Layout.js) */\n/* ------------------------------------------------------------------ */\n\nconst StyledLayout = styled.div`\n height: 100vh;\n display: flex;\n flex-direction: column;\n background-color: var(--body-bg-main);\n`;\n\nconst StyledContentRow = styled.div`\n position: relative;\n display: flex;\n flex-direction: row-reverse;\n flex: 1 1 0%;\n flex-grow: 1;\n overflow-y: auto;\n`;\n\nconst StyledRightWindow = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0 16px;\n\n @media (min-width: ${SM}) {\n padding-right: 32px;\n }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Main menu (mirrors MainMenu.js + MainMenu.less) */\n/* ------------------------------------------------------------------ */\n\nconst StyledMainMenu = styled.div`\n position: relative;\n z-index: 1;\n display: none;\n flex-direction: column;\n height: 100%;\n margin-right: 4px;\n flex-shrink: 0;\n width: 240px;\n transition: width ${TRANSITION};\n\n @media (min-width: ${SM}) {\n display: flex;\n }\n\n &.collapsed {\n width: 72px;\n }\n\n .menu-item-text,\n .menu-section,\n #logotype {\n transition: all ${TRANSITION};\n }\n\n &.collapsed .menu-item-text {\n opacity: 0;\n visibility: hidden;\n width: 0;\n margin-left: 0;\n }\n\n &.collapsed .menu-section {\n transform: scaleY(0);\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n\n &.collapsed #logotype {\n transform: translateX(-5%);\n opacity: 0;\n }\n\n &.collapsed .collapse-expand-menu svg {\n transform: rotate(180deg);\n }\n\n &:not(.mobile) {\n @media (max-width: 1279.98px) {\n width: 72px;\n\n .menu-item-text {\n opacity: 0;\n visibility: hidden;\n width: 0;\n margin-left: 0;\n }\n\n .menu-section {\n transform: scaleY(0);\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n\n #logotype {\n transform: translateX(-5%);\n opacity: 0;\n }\n }\n }\n\n &.mobile {\n display: flex;\n position: absolute;\n left: 0;\n top: 0;\n width: 240px;\n background-color: var(--page-paper-main);\n }\n`;\n\nconst StyledMenuHeader = styled.div`\n position: relative;\n height: 68px;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n overflow: hidden;\n\n .main-logo {\n position: absolute;\n left: 20px;\n color: var(--color-secondary);\n\n path {\n fill: var(--color-secondary);\n }\n }\n\n .collapse-expand-menu {\n position: absolute;\n right: 4px;\n display: none;\n\n @media (min-width: ${XL}) {\n display: flex;\n }\n }\n`;\n\nconst StyledMenuScroll = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n min-height: 0;\n margin: 12px 0;\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nconst StyledMenuSection = styled.div`\n display: flex;\n align-items: center;\n margin: 0 12px 8px;\n padding: 0 4px 0 12px;\n`;\n\nconst StyledMenuItem = styled.a`\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 4px 0 12px;\n margin: 0 12px 2px;\n border-radius: 8px;\n cursor: pointer;\n text-decoration: none;\n\n svg {\n flex-shrink: 0;\n fill: var(--color-theme-700);\n opacity: 0.7;\n }\n\n .menu-item-text {\n margin-left: 12px;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &:hover {\n transition: all ${TRANSITION};\n background-color: var(--color-theme-300);\n\n svg {\n fill: var(--color-theme-900);\n opacity: 1;\n }\n\n .menu-item-text {\n color: var(--color-theme-900);\n }\n }\n\n &.active {\n background-color: var(--color-secondary-200);\n\n svg {\n fill: var(--color-secondary);\n opacity: 1;\n }\n\n .menu-item-text {\n color: var(--color-secondary);\n }\n }\n`;\n\nconst StyledMobileMenuClose = styled(IconButton)`\n position: absolute;\n right: 16px;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Top bars */\n/* ------------------------------------------------------------------ */\n\nconst StyledMobileMenuHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n background-color: var(--color-primary);\n z-index: 50;\n\n @media (min-width: ${SM}) {\n display: none;\n }\n\n .mobile-menu-icon {\n fill: var(--color-theme-300);\n }\n`;\n\nconst StyledIconRow = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledTopRightControls = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n display: none;\n align-items: center;\n justify-content: flex-end;\n padding: 12px 32px 12px 0;\n\n @media (min-width: ${SM}) {\n display: flex;\n }\n`;\n\nconst StyledHeaderAvatar = styled.div`\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background-color: var(--color-secondary);\n color: var(--only-white);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n margin: 0 8px;\n flex-shrink: 0;\n cursor: pointer;\n\n /* neon theme: use paper colour for the initials */\n .neon & {\n color: var(--page-paper-main);\n }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Page region (mirrors Page.jsx / PageBody.jsx) */\n/* ------------------------------------------------------------------ */\n\nconst StyledPage = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n`;\n\nconst StyledPageBody = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-bottom: 32px;\n min-height: 0;\n`;\n\n/** The paper card that holds page content (used by list view & empty pages). */\nexport const StyledPagePaper = styled(Paper)`\n flex-grow: 1;\n width: 100%;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Mocked layout building blocks */\n/* ------------------------------------------------------------------ */\n\ninterface MenuItemsProps {\n mobile?: boolean;\n}\n\nconst MenuItemsMock = ({ mobile = false }: MenuItemsProps): ReactElement => (\n <StyledMenuScroll>\n <StyledMenuSection className=\"menu-section\">\n <Caption1 weight=\"bold\" color=\"tertiary\">\n MENU\n </Caption1>\n </StyledMenuSection>\n {MENU_ITEMS.map(({ icon: Icon, text, active }) => (\n <Tooltip key={text} title={text} placement=\"right\" disable={mobile}>\n <StyledMenuItem className={active ? \"active\" : undefined}>\n <Icon />\n <Body2\n weight=\"medium\"\n color=\"secondary\"\n whitespace=\"no-wrap\"\n className=\"menu-item-text\"\n >\n {text}\n </Body2>\n </StyledMenuItem>\n </Tooltip>\n ))}\n </StyledMenuScroll>\n);\n\ninterface MainMenuMockProps {\n collapsed: boolean;\n onToggleCollapsed: () => void;\n footer?: ReactNode;\n}\n\nconst MainMenuMock = ({\n collapsed,\n onToggleCollapsed,\n footer,\n}: MainMenuMockProps): ReactElement => (\n <StyledMainMenu\n className={collapsed ? \"collapsed\" : undefined}\n data-testid=\"main-menu\"\n >\n <StyledMenuHeader>\n <a className=\"main-logo\">\n <MainLogo />\n </a>\n <div className=\"collapse-expand-menu\">\n <IconButton\n variant=\"text gray\"\n size=\"small\"\n onClick={onToggleCollapsed}\n >\n <CollapsIcon />\n </IconButton>\n </div>\n </StyledMenuHeader>\n <MenuItemsMock />\n {footer}\n </StyledMainMenu>\n);\n\ninterface MainMenuMobileMockProps {\n open: boolean;\n close: () => void;\n footer?: ReactNode;\n}\n\nconst MainMenuMobileMock = ({\n open,\n close,\n footer,\n}: MainMenuMobileMockProps): ReactElement | null =>\n open ? (\n <Modal open={open} onClose={close}>\n <StyledMainMenu className=\"mobile\" data-testid=\"main-menu-mobile\">\n <StyledMenuHeader>\n <a className=\"main-logo\">\n <MainLogo />\n </a>\n <StyledMobileMenuClose onClick={close} variant=\"text gray\">\n <CloseIcon />\n </StyledMobileMenuClose>\n </StyledMenuHeader>\n <MenuItemsMock mobile />\n {footer}\n </StyledMainMenu>\n </Modal>\n ) : null;\n\ninterface MobileMenuHeaderMockProps {\n onOpenMobileMenu: () => void;\n}\n\nconst MobileMenuHeaderMock = ({\n onOpenMobileMenu,\n}: MobileMenuHeaderMockProps): ReactElement => (\n <StyledMobileMenuHeader>\n <IconButton size=\"big\" variant=\"circle raised\" onClick={onOpenMobileMenu}>\n <MobileMenuIcon className=\"mobile-menu-icon\" />\n </IconButton>\n <StyledIconRow>\n <IconButton variant=\"text gray\">\n <SearchIcon />\n </IconButton>\n <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n <IconButton variant=\"text gray\">\n <NotificationBellIcon />\n </IconButton>\n </StyledIconRow>\n </StyledMobileMenuHeader>\n);\n\nconst TopRightControlsMock = (): ReactElement => (\n <StyledTopRightControls>\n <IconButton variant=\"text gray\">\n <ClockStopwatchIndicatorIcon />\n </IconButton>\n <IconButton variant=\"text gray\">\n <SearchIcon />\n </IconButton>\n <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n <IconButton variant=\"text gray\">\n <NotificationBellIcon />\n </IconButton>\n </StyledTopRightControls>\n);\n\n/* ------------------------------------------------------------------ */\n/* PresentationShell */\n/* ------------------------------------------------------------------ */\n\nexport interface PresentationShellProps {\n /** Page header row (e.g. <ProjectPageHeader /> or <PageHeader title=\"…\" />). */\n header: ReactNode;\n /** Page body content rendered inside the scrollable page area. */\n children: ReactNode;\n /** Optional fixed controls (e.g. <FloatingControls />). */\n floating?: ReactNode;\n /** Optional content pinned to the bottom of the main menu (e.g. <HelpAndSupportMenu />). */\n menuFooter?: ReactNode;\n}\n\n/**\n * The full application shell shared by every presentation mock-up: the main\n * menu on the left (auto-collapsing below 1280px, modal below 640px), the\n * top-right controls and the scrollable page area. Pass the page header via\n * `header` and the body via `children`.\n */\nexport const PresentationShell = ({\n header,\n children,\n floating,\n menuFooter,\n}: PresentationShellProps): ReactElement => {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const [isMobileView, setIsMobileView] = useState<boolean>();\n\n const ref = useRef<HTMLDivElement>(null);\n const dimensions = useResizeObserver(ref);\n const width = dimensions?.width;\n\n useEffect(() => {\n if (width) {\n if (width < BREAKPOINT) {\n setIsMobileView(true);\n } else {\n setIsMobileView(false);\n setMobileMenuOpen(false);\n }\n }\n }, [width]);\n\n const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);\n const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);\n const handleToggleCollapsed = useCallback(\n () => setCollapsed((prev) => !prev),\n []\n );\n\n return (\n <StyledLayout ref={ref}>\n {isMobileView ? (\n <MobileMenuHeaderMock onOpenMobileMenu={handleOpenMobileMenu} />\n ) : null}\n <StyledContentRow>\n <StyledRightWindow id=\"right-window\">\n <StyledPage>\n {header}\n <StyledPageBody>{children}</StyledPageBody>\n </StyledPage>\n {isMobileView === false ? <TopRightControlsMock /> : null}\n </StyledRightWindow>\n {isMobileView ? (\n <MainMenuMobileMock\n open={mobileMenuOpen}\n close={handleCloseMobileMenu}\n footer={menuFooter}\n />\n ) : (\n <MainMenuMock\n collapsed={collapsed}\n onToggleCollapsed={handleToggleCollapsed}\n footer={menuFooter}\n />\n )}\n </StyledContentRow>\n {floating}\n </StyledLayout>\n );\n};\n\nPresentationShell.displayName = \"PresentationShell\";\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"PresentationShell.js","names":["React","useCallback","useEffect","useRef","useState","styled","MainLogo","BREAKPOINT","SM","TRANSITION","XL","IconButton","ActivityIcon","CalendarIcon","ClockStopwatchIndicatorIcon","CloseIcon","CollapsIcon","EstimatesIcon","InvoicesIcon","MobileMenuIcon","MyWorkIcon","NotificationBellIcon","PeopleIcon","ProjectsIcon","ReportTimeIcon","ReportsIcon","RocketIcon","SearchIcon","Modal","Paper","Tooltip","Body2","Caption1","DARK_THEME_SELECTOR","useResizeObserver","MENU_ITEMS","icon","text","active","StyledLayout","div","withConfig","displayName","componentId","StyledContentRow","StyledRightWindow","StyledMainMenu","StyledMenuHeader","StyledMenuScroll","StyledMenuSection","StyledMenuItem","a","StyledMobileMenuClose","StyledMobileMenuHeader","StyledIconRow","StyledTopRightControls","StyledHeaderAvatar","StyledPage","StyledPageBody","StyledPagePaper","MenuItemsMock","_ref","_ref$mobile","mobile","createElement","className","weight","color","map","_ref2","Icon","key","title","placement","disable","undefined","whitespace","MainMenuMock","_ref3","collapsed","onToggleCollapsed","footer","variant","size","onClick","MainMenuMobileMock","_ref4","open","close","onClose","MobileMenuHeaderMock","_ref5","onOpenMobileMenu","TopRightControlsMock","PresentationShell","_ref6","header","children","floating","menuFooter","_useState","mobileMenuOpen","setMobileMenuOpen","_useState2","setCollapsed","_useState3","isMobileView","setIsMobileView","ref","dimensions","width","handleOpenMobileMenu","handleCloseMobileMenu","handleToggleCollapsed","prev","id"],"sources":["../../../../src/presentation/shared/PresentationShell.tsx"],"sourcesContent":["import React, {\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MainLogo } from \"./MainLogo\";\nimport { BREAKPOINT, SM, TRANSITION, XL } from \"./tokens\";\nimport { IconButton } from \"../../components/IconButton\";\nimport {\n ActivityIcon,\n CalendarIcon,\n ClockStopwatchIndicatorIcon,\n CloseIcon,\n CollapsIcon,\n EstimatesIcon,\n InvoicesIcon,\n MobileMenuIcon,\n MyWorkIcon,\n NotificationBellIcon,\n PeopleIcon,\n ProjectsIcon,\n ReportTimeIcon,\n ReportsIcon,\n RocketIcon,\n SearchIcon,\n} from \"../../components/Icons\";\nimport { Modal } from \"../../components/Modal\";\nimport { Paper } from \"../../components/Paper\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2, Caption1 } from \"../../components/Typography\";\nimport { DARK_THEME_SELECTOR, useResizeObserver } from \"../../utils\";\n\nconst MENU_ITEMS: {\n icon: React.FC<React.SVGProps<SVGSVGElement>>;\n text: string;\n active?: boolean;\n}[] = [\n { icon: RocketIcon, text: \"Getting Started\" },\n { icon: ProjectsIcon, text: \"Projects\", active: true },\n { icon: MyWorkIcon, text: \"My Work\" },\n { icon: ActivityIcon, text: \"Activity\" },\n { icon: CalendarIcon, text: \"Calendar\" },\n { icon: PeopleIcon, text: \"People\" },\n { icon: ReportTimeIcon, text: \"Time\" },\n { icon: ReportsIcon, text: \"Reports\" },\n { icon: InvoicesIcon, text: \"Invoices\" },\n { icon: EstimatesIcon, text: \"Estimates\" },\n];\n\n/* ------------------------------------------------------------------ */\n/* Layout shell (mirrors Layout.js) */\n/* ------------------------------------------------------------------ */\n\nconst StyledLayout = styled.div`\n height: 100vh;\n display: flex;\n flex-direction: column;\n background-color: var(--body-bg-main);\n`;\n\nconst StyledContentRow = styled.div`\n position: relative;\n display: flex;\n flex-direction: row-reverse;\n flex: 1 1 0%;\n flex-grow: 1;\n overflow-y: auto;\n`;\n\nconst StyledRightWindow = styled.div`\n position: relative;\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n flex-grow: 1;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0 16px;\n\n @media (min-width: ${SM}) {\n padding-right: 32px;\n }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Main menu (mirrors MainMenu.js + MainMenu.less) */\n/* ------------------------------------------------------------------ */\n\nconst StyledMainMenu = styled.div`\n position: relative;\n z-index: 1;\n display: none;\n flex-direction: column;\n height: 100%;\n margin-right: 4px;\n flex-shrink: 0;\n width: 240px;\n transition: width ${TRANSITION};\n\n @media (min-width: ${SM}) {\n display: flex;\n }\n\n &.collapsed {\n width: 72px;\n }\n\n .menu-item-text,\n .menu-section,\n #logotype {\n transition: all ${TRANSITION};\n }\n\n &.collapsed .menu-item-text {\n opacity: 0;\n visibility: hidden;\n width: 0;\n margin-left: 0;\n }\n\n &.collapsed .menu-section {\n transform: scaleY(0);\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n\n &.collapsed #logotype {\n transform: translateX(-5%);\n opacity: 0;\n }\n\n &.collapsed .collapse-expand-menu svg {\n transform: rotate(180deg);\n }\n\n &:not(.mobile) {\n @media (max-width: 1279.98px) {\n width: 72px;\n\n .menu-item-text {\n opacity: 0;\n visibility: hidden;\n width: 0;\n margin-left: 0;\n }\n\n .menu-section {\n transform: scaleY(0);\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n\n #logotype {\n transform: translateX(-5%);\n opacity: 0;\n }\n }\n }\n\n &.mobile {\n display: flex;\n position: absolute;\n left: 0;\n top: 0;\n width: 240px;\n background-color: var(--page-paper-main);\n }\n`;\n\nconst StyledMenuHeader = styled.div`\n position: relative;\n height: 68px;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n overflow: hidden;\n\n .main-logo {\n position: absolute;\n left: 20px;\n color: var(--color-secondary);\n\n path {\n fill: var(--color-secondary);\n }\n }\n\n .collapse-expand-menu {\n position: absolute;\n right: 4px;\n display: none;\n\n @media (min-width: ${XL}) {\n display: flex;\n }\n }\n`;\n\nconst StyledMenuScroll = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n min-height: 0;\n margin: 12px 0;\n overflow-y: auto;\n overflow-x: hidden;\n`;\n\nconst StyledMenuSection = styled.div`\n display: flex;\n align-items: center;\n margin: 0 12px 8px;\n padding: 0 4px 0 12px;\n`;\n\nconst StyledMenuItem = styled.a`\n display: flex;\n align-items: center;\n height: 40px;\n padding: 0 4px 0 12px;\n margin: 0 12px 2px;\n border-radius: 8px;\n cursor: pointer;\n text-decoration: none;\n\n svg {\n flex-shrink: 0;\n fill: var(--color-theme-700);\n opacity: 0.7;\n }\n\n .menu-item-text {\n margin-left: 12px;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &:hover {\n transition: all ${TRANSITION};\n background-color: var(--color-theme-300);\n\n svg {\n fill: var(--color-theme-900);\n opacity: 1;\n }\n\n .menu-item-text {\n color: var(--color-theme-900);\n }\n }\n\n &.active {\n background-color: var(--color-secondary-200);\n\n svg {\n fill: var(--color-secondary);\n opacity: 1;\n }\n\n .menu-item-text {\n color: var(--color-secondary);\n }\n }\n`;\n\nconst StyledMobileMenuClose = styled(IconButton)`\n position: absolute;\n right: 16px;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Top bars */\n/* ------------------------------------------------------------------ */\n\nconst StyledMobileMenuHeader = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 16px;\n background-color: var(--color-primary);\n z-index: 50;\n\n @media (min-width: ${SM}) {\n display: none;\n }\n\n .mobile-menu-icon {\n fill: var(--color-theme-300);\n }\n`;\n\nconst StyledIconRow = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst StyledTopRightControls = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n display: none;\n align-items: center;\n justify-content: flex-end;\n padding: 12px 32px 12px 0;\n\n @media (min-width: ${SM}) {\n display: flex;\n }\n`;\n\nconst StyledHeaderAvatar = styled.div`\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background-color: var(--color-secondary);\n color: var(--only-white);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: 600;\n margin: 0 8px;\n flex-shrink: 0;\n cursor: pointer;\n\n /* dark themes: use paper colour for the initials */\n ${DARK_THEME_SELECTOR} & {\n color: var(--page-paper-main);\n }\n`;\n\n/* ------------------------------------------------------------------ */\n/* Page region (mirrors Page.jsx / PageBody.jsx) */\n/* ------------------------------------------------------------------ */\n\nconst StyledPage = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n`;\n\nconst StyledPageBody = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-bottom: 32px;\n min-height: 0;\n`;\n\n/** The paper card that holds page content (used by list view & empty pages). */\nexport const StyledPagePaper = styled(Paper)`\n flex-grow: 1;\n width: 100%;\n`;\n\n/* ------------------------------------------------------------------ */\n/* Mocked layout building blocks */\n/* ------------------------------------------------------------------ */\n\ninterface MenuItemsProps {\n mobile?: boolean;\n}\n\nconst MenuItemsMock = ({ mobile = false }: MenuItemsProps): ReactElement => (\n <StyledMenuScroll>\n <StyledMenuSection className=\"menu-section\">\n <Caption1 weight=\"bold\" color=\"tertiary\">\n MENU\n </Caption1>\n </StyledMenuSection>\n {MENU_ITEMS.map(({ icon: Icon, text, active }) => (\n <Tooltip key={text} title={text} placement=\"right\" disable={mobile}>\n <StyledMenuItem className={active ? \"active\" : undefined}>\n <Icon />\n <Body2\n weight=\"medium\"\n color=\"secondary\"\n whitespace=\"no-wrap\"\n className=\"menu-item-text\"\n >\n {text}\n </Body2>\n </StyledMenuItem>\n </Tooltip>\n ))}\n </StyledMenuScroll>\n);\n\ninterface MainMenuMockProps {\n collapsed: boolean;\n onToggleCollapsed: () => void;\n footer?: ReactNode;\n}\n\nconst MainMenuMock = ({\n collapsed,\n onToggleCollapsed,\n footer,\n}: MainMenuMockProps): ReactElement => (\n <StyledMainMenu\n className={collapsed ? \"collapsed\" : undefined}\n data-testid=\"main-menu\"\n >\n <StyledMenuHeader>\n <a className=\"main-logo\">\n <MainLogo />\n </a>\n <div className=\"collapse-expand-menu\">\n <IconButton\n variant=\"text gray\"\n size=\"small\"\n onClick={onToggleCollapsed}\n >\n <CollapsIcon />\n </IconButton>\n </div>\n </StyledMenuHeader>\n <MenuItemsMock />\n {footer}\n </StyledMainMenu>\n);\n\ninterface MainMenuMobileMockProps {\n open: boolean;\n close: () => void;\n footer?: ReactNode;\n}\n\nconst MainMenuMobileMock = ({\n open,\n close,\n footer,\n}: MainMenuMobileMockProps): ReactElement | null =>\n open ? (\n <Modal open={open} onClose={close}>\n <StyledMainMenu className=\"mobile\" data-testid=\"main-menu-mobile\">\n <StyledMenuHeader>\n <a className=\"main-logo\">\n <MainLogo />\n </a>\n <StyledMobileMenuClose onClick={close} variant=\"text gray\">\n <CloseIcon />\n </StyledMobileMenuClose>\n </StyledMenuHeader>\n <MenuItemsMock mobile />\n {footer}\n </StyledMainMenu>\n </Modal>\n ) : null;\n\ninterface MobileMenuHeaderMockProps {\n onOpenMobileMenu: () => void;\n}\n\nconst MobileMenuHeaderMock = ({\n onOpenMobileMenu,\n}: MobileMenuHeaderMockProps): ReactElement => (\n <StyledMobileMenuHeader>\n <IconButton size=\"big\" variant=\"circle raised\" onClick={onOpenMobileMenu}>\n <MobileMenuIcon className=\"mobile-menu-icon\" />\n </IconButton>\n <StyledIconRow>\n <IconButton variant=\"text gray\">\n <SearchIcon />\n </IconButton>\n <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n <IconButton variant=\"text gray\">\n <NotificationBellIcon />\n </IconButton>\n </StyledIconRow>\n </StyledMobileMenuHeader>\n);\n\nconst TopRightControlsMock = (): ReactElement => (\n <StyledTopRightControls>\n <IconButton variant=\"text gray\">\n <ClockStopwatchIndicatorIcon />\n </IconButton>\n <IconButton variant=\"text gray\">\n <SearchIcon />\n </IconButton>\n <StyledHeaderAvatar>JS</StyledHeaderAvatar>\n <IconButton variant=\"text gray\">\n <NotificationBellIcon />\n </IconButton>\n </StyledTopRightControls>\n);\n\n/* ------------------------------------------------------------------ */\n/* PresentationShell */\n/* ------------------------------------------------------------------ */\n\nexport interface PresentationShellProps {\n /** Page header row (e.g. <ProjectPageHeader /> or <PageHeader title=\"…\" />). */\n header: ReactNode;\n /** Page body content rendered inside the scrollable page area. */\n children: ReactNode;\n /** Optional fixed controls (e.g. <FloatingControls />). */\n floating?: ReactNode;\n /** Optional content pinned to the bottom of the main menu (e.g. <HelpAndSupportMenu />). */\n menuFooter?: ReactNode;\n}\n\n/**\n * The full application shell shared by every presentation mock-up: the main\n * menu on the left (auto-collapsing below 1280px, modal below 640px), the\n * top-right controls and the scrollable page area. Pass the page header via\n * `header` and the body via `children`.\n */\nexport const PresentationShell = ({\n header,\n children,\n floating,\n menuFooter,\n}: PresentationShellProps): ReactElement => {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const [isMobileView, setIsMobileView] = useState<boolean>();\n\n const ref = useRef<HTMLDivElement>(null);\n const dimensions = useResizeObserver(ref);\n const width = dimensions?.width;\n\n useEffect(() => {\n if (width) {\n if (width < BREAKPOINT) {\n setIsMobileView(true);\n } else {\n setIsMobileView(false);\n setMobileMenuOpen(false);\n }\n }\n }, [width]);\n\n const handleOpenMobileMenu = useCallback(() => setMobileMenuOpen(true), []);\n const handleCloseMobileMenu = useCallback(() => setMobileMenuOpen(false), []);\n const handleToggleCollapsed = useCallback(\n () => setCollapsed((prev) => !prev),\n []\n );\n\n return (\n <StyledLayout ref={ref}>\n {isMobileView ? (\n <MobileMenuHeaderMock onOpenMobileMenu={handleOpenMobileMenu} />\n ) : null}\n <StyledContentRow>\n <StyledRightWindow id=\"right-window\">\n <StyledPage>\n {header}\n <StyledPageBody>{children}</StyledPageBody>\n </StyledPage>\n {isMobileView === false ? <TopRightControlsMock /> : null}\n </StyledRightWindow>\n {isMobileView ? (\n <MainMenuMobileMock\n open={mobileMenuOpen}\n close={handleCloseMobileMenu}\n footer={menuFooter}\n />\n ) : (\n <MainMenuMock\n collapsed={collapsed}\n onToggleCollapsed={handleToggleCollapsed}\n footer={menuFooter}\n />\n )}\n </StyledContentRow>\n {floating}\n </StyledLayout>\n );\n};\n\nPresentationShell.displayName = \"PresentationShell\";\n"],"mappings":"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","ignoreList":[]}
@@ -1,5 +1,6 @@
1
1
  export * from "./layers";
2
2
  export * from "./colors";
3
+ export * from "./themes";
3
4
  export * from "./validation";
4
5
  export { default as useForkRef } from "./useForkRef";
5
6
  export { default as useResizeObserver } from "./useResizeObserver";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}
@@ -1,5 +1,6 @@
1
1
  export * from "./layers";
2
2
  export * from "./colors";
3
+ export * from "./themes";
3
4
  export * from "./validation";
4
5
  export { default as useForkRef } from "./useForkRef";
5
6
  export { default as useResizeObserver } from "./useResizeObserver";
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["default","useForkRef","useResizeObserver","formatHours","formatNumber","formatCurrency","numberWithSeparator","getNumberFromString"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./colors\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\nexport { formatHours } from \"./timeUtils\";\nexport {\n formatNumber,\n formatCurrency,\n numberWithSeparator,\n getNumberFromString,\n} from \"./currencyUtils\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qBAAqB;AAClE,SAASC,WAAW,QAAQ,aAAa;AACzC,SACEC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,QACd,iBAAiB","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["default","useForkRef","useResizeObserver","formatHours","formatNumber","formatCurrency","numberWithSeparator","getNumberFromString"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["export * from \"./layers\";\nexport * from \"./colors\";\nexport * from \"./themes\";\nexport * from \"./validation\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\nexport { formatHours } from \"./timeUtils\";\nexport {\n formatNumber,\n formatCurrency,\n numberWithSeparator,\n getNumberFromString,\n} from \"./currencyUtils\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qBAAqB;AAClE,SAASC,WAAW,QAAQ,aAAa;AACzC,SACEC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,QACd,iBAAiB","ignoreList":[]}
@@ -0,0 +1,12 @@
1
+ export interface ThemeDescriptor {
2
+ name: string;
3
+ title: string;
4
+ dark: boolean;
5
+ }
6
+ export declare const THEMES: ThemeDescriptor[];
7
+ export declare const THEME_NAMES: string[];
8
+ export declare const DARK_THEME_NAMES: string[];
9
+ export declare const isDarkTheme: (name?: string | null) => boolean;
10
+ export declare const DARK_THEME_MATCH: string;
11
+ export declare const DARK_THEME_SELECTOR: string;
12
+ //# sourceMappingURL=themes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../src/utils/themes.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,eAAe,EAOnC,CAAC;AAEF,eAAO,MAAM,WAAW,UAAoC,CAAC;AAE7D,eAAO,MAAM,gBAAgB,UAE5B,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,GAAG,IAAI,KAAG,OACS,CAAC;AAM7D,eAAO,MAAM,gBAAgB,QAEd,CAAC;AAIhB,eAAO,MAAM,mBAAmB,QAAyB,CAAC"}
@@ -0,0 +1,43 @@
1
+ // Single source of truth for theme identity. The theme name is the only class put on <html>;
2
+ // styling that targets "any dark theme" uses DARK_THEME_SELECTOR, which is derived from this list
3
+ // so a new theme never needs the selector updating by hand.
4
+
5
+ export const THEMES = [{
6
+ name: "indigo",
7
+ title: "Indigo",
8
+ dark: false
9
+ }, {
10
+ name: "cupcake",
11
+ title: "Cupcake",
12
+ dark: false
13
+ }, {
14
+ name: "classic",
15
+ title: "Classic",
16
+ dark: false
17
+ }, {
18
+ name: "neon",
19
+ title: "Neon",
20
+ dark: true
21
+ }, {
22
+ name: "dracula",
23
+ title: "Dracula",
24
+ dark: true
25
+ }, {
26
+ name: "one-dark",
27
+ title: "One Dark",
28
+ dark: true
29
+ }];
30
+ export const THEME_NAMES = THEMES.map(theme => theme.name);
31
+ export const DARK_THEME_NAMES = THEMES.filter(theme => theme.dark).map(theme => theme.name);
32
+ export const isDarkTheme = name => Boolean(name) && DARK_THEME_NAMES.includes(name);
33
+
34
+ // :is() and not :where() — :where() is zero-specificity and would silently lose to the light
35
+ // declarations it is meant to override.
36
+
37
+ // Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.
38
+ export const DARK_THEME_MATCH = ":is(" + DARK_THEME_NAMES.map(name => "." + name).join(", ") + ")";
39
+
40
+ // Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity
41
+ // but stops stylis from reading a leading `:` as "attach to the parent" and gluing it onto `&`.
42
+ export const DARK_THEME_SELECTOR = "*" + DARK_THEME_MATCH;
43
+ //# sourceMappingURL=themes.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"themes.js","names":["THEMES","name","title","dark","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","isDarkTheme","Boolean","includes","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n { name: \"indigo\", title: \"Indigo\", dark: false },\n { name: \"cupcake\", title: \"Cupcake\", dark: false },\n { name: \"classic\", title: \"Classic\", dark: false },\n { name: \"neon\", title: \"Neon\", dark: true },\n { name: \"dracula\", title: \"Dracula\", dark: true },\n { name: \"one-dark\", title: \"One Dark\", dark: true },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const isDarkTheme = (name?: string | null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `*${DARK_THEME_MATCH}`;\n"],"mappings":"AAAA;AACA;AACA;;AAOA,OAAO,MAAMA,MAAyB,GAAG,CACvC;EAAEC,IAAI,EAAE,QAAQ;EAAEC,KAAK,EAAE,QAAQ;EAAEC,IAAI,EAAE;AAAM,CAAC,EAChD;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAM,CAAC,EAClD;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAM,CAAC,EAClD;EAAEF,IAAI,EAAE,MAAM;EAAEC,KAAK,EAAE,MAAM;EAAEC,IAAI,EAAE;AAAK,CAAC,EAC3C;EAAEF,IAAI,EAAE,SAAS;EAAEC,KAAK,EAAE,SAAS;EAAEC,IAAI,EAAE;AAAK,CAAC,EACjD;EAAEF,IAAI,EAAE,UAAU;EAAEC,KAAK,EAAE,UAAU;EAAEC,IAAI,EAAE;AAAK,CAAC,CACpD;AAED,OAAO,MAAMC,WAAW,GAAGJ,MAAM,CAACK,GAAG,CAAEC,KAAK,IAAKA,KAAK,CAACL,IAAI,CAAC;AAE5D,OAAO,MAAMM,gBAAgB,GAAGP,MAAM,CAACQ,MAAM,CAAEF,KAAK,IAAKA,KAAK,CAACH,IAAI,CAAC,CAACE,GAAG,CACrEC,KAAK,IAAKA,KAAK,CAACL,IACnB,CAAC;AAED,OAAO,MAAMQ,WAAW,GAAIR,IAAoB,IAC9CS,OAAO,CAACT,IAAI,CAAC,IAAIM,gBAAgB,CAACI,QAAQ,CAACV,IAAc,CAAC;;AAE5D;AACA;;AAEA;AACA,OAAO,MAAMW,gBAAgB,YAAUL,gBAAgB,CAACF,GAAG,CACxDJ,IAAI,UAASA,IAChB,CAAC,CAACY,IAAI,CAAC,IAAI,CAAC,MAAG;;AAEf;AACA;AACA,OAAO,MAAMC,mBAAmB,SAAOF,gBAAkB","ignoreList":[]}