@gsretail.com/gui-core/build/core/Chip/GuiChip.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 i from"@emotion/styled";var e,o=function(o){return i(o)(e||(e=n(["\n  font-size: 0.8125rem; //13px\n  line-height: 1;\n\n  & .MuiChip-label {\n    padding: ",";\n  }\n\n  border-radius: ",";\n\n  font-weight: ",";\n\n  &.MuiChip-filled {\n    &.MuiChip-colorDefault {\n      background-color: #D1E2FF;\n    }\n    &.MuiChip-colorSecondary {\n      color: ",";\n    }\n    &.MuiChip-colorPrimary,\n    &.MuiChip-colorError,\n    &.MuiChip-colorWarning,\n    &.MuiChip-colorSuccess,\n    &.MuiChip-colorInfo {\n      color: ",";\n    }\n  }\n\n  &.MuiChip-outlined {\n    &.MuiChip-colorDefault {\n      border-color: ",";\n    }\n    &.MuiChip-colorSecondary {\n      border-color: ",";\n      color: ",";\n    }\n  }\n\n  .MuiChip-icon {\n    margin-left: 8px;\n    font-size: 16px;\n  }\n\n  .MuiChip-deleteIcon {\n    margin: 0 6px 0 -3px;\n    font-size: 16px;\n    color: rgba(51, 51, 51, 0.6);\n    cursor: inherit;\n  }\n\n  &.MuiChip-sizeTiny {\n    height: 16px;\n    font-size: 12px;\n\n    & .MuiChip-icon {\n      margin-left: 6px;\n      font-size: 14px;\n    }\n\n    & .MuiChip-deleteIcon {\n      margin: 0 4px 0 -4px;\n      font-size: 14px;\n    }\n  }\n  &.MuiChip-sizeSmall {\n    height: 20px;\n\n    & .MuiChip-icon {\n      font-size: 14px;\n    }\n\n    & .MuiChip-deleteIcon {\n      font-size: 14px;\n    }\n  }\n  &.MuiChip-sizeMedium {\n    height: 24px;\n  }\n  &.MuiChip-sizeLarge {\n    height: 32px;\n\n    .MuiChip-label {\n      padding: 0 16px;\n    }\n\n    .MuiChip-icon {\n      margin-left: 10px;\n      font-size: 18px;\n    }\n\n    & .MuiChip-deleteIcon {\n      margin: 0 10px 0 -5px;\n    }\n  }\n"],["\n  font-size: 0.8125rem; //13px\n  line-height: 1;\n\n  & .MuiChip-label {\n    padding: ",";\n  }\n\n  border-radius: ",";\n\n  font-weight: ",";\n\n  &.MuiChip-filled {\n    &.MuiChip-colorDefault {\n      background-color: #D1E2FF;\n    }\n    &.MuiChip-colorSecondary {\n      color: ",";\n    }\n    &.MuiChip-colorPrimary,\n    &.MuiChip-colorError,\n    &.MuiChip-colorWarning,\n    &.MuiChip-colorSuccess,\n    &.MuiChip-colorInfo {\n      color: ",";\n    }\n  }\n\n  &.MuiChip-outlined {\n    &.MuiChip-colorDefault {\n      border-color: ",";\n    }\n    &.MuiChip-colorSecondary {\n      border-color: ",";\n      color: ",";\n    }\n  }\n\n  .MuiChip-icon {\n    margin-left: 8px;\n    font-size: 16px;\n  }\n\n  .MuiChip-deleteIcon {\n    margin: 0 6px 0 -3px;\n    font-size: 16px;\n    color: rgba(51, 51, 51, 0.6);\n    cursor: inherit;\n  }\n\n  &.MuiChip-sizeTiny {\n    height: 16px;\n    font-size: 12px;\n\n    & .MuiChip-icon {\n      margin-left: 6px;\n      font-size: 14px;\n    }\n\n    & .MuiChip-deleteIcon {\n      margin: 0 4px 0 -4px;\n      font-size: 14px;\n    }\n  }\n  &.MuiChip-sizeSmall {\n    height: 20px;\n\n    & .MuiChip-icon {\n      font-size: 14px;\n    }\n\n    & .MuiChip-deleteIcon {\n      font-size: 14px;\n    }\n  }\n  &.MuiChip-sizeMedium {\n    height: 24px;\n  }\n  &.MuiChip-sizeLarge {\n    height: 32px;\n\n    .MuiChip-label {\n      padding: 0 16px;\n    }\n\n    .MuiChip-icon {\n      margin-left: 10px;\n      font-size: 18px;\n    }\n\n    & .MuiChip-deleteIcon {\n      margin: 0 10px 0 -5px;\n    }\n  }\n"])),(function(n){return n.square?"0 4px":"0 12px"}),(function(n){return n.square&&"2px"}),(function(n){return n.checked?700:500}),(function(n){return n.theme.palette.grey[600]}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[400]}),(function(n){return n.theme.palette.grey[400]}),(function(n){return n.theme.palette.grey[600]}))};export{o as default};