{"version":3,"file":"ComponentDragPreview.mjs","sources":["../../../../admin/src/components/DragPreviews/ComponentDragPreview.tsx"],"sourcesContent":["import { Flex, FlexComponent, IconButton, Typography } from '@strapi/design-system';\nimport { CaretDown, Drag, Trash } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\ninterface ComponentDragPreviewProps {\n  displayedValue: string;\n}\n\nconst ComponentDragPreview = ({ displayedValue }: ComponentDragPreviewProps) => {\n  return (\n    <Flex\n      background=\"neutral0\"\n      borderColor=\"neutral200\"\n      justifyContent=\"space-between\"\n      gap={3}\n      padding={3}\n      width=\"30rem\"\n    >\n      <ToggleButton type=\"button\">\n        <Flex gap={6}>\n          <DropdownIconWrapper\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            background=\"neutral200\"\n            height=\"3.2rem\"\n            width=\"3.2rem\"\n          >\n            <CaretDown />\n          </DropdownIconWrapper>\n\n          <Flex maxWidth=\"15rem\">\n            <Typography textColor=\"neutral700\" ellipsis>\n              {displayedValue}\n            </Typography>\n          </Flex>\n        </Flex>\n      </ToggleButton>\n\n      <Flex gap={2}>\n        <IconButton withTooltip={false} label=\"\" variant=\"ghost\">\n          <Trash />\n        </IconButton>\n\n        <IconButton withTooltip={false} label=\"\" variant=\"ghost\">\n          <Drag />\n        </IconButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nconst DropdownIconWrapper = styled<FlexComponent>(Flex)`\n  border-radius: 50%;\n\n  svg {\n    height: 0.6rem;\n    width: 1.1rem;\n    > path {\n      fill: ${({ theme }) => theme.colors.neutral600};\n    }\n  }\n`;\n\n// TODO: we shouldn't have to reset a whole button\nconst ToggleButton = styled.button`\n  border: none;\n  background: transparent;\n  display: block;\n  width: 100%;\n  text-align: unset;\n  padding: 0;\n`;\n\nexport { ComponentDragPreview };\nexport type { ComponentDragPreviewProps };\n"],"names":["ComponentDragPreview","displayedValue","_jsxs","Flex","background","borderColor","justifyContent","gap","padding","width","_jsx","ToggleButton","type","DropdownIconWrapper","alignItems","height","CaretDown","maxWidth","Typography","textColor","ellipsis","IconButton","withTooltip","label","variant","Trash","Drag","styled","theme","colors","neutral600","button"],"mappings":";;;;;AAQA,MAAMA,oBAAuB,GAAA,CAAC,EAAEC,cAAc,EAA6B,GAAA;AACzE,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QACCC,UAAW,EAAA,UAAA;QACXC,WAAY,EAAA,YAAA;QACZC,cAAe,EAAA,eAAA;QACfC,GAAK,EAAA,CAAA;QACLC,OAAS,EAAA,CAAA;QACTC,KAAM,EAAA,OAAA;;0BAENC,GAACC,CAAAA,YAAAA,EAAAA;gBAAaC,IAAK,EAAA,QAAA;AACjB,gBAAA,QAAA,gBAAAV,IAACC,CAAAA,IAAAA,EAAAA;oBAAKI,GAAK,EAAA,CAAA;;sCACTG,GAACG,CAAAA,mBAAAA,EAAAA;4BACCC,UAAW,EAAA,QAAA;4BACXR,cAAe,EAAA,QAAA;4BACfF,UAAW,EAAA,YAAA;4BACXW,MAAO,EAAA,QAAA;4BACPN,KAAM,EAAA,QAAA;AAEN,4BAAA,QAAA,gBAAAC,GAACM,CAAAA,SAAAA,EAAAA,EAAAA;;sCAGHN,GAACP,CAAAA,IAAAA,EAAAA;4BAAKc,QAAS,EAAA,OAAA;AACb,4BAAA,QAAA,gBAAAP,GAACQ,CAAAA,UAAAA,EAAAA;gCAAWC,SAAU,EAAA,YAAA;gCAAaC,QAAQ,EAAA,IAAA;AACxCnB,gCAAAA,QAAAA,EAAAA;;;;;;0BAMTC,IAACC,CAAAA,IAAAA,EAAAA;gBAAKI,GAAK,EAAA,CAAA;;kCACTG,GAACW,CAAAA,UAAAA,EAAAA;wBAAWC,WAAa,EAAA,KAAA;wBAAOC,KAAM,EAAA,EAAA;wBAAGC,OAAQ,EAAA,OAAA;AAC/C,wBAAA,QAAA,gBAAAd,GAACe,CAAAA,KAAAA,EAAAA,EAAAA;;kCAGHf,GAACW,CAAAA,UAAAA,EAAAA;wBAAWC,WAAa,EAAA,KAAA;wBAAOC,KAAM,EAAA,EAAA;wBAAGC,OAAQ,EAAA,OAAA;AAC/C,wBAAA,QAAA,gBAAAd,GAACgB,CAAAA,IAAAA,EAAAA,EAAAA;;;;;;AAKX;AAEA,MAAMb,mBAAAA,GAAsBc,MAAsBxB,CAAAA,IAAAA,CAAK;;;;;;;YAO3C,EAAE,CAAC,EAAEyB,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;AAGrD,CAAC;AAED;AACA,MAAMnB,YAAAA,GAAegB,MAAOI,CAAAA,MAAM;;;;;;;AAOlC,CAAC;;;;"}