@ntbjs/react-components 2.0.14 → 3.0.0-rc.1

package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js

@@ -2,17 +2,19 @@ import { rgba } from 'polished';
 import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
 
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
 const darkBorderColor = '#52525B';
 const darkBgColor = '#27272A';
 const darkHoverBgColor = '#3F3F46';
 const lightHoverBgColor = '#E4E4E7';
-const AssetGalleryWrapper = styled.div.attrs(applyDefaultTheme)`
-  width: 100%;
-  height: 100%;
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `};
-`;
+const AssetGalleryWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__AssetGalleryWrapper",
+  componentId: "sc-1le1w02-0"
+})(["width:100%;height:100%;", ";"], props => props.disabled && css(["cursor:not-allowed;"]));
 const ringState = props => {
   if (props.selected) return props.$customSelectedBorder ? 'custom' : 'selected';
   if (props.$softSelected) return 'soft';
@@ -30,369 +32,138 @@ const AssetGalleryGridCard = styled.div.attrs(props => ({
       '--ring-light': props.$customSelectedBorder[1]
     } : {})
   }
-}))`
-  display: block;
-  position: relative;
-  height: 100%;
-  margin: 0;
-  box-sizing: border-box;
-  text-decoration: none;
-  cursor: pointer;
-  transition: box-shadow 220ms;
-  overflow: hidden;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'))}
-
-  ${props => props.disabled && css`
-      pointer-events: none;
-      opacity: 0.4;
-    `};
-
-  ${props => props.extendedSelectMode && css`
-      cursor: pointer;
-    `}
-
-  &:hover {
-    box-shadow: 0px 3px 6px #00000029;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    box-sizing: border-box;
-    z-index: 10;
-    border-style: solid;
-    border-width: 1px;
-  }
-  &[data-ring='soft']::after,
-  &[data-ring='selected']::after,
-  &[data-ring='custom']::after,
-  &[data-ring='completed']::after,
-  &[data-ring='error']::after {
-    border-width: 3px;
-  }
-
-  ${props => {
+})).withConfig({
+  displayName: "AssetGalleryGridCardstyled__AssetGalleryGridCard",
+  componentId: "sc-1le1w02-1"
+})(["display:block;position:relative;height:100%;margin:0;box-sizing:border-box;text-decoration:none;cursor:pointer;transition:box-shadow 220ms;overflow:hidden;", " ", ";", " &:hover{box-shadow:0px 3px 6px #00000029;}&::after{content:'';position:absolute;inset:0;pointer-events:none;box-sizing:border-box;z-index:10;border-style:solid;border-width:1px;}&[data-ring='soft']::after,&[data-ring='selected']::after,&[data-ring='custom']::after,&[data-ring='completed']::after,&[data-ring='error']::after{border-width:3px;}", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.disabled && css(["pointer-events:none;opacity:0.4;"]), props => props.extendedSelectMode && css(["cursor:pointer;"]), props => {
   const gray100 = props.theme.getColor('gray-100');
   const gray300 = props.theme.getColor('gray-300');
   const gray700 = props.theme.getColor('gray-700');
   const emerald = props.theme.getColor('emerald-500');
   const red500 = props.theme.getColor('red-500');
   const red600 = props.theme.getColor('red-600');
-  return css`
-      &[data-ring='idle']::after {
-        border-color: ${gray300};
-      }
-      &[data-ring='soft']::after {
-        border-color: ${rgba(gray700, 0.5)};
-      }
-      &[data-ring='selected']::after {
-        border-color: ${darkBorderColor};
-      }
-      &[data-ring='custom']::after {
-        border-color: var(--ring-light);
-      }
-      &[data-ring='completed']::after {
-        border-color: ${rgba(emerald, 0.7)};
-      }
-      &[data-ring='error']::after {
-        border-color: ${rgba(red500, 0.7)};
-      }
-
-      @media (prefers-color-scheme: dark) {
-        &[data-ring='idle']::after {
-          border-color: ${darkBorderColor};
-        }
-        &[data-ring='soft']::after {
-          border-color: ${rgba(gray100, 0.5)};
-        }
-        &[data-ring='selected']::after {
-          border-color: ${gray100};
-        }
-        &[data-ring='custom']::after {
-          border-color: var(--ring-dark);
-        }
-        &[data-ring='completed']::after {
-          border-color: ${emerald};
-        }
-        &[data-ring='error']::after {
-          border-color: ${red600};
-        }
-      }
-      body.light-theme &[data-ring='idle']::after {
-        border-color: ${gray300};
-      }
-      body.light-theme &[data-ring='soft']::after {
-        border-color: ${rgba(gray700, 0.5)};
-      }
-      body.light-theme &[data-ring='selected']::after {
-        border-color: ${darkBorderColor};
-      }
-      body.light-theme &[data-ring='custom']::after {
-        border-color: var(--ring-light);
-      }
-      body.light-theme &[data-ring='completed']::after {
-        border-color: ${rgba(emerald, 0.7)};
-      }
-      body.light-theme &[data-ring='error']::after {
-        border-color: ${rgba(red500, 0.7)};
-      }
-      body.dark-theme &[data-ring='idle']::after {
-        border-color: ${darkBorderColor};
-      }
-      body.dark-theme &[data-ring='soft']::after {
-        border-color: ${rgba(gray100, 0.5)};
-      }
-      body.dark-theme &[data-ring='selected']::after {
-        border-color: ${gray100};
-      }
-      body.dark-theme &[data-ring='custom']::after {
-        border-color: var(--ring-dark);
-      }
-      body.dark-theme &[data-ring='completed']::after {
-        border-color: ${emerald};
-      }
-      body.dark-theme &[data-ring='error']::after {
-        border-color: ${red600};
-      }
-    `;
-}};
-`;
-const ThumbnailSection = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-  overflow: hidden;
-  transition: background 220ms;
-  ${props => props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}
-  ${AssetGalleryGridCard}:hover & {
-    ${props => props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}
-  }
-`;
-const HorizontalBar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-  height: 40px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 2;
-`;
-const HorizontalBarLeft = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const HorizontalBarRight = styled.div`
-  display: flex;
-  align-items: center;
-`;
-const StatusIconCircle = styled.span.attrs(applyDefaultTheme)`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  pointer-events: none;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-`;
-const ThumbnailRow = styled.div`
-  position: relative;
-  display: flex;
-  width: 100%;
-`;
-const ThumbnailSpacer = styled.div`
-  flex: 1;
-`;
-const ThumbnailWrapper = styled.div`
-  width: max(66%, 268px);
-  flex-shrink: 0;
-`;
-const ThumbnailBox = styled.div.attrs(applyDefaultTheme)`
-  position: relative;
-  height: 168px;
-
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img,
-  video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-  }
-
-  .audio {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    svg {
-      width: 35%;
-      ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-400'))}
-    }
-  }
-`;
-const ThumbnailSelectedOverlay = styled.div.attrs(applyDefaultTheme)`
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: ${props => props.selected ? 0.6 : 0};
-  background-color: #accef7;
-  transition: opacity 220ms;
-  z-index: 1;
-`;
-const ThumbnailActions = styled.div`
-  flex: 1;
-`;
-const ActionsContainer = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: end;
-  flex-direction: column;
-  gap: 8px;
-  opacity: 0;
-  transition: opacity 220ms;
-  z-index: 1;
-  position: absolute;
-  right: 8px;
-  ${AssetGalleryGridCard}:hover & {
-    opacity: 1;
-  }
-
-  ${AssetGalleryGridCard}:focus-within & {
-    opacity: 1;
-  }
-`;
-const Action = styled.div`
-  margin: 0;
-
-  button {
-    box-shadow: 0px 3px 6px #00000033;
-  }
-  svg {
-    width: 16px;
-    height: 16px;
-    max-height: unset;
-    max-width: unset;
-  }
-`;
-const ConsumerOverlay = styled.div`
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-`;
-const CardBody = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 16px 0px 0px 0px;
-`;
-const CardTitle = styled.span.attrs(applyDefaultTheme)`
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0px 16px;
-  font: normal normal 500 14px/19px Roboto;
-  letter-spacing: 0.28px;
-  height: 19px;
-  box-sizing: border-box;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}
-`;
-const CardDescription = styled.span.attrs(applyDefaultTheme)`
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 6px 16px;
-  font: normal normal normal 12px/1.286em Roboto;
-  letter-spacing: 0.24px;
-  height: 52px;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-break: break-word;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))}
-`;
-const InstructionsWrapper = styled.div.attrs(applyDefaultTheme)`
-  min-height: 96px;
-  margin-top: 16px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  transition: background 220ms;
-  opacity: 0;
-  ${props => props.$hasContent && css`
-      opacity: 1;
-      border-top: 0.56px solid;
-      border-bottom: 0.56px solid;
-      ${props.theme.themeProp('border-color', darkBorderColor, props.theme.getColor('gray-300'))}
-    `}
-
-  ${props => props.$hasContent && css`
-      opacity: 1;
-      ${props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50'))}
-      ${AssetGalleryGridCard}:hover & {
-        ${props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)}
-      }
-    `}
-`;
-const CardFooter = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 16px;
-  min-height: 52px;
-  box-sizing: border-box;
-`;
-const CardFooterLeft = styled.div`
-  display: flex;
-  align-items: center;
-  > * {
-    margin-right: 4px;
-  }
-`;
-const CardFooterRight = styled.div`
-  display: flex;
-  align-items: center;
-  > * {
-    margin-left: 4px;
-  }
-`;
-const CardDivider = styled.div.attrs(applyDefaultTheme)`
-  height: 1px;
-  flex-shrink: 0;
-  opacity: ${props => props.invisible ? 0 : 1};
-  ${props => props.theme.themeProp('background', darkBorderColor, props.theme.getColor('gray-300'))}
-`;
-const CheckboxRow = styled.div`
-  display: flex;
-  padding: 0px 16px;
-  align-items: center;
-  height: 56px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-`;
-styled.div.attrs(applyDefaultTheme)`
-  opacity: 1;
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: opacity 220ms;
-  ${props => props.theme.themeProp('color', 'white', 'black')}
-  > svg {
-    width: 23px;
-    height: 100%;
-  }
-`;
+  return css(["&[data-ring='idle']::after{border-color:", ";}&[data-ring='soft']::after{border-color:", ";}&[data-ring='selected']::after{border-color:", ";}&[data-ring='custom']::after{border-color:var(--ring-light);}&[data-ring='completed']::after{border-color:", ";}&[data-ring='error']::after{border-color:", ";}@media (prefers-color-scheme:dark){&[data-ring='idle']::after{border-color:", ";}&[data-ring='soft']::after{border-color:", ";}&[data-ring='selected']::after{border-color:", ";}&[data-ring='custom']::after{border-color:var(--ring-dark);}&[data-ring='completed']::after{border-color:", ";}&[data-ring='error']::after{border-color:", ";}}body.light-theme &[data-ring='idle']::after{border-color:", ";}body.light-theme &[data-ring='soft']::after{border-color:", ";}body.light-theme &[data-ring='selected']::after{border-color:", ";}body.light-theme &[data-ring='custom']::after{border-color:var(--ring-light);}body.light-theme &[data-ring='completed']::after{border-color:", ";}body.light-theme &[data-ring='error']::after{border-color:", ";}body.dark-theme &[data-ring='idle']::after{border-color:", ";}body.dark-theme &[data-ring='soft']::after{border-color:", ";}body.dark-theme &[data-ring='selected']::after{border-color:", ";}body.dark-theme &[data-ring='custom']::after{border-color:var(--ring-dark);}body.dark-theme &[data-ring='completed']::after{border-color:", ";}body.dark-theme &[data-ring='error']::after{border-color:", ";}"], gray300, rgba(gray700, 0.5), darkBorderColor, rgba(emerald, 0.7), rgba(red500, 0.7), darkBorderColor, rgba(gray100, 0.5), gray100, emerald, red600, gray300, rgba(gray700, 0.5), darkBorderColor, rgba(emerald, 0.7), rgba(red500, 0.7), darkBorderColor, rgba(gray100, 0.5), gray100, emerald, red600);
+});
+const ThumbnailSection = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailSection",
+  componentId: "sc-1le1w02-2"
+})(["position:relative;overflow:hidden;transition:background 220ms;", " ", ":hover &{", "}"], props => props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50')), AssetGalleryGridCard, props => props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1));
+const HorizontalBar = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__HorizontalBar",
+  componentId: "sc-1le1w02-3"
+})(["display:flex;align-items:center;justify-content:space-between;padding:8px;height:40px;box-sizing:border-box;flex-shrink:0;position:relative;z-index:2;"]);
+const HorizontalBarLeft = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__HorizontalBarLeft",
+  componentId: "sc-1le1w02-4"
+})(["display:flex;align-items:center;"]);
+const HorizontalBarRight = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__HorizontalBarRight",
+  componentId: "sc-1le1w02-5"
+})(["display:flex;align-items:center;"]);
+const StatusIconCircle = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__StatusIconCircle",
+  componentId: "sc-1le1w02-6"
+})(["display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:50%;pointer-events:none;svg{width:100%;height:100%;}"]);
+const ThumbnailRow = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailRow",
+  componentId: "sc-1le1w02-7"
+})(["position:relative;display:flex;width:100%;"]);
+const ThumbnailSpacer = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailSpacer",
+  componentId: "sc-1le1w02-8"
+})(["flex:1;"]);
+const ThumbnailWrapper = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailWrapper",
+  componentId: "sc-1le1w02-9"
+})(["width:max(66%,268px);flex-shrink:0;"]);
+const ThumbnailBox = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailBox",
+  componentId: "sc-1le1w02-10"
+})(["position:relative;height:168px;flex-shrink:0;overflow:hidden;img,video{width:100%;height:100%;object-fit:contain;display:block;}.audio{width:100%;height:100%;display:flex;align-items:center;justify-content:center;svg{width:35%;", "}}"], props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-400')));
+const ThumbnailSelectedOverlay = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailSelectedOverlay",
+  componentId: "sc-1le1w02-11"
+})(["position:absolute;inset:0;pointer-events:none;opacity:", ";background-color:#accef7;transition:opacity 220ms;z-index:1;"], props => props.selected ? 0.6 : 0);
+const ThumbnailActions = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__ThumbnailActions",
+  componentId: "sc-1le1w02-12"
+})(["flex:1;"]);
+const ActionsContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__ActionsContainer",
+  componentId: "sc-1le1w02-13"
+})(["display:flex;align-items:end;flex-direction:column;gap:8px;opacity:0;transition:opacity 220ms;z-index:1;position:absolute;right:8px;", ":hover &{opacity:1;}", ":focus-within &{opacity:1;}"], AssetGalleryGridCard, AssetGalleryGridCard);
+const Action = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__Action",
+  componentId: "sc-1le1w02-14"
+})(["margin:0;button{box-shadow:0px 3px 6px #00000033;}svg{width:16px;height:16px;max-height:unset;max-width:unset;}"]);
+const ConsumerOverlay = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__ConsumerOverlay",
+  componentId: "sc-1le1w02-15"
+})(["position:absolute;inset:0;pointer-events:none;z-index:1;"]);
+const CardBody = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardBody",
+  componentId: "sc-1le1w02-16"
+})(["display:flex;flex-direction:column;flex:1;padding:16px 0px 0px 0px;"]);
+const CardTitle = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardTitle",
+  componentId: "sc-1le1w02-17"
+})(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:0px 16px;font:normal normal 500 14px/19px Roboto;letter-spacing:0.28px;height:19px;box-sizing:border-box;", ""], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
+const CardDescription = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardDescription",
+  componentId: "sc-1le1w02-18"
+})(["display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:6px 16px;font:normal normal normal 12px/1.286em Roboto;letter-spacing:0.24px;height:52px;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;", ""], props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
+const InstructionsWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__InstructionsWrapper",
+  componentId: "sc-1le1w02-19"
+})(["min-height:96px;margin-top:16px;box-sizing:border-box;flex-shrink:0;transition:background 220ms;opacity:0;", " ", ""], props => props.$hasContent && css(["opacity:1;border-top:0.56px solid;border-bottom:0.56px solid;", ""], props.theme.themeProp('border-color', darkBorderColor, props.theme.getColor('gray-300'))), props => props.$hasContent && css(["opacity:1;", " ", ":hover &{", "}"], props.theme.themeProp('background', darkBgColor, props.theme.getColor('gray-50')), AssetGalleryGridCard, props.theme.themeProp('background', darkHoverBgColor, lightHoverBgColor, 1)));
+const CardFooter = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardFooter",
+  componentId: "sc-1le1w02-20"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0px 16px;min-height:52px;box-sizing:border-box;"]);
+const CardFooterLeft = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardFooterLeft",
+  componentId: "sc-1le1w02-21"
+})(["display:flex;align-items:center;> *{margin-right:4px;}"]);
+const CardFooterRight = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardFooterRight",
+  componentId: "sc-1le1w02-22"
+})(["display:flex;align-items:center;> *{margin-left:4px;}"]);
+const CardDivider = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CardDivider",
+  componentId: "sc-1le1w02-23"
+})(["height:1px;flex-shrink:0;opacity:", ";", ""], props => props.invisible ? 0 : 1, props => props.theme.themeProp('background', darkBorderColor, props.theme.getColor('gray-300')));
+const CheckboxRow = styled.div.withConfig({
+  displayName: "AssetGalleryGridCardstyled__CheckboxRow",
+  componentId: "sc-1le1w02-24"
+})(["display:flex;padding:0px 16px;align-items:center;height:56px;box-sizing:border-box;flex-shrink:0;"]);
+styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetGalleryGridCardstyled__CheckboxButton",
+  componentId: "sc-1le1w02-25"
+})(["opacity:1;flex-shrink:0;cursor:pointer;transition:opacity 220ms;", " > svg{width:23px;height:100%;}"], props => props.theme.themeProp('color', 'white', 'black'));
 
 export { Action, ActionsContainer, AssetGalleryGridCard, AssetGalleryWrapper, CardBody, CardDescription, CardDivider, CardFooter, CardFooterLeft, CardFooterRight, CardTitle, CheckboxRow, ConsumerOverlay, HorizontalBar, HorizontalBarLeft, HorizontalBarRight, InstructionsWrapper, StatusIconCircle, ThumbnailActions, ThumbnailBox, ThumbnailRow, ThumbnailSection, ThumbnailSelectedOverlay, ThumbnailSpacer, ThumbnailWrapper };
 //# sourceMappingURL=AssetGalleryGridCard.styled.js.map