Transaction: BqTu9ia...fnyH

{ "data": { "rubik-ui.near": { "widget": { "RubikUI.Styled.Accordion": { "": "const generateStyleFromProps = props => {\n return Object.keys(props).reduce((styleString, prop) => {\n const kebabCaseProp = prop.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n if (props[prop]) {\n styleString += `${kebabCaseProp}: ${props[prop]}!important;\\n`;\n }\n return styleString;\n }, '');\n};\n\n\nconst Facet = styled.div`\n ${props => generateStyleFromProps(props)}\n`;\n\nconst AccordionFacet = styled(Facet)`\n padding:0;\n margin:0;\n width:100%;\n max-width:100%;\n background-color:rgba(0,0,0,.02);\n border-radius:20px;\n list-style:none;\n box-shadow:0 0 0 1px rgba(0,0,0,.05);\n transition:all .2s;\n\n :hover {\n box-shadow: 0 0 0 5px rgba(0,0,0,.05);\n transition:all .2s;\n }\n`;\n\nconst AccordionItemFacet = styled(Facet)`\n margin:0;\n padding:0;\n width:100%;\n padding:13px;\n cursor:pointer;\n transition: all .2s;\n\n :hover {\n cursor:pointer;\n background-color:rgba(0,0,0,.01);\n transition: all .2s;\n }\n\n :not(:last-of-type) {\n border-bottom:3px solid rgba(0,0,0,.05);\n }\n`;\n\nconst Cube = ({ as: Component, apply: Facet, extend: CustomFacetCSS, onClick, onKeyUp, children, ...rest }) => {\n const FinalFacet = styled(Facet)`\n ${CustomFacetCSS || ''}\n `;\n \n const Wrapper = FinalFacet || Component || 'div';\n \n return (\n <Wrapper as={Component} {...rest} onClick={onClick} onKeyUp={onKeyUp}>\n {children}\n </Wrapper>\n );\n};\n\nconst Accordion = ({ children, ...props }) => {\n return <Cube as=\"ul\" apply={AccordionFacet} {...props}>\n {children}\n </Cube>;\n}\n\nconst MyAccordionExtension = `\n background-color:red;\n`;\n\nreturn <>\n<Accordion extend={MyAccordionExtension} maxWidth=\"800px\" onClick={() => {\n console.log(\"Clicked\");\n}}>\n {Array.from([1,2,3]).map((data, idx) => <AccordionItemFacet as=\"li\">{idx}</AccordionItemFacet>)}\n</Accordion>\n</>" } } } } }