@salutejs/plasma-new-hope 0.88.0-canary.1225.9348142616.0 → 0.88.0-canary.1225.9415530810.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. package/cjs/components/Sheet/Sheet.css +9 -5
  2. package/cjs/components/Sheet/Sheet.js +30 -9
  3. package/cjs/components/Sheet/Sheet.js.map +1 -1
  4. package/cjs/components/Sheet/Sheet.styles.js +81 -16
  5. package/cjs/components/Sheet/Sheet.styles.js.map +1 -1
  6. package/cjs/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  7. package/cjs/components/Sheet/Sheet.tokens.js +2 -1
  8. package/cjs/components/Sheet/Sheet.tokens.js.map +1 -1
  9. package/cjs/components/Sheet/utils/handleTransition.js +2 -3
  10. package/cjs/components/Sheet/utils/handleTransition.js.map +1 -1
  11. package/cjs/components/Sheet/utils/index.js +8 -0
  12. package/cjs/components/Sheet/utils/index.js.map +1 -0
  13. package/cjs/index.css +7 -5
  14. package/es/components/Sheet/Sheet.css +9 -5
  15. package/es/components/Sheet/Sheet.js +32 -11
  16. package/es/components/Sheet/Sheet.js.map +1 -1
  17. package/es/components/Sheet/Sheet.styles.js +79 -16
  18. package/es/components/Sheet/Sheet.styles.js.map +1 -1
  19. package/es/components/Sheet/{Sheet.styles_1bm46e7.css → Sheet.styles_kdjr5m.css} +5 -3
  20. package/es/components/Sheet/Sheet.tokens.js +2 -1
  21. package/es/components/Sheet/Sheet.tokens.js.map +1 -1
  22. package/es/components/Sheet/utils/handleTransition.js +2 -3
  23. package/es/components/Sheet/utils/handleTransition.js.map +1 -1
  24. package/es/components/Sheet/utils/index.js +4 -0
  25. package/es/components/Sheet/utils/index.js.map +1 -0
  26. package/es/index.css +7 -5
  27. package/package.json +2 -2
  28. package/styled-components/cjs/components/Sheet/Sheet.js +30 -8
  29. package/styled-components/cjs/components/Sheet/Sheet.styles.js +36 -9
  30. package/styled-components/cjs/components/Sheet/Sheet.tokens.js +2 -1
  31. package/styled-components/cjs/components/Sheet/hooks/index.js +0 -7
  32. package/styled-components/cjs/components/Sheet/utils/handleTransition.js +2 -3
  33. package/styled-components/cjs/components/Sheet/utils/index.js +3 -1
  34. package/styled-components/cjs/components/Sheet/variations/_view/tokens.json +4 -1
  35. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  36. package/styled-components/cjs/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +142 -40
  37. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  38. package/styled-components/cjs/examples/plasma_web/components/Sheet/Sheet.stories.tsx +134 -39
  39. package/styled-components/es/components/Sheet/Sheet.js +33 -11
  40. package/styled-components/es/components/Sheet/Sheet.styles.js +35 -8
  41. package/styled-components/es/components/Sheet/Sheet.tokens.js +2 -1
  42. package/styled-components/es/components/Sheet/hooks/index.js +0 -1
  43. package/styled-components/es/components/Sheet/utils/handleTransition.js +2 -3
  44. package/styled-components/es/components/Sheet/utils/index.js +2 -1
  45. package/styled-components/es/components/Sheet/variations/_view/tokens.json +4 -1
  46. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.config.js +1 -1
  47. package/styled-components/es/examples/plasma_b2c/components/Sheet/Sheet.stories.tsx +142 -40
  48. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js +1 -1
  49. package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx +134 -39
  50. package/types/components/Sheet/Sheet.d.ts +1 -0
  51. package/types/components/Sheet/Sheet.d.ts.map +1 -1
  52. package/types/components/Sheet/Sheet.styles.d.ts +12 -8
  53. package/types/components/Sheet/Sheet.styles.d.ts.map +1 -1
  54. package/types/components/Sheet/Sheet.tokens.d.ts +2 -1
  55. package/types/components/Sheet/Sheet.tokens.d.ts.map +1 -1
  56. package/types/components/Sheet/Sheet.types.d.ts +25 -7
  57. package/types/components/Sheet/Sheet.types.d.ts.map +1 -1
  58. package/types/components/Sheet/hooks/index.d.ts +0 -1
  59. package/types/components/Sheet/hooks/index.d.ts.map +1 -1
  60. package/types/components/Sheet/utils/handleTransition.d.ts.map +1 -1
  61. package/types/components/Sheet/utils/index.d.ts +1 -0
  62. package/types/components/Sheet/utils/index.d.ts.map +1 -1
  63. package/types/examples/plasma_b2c/components/Sheet/Sheet.config.d.ts.map +1 -1
  64. package/types/examples/plasma_web/components/Sheet/Sheet.config.d.ts.map +1 -1
  65. package/cjs/components/Sheet/hooks/useThemeContext.js +0 -17
  66. package/cjs/components/Sheet/hooks/useThemeContext.js.map +0 -1
  67. package/es/components/Sheet/hooks/useThemeContext.js +0 -13
  68. package/es/components/Sheet/hooks/useThemeContext.js.map +0 -1
  69. package/styled-components/cjs/components/Sheet/hooks/useThemeContext.js +0 -15
  70. package/styled-components/es/components/Sheet/hooks/useThemeContext.js +0 -9
  71. package/types/components/Sheet/hooks/useThemeContext.d.ts +0 -7
  72. package/types/components/Sheet/hooks/useThemeContext.d.ts.map +0 -1
@@ -1,4 +1,4 @@
1
- import './Sheet.styles_1bm46e7.css';
1
+ import './Sheet.styles_kdjr5m.css';
2
2
  import { styled } from '@linaria/react';
3
3
  import { tokens } from './Sheet.tokens.js';
4
4
  import { handleTransition } from './utils/handleTransition.js';
@@ -25,30 +25,93 @@ var StyledContentWrapper = /*#__PURE__*/styled('div')({
25
25
  "shg69gz-0": [/*#__PURE__*/_exp3()]
26
26
  }
27
27
  });
28
- var _exp5 = function _exp5() {
28
+ var StyledSheetHandle = /*#__PURE__*/styled('div')({
29
+ name: "StyledSheetHandle",
30
+ "class": "s1cdpbaw",
31
+ propsAsIs: false
32
+ });
33
+ var _exp7 = function _exp7() {
29
34
  return function (_ref) {
30
- var withOverlay = _ref.withOverlay;
31
- return withOverlay ? "var(".concat(tokens.overlayBackgroundColor, ")") : 'transparent';
35
+ var hasHeader = _ref.hasHeader;
36
+ return hasHeader ? 'unset' : '1rem';
37
+ };
38
+ };
39
+ var _exp8 = function _exp8() {
40
+ return function (_ref2) {
41
+ var hasFooter = _ref2.hasFooter;
42
+ return hasFooter ? 'unset' : '1rem';
32
43
  };
33
44
  };
34
- var StyledOverlay = /*#__PURE__*/styled('div')({
35
- name: "StyledOverlay",
36
- "class": "s1cdpbaw",
37
- propsAsIs: false,
38
- vars: {
39
- "s1cdpbaw-0": [/*#__PURE__*/_exp5()]
40
- }
41
- });
42
45
  var StyledSheetContent = /*#__PURE__*/styled('div')({
43
46
  name: "StyledSheetContent",
44
47
  "class": "sjx120m",
45
- propsAsIs: false
48
+ propsAsIs: false,
49
+ vars: {
50
+ "sjx120m-0": [/*#__PURE__*/_exp7()],
51
+ "sjx120m-1": [/*#__PURE__*/_exp8()]
52
+ }
46
53
  });
47
- var StyledSheetHandle = /*#__PURE__*/styled('div')({
48
- name: "StyledSheetHandle",
54
+ var _exp9 = function _exp9() {
55
+ return function (_ref3) {
56
+ var isHeaderFixed = _ref3.isHeaderFixed;
57
+ return isHeaderFixed ? 'sticky' : 'static';
58
+ };
59
+ };
60
+ var _exp10 = function _exp10() {
61
+ return function (_ref4) {
62
+ var isHeaderFixed = _ref4.isHeaderFixed;
63
+ return isHeaderFixed ? '0' : 'unset';
64
+ };
65
+ };
66
+ var _exp11 = function _exp11() {
67
+ return function (_ref5) {
68
+ var isHeaderFixed = _ref5.isHeaderFixed;
69
+ return isHeaderFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
70
+ };
71
+ };
72
+ var StyledSheetHeader = /*#__PURE__*/styled('div')({
73
+ name: "StyledSheetHeader",
49
74
  "class": "s1f8rwx6",
75
+ propsAsIs: false,
76
+ vars: {
77
+ "s1f8rwx6-0": [/*#__PURE__*/_exp9()],
78
+ "s1f8rwx6-1": [/*#__PURE__*/_exp10()],
79
+ "s1f8rwx6-2": [/*#__PURE__*/_exp11()]
80
+ }
81
+ });
82
+ var StyledSheetBody = /*#__PURE__*/styled('div')({
83
+ name: "StyledSheetBody",
84
+ "class": "sqp1ccu",
50
85
  propsAsIs: false
51
86
  });
87
+ var _exp12 = function _exp12() {
88
+ return function (_ref6) {
89
+ var isFooterFixed = _ref6.isFooterFixed;
90
+ return isFooterFixed ? 'sticky' : 'static';
91
+ };
92
+ };
93
+ var _exp13 = function _exp13() {
94
+ return function (_ref7) {
95
+ var isFooterFixed = _ref7.isFooterFixed;
96
+ return isFooterFixed ? '0' : 'unset';
97
+ };
98
+ };
99
+ var _exp14 = function _exp14() {
100
+ return function (_ref8) {
101
+ var isFooterFixed = _ref8.isFooterFixed;
102
+ return isFooterFixed ? "var(".concat(tokens.contentBackgroundColor, ")") : 'transparent';
103
+ };
104
+ };
105
+ var StyledSheetFooter = /*#__PURE__*/styled('div')({
106
+ name: "StyledSheetFooter",
107
+ "class": "s1jdcq0t",
108
+ propsAsIs: false,
109
+ vars: {
110
+ "s1jdcq0t-0": [/*#__PURE__*/_exp12()],
111
+ "s1jdcq0t-1": [/*#__PURE__*/_exp13()],
112
+ "s1jdcq0t-2": [/*#__PURE__*/_exp14()]
113
+ }
114
+ });
52
115
 
53
- export { StyledContentWrapper, StyledOverlay, StyledSheetContent, StyledSheetHandle, StyledWrapper };
116
+ export { StyledContentWrapper, StyledSheetBody, StyledSheetContent, StyledSheetFooter, StyledSheetHandle, StyledSheetHeader, StyledWrapper };
54
117
  //# sourceMappingURL=Sheet.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledOverlay = styled.div<{ withOverlay: boolean }>`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n\n background-color: ${({ withOverlay }) => (withOverlay ? `var(${tokens.overlayBackgroundColor})` : 'transparent')};\n`;\n\nexport const StyledSheetContent = styled.div`\n border-radius: 1.5rem 1.5rem 0 0;\n background-color: var(${tokens.contentBackgroundColor});\n padding: 1rem;\n\n max-height: 100%;\n overflow: auto;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width: 4rem;\n padding: 1.75rem 0;\n margin: -1.5rem 0;\n opacity: 0.65;\n align-self: center;\n\n &::before {\n content: '';\n display: block;\n border-radius: 0.625rem;\n background-color: var(${tokens.handleColor});\n height: 0.25rem;\n }\n`;\n"],"names":["_exp","handleTransition","StyledWrapper","styled","name","class","propsAsIs","vars","_exp3","StyledContentWrapper","_exp5","_ref","withOverlay","concat","tokens","overlayBackgroundColor","StyledOverlay","StyledSheetContent","StyledSheetHandle"],"mappings":";;;;AAI4D,IAAAA,IAAA,GAH1CA,SAG0CA,IAAAA,GAAA;EAAA,OAS1CC,gBAAgB,CAAC,eAAe,CAAC,CAAA;AAAA,CAAA,CAAA;AAP5C,IAAMC,aAAa,gBAAGC,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAOjBP,IAAiC,EAAA,CAAA;AAAA,GAAA;AAAA,CAOlD,EAAA;AAAC,IAAAQ,KAAA,GAnBgBA,SAmBhBA,KAAAA,GAAA;EAAA,OAcgBP,gBAAgB,CAAC,gBAAgB,CAAC,CAAA;AAAA,CAAA,CAAA;AAZ7C,IAAMQ,oBAAoB,gBAAGN,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,WAAA,EAAA,cAYxBC,KAAkC,EAAA,CAAA;AAAA,GAAA;AAAA,CAKnD,EAAA;AAAC,IAAAE,KAAA,GAtCgBA,SAsChBA,KAAAA,GAAA;AAAA,EAAA,OASsB,UAAAC,IAAA,EAAA;AAAA,IAAA,IAAGC,WAAAA,GAAAA,IAAAA,CAAAA,WAAAA,CAAAA;IAAAA,OAAmBA,WAAW,UAAAC,MAAA,CAAUC,MAAM,CAACC,sBAAuB,SAAK,aAAc,CAAA;AAAA,GAAA,CAAA;AAAA,CAAA,CAAA;AAP7G,IAAMC,aAAa,gBAAGb,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAAC,EAAAA,IAAA,EAAA;AAAA,IAAA,YAAA,EAAA,cAOXG,KAA4F,EAAA,CAAA;AAAA,GAAA;AAAA,CACnH,EAAA;AAEM,IAAMO,kBAAkB,gBAAGd,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,oBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAYvC,EAAA;AAEM,IAAMY,iBAAiB,gBAAGf,MAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CActC;;;;"}
1
+ {"version":3,"file":"Sheet.styles.js","sources":["../../../src/components/Sheet/Sheet.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\n\nimport { tokens, classes } from './Sheet.tokens';\nimport { CommonProps } from './Sheet.types';\nimport { handleTransition } from './utils/handleTransition';\n\nexport const StyledWrapper = styled.div<CommonProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 1;\n transition: ${handleTransition('all 0.5s 0.1s')};\n z-index: 1000;\n\n &.${String(classes.isClosed)} {\n opacity: 0;\n visibility: hidden;\n }\n`;\n\nexport const StyledContentWrapper = styled.div<CommonProps>`\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n max-height: 100%;\n z-index: 1;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n transition: ${handleTransition('transform 0.5s')};\n\n &.${String(classes.isClosed)} {\n transform: translateY(100%);\n }\n`;\n\nexport const StyledSheetHandle = styled.div`\n width: 4rem;\n padding: 1.75rem 0;\n margin: -1.5rem 0;\n opacity: 0.65;\n align-self: center;\n\n &::before {\n content: '';\n display: block;\n border-radius: 0.625rem;\n background-color: var(${tokens.handleColor});\n height: 0.25rem;\n }\n`;\n\nexport const StyledSheetContent = styled.div<{ hasHeader?: boolean; hasFooter?: boolean }>`\n border-radius: 1.5rem 1.5rem 0 0;\n background-color: var(${tokens.contentBackgroundColor});\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: ${({ hasHeader }) => (hasHeader ? 'unset' : '1rem')};\n padding-bottom: ${({ hasFooter }) => (hasFooter ? 'unset' : '1rem')};\n\n max-height: 100%;\n overflow: auto;\n overscroll-behavior: contain;\n\n &::-webkit-scrollbar {\n display: none;\n }\n`;\n\nexport const StyledSheetHeader = styled.div<{ isHeaderFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-top: 1rem;\n position: ${({ isHeaderFixed }) => (isHeaderFixed ? 'sticky' : 'static')};\n top: ${({ isHeaderFixed }) => (isHeaderFixed ? '0' : 'unset')};\n background-color: ${({ isHeaderFixed }) =>\n isHeaderFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n\nexport const StyledSheetBody = styled.div``;\n\nexport const StyledSheetFooter = styled.div<{ isFooterFixed?: boolean }>`\n width: 100%;\n z-index: 1;\n padding-bottom: 1rem;\n position: ${({ isFooterFixed }) => (isFooterFixed ? 'sticky' : 'static')};\n bottom: ${({ isFooterFixed }) => (isFooterFixed ? '0' : 'unset')};\n background-color: ${({ isFooterFixed }) =>\n isFooterFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent'};\n`;\n"],"names":["_exp","handleTransition","StyledWrapper","styled","name","class","propsAsIs","vars","_exp3","StyledContentWrapper","StyledSheetHandle","_exp7","_ref","hasHeader","_exp8","_ref2","hasFooter","StyledSheetContent","_exp9","_ref3","isHeaderFixed","_exp10","_ref4","_exp11","_ref5","concat","tokens","contentBackgroundColor","StyledSheetHeader","StyledSheetBody","_exp12","_ref6","isFooterFixed","_exp13","_ref7","_exp14","_ref8","StyledSheetFooter"],"mappings":"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"}
@@ -1,5 +1,7 @@
1
1
  .sah7qw3{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.sah7qw3.is-closed{opacity:0;visibility:hidden;}
2
2
  .shg69gz{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.shg69gz.is-closed{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
3
- .s1cdpbaw{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--s1cdpbaw-0);}
4
- .sjx120m{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;}.sjx120m::-webkit-scrollbar{display:none;}
5
- .s1f8rwx6{width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.s1f8rwx6::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
3
+ .s1cdpbaw{width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.s1cdpbaw::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
4
+ .sjx120m{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.sjx120m::-webkit-scrollbar{display:none;}
5
+ .s1f8rwx6{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
6
+
7
+ .s1jdcq0t{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
@@ -2,7 +2,8 @@ var classes = {
2
2
  isClosed: 'is-closed'
3
3
  };
4
4
  var tokens = {
5
- overlayBackgroundColor: '--plasma-sheet-overlay-background-color',
5
+ sheetOverlayColor: '--plasma-sheet-overlay-color',
6
+ sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
6
7
  contentBackgroundColor: '--plasma-sheet-content-background-color',
7
8
  handleColor: '--plasma-sheet-handle-background-color'
8
9
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Sheet.tokens.js","sources":["../../../src/components/Sheet/Sheet.tokens.ts"],"sourcesContent":["export const classes = {\n isClosed: 'is-closed',\n};\n\nexport const tokens = {\n overlayBackgroundColor: '--plasma-sheet-overlay-background-color',\n\n contentBackgroundColor: '--plasma-sheet-content-background-color',\n\n handleColor: '--plasma-sheet-handle-background-color',\n};\n"],"names":["classes","isClosed","tokens","overlayBackgroundColor","contentBackgroundColor","handleColor"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,QAAQ,EAAE,WAAA;AACd,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,sBAAsB,EAAE,yCAAyC;AAEjEC,EAAAA,sBAAsB,EAAE,yCAAyC;AAEjEC,EAAAA,WAAW,EAAE,wCAAA;AACjB;;;;"}
1
+ {"version":3,"file":"Sheet.tokens.js","sources":["../../../src/components/Sheet/Sheet.tokens.ts"],"sourcesContent":["export const classes = {\n isClosed: 'is-closed',\n};\n\nexport const tokens = {\n sheetOverlayColor: '--plasma-sheet-overlay-color',\n sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',\n\n contentBackgroundColor: '--plasma-sheet-content-background-color',\n\n handleColor: '--plasma-sheet-handle-background-color',\n};\n"],"names":["classes","isClosed","tokens","sheetOverlayColor","sheetOverlayWithBlurColor","contentBackgroundColor","handleColor"],"mappings":"AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,QAAQ,EAAE,WAAA;AACd,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,iBAAiB,EAAE,8BAA8B;AACjDC,EAAAA,yBAAyB,EAAE,wCAAwC;AAEnEC,EAAAA,sBAAsB,EAAE,yCAAyC;AAEjEC,EAAAA,WAAW,EAAE,wCAAA;AACjB;;;;"}
@@ -1,8 +1,7 @@
1
1
  var handleTransition = function handleTransition(transition) {
2
2
  return function (props) {
3
- var lowPerformance = props.theme.lowPerformance,
4
- withTransition = props.withTransition;
5
- return !withTransition || lowPerformance ? 'unset' : transition;
3
+ var withTransition = props.withTransition;
4
+ return !withTransition ? 'unset' : transition;
6
5
  };
7
6
  };
8
7
 
@@ -1 +1 @@
1
- {"version":3,"file":"handleTransition.js","sources":["../../../../src/components/Sheet/utils/handleTransition.ts"],"sourcesContent":["import { CommonProps } from '../Sheet.types';\n\ntype HandleTransitionProps = Omit<CommonProps, 'isOpen'>;\n\nexport const handleTransition = (transition: string) => (props: HandleTransitionProps): string => {\n const {\n theme: { lowPerformance },\n withTransition,\n } = props;\n\n return !withTransition || lowPerformance ? 'unset' : transition;\n};\n"],"names":["handleTransition","transition","props","lowPerformance","theme","withTransition"],"mappings":"IAIaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,UAAkB,EAAA;EAAA,OAAK,UAACC,KAA4B,EAAa;AAC9F,IAAA,IACaC,cAAc,GAEvBD,KAAK,CAFLE,KAAK,CAAID,cAAc;MACvBE,cAAc,GACdH,KAAK,CADLG,cAAc,CAAA;AAGlB,IAAA,OAAO,CAACA,cAAc,IAAIF,cAAc,GAAG,OAAO,GAAGF,UAAU,CAAA;GAClE,CAAA;AAAA;;;;"}
1
+ {"version":3,"file":"handleTransition.js","sources":["../../../../src/components/Sheet/utils/handleTransition.ts"],"sourcesContent":["import { CommonProps } from '../Sheet.types';\n\ntype HandleTransitionProps = Omit<CommonProps, 'isOpen'>;\n\nexport const handleTransition = (transition: string) => (props: HandleTransitionProps): string => {\n const { withTransition } = props;\n\n return !withTransition ? 'unset' : transition;\n};\n"],"names":["handleTransition","transition","props","withTransition"],"mappings":"IAIaA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,UAAkB,EAAA;EAAA,OAAK,UAACC,KAA4B,EAAa;AAC9F,IAAA,IAAQC,cAAc,GAAKD,KAAK,CAAxBC,cAAc,CAAA;AAEtB,IAAA,OAAO,CAACA,cAAc,GAAG,OAAO,GAAGF,UAAU,CAAA;GAChD,CAAA;AAAA;;;;"}
@@ -0,0 +1,4 @@
1
+ var DEFAULT_Z_INDEX = '0';
2
+
3
+ export { DEFAULT_Z_INDEX };
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Sheet/utils/index.ts"],"sourcesContent":["export { handleTransition } from './handleTransition';\n\nexport const DEFAULT_Z_INDEX = '0';\n"],"names":["DEFAULT_Z_INDEX"],"mappings":"AAEO,IAAMA,eAAe,GAAG;;;;"}
package/es/index.css CHANGED
@@ -538,11 +538,13 @@
538
538
 
539
539
  .ToolbarDivider_styles_1ypqhb1_mcdkovg__81732880{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;--plasma-divider-background:var(--plasma-toolbar-divider-color);--plasma-divider-border-radius:var(--plasma-toolbar-divider-border-radius);}
540
540
 
541
- .Sheet_styles_1bm46e7_sah7qw3__a2bd4ee6{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_1bm46e7_sah7qw3__a2bd4ee6.Sheet_styles_1bm46e7_isClosed__a2bd4ee6{opacity:0;visibility:hidden;}
542
- .Sheet_styles_1bm46e7_shg69gz__a2bd4ee6{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_1bm46e7_shg69gz__a2bd4ee6.Sheet_styles_1bm46e7_isClosed__a2bd4ee6{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
543
- .Sheet_styles_1bm46e7_s1cdpbaw__a2bd4ee6{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--s1cdpbaw-0);}
544
- .Sheet_styles_1bm46e7_sjx120m__a2bd4ee6{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_1bm46e7_sjx120m__a2bd4ee6::-webkit-scrollbar{display:none;}
545
- .Sheet_styles_1bm46e7_s1f8rwx6__a2bd4ee6{width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_1bm46e7_s1f8rwx6__a2bd4ee6::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
541
+ .Sheet_styles_kdjr5m_sah7qw3__875343fb{position:fixed;top:0;bottom:0;left:0;right:0;opacity:1;-webkit-transition:var(--sah7qw3-0);transition:var(--sah7qw3-0);z-index:1000;}.Sheet_styles_kdjr5m_sah7qw3__875343fb.Sheet_styles_kdjr5m_isClosed__875343fb{opacity:0;visibility:hidden;}
542
+ .Sheet_styles_kdjr5m_shg69gz__875343fb{position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-transition:var(--shg69gz-0);transition:var(--shg69gz-0);}.Sheet_styles_kdjr5m_shg69gz__875343fb.Sheet_styles_kdjr5m_isClosed__875343fb{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);}
543
+ .Sheet_styles_kdjr5m_s1cdpbaw__875343fb{width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}.Sheet_styles_kdjr5m_s1cdpbaw__875343fb::before{content:'';display:block;border-radius:0.625rem;background-color:var(--plasma-sheet-handle-background-color);height:0.25rem;}
544
+ .Sheet_styles_kdjr5m_sjx120m__875343fb{border-radius:1.5rem 1.5rem 0 0;background-color:var(--plasma-sheet-content-background-color);padding-left:1rem;padding-right:1rem;padding-top:var(--sjx120m-0);padding-bottom:var(--sjx120m-1);max-height:100%;overflow:auto;overscroll-behavior:contain;}.Sheet_styles_kdjr5m_sjx120m__875343fb::-webkit-scrollbar{display:none;}
545
+ .Sheet_styles_kdjr5m_s1f8rwx6__875343fb{width:100%;z-index:1;padding-top:1rem;position:var(--s1f8rwx6-0);top:var(--s1f8rwx6-1);background-color:var(--s1f8rwx6-2);}
546
+
547
+ .Sheet_styles_kdjr5m_s1jdcq0t__875343fb{width:100%;z-index:1;padding-bottom:1rem;position:var(--s1jdcq0t-0);bottom:var(--s1jdcq0t-1);background-color:var(--s1jdcq0t-2);}
546
548
 
547
549
  .SliderBase_styles_7is2ll_s33crq1__0c0959e2{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:var(--plasma-slider-height);}
548
550
  .SliderBase_styles_7is2ll_rnaoqfb__0c0959e2{height:100%;}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.88.0-canary.1225.9348142616.0",
3
+ "version": "0.88.0-canary.1225.9415530810.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -105,5 +105,5 @@
105
105
  "react-popper": "2.3.0",
106
106
  "storeon": "3.1.5"
107
107
  },
108
- "gitHead": "940c5e352b2020a180dad957151db7c14b6aae37"
108
+ "gitHead": "86093e2fb3d74efd3fac10e5463fdb50e9afa497"
109
109
  }
@@ -7,17 +7,20 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.sheetRoot = exports.sheetConfig = void 0;
8
8
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
9
  var _utils = /*#__PURE__*/require("../../utils");
10
+ var _Overlay = /*#__PURE__*/require("../Overlay");
10
11
  var _hooks = /*#__PURE__*/require("./hooks");
11
12
  var _Sheet = /*#__PURE__*/require("./Sheet.tokens");
12
13
  var _Sheet2 = /*#__PURE__*/require("./Sheet.styles");
13
14
  var _base = /*#__PURE__*/require("./variations/_view/base");
14
- var _excluded = ["isOpen", "children", "onClose", "withOverlay", "withTransition", "throttleMs", "className", "view"];
15
+ var _utils2 = /*#__PURE__*/require("./utils");
16
+ var _excluded = ["isOpen", "children", "onClose", "hasHandle", "contentHeader", "isHeaderFixed", "contentFooter", "isFooterFixed", "withOverlay", "withBlur", "withTransition", "throttleMs", "className", "view"];
15
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
17
19
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
20
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
21
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
20
22
  /**
23
+ * Sheet
21
24
  * Открывает окно-шторку поверх основного экрана.
22
25
  */
23
26
 
@@ -26,8 +29,18 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
26
29
  var isOpen = _ref.isOpen,
27
30
  children = _ref.children,
28
31
  onClose = _ref.onClose,
32
+ _ref$hasHandle = _ref.hasHandle,
33
+ hasHandle = _ref$hasHandle === void 0 ? true : _ref$hasHandle,
34
+ contentHeader = _ref.contentHeader,
35
+ _ref$isHeaderFixed = _ref.isHeaderFixed,
36
+ isHeaderFixed = _ref$isHeaderFixed === void 0 ? false : _ref$isHeaderFixed,
37
+ contentFooter = _ref.contentFooter,
38
+ _ref$isFooterFixed = _ref.isFooterFixed,
39
+ isFooterFixed = _ref$isFooterFixed === void 0 ? false : _ref$isFooterFixed,
29
40
  _ref$withOverlay = _ref.withOverlay,
30
41
  withOverlay = _ref$withOverlay === void 0 ? true : _ref$withOverlay,
42
+ _ref$withBlur = _ref.withBlur,
43
+ withBlur = _ref$withBlur === void 0 ? false : _ref$withBlur,
31
44
  _ref$withTransition = _ref.withTransition,
32
45
  withTransition = _ref$withTransition === void 0 ? true : _ref$withTransition,
33
46
  throttleMs = _ref.throttleMs,
@@ -37,7 +50,6 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
37
50
  var contentWrapperRef = _react["default"].useRef(null);
38
51
  var contentRef = _react["default"].useRef(null);
39
52
  var handleRef = _react["default"].useRef(null);
40
- var theme = (0, _hooks.useThemeContext)();
41
53
  (0, _hooks.useSheet)({
42
54
  isOpen: isOpen
43
55
  });
@@ -48,9 +60,11 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
48
60
  throttleMs: throttleMs,
49
61
  onClose: onClose
50
62
  });
63
+ var hasHeader = !!contentHeader;
64
+ var hasFooter = !!contentFooter;
51
65
  var isClosedClass = isOpen ? undefined : "".concat(_Sheet.classes.isClosed);
66
+ var overlayBackgroundToken = withBlur ? "var(".concat(_Sheet.tokens.sheetOverlayWithBlurColor, ")") : "var(".concat(_Sheet.tokens.sheetOverlayColor, ")");
52
67
  return /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledWrapper, _extends({
53
- theme: theme,
54
68
  isOpen: isOpen,
55
69
  withTransition: withTransition,
56
70
  className: (0, _utils.cx)(isClosedClass, className)
@@ -60,17 +74,25 @@ var sheetRoot = exports.sheetRoot = function sheetRoot(Root) {
60
74
  view: view,
61
75
  ref: rootRef
62
76
  }, /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledContentWrapper, {
63
- theme: theme,
64
77
  isOpen: isOpen,
65
78
  withTransition: withTransition,
66
79
  ref: contentWrapperRef
67
- }, /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetHandle, {
80
+ }, hasHandle && /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetHandle, {
68
81
  ref: handleRef
69
82
  }), /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetContent, {
83
+ hasHeader: hasHeader,
84
+ hasFooter: hasFooter,
70
85
  ref: contentRef
71
- }, children)), /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledOverlay, {
72
- withOverlay: withOverlay,
73
- onClick: onClose
86
+ }, hasHeader && /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetHeader, {
87
+ isHeaderFixed: isHeaderFixed
88
+ }, contentHeader), /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetBody, null, children), hasFooter && /*#__PURE__*/_react["default"].createElement(_Sheet2.StyledSheetFooter, {
89
+ isFooterFixed: isFooterFixed
90
+ }, contentFooter))), withOverlay && /*#__PURE__*/_react["default"].createElement(_Overlay.Overlay, {
91
+ zIndex: _utils2.DEFAULT_Z_INDEX,
92
+ backgroundColorProperty: overlayBackgroundToken,
93
+ withBlur: withBlur,
94
+ isClickable: true,
95
+ onOverlayClick: onClose
74
96
  })));
75
97
  });
76
98
  };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledWrapper = exports.StyledSheetHandle = exports.StyledSheetContent = exports.StyledOverlay = exports.StyledContentWrapper = void 0;
6
+ exports.StyledWrapper = exports.StyledSheetHeader = exports.StyledSheetHandle = exports.StyledSheetFooter = exports.StyledSheetContent = exports.StyledSheetBody = exports.StyledContentWrapper = void 0;
7
7
  var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
8
8
  var _Sheet = /*#__PURE__*/require("./Sheet.tokens");
9
9
  var _handleTransition = /*#__PURE__*/require("./utils/handleTransition");
@@ -14,15 +14,42 @@ var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/_styledComponents["defa
14
14
  var StyledContentWrapper = exports.StyledContentWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
15
15
  componentId: "plasma-new-hope__sc-1pj79gq-1"
16
16
  })(["position:absolute;left:0;bottom:0;width:100%;max-height:100%;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;transition:", ";&.", "{transform:translateY(100%);}"], /*#__PURE__*/(0, _handleTransition.handleTransition)('transform 0.5s'), /*#__PURE__*/String(_Sheet.classes.isClosed));
17
- var StyledOverlay = exports.StyledOverlay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
17
+ var StyledSheetHandle = exports.StyledSheetHandle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
18
18
  componentId: "plasma-new-hope__sc-1pj79gq-2"
19
- })(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";"], function (_ref) {
20
- var withOverlay = _ref.withOverlay;
21
- return withOverlay ? "var(".concat(_Sheet.tokens.overlayBackgroundColor, ")") : 'transparent';
22
- });
19
+ })(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], _Sheet.tokens.handleColor);
23
20
  var StyledSheetContent = exports.StyledSheetContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
24
21
  componentId: "plasma-new-hope__sc-1pj79gq-3"
25
- })(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding:1rem;max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], _Sheet.tokens.contentBackgroundColor);
26
- var StyledSheetHandle = exports.StyledSheetHandle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
22
+ })(["border-radius:1.5rem 1.5rem 0 0;background-color:var(", ");padding-left:1rem;padding-right:1rem;padding-top:", ";padding-bottom:", ";max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}"], _Sheet.tokens.contentBackgroundColor, function (_ref) {
23
+ var hasHeader = _ref.hasHeader;
24
+ return hasHeader ? 'unset' : '1rem';
25
+ }, function (_ref2) {
26
+ var hasFooter = _ref2.hasFooter;
27
+ return hasFooter ? 'unset' : '1rem';
28
+ });
29
+ var StyledSheetHeader = exports.StyledSheetHeader = /*#__PURE__*/_styledComponents["default"].div.withConfig({
27
30
  componentId: "plasma-new-hope__sc-1pj79gq-4"
28
- })(["width:4rem;padding:1.75rem 0;margin:-1.5rem 0;opacity:0.65;align-self:center;&::before{content:'';display:block;border-radius:0.625rem;background-color:var(", ");height:0.25rem;}"], _Sheet.tokens.handleColor);
31
+ })(["width:100%;z-index:1;padding-top:1rem;position:", ";top:", ";background-color:", ";"], function (_ref3) {
32
+ var isHeaderFixed = _ref3.isHeaderFixed;
33
+ return isHeaderFixed ? 'sticky' : 'static';
34
+ }, function (_ref4) {
35
+ var isHeaderFixed = _ref4.isHeaderFixed;
36
+ return isHeaderFixed ? '0' : 'unset';
37
+ }, function (_ref5) {
38
+ var isHeaderFixed = _ref5.isHeaderFixed;
39
+ return isHeaderFixed ? "var(".concat(_Sheet.tokens.contentBackgroundColor, ")") : 'transparent';
40
+ });
41
+ var StyledSheetBody = exports.StyledSheetBody = /*#__PURE__*/_styledComponents["default"].div.withConfig({
42
+ componentId: "plasma-new-hope__sc-1pj79gq-5"
43
+ })([""]);
44
+ var StyledSheetFooter = exports.StyledSheetFooter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
45
+ componentId: "plasma-new-hope__sc-1pj79gq-6"
46
+ })(["width:100%;z-index:1;padding-bottom:1rem;position:", ";bottom:", ";background-color:", ";"], function (_ref6) {
47
+ var isFooterFixed = _ref6.isFooterFixed;
48
+ return isFooterFixed ? 'sticky' : 'static';
49
+ }, function (_ref7) {
50
+ var isFooterFixed = _ref7.isFooterFixed;
51
+ return isFooterFixed ? '0' : 'unset';
52
+ }, function (_ref8) {
53
+ var isFooterFixed = _ref8.isFooterFixed;
54
+ return isFooterFixed ? "var(".concat(_Sheet.tokens.contentBackgroundColor, ")") : 'transparent';
55
+ });
@@ -8,7 +8,8 @@ var classes = exports.classes = {
8
8
  isClosed: 'is-closed'
9
9
  };
10
10
  var tokens = exports.tokens = {
11
- overlayBackgroundColor: '--plasma-sheet-overlay-background-color',
11
+ sheetOverlayColor: '--plasma-sheet-overlay-color',
12
+ sheetOverlayWithBlurColor: '--plasma-sheet-overlay-with-blur-color',
12
13
  contentBackgroundColor: '--plasma-sheet-content-background-color',
13
14
  handleColor: '--plasma-sheet-handle-background-color'
14
15
  };
@@ -15,12 +15,5 @@ Object.defineProperty(exports, "useSheetSwipe", {
15
15
  return _useSheetSwipe.useSheetSwipe;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "useThemeContext", {
19
- enumerable: true,
20
- get: function get() {
21
- return _useThemeContext.useThemeContext;
22
- }
23
- });
24
- var _useThemeContext = /*#__PURE__*/require("./useThemeContext");
25
18
  var _useSheetSwipe = /*#__PURE__*/require("./useSheetSwipe");
26
19
  var _useSheet = /*#__PURE__*/require("./useSheet");
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.handleTransition = void 0;
7
7
  var handleTransition = exports.handleTransition = function handleTransition(transition) {
8
8
  return function (props) {
9
- var lowPerformance = props.theme.lowPerformance,
10
- withTransition = props.withTransition;
11
- return !withTransition || lowPerformance ? 'unset' : transition;
9
+ var withTransition = props.withTransition;
10
+ return !withTransition ? 'unset' : transition;
12
11
  };
13
12
  };
@@ -3,10 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.DEFAULT_Z_INDEX = void 0;
6
7
  Object.defineProperty(exports, "handleTransition", {
7
8
  enumerable: true,
8
9
  get: function get() {
9
10
  return _handleTransition.handleTransition;
10
11
  }
11
12
  });
12
- var _handleTransition = /*#__PURE__*/require("./handleTransition");
13
+ var _handleTransition = /*#__PURE__*/require("./handleTransition");
14
+ var DEFAULT_Z_INDEX = exports.DEFAULT_Z_INDEX = '0';
@@ -1,3 +1,6 @@
1
1
  [
2
- "--plasma-sheet-overlay-background-color, --plasma-sheet-content-background-color, --plasma-sheet-handle-background-color"
2
+ "--plasma-sheet-overlay-color",
3
+ "--plasma-sheet-overlay-with-blur-color",
4
+ "--plasma-sheet-content-background-color",
5
+ "--plasma-sheet-handle-background-color"
3
6
  ]
@@ -12,7 +12,7 @@ var config = exports.config = {
12
12
  },
13
13
  variations: {
14
14
  view: {
15
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":var(--overlay-soft);", ":var(--text-primary);"], _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.overlayBackgroundColor, _Sheet.sheetTokens.handleColor)
15
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], _Sheet.sheetTokens.sheetOverlayColor, _Sheet.sheetTokens.sheetOverlayWithBlurColor, _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.handleColor)
16
16
  }
17
17
  }
18
18
  };