@gsretail.com/gui-core/build/core/Section/PagePanel/shared/PanelContainer/styled.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../../../../node_modules/tslib/tslib.es6.js";import o from"@emotion/styled";import{Box as t}from"@mui/material";import{paddingXSpacing as e,paddingYSpacing as r,marginXSpacing as i,marginYSpacing as d}from"../../../../../assets/theme/styles/spacing.js";import"@mui/material/styles";import a from"../../../../../assets/theme/basicStyle.js";var p,s=o(t)(p||(p=n(["\n  flex-shrink: 0;\n  margin: 0;\n\n  position: relative;\n  ","; //32px\n  ",";\n  ",";\n  // ",";\n  background-color: ",";\n  box-shadow: ",";\n  border-radius: 4px;\n  min-height: 20px;\n\n  & .rightBtnMode {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n\n    & .gui-form-group {\n      justify-content: flex-end;\n    }\n  }\n\n  @media (max-width: ","px) {\n    & .rightBtnMode {\n      flex-basis: 100%;\n      flex-grow: 0;\n      max-width: 100%;\n      justify-content: center;\n\n      & .gui-form-group {\n        justify-content: center;\n      }\n    }\n  }\n\n  & .fieldLabelWrap {\n    width: auto;\n    min-width: ","px;\n    max-width: ","px;\n    background-color: ",";\n    border-radius: 4px;\n\n    & .fieldLabel {\n      text-align: ",";\n    }\n  }\n\n  & .fold {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n\n    &.on {\n      width: 100%;\n      height: 20px;\n      padding: 0;\n      overflow: hidden;\n\n      & .foldBtn {\n        top: -3px;\n        width: 100%;\n        padding: 6px 8px;\n        border-radius: 4px;\n        box-shadow: none;\n\n        & > svg {\n          transform: rotate(180deg);\n          margin-top: 1px;\n        }\n      }\n    }\n\n    &.off {\n      bottom: -8px;\n      height: 13px;\n      background: #fff;\n      border-radius: 8px;\n\n      & .foldBtn {\n        top: -5px;\n        padding: 0;\n        background-color: #fff;\n        border: 1px solid ",";\n      }\n    }\n\n    & .foldBtn {\n      position: relative;\n      border-radius: 8px;\n      box-shadow: ",";\n\n      &:hover {\n        background-color: rgba(0, 98, 255, 0.04);\n      }\n    }\n  }\n"],["\n  flex-shrink: 0;\n  margin: 0;\n\n  position: relative;\n  ","; //32px\n  ",";\n  ",";\n  // ",";\n  background-color: ",";\n  box-shadow: ",";\n  border-radius: 4px;\n  min-height: 20px;\n\n  & .rightBtnMode {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n\n    & .gui-form-group {\n      justify-content: flex-end;\n    }\n  }\n\n  @media (max-width: ","px) {\n    & .rightBtnMode {\n      flex-basis: 100%;\n      flex-grow: 0;\n      max-width: 100%;\n      justify-content: center;\n\n      & .gui-form-group {\n        justify-content: center;\n      }\n    }\n  }\n\n  & .fieldLabelWrap {\n    width: auto;\n    min-width: ","px;\n    max-width: ","px;\n    background-color: ",";\n    border-radius: 4px;\n\n    & .fieldLabel {\n      text-align: ",";\n    }\n  }\n\n  & .fold {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n\n    &.on {\n      width: 100%;\n      height: 20px;\n      padding: 0;\n      overflow: hidden;\n\n      & .foldBtn {\n        top: -3px;\n        width: 100%;\n        padding: 6px 8px;\n        border-radius: 4px;\n        box-shadow: none;\n\n        & > svg {\n          transform: rotate(180deg);\n          margin-top: 1px;\n        }\n      }\n    }\n\n    &.off {\n      bottom: -8px;\n      height: 13px;\n      background: #fff;\n      border-radius: 8px;\n\n      & .foldBtn {\n        top: -5px;\n        padding: 0;\n        background-color: #fff;\n        border: 1px solid ",";\n      }\n    }\n\n    & .foldBtn {\n      position: relative;\n      border-radius: 8px;\n      box-shadow: ",";\n\n      &:hover {\n        background-color: rgba(0, 98, 255, 0.04);\n      }\n    }\n  }\n"])),e(16),r(5),i(0),d(8),a.color.white,(function(n){return n.theme.shadows[2]}),(function(n){return n.theme.breakpoints.values.lg}),(function(n){return n.labelMinWidth}),(function(n){return n.labelMaxWidth}),(function(n){return n.labelColor}),(function(n){return n.textAlign}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.shadows[1]}));export{s as StyledPanel};