react-image-accordion 1.1.1 → 1.1.2

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 (19) hide show
  1. package/README.md +23 -3
  2. package/dist/index.es.js +37 -10
  3. package/dist/index.js +37 -10
  4. package/package.json +1 -1
  5. package/src/components/Accordion/App.css +5 -1
  6. package/src/components/Accordion/React-image-accordion.js +2 -0
  7. package/src/components/Accordion/UseImageAccordion.js +38 -4
  8. package/src/stories/MockAccordion.json +29 -5
  9. package/src/stories/UseImageAccordion.stories.js +2 -1
  10. package/src/svg/bitcoin-1-svgrepo-com.svg +6 -0
  11. package/src/svg/bitcoin-svgrepo-com.svg +6 -0
  12. package/src/svg/chrome-svgrepo-com.svg +6 -0
  13. package/src/svg/compare-svgrepo-com.svg +6 -0
  14. package/src/svg/document-check-svgrepo-com.svg +7 -0
  15. package/src/svg/document-file-with-line-svgrepo-com.svg +6 -0
  16. package/src/svg/gui-regex-svgrepo-com.svg +6 -0
  17. package/src/svg/image-svgrepo-com.svg +6 -0
  18. package/src/svg/npm-svgrepo-com.svg +7 -0
  19. package/src/svg/twitter-social-tweet-svgrepo-com.svg +6 -0
package/README.md CHANGED
@@ -72,6 +72,7 @@ function MyComponent() {
72
72
  accordionData={accordionData}
73
73
  AccordionWidth={AccordionWidth}
74
74
  AccordionHeight={AccordionHeight}
75
+ ContentSize=[ContentSize]
75
76
  />
76
77
  );
77
78
  }
@@ -91,6 +92,24 @@ function MyComponent() {
91
92
  | accordionData | json data | json file | Source File json |
92
93
  | AccordionWidth | css | 50rem | Accordion Width |
93
94
  | AccordionHeight | css | 30rem | Accordion Height |
95
+ | ContentSize | Array |[1,2,3,4,5]*| Accordion Height |
96
+
97
+
98
+ "@media (max-width: 480px)": {
99
+ fontSize: ContentSize[0] || "0.65rem",
100
+ },
101
+ "@media (min-width: 481px) and (max-width: 768px)": {
102
+ fontSize: ContentSize[1] || "0.8rem",
103
+ },
104
+ "@media (min-width: 769px) and (max-width: 1024px)": {
105
+ fontSize: ContentSize[2] || "1rem",
106
+ },
107
+ "@media (min-width: 1025px) and (max-width: 1200px)": {
108
+ fontSize: ContentSize[3] || "1.2rem",
109
+ },
110
+ "@media (min-width: 1201px)": {
111
+ fontSize: ContentSize[4] || "1.5rem",
112
+ },
94
113
 
95
114
 
96
115
  ## Sample Code
@@ -100,9 +119,10 @@ import { ReactImageAccordion } from "json-pretty-textarea";
100
119
  export const test = () => {
101
120
  return (
102
121
  <ReactImageAccordion
103
- accordionData= {MockAccordion}
104
- AccordionWidth= "40rem",
105
- AccordionHeight= "30rem",
122
+ accordionData= {MockAccordion}
123
+ AccordionWidth= "40rem",
124
+ AccordionHeight= "30rem",
125
+ ContentSize: ["1rem", "1.2rem", "1.5rem", "1.8rem", "2rem"],
106
126
  />
107
127
  );
108
128
  };
package/dist/index.es.js CHANGED
@@ -27,13 +27,14 @@ function styleInject(css, ref) {
27
27
  }
28
28
  }
29
29
 
30
- var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordion {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordion {\n flex-direction: row;\n /* height: 30rem; */\n }\n}\n\n.accordion * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
30
+ var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordion {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordion {\n flex-direction: row;\n height: 30rem;\n }\n}\n\n.accordion * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n display: none;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
31
31
  styleInject(css_248z);
32
32
 
33
33
  function UseImageAccordion({
34
34
  accordionData,
35
35
  AccordionWidth,
36
- AccordionHeight
36
+ AccordionHeight,
37
+ ContentSize
37
38
  }) {
38
39
  const [activePanel, setActivePanel] = useState(null);
39
40
  function toggleAccordion(panelToActivate) {
@@ -45,6 +46,28 @@ function UseImageAccordion({
45
46
  }
46
47
  });
47
48
  }
49
+ const HeightStyle = {
50
+ "@media (max-width: 480px)": {
51
+ height: AccordionHeight
52
+ }
53
+ };
54
+ const ContentStyle = {
55
+ "@media (max-width: 480px)": {
56
+ fontSize: ContentSize[0] || "0.65rem"
57
+ },
58
+ "@media (min-width: 481px) and (max-width: 768px)": {
59
+ fontSize: ContentSize[1] || "0.8rem"
60
+ },
61
+ "@media (min-width: 769px) and (max-width: 1024px)": {
62
+ fontSize: ContentSize[2] || "1rem"
63
+ },
64
+ "@media (min-width: 1025px) and (max-width: 1200px)": {
65
+ fontSize: ContentSize[3] || "1.2rem"
66
+ },
67
+ "@media (min-width: 1201px)": {
68
+ fontSize: ContentSize[4] || "1.5rem"
69
+ }
70
+ };
48
71
  useEffect(() => {
49
72
  setActivePanel(accordionData[0].id);
50
73
  }, []);
@@ -56,9 +79,7 @@ function UseImageAccordion({
56
79
  }
57
80
  }, /*#__PURE__*/React.createElement("div", {
58
81
  className: "accordion",
59
- style: {
60
- height: AccordionHeight
61
- }
82
+ style: HeightStyle
62
83
  }, accordionData.map(item => /*#__PURE__*/React.createElement("div", {
63
84
  key: item.id,
64
85
  className: "accordion-panel",
@@ -75,7 +96,8 @@ function UseImageAccordion({
75
96
  id: item.id
76
97
  }, item.title), /*#__PURE__*/React.createElement("svg", {
77
98
  "aria-hidden": "true",
78
- className: "accordion-icon"
99
+ className: "accordion-icon",
100
+ xmlns: "http://www.w3.org/2000/svg"
79
101
  }, /*#__PURE__*/React.createElement("image", {
80
102
  href: item.svg
81
103
  })))), /*#__PURE__*/React.createElement("div", {
@@ -83,8 +105,11 @@ function UseImageAccordion({
83
105
  id: item.id,
84
106
  "aria-labelledby": item.id,
85
107
  "aria-hidden": activePanel !== item.id,
86
- role: "region"
87
- }, /*#__PURE__*/React.createElement("p", null, item.content), /*#__PURE__*/React.createElement("img", {
108
+ role: "region",
109
+ style: ContentStyle
110
+ }, /*#__PURE__*/React.createElement("p", {
111
+ style: ContentStyle
112
+ }, item.content), /*#__PURE__*/React.createElement("img", {
88
113
  className: "accordion-image",
89
114
  src: item.image,
90
115
  alt: item.alt
@@ -94,12 +119,14 @@ function UseImageAccordion({
94
119
  const ReactImageAccordion = ({
95
120
  accordionData,
96
121
  AccordionWidth,
97
- AccordionHeight
122
+ AccordionHeight,
123
+ ContentSize
98
124
  }) => {
99
125
  return /*#__PURE__*/React.createElement(UseImageAccordion, {
100
126
  accordionData: accordionData,
101
127
  AccordionWidth: AccordionWidth,
102
- AccordionHeight: AccordionHeight
128
+ AccordionHeight: AccordionHeight,
129
+ ContentSize: ContentSize
103
130
  });
104
131
  };
105
132
 
package/dist/index.js CHANGED
@@ -35,13 +35,14 @@ function styleInject(css, ref) {
35
35
  }
36
36
  }
37
37
 
38
- var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordion {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordion {\n flex-direction: row;\n /* height: 30rem; */\n }\n}\n\n.accordion * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
38
+ var css_248z = "*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: dark;\n}\n\nbody {\n display: grid;\n justify-content: center;\n align-content: center;\n min-height: 100vh;\n\n margin: 0;\n font-family: system-ui;\n font-size: 1.125rem;\n line-height: 1.6;\n}\n\nimg {\n max-width: 100%;\n display: block;\n}\n\n.wrapper {\n /* max-width: 50rem; */\n margin-inline: auto;\n padding-inline: 1rem;\n}\n\n.accordion {\n --_button-size: 3rem;\n --_panel-padding: 0.75rem;\n --_panel-gap: 1rem;\n\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (min-width: 45em) {\n .accordion {\n flex-direction: row;\n height: 30rem;\n }\n}\n\n.accordion * {\n margin: 0;\n}\n\n.accordion-panel {\n position: relative;\n isolation: isolate;\n flex-basis: calc((var(--_panel-padding) * 2) + var(--_button-size));\n overflow: hidden;\n padding: var(--_panel-padding);\n padding-right: calc(var(--_panel-padding) * 4);\n border-radius: calc(((var(--_panel-padding) * 2) + var(--_button-size)) / 2);\n cursor: pointer;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel {\n transition: flex-basis 500ms, flex-grow 500ms;\n }\n}\n\n.accordion-panel:nth-child(1) {\n --_panel-color: red;\n}\n.accordion-panel:nth-child(2) {\n --_panel-color: blue;\n}\n.accordion-panel:nth-child(3) {\n --_panel-color: green;\n}\n.accordion-panel:nth-child(4) {\n --_panel-color: yellow;\n}\n.accordion-panel:nth-child(5) {\n --_panel-color: orange;\n}\n.accordion-panel:nth-child(6) {\n --_panel-color: purple;\n}\n.accordion-panel:nth-child(7) {\n --_panel-color: pink;\n}\n.accordion-panel:nth-child(8) {\n --_panel-color: brown;\n}\n.accordion-panel:nth-child(9) {\n --_panel-color: cyan;\n}\n.accordion-panel:nth-child(10) {\n --_panel-color: magenta;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) {\n flex-basis: clamp(15rem, 40vh, 20rem);\n flex-grow: 1;\n}\n\n.accordion-trigger {\n outline: 0 !important;\n}\n\n.accordion-panel:focus-within {\n outline: 3px solid var(--_panel-color);\n outline-offset: 4px;\n}\n\n.accordion-content > p {\n transform: translateY(2rem);\n opacity: 0;\n margin-left: calc(var(--_button-size) + var(--_panel-gap));\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transition: transform 500ms 500ms, opacity 500ms 500ms;\n }\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-content > p {\n transform: translateY(0);\n opacity: 1;\n}\n\n.accordion-title {\n font-size: 1.5rem;\n font-weight: 700;\n position: relative;\n isolation: isolate;\n display: grid;\n align-items: center;\n}\n\n.accordion-panel:has([aria-expanded=\"false\"]) .accordion-title {\n display: none;\n}\n\n@media (max-width: 44.999em) {\n .accordion-title::after {\n content: \"\";\n position: absolute;\n\n left: calc((var(--_panel-gap) + var(--_button-size)) * -1);\n width: calc(100% + (var(--_button-size) * 2));\n height: var(--_button-size);\n background: hsl(0 0% 0% /0.55);\n z-index: -1;\n border-radius: 100vw;\n }\n}\n\n.accordion-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: -1;\n transition: filer 500ms;\n}\n\n.accordion-panel:has([aria-expanded=\"true\"]) .accordion-image {\n filter: brightness(0.5);\n}\n.accordion-trigger {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n gap: var(--_panel-gap);\n background: transparent;\n border: 0;\n padding: 0;\n}\n.accordion-icon {\n fill: var(--_panel-color);\n background: hsl(0 0% 0% /0.55);\n width: var(--_button-size);\n aspect-ratio: 1/1;\n padding: 0.75rem;\n border-radius: 50%;\n z-index: 10;\n}\n";
39
39
  styleInject(css_248z);
40
40
 
41
41
  function UseImageAccordion({
42
42
  accordionData,
43
43
  AccordionWidth,
44
- AccordionHeight
44
+ AccordionHeight,
45
+ ContentSize
45
46
  }) {
46
47
  const [activePanel, setActivePanel] = React.useState(null);
47
48
  function toggleAccordion(panelToActivate) {
@@ -53,6 +54,28 @@ function UseImageAccordion({
53
54
  }
54
55
  });
55
56
  }
57
+ const HeightStyle = {
58
+ "@media (max-width: 480px)": {
59
+ height: AccordionHeight
60
+ }
61
+ };
62
+ const ContentStyle = {
63
+ "@media (max-width: 480px)": {
64
+ fontSize: ContentSize[0] || "0.65rem"
65
+ },
66
+ "@media (min-width: 481px) and (max-width: 768px)": {
67
+ fontSize: ContentSize[1] || "0.8rem"
68
+ },
69
+ "@media (min-width: 769px) and (max-width: 1024px)": {
70
+ fontSize: ContentSize[2] || "1rem"
71
+ },
72
+ "@media (min-width: 1025px) and (max-width: 1200px)": {
73
+ fontSize: ContentSize[3] || "1.2rem"
74
+ },
75
+ "@media (min-width: 1201px)": {
76
+ fontSize: ContentSize[4] || "1.5rem"
77
+ }
78
+ };
56
79
  React.useEffect(() => {
57
80
  setActivePanel(accordionData[0].id);
58
81
  }, []);
@@ -64,9 +87,7 @@ function UseImageAccordion({
64
87
  }
65
88
  }, /*#__PURE__*/React__default["default"].createElement("div", {
66
89
  className: "accordion",
67
- style: {
68
- height: AccordionHeight
69
- }
90
+ style: HeightStyle
70
91
  }, accordionData.map(item => /*#__PURE__*/React__default["default"].createElement("div", {
71
92
  key: item.id,
72
93
  className: "accordion-panel",
@@ -83,7 +104,8 @@ function UseImageAccordion({
83
104
  id: item.id
84
105
  }, item.title), /*#__PURE__*/React__default["default"].createElement("svg", {
85
106
  "aria-hidden": "true",
86
- className: "accordion-icon"
107
+ className: "accordion-icon",
108
+ xmlns: "http://www.w3.org/2000/svg"
87
109
  }, /*#__PURE__*/React__default["default"].createElement("image", {
88
110
  href: item.svg
89
111
  })))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -91,8 +113,11 @@ function UseImageAccordion({
91
113
  id: item.id,
92
114
  "aria-labelledby": item.id,
93
115
  "aria-hidden": activePanel !== item.id,
94
- role: "region"
95
- }, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), /*#__PURE__*/React__default["default"].createElement("img", {
116
+ role: "region",
117
+ style: ContentStyle
118
+ }, /*#__PURE__*/React__default["default"].createElement("p", {
119
+ style: ContentStyle
120
+ }, item.content), /*#__PURE__*/React__default["default"].createElement("img", {
96
121
  className: "accordion-image",
97
122
  src: item.image,
98
123
  alt: item.alt
@@ -102,12 +127,14 @@ function UseImageAccordion({
102
127
  const ReactImageAccordion = ({
103
128
  accordionData,
104
129
  AccordionWidth,
105
- AccordionHeight
130
+ AccordionHeight,
131
+ ContentSize
106
132
  }) => {
107
133
  return /*#__PURE__*/React__default["default"].createElement(UseImageAccordion, {
108
134
  accordionData: accordionData,
109
135
  AccordionWidth: AccordionWidth,
110
- AccordionHeight: AccordionHeight
136
+ AccordionHeight: AccordionHeight,
137
+ ContentSize: ContentSize
111
138
  });
112
139
  };
113
140
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-image-accordion",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "description": "Accordion component for React",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/Accordion/App.css CHANGED
@@ -44,7 +44,7 @@ img {
44
44
  @media (min-width: 45em) {
45
45
  .accordion {
46
46
  flex-direction: row;
47
- /* height: 30rem; */
47
+ height: 30rem;
48
48
  }
49
49
  }
50
50
 
@@ -140,6 +140,10 @@ img {
140
140
  align-items: center;
141
141
  }
142
142
 
143
+ .accordion-panel:has([aria-expanded="false"]) .accordion-title {
144
+ display: none;
145
+ }
146
+
143
147
  @media (max-width: 44.999em) {
144
148
  .accordion-title::after {
145
149
  content: "";
package/src/components/Accordion/React-image-accordion.js CHANGED
@@ -5,12 +5,14 @@ export const ReactImageAccordion = ({
5
5
  accordionData,
6
6
  AccordionWidth,
7
7
  AccordionHeight,
8
+ ContentSize,
8
9
  }) => {
9
10
  return (
10
11
  <UseImageAccordion
11
12
  accordionData={accordionData}
12
13
  AccordionWidth={AccordionWidth}
13
14
  AccordionHeight={AccordionHeight}
15
+ ContentSize={ContentSize}
14
16
  />
15
17
  );
16
18
  };
package/src/components/Accordion/UseImageAccordion.js CHANGED
@@ -1,7 +1,12 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import "./App.css";
3
3
 
4
- function UseImageAccordion({ accordionData, AccordionWidth, AccordionHeight }) {
4
+ function UseImageAccordion({
5
+ accordionData,
6
+ AccordionWidth,
7
+ AccordionHeight,
8
+ ContentSize,
9
+ }) {
5
10
  const [activePanel, setActivePanel] = useState(null);
6
11
 
7
12
  function toggleAccordion(panelToActivate) {
@@ -14,6 +19,30 @@ function UseImageAccordion({ accordionData, AccordionWidth, AccordionHeight }) {
14
19
  });
15
20
  }
16
21
 
22
+ const HeightStyle = {
23
+ "@media (max-width: 480px)": {
24
+ height: AccordionHeight,
25
+ },
26
+ };
27
+
28
+ const ContentStyle = {
29
+ "@media (max-width: 480px)": {
30
+ fontSize: ContentSize[0] || "0.65rem",
31
+ },
32
+ "@media (min-width: 481px) and (max-width: 768px)": {
33
+ fontSize: ContentSize[1] || "0.8rem",
34
+ },
35
+ "@media (min-width: 769px) and (max-width: 1024px)": {
36
+ fontSize: ContentSize[2] || "1rem",
37
+ },
38
+ "@media (min-width: 1025px) and (max-width: 1200px)": {
39
+ fontSize: ContentSize[3] || "1.2rem",
40
+ },
41
+ "@media (min-width: 1201px)": {
42
+ fontSize: ContentSize[4] || "1.5rem",
43
+ },
44
+ };
45
+
17
46
  useEffect(() => {
18
47
  setActivePanel(accordionData[0].id);
19
48
  }, []);
@@ -22,7 +51,7 @@ function UseImageAccordion({ accordionData, AccordionWidth, AccordionHeight }) {
22
51
  return (
23
52
  <>
24
53
  <div className="wrapper" style={{ width: AccordionWidth }}>
25
- <div className="accordion" style={{ height: AccordionHeight }}>
54
+ <div className="accordion" style={HeightStyle}>
26
55
  {accordionData.map((item) => (
27
56
  <div
28
57
  key={item.id}
@@ -39,7 +68,11 @@ function UseImageAccordion({ accordionData, AccordionWidth, AccordionHeight }) {
39
68
  <span className="accordion-title" id={item.id}>
40
69
  {item.title}
41
70
  </span>
42
- <svg aria-hidden="true" className="accordion-icon">
71
+ <svg
72
+ aria-hidden="true"
73
+ className="accordion-icon"
74
+ xmlns="http://www.w3.org/2000/svg"
75
+ >
43
76
  <image href={item.svg}></image>
44
77
  </svg>
45
78
  </button>
@@ -50,8 +83,9 @@ function UseImageAccordion({ accordionData, AccordionWidth, AccordionHeight }) {
50
83
  aria-labelledby={item.id}
51
84
  aria-hidden={activePanel !== item.id}
52
85
  role="region"
86
+ style={ContentStyle}
53
87
  >
54
- <p>{item.content}</p>
88
+ <p style={ContentStyle}>{item.content}</p>
55
89
  <img
56
90
  className="accordion-image"
57
91
  src={item.image}
package/src/stories/MockAccordion.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "image": "https://picsum.photos/400/601",
6
6
  "alt": "first panel image",
7
7
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
8
- "svg": "aa (1).svg"
8
+ "svg": "../svg/gui-regex-svgrepo-com.svg"
9
9
  },
10
10
  {
11
11
  "title": "Fishing",
@@ -13,7 +13,7 @@
13
13
  "image": "https://picsum.photos/400/602",
14
14
  "alt": "second panel image",
15
15
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
16
- "svg": "aa (2).svg"
16
+ "svg": "../svg/document-check-svgrepo-com.svg"
17
17
  },
18
18
  {
19
19
  "title": "Swimming",
@@ -21,7 +21,7 @@
21
21
  "image": "https://picsum.photos/401/600",
22
22
  "alt": "third panel image",
23
23
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
24
- "svg": "aa (3).svg"
24
+ "svg": "../svg/twitter-social-tweet-svgrepo-com.svg"
25
25
  },
26
26
  {
27
27
  "title": "Kayaking",
@@ -29,7 +29,7 @@
29
29
  "image": "https://picsum.photos/402/600",
30
30
  "alt": "fourth panel image",
31
31
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
32
- "svg": "aa (4).svg"
32
+ "svg": "../svg/compare-svgrepo-com.svg"
33
33
  },
34
34
  {
35
35
  "title": "Scuba diving",
@@ -37,6 +37,30 @@
37
37
  "image": "https://picsum.photos/401/601",
38
38
  "alt": "fifth panel image",
39
39
  "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
40
- "svg": "aa (5).svg"
40
+ "svg": "../svg/image-svgrepo-com.svg"
41
+ },
42
+ {
43
+ "title": "Scuba diving",
44
+ "id": 6,
45
+ "image": "https://picsum.photos/401/602",
46
+ "alt": "fifth panel image",
47
+ "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
48
+ "svg": "../svg/bitcoin-svgrepo-com.svg"
49
+ },
50
+ {
51
+ "title": "Scuba diving",
52
+ "id": 7,
53
+ "image": "https://picsum.photos/402/602",
54
+ "alt": "fifth panel image",
55
+ "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
56
+ "svg": "../svg/chrome-svgrepo-com.svg"
57
+ },
58
+ {
59
+ "title": "Scuba diving",
60
+ "id": 8,
61
+ "image": "https://picsum.photos/399/599",
62
+ "alt": "fifth panel image",
63
+ "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe id numquam ab molestias sint beatae provident possimus doloribus autem repudiandae!",
64
+ "svg": "../svg/npm-svgrepo-com.svg"
41
65
  }
42
66
  ]
package/src/stories/UseImageAccordion.stories.js CHANGED
@@ -12,6 +12,7 @@ const Template = (args) => <ReactImageAccordion {...args} />;
12
12
  export const App = Template.bind({});
13
13
  App.args = {
14
14
  accordionData: MockAccordion,
15
- AccordionWidth: "40rem",
15
+ AccordionWidth: "100%",
16
16
  AccordionHeight: "30rem",
17
+ ContentSize: ["1rem", "1.2rem", "1.5rem", "1.8rem", "2rem"],
17
18
  };
package/src/svg/bitcoin-1-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style="fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 10.001953 6 L 10.001953 4.001953 M 13.998047 6 L 13.998047 4.001953 M 13.998047 6 L 7.001953 6 M 13.998047 6 C 15.65625 6 16.998047 7.341797 16.998047 9 C 16.998047 10.658203 15.65625 12 13.998047 12 M 9 18 L 9 12 M 9 6 L 9 12 M 10.001953 19.998047 L 10.001953 18 M 13.998047 19.998047 L 13.998047 18 M 9 12 L 15 12 C 16.658203 12 18 13.341797 18 15 C 18 16.658203 16.658203 18 15 18 L 7.001953 18 " transform="matrix(0.666667,0,0,0.666667,0,0)"/>
5
+ </g>
6
+ </svg>
package/src/svg/bitcoin-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" viewBox="0 0 10 10" version="1.1">
3
+ <g id="surface1">
4
+ <path style="fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 10.003125 6 L 10.003125 4.003125 M 13.996875 6 L 13.996875 4.003125 M 13.996875 6 L 7.003125 6 M 13.996875 6 C 15.65625 6 16.996875 7.340625 16.996875 9 C 16.996875 10.659375 15.65625 12 13.996875 12 M 9 18 L 9 12 M 9 6 L 9 12 M 10.003125 19.996875 L 10.003125 18 M 13.996875 19.996875 L 13.996875 18 M 9 12 L 15 12 C 16.659375 12 18 13.340625 18 15 C 18 16.659375 16.659375 18 15 18 L 7.003125 18 " transform="matrix(0.416667,0,0,0.416667,0,0)"/>
5
+ </g>
6
+ </svg>
package/src/svg/chrome-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:evenodd;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 3.617188 4.40625 L 4.933594 6.6875 C 5.445312 5.5 6.625 4.667969 8 4.667969 L 12.585938 4.667969 C 11.554688 3.253906 9.882812 2.332031 8 2.332031 C 6.234375 2.332031 4.65625 3.140625 3.617188 4.40625 Z M 13.304688 6 L 10.667969 6 C 11.085938 6.558594 11.332031 7.25 11.332031 8 C 11.332031 8.605469 11.171875 9.175781 10.886719 9.667969 L 8.597656 13.636719 C 11.445312 13.335938 13.667969 10.925781 13.667969 8 C 13.667969 7.296875 13.539062 6.621094 13.304688 6 Z M 7.082031 13.59375 L 8.402344 11.308594 C 8.269531 11.324219 8.136719 11.332031 8 11.332031 C 6.765625 11.332031 5.6875 10.664062 5.113281 9.667969 C 5.113281 9.664062 5.109375 9.664062 5.109375 9.660156 L 2.820312 5.695312 C 2.507812 6.398438 2.332031 7.179688 2.332031 8 C 2.332031 10.816406 4.390625 13.15625 7.082031 13.59375 Z M 6.269531 9 C 6.613281 9.597656 7.261719 10 8 10 C 8.738281 10 9.386719 9.597656 9.730469 9 C 9.902344 8.707031 10 8.367188 10 8 C 10 6.894531 9.105469 6 8 6 C 6.894531 6 6 6.894531 6 8 C 6 8.363281 6.097656 8.703125 6.265625 8.992188 C 6.265625 8.996094 6.265625 9 6.269531 9 Z M 2.273438 3.972656 C 3.539062 2.175781 5.632812 1 8 1 C 10.816406 1 13.238281 2.660156 14.351562 5.054688 C 14.769531 5.949219 15 6.949219 15 8 C 15 11.867188 11.867188 15 8 15 C 7.792969 15 7.585938 14.992188 7.382812 14.972656 C 3.804688 14.660156 1 11.65625 1 8 C 1 6.5 1.472656 5.113281 2.273438 3.972656 Z M 2.273438 3.972656 "/>
5
+ </g>
6
+ </svg>
package/src/svg/compare-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 1.332031 2.667969 L 7.332031 2.667969 L 7.332031 3.332031 L 2 3.332031 L 2 13.332031 L 7.332031 13.332031 L 7.332031 14 L 1.332031 14 Z M 8 15.332031 L 8.667969 15.332031 L 8.667969 1.332031 L 8 1.332031 Z M 5.523438 6.855469 L 5.144531 6.476562 L 3.289062 8.332031 L 5.144531 10.1875 L 5.523438 9.8125 L 4.378906 8.667969 L 7.332031 8.667969 L 7.332031 8 L 4.378906 8 Z M 9.332031 8 L 12.054688 8 L 11.027344 6.972656 L 11.640625 6.359375 L 13.613281 8.332031 L 11.640625 10.308594 L 11.027344 9.691406 L 12.054688 8.667969 L 9.332031 8.667969 L 9.332031 14 L 15.332031 14 L 15.332031 2.667969 L 9.332031 2.667969 Z M 9.332031 8 "/>
5
+ </g>
6
+ </svg>
package/src/svg/document-check-svgrepo-com.svg ADDED
@@ -0,0 +1,7 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" viewBox="0 0 10 10" version="1.1">
3
+ <g id="surface1">
4
+ <rect x="0" y="0" width="10" height="10" style="fill:rgb(100%,100%,100%);fill-opacity:1;stroke:none;"/>
5
+ <path style=" stroke:none;fill-rule:evenodd;fill:rgb(19.607843%,19.607843%,19.607843%);fill-opacity:1;" d="M 5.199219 0.832031 C 5.484375 0.832031 5.734375 0.832031 5.964844 0.929688 C 6.199219 1.023438 6.375 1.203125 6.574219 1.402344 C 6.972656 1.800781 7.367188 2.195312 7.765625 2.589844 C 7.964844 2.792969 8.140625 2.96875 8.238281 3.199219 C 8.335938 3.433594 8.332031 3.683594 8.332031 3.964844 C 8.332031 5.015625 8.332031 6.0625 8.332031 7.109375 C 8.332031 7.480469 8.332031 7.796875 8.300781 8.054688 C 8.261719 8.328125 8.179688 8.589844 7.96875 8.800781 C 7.753906 9.011719 7.492188 9.097656 7.21875 9.132812 C 6.964844 9.167969 6.648438 9.167969 6.277344 9.167969 L 3.722656 9.167969 C 3.351562 9.167969 3.035156 9.167969 2.78125 9.132812 C 2.507812 9.097656 2.246094 9.011719 2.03125 8.800781 C 1.820312 8.589844 1.738281 8.328125 1.699219 8.054688 C 1.667969 7.796875 1.667969 7.480469 1.667969 7.109375 L 1.667969 2.917969 C 1.667969 2.90625 1.667969 2.898438 1.667969 2.890625 C 1.667969 2.519531 1.667969 2.203125 1.699219 1.945312 C 1.738281 1.671875 1.820312 1.410156 2.03125 1.199219 C 2.246094 0.988281 2.507812 0.902344 2.78125 0.867188 C 3.035156 0.832031 3.351562 0.832031 3.722656 0.832031 C 4.214844 0.832031 4.707031 0.835938 5.199219 0.832031 Z M 6.542969 4.707031 C 6.707031 4.867188 6.707031 5.132812 6.542969 5.292969 L 5.054688 6.785156 C 4.792969 7.046875 4.371094 7.046875 4.113281 6.785156 L 3.457031 6.128906 C 3.292969 5.964844 3.292969 5.703125 3.457031 5.539062 C 3.617188 5.375 3.882812 5.375 4.042969 5.539062 L 4.582031 6.078125 L 5.957031 4.707031 C 6.117188 4.542969 6.382812 4.542969 6.542969 4.707031 Z M 6.542969 4.707031 "/>
6
+ </g>
7
+ </svg>
package/src/svg/document-file-with-line-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 11.121094 0 L 3.066406 0 C 2.527344 0 2.085938 0.441406 2.085938 0.980469 L 2.085938 15.019531 C 2.085938 15.558594 2.527344 16 3.066406 16 L 12.933594 16 C 13.472656 16 13.914062 15.558594 13.914062 15.019531 L 13.914062 3.035156 Z M 11.351562 1.46875 L 12.578125 2.796875 L 11.351562 2.796875 Z M 13.089844 15.019531 C 13.089844 15.105469 13.019531 15.175781 12.929688 15.175781 L 3.066406 15.175781 C 2.980469 15.175781 2.910156 15.105469 2.910156 15.019531 L 2.910156 0.980469 C 2.910156 0.894531 2.980469 0.824219 3.066406 0.824219 L 10.527344 0.824219 L 10.527344 3.210938 C 10.527344 3.4375 10.714844 3.621094 10.941406 3.621094 L 13.089844 3.621094 Z M 4.789062 4.296875 L 12.257812 4.296875 L 12.257812 4.707031 L 4.789062 4.707031 L 4.789062 6.832031 L 12.257812 6.832031 L 12.257812 7.246094 L 4.789062 7.246094 L 4.789062 9.304688 L 12.257812 9.304688 L 12.257812 9.714844 L 4.789062 9.714844 L 4.789062 11.652344 L 12.257812 11.652344 L 12.257812 12.0625 L 4.789062 12.0625 L 4.789062 13.214844 L 4.378906 13.214844 L 4.378906 12.0625 L 3.625 12.0625 L 3.625 11.652344 L 4.378906 11.652344 L 4.378906 9.714844 L 3.625 9.714844 L 3.625 9.304688 L 4.378906 9.304688 L 4.378906 7.246094 L 3.625 7.246094 L 3.625 6.832031 L 4.378906 6.832031 L 4.378906 4.707031 L 3.625 4.707031 L 3.625 4.296875 L 4.378906 4.296875 L 4.378906 2.921875 L 4.789062 2.921875 Z M 4.789062 4.296875 "/>
5
+ </g>
6
+ </svg>
package/src/svg/gui-regex-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 9.914062 5.960938 C 9.882812 5.371094 9.761719 4.792969 9.558594 4.214844 C 9.269531 3.382812 9.125 2.808594 9.125 2.492188 C 9.125 2.050781 9.226562 1.714844 9.429688 1.488281 C 9.644531 1.257812 9.902344 1.144531 10.207031 1.144531 C 10.472656 1.144531 10.703125 1.257812 10.898438 1.488281 C 11.09375 1.714844 11.191406 2.042969 11.191406 2.46875 C 11.191406 2.851562 11.074219 3.386719 10.847656 4.074219 C 10.625 4.753906 10.488281 5.382812 10.4375 5.960938 C 10.90625 5.660156 11.324219 5.300781 11.699219 4.875 C 12.277344 4.203125 12.707031 3.789062 12.988281 3.628906 C 13.265625 3.464844 13.550781 3.386719 13.839844 3.386719 C 14.121094 3.386719 14.355469 3.484375 14.539062 3.679688 C 14.734375 3.863281 14.832031 4.089844 14.832031 4.355469 C 14.832031 4.667969 14.695312 4.949219 14.414062 5.195312 C 14.132812 5.441406 13.433594 5.6875 12.3125 5.933594 C 11.65625 6.078125 11.113281 6.242188 10.679688 6.429688 C 11.121094 6.660156 11.660156 6.832031 12.296875 6.953125 C 13.324219 7.140625 13.996094 7.375 14.3125 7.652344 C 14.632812 7.933594 14.796875 8.238281 14.796875 8.570312 C 14.796875 8.824219 14.699219 9.046875 14.503906 9.234375 C 14.316406 9.421875 14.09375 9.515625 13.839844 9.515625 C 13.585938 9.515625 13.300781 9.425781 12.988281 9.246094 C 12.679688 9.066406 12.265625 8.667969 11.738281 8.046875 C 11.390625 7.632812 10.957031 7.242188 10.4375 6.875 C 10.457031 7.359375 10.554688 7.886719 10.730469 8.457031 C 11.035156 9.457031 11.191406 10.140625 11.191406 10.507812 C 11.191406 10.847656 11.089844 11.136719 10.882812 11.375 C 10.679688 11.601562 10.464844 11.71875 10.234375 11.71875 C 9.921875 11.71875 9.636719 11.59375 9.378906 11.347656 C 9.203125 11.171875 9.113281 10.886719 9.113281 10.496094 C 9.113281 10.085938 9.210938 9.597656 9.40625 9.03125 C 9.601562 8.453125 9.726562 8.058594 9.777344 7.84375 C 9.828125 7.625 9.875 7.300781 9.914062 6.875 C 9.414062 7.207031 8.976562 7.578125 8.601562 7.984375 C 7.984375 8.679688 7.515625 9.125 7.203125 9.308594 C 6.980469 9.445312 6.75 9.515625 6.515625 9.515625 C 6.226562 9.515625 5.980469 9.417969 5.773438 9.222656 C 5.570312 9.027344 5.46875 8.808594 5.46875 8.570312 C 5.46875 8.359375 5.554688 8.136719 5.722656 7.910156 C 5.902344 7.671875 6.164062 7.476562 6.515625 7.324219 C 6.742188 7.21875 7.265625 7.085938 8.082031 6.914062 C 8.609375 6.804688 9.121094 6.644531 9.621094 6.429688 C 9.164062 6.199219 8.617188 6.023438 7.980469 5.894531 C 6.933594 5.675781 6.289062 5.476562 6.042969 5.296875 C 5.660156 5.015625 5.46875 4.675781 5.46875 4.277344 C 5.46875 4.046875 5.5625 3.839844 5.75 3.652344 C 5.945312 3.457031 6.167969 3.359375 6.425781 3.359375 C 6.703125 3.359375 7.003906 3.449219 7.316406 3.628906 C 7.632812 3.804688 8.023438 4.167969 8.488281 4.710938 C 8.957031 5.246094 9.429688 5.660156 9.914062 5.960938 M 3.347656 10.492188 C 3.964844 10.492188 4.484375 10.707031 4.902344 11.140625 C 5.320312 11.558594 5.53125 12.070312 5.53125 12.675781 C 5.53125 13.277344 5.316406 13.796875 4.882812 14.226562 C 4.464844 14.648438 3.953125 14.855469 3.347656 14.855469 C 2.746094 14.855469 2.226562 14.648438 1.796875 14.226562 C 1.375 13.796875 1.167969 13.277344 1.167969 12.675781 C 1.167969 12.058594 1.375 11.539062 1.796875 11.121094 C 2.226562 10.699219 2.746094 10.492188 3.347656 10.492188 "/>
5
+ </g>
6
+ </svg>
package/src/svg/image-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style="fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 4.001953 10.001953 L 4.001953 6 C 4.001953 4.892578 4.892578 4.001953 6 4.001953 L 12 4.001953 M 4.025391 18.328125 C 4.183594 19.277344 5.009766 19.998047 6 19.998047 L 18 19.998047 C 19.107422 19.998047 19.998047 19.107422 19.998047 18 L 19.998047 14.191406 M 4.025391 18.328125 C 4.007812 18.222656 4.001953 18.111328 4.001953 18 L 4.001953 15 M 4.025391 18.328125 L 7.845703 14.507812 C 8.525391 13.916016 9.521484 13.845703 10.271484 14.349609 L 10.78125 14.689453 C 11.507812 15.169922 12.462891 15.128906 13.142578 14.583984 L 15.791016 12.46875 C 16.464844 11.929687 17.408203 11.882812 18.123047 12.345703 C 18.205078 12.398437 18.275391 12.462891 18.339844 12.527344 L 19.998047 14.191406 M 19.998047 14.191406 L 19.998047 6 C 19.998047 4.892578 19.107422 4.001953 18 4.001953 L 16.998047 4.001953 M 10.998047 9 C 10.998047 10.107422 10.107422 10.998047 9 10.998047 C 7.892578 10.998047 7.001953 10.107422 7.001953 9 C 7.001953 7.892578 7.892578 7.001953 9 7.001953 C 10.107422 7.001953 10.998047 7.892578 10.998047 9 Z M 10.998047 9 " transform="matrix(0.666667,0,0,0.666667,0,0)"/>
5
+ </g>
6
+ </svg>
package/src/svg/npm-svgrepo-com.svg ADDED
@@ -0,0 +1,7 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 7.199219 6.632812 L 8 6.632812 L 8 8.246094 L 7.199219 8.246094 Z M 7.199219 6.632812 "/>
5
+ <path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 0.667969 5 L 0.667969 9.898438 L 4.734375 9.898438 L 4.734375 10.734375 L 8 10.734375 L 8 9.898438 L 15.332031 9.898438 L 15.332031 5 Z M 4.734375 9.066406 L 3.933594 9.066406 L 3.933594 6.632812 L 3.101562 6.632812 L 3.101562 9.066406 L 1.5 9.066406 L 1.5 5.832031 L 4.734375 5.832031 Z M 8.832031 9.066406 L 7.199219 9.066406 L 7.199219 9.898438 L 5.566406 9.898438 L 5.566406 5.832031 L 8.832031 5.832031 Z M 14.535156 9.066406 L 13.734375 9.066406 L 13.734375 6.632812 L 12.898438 6.632812 L 12.898438 9.066406 L 12.066406 9.066406 L 12.066406 6.632812 L 11.265625 6.632812 L 11.265625 9.066406 L 9.632812 9.066406 L 9.632812 5.832031 L 14.535156 5.832031 Z M 14.535156 9.066406 "/>
6
+ </g>
7
+ </svg>
package/src/svg/twitter-social-tweet-svgrepo-com.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
3
+ <g id="surface1">
4
+ <path style="fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 8.285156 21 C 15.832031 21 19.962891 14.455078 19.962891 8.789062 C 19.962891 8.601562 19.962891 8.419922 19.951172 8.232422 C 20.753906 7.623047 21.445312 6.873047 22.001953 6.017578 C 21.246094 6.357422 20.455078 6.591797 19.640625 6.697266 C 20.496094 6.158203 21.134766 5.314453 21.439453 4.318359 C 20.630859 4.822266 19.751953 5.173828 18.832031 5.355469 C 17.279297 3.621094 14.677734 3.539062 13.025391 5.173828 C 11.958984 6.216797 11.501953 7.78125 11.841797 9.275391 C 8.554687 9.099609 5.472656 7.464844 3.392578 4.787109 C 2.302734 6.744141 2.853516 9.257812 4.664062 10.511719 C 4.007812 10.494141 3.375 10.3125 2.800781 9.978516 C 2.800781 9.990234 2.800781 10.007812 2.800781 10.025391 C 2.800781 12.070312 4.177734 13.828125 6.09375 14.238281 C 5.490234 14.414062 4.857422 14.4375 4.242187 14.314453 C 4.775391 16.060547 6.322266 17.255859 8.074219 17.291016 C 6.615234 18.486328 4.822266 19.130859 2.976562 19.130859 C 2.648437 19.130859 2.320312 19.107422 1.998047 19.072266 C 3.878906 20.337891 6.058594 21 8.285156 21 Z M 8.285156 21 " transform="matrix(0.666667,0,0,0.666667,0,0)"/>
5
+ </g>
6
+ </svg>