@activecollab/components 2.0.369 → 2.0.371

package/dist/cjs/presentation/stackedCard/content/TaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_shared","_Icons","_Loaders","_Typography","_Typography2","_shared2","_primitives","_shell","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","LABEL_DOTS","StyledBody","styled","div","withConfig","displayName","componentId","_ref","$completed","css","StyledMetaCluster","StyledDot","span","_ref2","$color","StyledHiddenBadge","StyledDate","_ref3","$overdue","StyledAddAssignee","button","TaskCard","exports","_ref4","_ref4$title","title","_ref4$cover","cover","_ref4$playable","playable","_ref4$coverControls","coverControls","_ref4$showTaskId","showTaskId","_ref4$taskId","taskId","_ref4$dateLabel","dateLabel","_ref4$overdue","overdue","_ref4$showDependencie","showDependencies","_ref4$dependencyCount","dependencyCount","_ref4$hiddenFromClien","hiddenFromClients","_ref4$projectDefaultH","projectDefaultHidden","_ref4$assigned","assigned","_ref4$completed","completed","showHiddenSignifier","dateIsOverdue","createElement","Cover","aspectRatio","COVER_RATIO","centerSlot","playControl","undefined","topRightSlot","coverManagement","style","width","height","background","StackRow","role","StyledClamp","Typography","as","variant","color","concat","EntityDots","className","map","key","Caption1","MessageSmallIcon","ChecklistSmallIcon","Fragment","InsertLinkIcon","EyeOffIcon","RoundAvatar","$bg","AVATAR_COLORS","teal","$size","$bordered","type","PersonPlusIcon","TaskPlaceholder","props","Placeholder","icon","label","TaskSkeleton","SkeletonLoader","borderRadius"],"sources":["../../../../../src/presentation/stackedCard/content/TaskCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport {\n  EntityDots,\n  StyledClamp,\n  coverManagement,\n  playControl,\n  Placeholder,\n} from \"./shared\";\nimport {\n  ChecklistSmallIcon,\n  EyeOffIcon,\n  InsertLinkIcon,\n  MessageSmallIcon,\n  PersonPlusIcon,\n} from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport { Caption1 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport { RoundAvatar, AVATAR_COLORS } from \"../../shared\";\nimport { Cover, StackRow } from \"../primitives\";\nimport { COVER_RATIO } from \"../shell\";\n\n/**\n * TaskCard — the baseline-preservation card.\n *\n * This is the replacement for today's column card, so it must reproduce every\n * behavior that card has (note 52104 §B2) — none of them are optional, each is\n * a silent-regression risk. Every one is a prop here so the story can toggle it:\n *\n *  - task-number prefix in the title      (config-gated, mirrors `show_task_id`)\n *  - overdue date colouring               (red ONLY when overdue AND not completed)\n *  - dependency counter                   (behind a feature-flag prop)\n *  - hidden-from-clients signifier        (shown only when it DIFFERS from the\n *                                          project default)\n *  - inline assignee affordance           (avatar, or an add-assignee placeholder)\n *  - completed                            (teal tint, no \"…\" menu, no overdue colour)\n *\n * The pending/optimistic and priority states are SHELL states (dimmed +\n * pointer-events off; red left bar), so the card is wrapped in a `<StackedCard\n * pending>` / `<StackedCard priorityColor>` by the host — they are not the\n * card's own concern and live on the shell, not here.\n */\n\nconst LABEL_DOTS = [\"#378ADD\", \"#D85A30\", \"#639922\", \"#EF9F27\", \"#7F77DD\"];\n\n/* The completed tint fills the card body; the shell keeps the priority bar and\n   selection ring on top of it. */\nconst StyledBody = styled.div<{ $completed?: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${({ $completed }) =>\n    $completed &&\n    css`\n      background: var(--sc-completed-tint, rgba(72, 201, 176, 0.16));\n    `}\n`;\n\nconst StyledMetaCluster = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--color-theme-600);\n\n  .sc-dots {\n    display: flex;\n    gap: 4px;\n  }\n\n  .sc-sep {\n    opacity: 0.6;\n  }\n\n  .sc-count {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledDot = styled.span<{ $color: string }>`\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n`;\n\n/* Hidden-from-clients signifier — an eye-off badge, shown only when the task's\n   visibility differs from the project default. */\nconst StyledHiddenBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  color: var(--color-theme-600);\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\n/* Date — bold; turns red only when overdue AND the task is not completed. */\nconst StyledDate = styled.span<{ $overdue?: boolean }>`\n  font-weight: bold;\n  color: ${({ $overdue }) =>\n    $overdue ? \"var(--red-alert)\" : \"var(--color-theme-900)\"};\n`;\n\n/* Inline assignee affordance placeholder — a dashed add-assignee target that\n   stands in until the real picker is wired at integration. */\nconst StyledAddAssignee = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 1.5px dashed var(--color-theme-400);\n  border-radius: 50%;\n  background: transparent;\n  color: var(--color-theme-600);\n  cursor: pointer;\n\n  svg {\n    width: 14px;\n    height: 14px;\n    display: block;\n  }\n\n  &:hover {\n    border-color: var(--sc-selection-ring);\n    color: var(--color-theme-800);\n  }\n`;\n\nexport interface TaskCardProps {\n  title?: string;\n  /** Optional cover — task cards in a column usually have none. */\n  cover?: boolean;\n  playable?: boolean;\n  coverControls?: boolean;\n  /** Config-gated task-number prefix (mirrors `show_task_id`). */\n  showTaskId?: boolean;\n  taskId?: number;\n  dateLabel?: string;\n  /** Overdue date — colours the date red, but only when NOT completed. */\n  overdue?: boolean;\n  /** Dependency counter, gated behind a feature flag. */\n  showDependencies?: boolean;\n  dependencyCount?: number;\n  /** The task's hidden-from-clients flag. */\n  hiddenFromClients?: boolean;\n  /** The project default for client visibility; the signifier shows on a diff. */\n  projectDefaultHidden?: boolean;\n  /** Whether the task has an assignee (avatar) or shows the add affordance. */\n  assigned?: boolean;\n  /** Completed — teal tint, no \"…\" menu, no overdue colour. */\n  completed?: boolean;\n}\n\nexport const TaskCard = ({\n  title = \"Implement the design from the reference on this page\",\n  cover = false,\n  playable = false,\n  coverControls = false,\n  showTaskId = false,\n  taskId = 4521,\n  dateLabel = \"May 8 – Sep 10\",\n  overdue = false,\n  showDependencies = false,\n  dependencyCount = 2,\n  hiddenFromClients = false,\n  projectDefaultHidden = false,\n  assigned = true,\n  completed = false,\n}: TaskCardProps): ReactElement => {\n  // Signifier appears only when the task's visibility differs from the default.\n  const showHiddenSignifier = hiddenFromClients !== projectDefaultHidden;\n  // Overdue colour is suppressed on completed tasks.\n  const dateIsOverdue = overdue && !completed;\n\n  return (\n    <StyledBody $completed={completed}>\n      {cover ? (\n        <Cover\n          aspectRatio={COVER_RATIO}\n          centerSlot={playable ? playControl : undefined}\n          topRightSlot={coverControls ? coverManagement() : undefined}\n        >\n          <div\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              background: \"var(--color-theme-300)\",\n            }}\n          />\n        </Cover>\n      ) : null}\n\n      <StackRow role=\"title\">\n        <StyledClamp>\n          {showTaskId ? (\n            <Typography as=\"span\" variant=\"Caption 1\" color=\"tertiary\">\n              {`#${taskId} `}\n            </Typography>\n          ) : null}\n          {title}\n        </StyledClamp>\n        {/* Completed tasks drop the \"…\" menu. */}\n        {completed ? null : <EntityDots aria-label=\"Task options\" />}\n      </StackRow>\n\n      <StackRow role=\"meta\">\n        <StyledMetaCluster>\n          <span className=\"sc-dots\">\n            {LABEL_DOTS.map((color) => (\n              <StyledDot key={color} $color={color} />\n            ))}\n          </span>\n          <Caption1 color=\"tertiary\">+3</Caption1>\n          <span className=\"sc-sep\">·</span>\n          <span className=\"sc-count\">\n            <MessageSmallIcon />\n            <Caption1 color=\"tertiary\">7</Caption1>\n          </span>\n          <span className=\"sc-sep\">·</span>\n          <span className=\"sc-count\">\n            <ChecklistSmallIcon />\n            <Caption1 color=\"tertiary\">2</Caption1>\n          </span>\n          {showDependencies ? (\n            <>\n              <span className=\"sc-sep\">·</span>\n              <span className=\"sc-count\" title=\"Dependencies\">\n                <InsertLinkIcon />\n                <Caption1 color=\"tertiary\">{dependencyCount}</Caption1>\n              </span>\n            </>\n          ) : null}\n          {showHiddenSignifier ? (\n            <>\n              <span className=\"sc-sep\">·</span>\n              <StyledHiddenBadge title=\"Hidden from clients\">\n                <EyeOffIcon />\n              </StyledHiddenBadge>\n            </>\n          ) : null}\n        </StyledMetaCluster>\n      </StackRow>\n\n      <StackRow role=\"footer\">\n        <StyledDate $overdue={dateIsOverdue}>{dateLabel}</StyledDate>\n        <span />\n        {assigned ? (\n          <RoundAvatar\n            $bg={AVATAR_COLORS.teal}\n            $size={24}\n            $bordered={false}\n            data-fixed\n          >\n            MS\n          </RoundAvatar>\n        ) : (\n          <StyledAddAssignee type=\"button\" aria-label=\"Assign task\" data-fixed>\n            <PersonPlusIcon />\n          </StyledAddAssignee>\n        )}\n      </StackRow>\n    </StyledBody>\n  );\n};\n\n/* ---- placeholder + skeleton ---- */\n\nexport const TaskPlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder\n    icon={<ChecklistSmallIcon />}\n    label=\"Name this task\"\n    {...props}\n  />\n);\n\n/* Skeleton mirrors the task anatomy row for row: title, meta, footer. */\nexport const TaskSkeleton = (): ReactElement => (\n  <>\n    <StackRow role=\"title\">\n      <SkeletonLoader style={{ height: 14, width: \"90%\" }} />\n    </StackRow>\n    <StackRow role=\"meta\">\n      <SkeletonLoader style={{ height: 10, width: \"55%\" }} />\n    </StackRow>\n    <StackRow role=\"footer\">\n      <SkeletonLoader style={{ height: 12, width: 64 }} data-fixed />\n      <span />\n      <SkeletonLoader\n        data-fixed\n        style={{ width: 24, height: 24, borderRadius: \"50%\" }}\n      />\n    </StackRow>\n  </>\n);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAOA,IAAAI,MAAA,GAAAJ,OAAA;AAOA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;AACA,IAAAU,MAAA,GAAAV,OAAA;AAAuC,SAAAE,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,wBAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAb,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAAA,SAAAoB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAlB,CAAA,aAAAJ,CAAA,MAAAA,CAAA,GAAAuB,SAAA,CAAAC,MAAA,EAAAxB,CAAA,UAAAC,CAAA,GAAAsB,SAAA,CAAAvB,CAAA,YAAAG,CAAA,IAAAF,CAAA,OAAAc,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAgB,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMG,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;;AAE1E;AACA;AACA,IAAMC,UAAU,GAAGC,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAIzB,UAAAC,IAAA;EAAA,IAAGC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,QACVC,qBAAG,iEAEF;AAAA,EACJ;AAED,IAAMC,iBAAiB,GAAGR,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uNAyBnC;AAED,IAAMK,SAAS,GAAGT,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kEAIb,UAAAO,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,OAAOA,MAAM;AAAA,EACrC;;AAED;AACA;AACA,IAAMC,iBAAiB,GAAGb,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gHAUpC;;AAED;AACA,IAAMU,UAAU,GAAGd,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAEnB,UAAAW,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OAClBA,QAAQ,GAAG,kBAAkB,GAAG,wBAAwB;AAAA,EAC3D;;AAED;AACA;AACA,IAAMC,iBAAiB,GAAGjB,yBAAM,CAACkB,MAAM,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6VAuBtC;AA2BM,IAAMe,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAAE,KAAA,EAec;EAAA,IAAAC,WAAA,GAAAD,KAAA,CAdjCE,KAAK;IAALA,KAAK,GAAAD,WAAA,cAAG,sDAAsD,GAAAA,WAAA;IAAAE,WAAA,GAAAH,KAAA,CAC9DI,KAAK;IAALA,KAAK,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,cAAA,GAAAL,KAAA,CACbM,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,mBAAA,GAAAP,KAAA,CAChBQ,aAAa;IAAbA,aAAa,GAAAD,mBAAA,cAAG,KAAK,GAAAA,mBAAA;IAAAE,gBAAA,GAAAT,KAAA,CACrBU,UAAU;IAAVA,UAAU,GAAAD,gBAAA,cAAG,KAAK,GAAAA,gBAAA;IAAAE,YAAA,GAAAX,KAAA,CAClBY,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,IAAI,GAAAA,YAAA;IAAAE,eAAA,GAAAb,KAAA,CACbc,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,gBAAgB,GAAAA,eAAA;IAAAE,aAAA,GAAAf,KAAA,CAC5BgB,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,qBAAA,GAAAjB,KAAA,CACfkB,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAnB,KAAA,CACxBoB,eAAe;IAAfA,eAAe,GAAAD,qBAAA,cAAG,CAAC,GAAAA,qBAAA;IAAAE,qBAAA,GAAArB,KAAA,CACnBsB,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAvB,KAAA,CACzBwB,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,cAAA,GAAAzB,KAAA,CAC5B0B,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,IAAI,GAAAA,cAAA;IAAAE,eAAA,GAAA3B,KAAA,CACf4B,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EAEjB;EACA,IAAME,mBAAmB,GAAGP,iBAAiB,KAAKE,oBAAoB;EACtE;EACA,IAAMM,aAAa,GAAGd,OAAO,IAAI,CAACY,SAAS;EAE3C,oBACE1F,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACrD,UAAU;IAACO,UAAU,EAAE2C;EAAU,GAC/BxB,KAAK,gBACJlE,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAAmF,KAAK;IACJC,WAAW,EAAEC,kBAAY;IACzBC,UAAU,EAAE7B,QAAQ,GAAG8B,mBAAW,GAAGC,SAAU;IAC/CC,YAAY,EAAE9B,aAAa,GAAG,IAAA+B,uBAAe,EAAC,CAAC,GAAGF;EAAU,gBAE5DnG,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IACES,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACdC,UAAU,EAAE;IACd;EAAE,CACH,CACI,CAAC,GACN,IAAI,eAERzG,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAO,gBACpB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACxF,OAAA,CAAAuG,WAAW,QACTpC,UAAU,gBACTxE,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAoG,UAAU;IAACC,EAAE,EAAC,MAAM;IAACC,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAU,OAAAC,MAAA,CACnDvC,MAAM,MACD,CAAC,GACX,IAAI,EACPV,KACU,CAAC,EAEb0B,SAAS,GAAG,IAAI,gBAAG1F,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACxF,OAAA,CAAA6G,UAAU;IAAC,cAAW;EAAc,CAAE,CACnD,CAAC,eAEXlH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAM,gBACnB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAC5C,iBAAiB,qBAChBjD,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAS,GACtB5E,UAAU,CAAC6E,GAAG,CAAC,UAACJ,KAAK;IAAA,oBACpBhH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAC3C,SAAS;MAACmE,GAAG,EAAEL,KAAM;MAAC3D,MAAM,EAAE2D;IAAM,CAAE,CAAC;EAAA,CACzC,CACG,CAAC,eACPhH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACrF,WAAA,CAAA8G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,IAAY,CAAC,eACxChH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjCnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAU,gBACxBnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAAiH,gBAAgB,MAAE,CAAC,eACpBvH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACrF,WAAA,CAAA8G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,GAAW,CAClC,CAAC,eACPhH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjCnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAU,gBACxBnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAAkH,kBAAkB,MAAE,CAAC,eACtBxH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACrF,WAAA,CAAA8G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,GAAW,CAClC,CAAC,EACNhC,gBAAgB,gBACfhF,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAA7F,MAAA,CAAAuB,OAAA,CAAAkG,QAAA,qBACEzH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjCnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC,UAAU;IAACnD,KAAK,EAAC;EAAc,gBAC7ChE,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAAoH,cAAc,MAAE,CAAC,eAClB1H,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACrF,WAAA,CAAA8G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAE9B,eAA0B,CAClD,CACN,CAAC,GACD,IAAI,EACPS,mBAAmB,gBAClB3F,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAA7F,MAAA,CAAAuB,OAAA,CAAAkG,QAAA,qBACEzH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjCnH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvC,iBAAiB;IAACU,KAAK,EAAC;EAAqB,gBAC5ChE,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAAqH,UAAU,MAAE,CACI,CACnB,CAAC,GACD,IACa,CACX,CAAC,eAEX3H,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAQ,gBACrB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACtC,UAAU;IAACE,QAAQ,EAAEmC;EAAc,GAAEhB,SAAsB,CAAC,eAC7D5E,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,aAAO,CAAC,EACPL,QAAQ,gBACPxF,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACnF,QAAA,CAAAkH,WAAW;IACVC,GAAG,EAAEC,sBAAa,CAACC,IAAK;IACxBC,KAAK,EAAE,EAAG;IACVC,SAAS,EAAE,KAAM;IACjB;EAAU,GACX,IAEY,CAAC,gBAEdjI,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACnC,iBAAiB;IAACwE,IAAI,EAAC,QAAQ;IAAC,cAAW,aAAa;IAAC;EAAU,gBAClElI,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAA6H,cAAc,MAAE,CACA,CAEb,CACA,CAAC;AAEjB,CAAC;;AAED;;AAEO,IAAMC,eAAe,GAAAvE,OAAA,CAAAuE,eAAA,GAAG,SAAlBA,eAAeA,CAC1BC,KAAoD;EAAA,oBAEpDrI,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACxF,OAAA,CAAAiI,WAAW,EAAArG,QAAA;IACVsG,IAAI,eAAEvI,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACvF,MAAA,CAAAkH,kBAAkB,MAAE,CAAE;IAC7BgB,KAAK,EAAC;EAAgB,GAClBH,KAAK,CACV,CAAC;AAAA,CACH;;AAED;AACO,IAAMI,YAAY,GAAA5E,OAAA,CAAA4E,YAAA,GAAG,SAAfA,YAAYA,CAAA;EAAA,oBACvBzI,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAA7F,MAAA,CAAAuB,OAAA,CAAAkG,QAAA,qBACEzH,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAO,gBACpB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACtF,QAAA,CAAAmI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAM;EAAE,CAAE,CAC9C,CAAC,eACXvG,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAM,gBACnB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACtF,QAAA,CAAAmI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAM;EAAE,CAAE,CAC9C,CAAC,eACXvG,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAAClF,WAAA,CAAA+F,QAAQ;IAACC,IAAI,EAAC;EAAQ,gBACrB3G,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACtF,QAAA,CAAAmI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAG,CAAE;IAAC;EAAU,CAAE,CAAC,eAC/DvG,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,aAAO,CAAC,eACR7F,MAAA,CAAAuB,OAAA,CAAAsE,aAAA,CAACtF,QAAA,CAAAmI,cAAc;IACb,kBAAU;IACVpC,KAAK,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEmC,YAAY,EAAE;IAAM;EAAE,CACvD,CACO,CACV,CAAC;AAAA,CACJ","ignoreList":[]}
+{"version":3,"file":"TaskCard.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_shared","_Icons","_Loaders","_StackedCard","_Typography","_Typography2","_shared2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","LABEL_DOTS","StyledBody","styled","div","withConfig","displayName","componentId","_ref","$completed","css","StyledMetaCluster","StyledDot","span","_ref2","$color","StyledHiddenBadge","StyledDate","_ref3","$overdue","StyledAddAssignee","button","TaskCard","exports","_ref4","_ref4$title","title","_ref4$cover","cover","_ref4$playable","playable","_ref4$coverControls","coverControls","_ref4$showTaskId","showTaskId","_ref4$taskId","taskId","_ref4$dateLabel","dateLabel","_ref4$overdue","overdue","_ref4$showDependencie","showDependencies","_ref4$dependencyCount","dependencyCount","_ref4$hiddenFromClien","hiddenFromClients","_ref4$projectDefaultH","projectDefaultHidden","_ref4$assigned","assigned","_ref4$completed","completed","showHiddenSignifier","dateIsOverdue","createElement","StackedCardCover","aspectRatio","COVER_RATIO","centerSlot","playControl","undefined","topRightSlot","coverManagement","style","width","height","background","StackedCardRow","role","StyledClamp","Typography","as","variant","color","concat","EntityDots","className","map","key","Caption1","MessageSmallIcon","ChecklistSmallIcon","Fragment","InsertLinkIcon","EyeOffIcon","RoundAvatar","$bg","AVATAR_COLORS","teal","$size","$bordered","type","PersonPlusIcon","TaskPlaceholder","props","Placeholder","icon","label","TaskSkeleton","SkeletonLoader","borderRadius"],"sources":["../../../../../src/presentation/stackedCard/content/TaskCard.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport {\n  EntityDots,\n  StyledClamp,\n  coverManagement,\n  playControl,\n  Placeholder,\n} from \"./shared\";\nimport {\n  ChecklistSmallIcon,\n  EyeOffIcon,\n  InsertLinkIcon,\n  MessageSmallIcon,\n  PersonPlusIcon,\n} from \"../../../components/Icons\";\nimport { SkeletonLoader } from \"../../../components/Loaders\";\nimport {\n  STACKED_CARD_COVER_RATIO as COVER_RATIO,\n  StackedCardCover as Cover,\n  StackedCardRow as StackRow,\n} from \"../../../components/StackedCard\";\nimport { Caption1 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport { RoundAvatar, AVATAR_COLORS } from \"../../shared\";\n\n/**\n * TaskCard — the baseline-preservation card.\n *\n * This is the replacement for today's column card, so it must reproduce every\n * behavior that card has (note 52104 §B2) — none of them are optional, each is\n * a silent-regression risk. Every one is a prop here so the story can toggle it:\n *\n *  - task-number prefix in the title      (config-gated, mirrors `show_task_id`)\n *  - overdue date colouring               (red ONLY when overdue AND not completed)\n *  - dependency counter                   (behind a feature-flag prop)\n *  - hidden-from-clients signifier        (shown only when it DIFFERS from the\n *                                          project default)\n *  - inline assignee affordance           (avatar, or an add-assignee placeholder)\n *  - completed                            (teal tint, no \"…\" menu, no overdue colour)\n *\n * The pending/optimistic and priority states are SHELL states (dimmed +\n * pointer-events off; red left bar), so the card is wrapped in a `<StackedCard\n * pending>` / `<StackedCard priorityColor>` by the host — they are not the\n * card's own concern and live on the shell, not here.\n */\n\nconst LABEL_DOTS = [\"#378ADD\", \"#D85A30\", \"#639922\", \"#EF9F27\", \"#7F77DD\"];\n\n/* The completed tint fills the card body; the shell keeps the priority bar and\n   selection ring on top of it. */\nconst StyledBody = styled.div<{ $completed?: boolean }>`\n  display: flex;\n  flex-direction: column;\n\n  ${({ $completed }) =>\n    $completed &&\n    css`\n      background: var(--sc-completed-tint, rgba(72, 201, 176, 0.16));\n    `}\n`;\n\nconst StyledMetaCluster = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--color-theme-600);\n\n  .sc-dots {\n    display: flex;\n    gap: 4px;\n  }\n\n  .sc-sep {\n    opacity: 0.6;\n  }\n\n  .sc-count {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n  }\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\nconst StyledDot = styled.span<{ $color: string }>`\n  width: 11px;\n  height: 11px;\n  border-radius: 50%;\n  background: ${({ $color }) => $color};\n`;\n\n/* Hidden-from-clients signifier — an eye-off badge, shown only when the task's\n   visibility differs from the project default. */\nconst StyledHiddenBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  color: var(--color-theme-600);\n\n  svg {\n    width: 14px;\n    height: 14px;\n  }\n`;\n\n/* Date — bold; turns red only when overdue AND the task is not completed. */\nconst StyledDate = styled.span<{ $overdue?: boolean }>`\n  font-weight: bold;\n  color: ${({ $overdue }) =>\n    $overdue ? \"var(--red-alert)\" : \"var(--color-theme-900)\"};\n`;\n\n/* Inline assignee affordance placeholder — a dashed add-assignee target that\n   stands in until the real picker is wired at integration. */\nconst StyledAddAssignee = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 1.5px dashed var(--color-theme-400);\n  border-radius: 50%;\n  background: transparent;\n  color: var(--color-theme-600);\n  cursor: pointer;\n\n  svg {\n    width: 14px;\n    height: 14px;\n    display: block;\n  }\n\n  &:hover {\n    border-color: var(--sc-selection-ring);\n    color: var(--color-theme-800);\n  }\n`;\n\nexport interface TaskCardProps {\n  title?: string;\n  /** Optional cover — task cards in a column usually have none. */\n  cover?: boolean;\n  playable?: boolean;\n  coverControls?: boolean;\n  /** Config-gated task-number prefix (mirrors `show_task_id`). */\n  showTaskId?: boolean;\n  taskId?: number;\n  dateLabel?: string;\n  /** Overdue date — colours the date red, but only when NOT completed. */\n  overdue?: boolean;\n  /** Dependency counter, gated behind a feature flag. */\n  showDependencies?: boolean;\n  dependencyCount?: number;\n  /** The task's hidden-from-clients flag. */\n  hiddenFromClients?: boolean;\n  /** The project default for client visibility; the signifier shows on a diff. */\n  projectDefaultHidden?: boolean;\n  /** Whether the task has an assignee (avatar) or shows the add affordance. */\n  assigned?: boolean;\n  /** Completed — teal tint, no \"…\" menu, no overdue colour. */\n  completed?: boolean;\n}\n\nexport const TaskCard = ({\n  title = \"Implement the design from the reference on this page\",\n  cover = false,\n  playable = false,\n  coverControls = false,\n  showTaskId = false,\n  taskId = 4521,\n  dateLabel = \"May 8 – Sep 10\",\n  overdue = false,\n  showDependencies = false,\n  dependencyCount = 2,\n  hiddenFromClients = false,\n  projectDefaultHidden = false,\n  assigned = true,\n  completed = false,\n}: TaskCardProps): ReactElement => {\n  // Signifier appears only when the task's visibility differs from the default.\n  const showHiddenSignifier = hiddenFromClients !== projectDefaultHidden;\n  // Overdue colour is suppressed on completed tasks.\n  const dateIsOverdue = overdue && !completed;\n\n  return (\n    <StyledBody $completed={completed}>\n      {cover ? (\n        <Cover\n          aspectRatio={COVER_RATIO}\n          centerSlot={playable ? playControl : undefined}\n          topRightSlot={coverControls ? coverManagement() : undefined}\n        >\n          <div\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              background: \"var(--color-theme-300)\",\n            }}\n          />\n        </Cover>\n      ) : null}\n\n      <StackRow role=\"title\">\n        <StyledClamp>\n          {showTaskId ? (\n            <Typography as=\"span\" variant=\"Caption 1\" color=\"tertiary\">\n              {`#${taskId} `}\n            </Typography>\n          ) : null}\n          {title}\n        </StyledClamp>\n        {/* Completed tasks drop the \"…\" menu. */}\n        {completed ? null : <EntityDots aria-label=\"Task options\" />}\n      </StackRow>\n\n      <StackRow role=\"meta\">\n        <StyledMetaCluster>\n          <span className=\"sc-dots\">\n            {LABEL_DOTS.map((color) => (\n              <StyledDot key={color} $color={color} />\n            ))}\n          </span>\n          <Caption1 color=\"tertiary\">+3</Caption1>\n          <span className=\"sc-sep\">·</span>\n          <span className=\"sc-count\">\n            <MessageSmallIcon />\n            <Caption1 color=\"tertiary\">7</Caption1>\n          </span>\n          <span className=\"sc-sep\">·</span>\n          <span className=\"sc-count\">\n            <ChecklistSmallIcon />\n            <Caption1 color=\"tertiary\">2</Caption1>\n          </span>\n          {showDependencies ? (\n            <>\n              <span className=\"sc-sep\">·</span>\n              <span className=\"sc-count\" title=\"Dependencies\">\n                <InsertLinkIcon />\n                <Caption1 color=\"tertiary\">{dependencyCount}</Caption1>\n              </span>\n            </>\n          ) : null}\n          {showHiddenSignifier ? (\n            <>\n              <span className=\"sc-sep\">·</span>\n              <StyledHiddenBadge title=\"Hidden from clients\">\n                <EyeOffIcon />\n              </StyledHiddenBadge>\n            </>\n          ) : null}\n        </StyledMetaCluster>\n      </StackRow>\n\n      <StackRow role=\"footer\">\n        <StyledDate $overdue={dateIsOverdue}>{dateLabel}</StyledDate>\n        <span />\n        {assigned ? (\n          <RoundAvatar\n            $bg={AVATAR_COLORS.teal}\n            $size={24}\n            $bordered={false}\n            data-fixed\n          >\n            MS\n          </RoundAvatar>\n        ) : (\n          <StyledAddAssignee type=\"button\" aria-label=\"Assign task\" data-fixed>\n            <PersonPlusIcon />\n          </StyledAddAssignee>\n        )}\n      </StackRow>\n    </StyledBody>\n  );\n};\n\n/* ---- placeholder + skeleton ---- */\n\nexport const TaskPlaceholder = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <Placeholder\n    icon={<ChecklistSmallIcon />}\n    label=\"Name this task\"\n    {...props}\n  />\n);\n\n/* Skeleton mirrors the task anatomy row for row: title, meta, footer. */\nexport const TaskSkeleton = (): ReactElement => (\n  <>\n    <StackRow role=\"title\">\n      <SkeletonLoader style={{ height: 14, width: \"90%\" }} />\n    </StackRow>\n    <StackRow role=\"meta\">\n      <SkeletonLoader style={{ height: 10, width: \"55%\" }} />\n    </StackRow>\n    <StackRow role=\"footer\">\n      <SkeletonLoader style={{ height: 12, width: 64 }} data-fixed />\n      <span />\n      <SkeletonLoader\n        data-fixed\n        style={{ width: 24, height: 24, borderRadius: \"50%\" }}\n      />\n    </StackRow>\n  </>\n);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAOA,IAAAI,MAAA,GAAAJ,OAAA;AAOA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAN,OAAA;AAKA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,YAAA,GAAAR,OAAA;AACA,IAAAS,QAAA,GAAAT,OAAA;AAA0D,SAAAE,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,wBAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAZ,uBAAAW,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAAA,SAAAoB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAlB,CAAA,aAAAJ,CAAA,MAAAA,CAAA,GAAAuB,SAAA,CAAAC,MAAA,EAAAxB,CAAA,UAAAC,CAAA,GAAAsB,SAAA,CAAAvB,CAAA,YAAAG,CAAA,IAAAF,CAAA,OAAAc,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAgB,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMG,UAAU,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;;AAE1E;AACA;AACA,IAAMC,UAAU,GAAGC,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDAIzB,UAAAC,IAAA;EAAA,IAAGC,UAAU,GAAAD,IAAA,CAAVC,UAAU;EAAA,OACbA,UAAU,QACVC,qBAAG,iEAEF;AAAA,EACJ;AAED,IAAMC,iBAAiB,GAAGR,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uNAyBnC;AAED,IAAMK,SAAS,GAAGT,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kEAIb,UAAAO,KAAA;EAAA,IAAGC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,OAAOA,MAAM;AAAA,EACrC;;AAED;AACA;AACA,IAAMC,iBAAiB,GAAGb,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gHAUpC;;AAED;AACA,IAAMU,UAAU,GAAGd,yBAAM,CAACU,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAEnB,UAAAW,KAAA;EAAA,IAAGC,QAAQ,GAAAD,KAAA,CAARC,QAAQ;EAAA,OAClBA,QAAQ,GAAG,kBAAkB,GAAG,wBAAwB;AAAA,EAC3D;;AAED;AACA;AACA,IAAMC,iBAAiB,GAAGjB,yBAAM,CAACkB,MAAM,CAAAhB,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6VAuBtC;AA2BM,IAAMe,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAAE,KAAA,EAec;EAAA,IAAAC,WAAA,GAAAD,KAAA,CAdjCE,KAAK;IAALA,KAAK,GAAAD,WAAA,cAAG,sDAAsD,GAAAA,WAAA;IAAAE,WAAA,GAAAH,KAAA,CAC9DI,KAAK;IAALA,KAAK,GAAAD,WAAA,cAAG,KAAK,GAAAA,WAAA;IAAAE,cAAA,GAAAL,KAAA,CACbM,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,mBAAA,GAAAP,KAAA,CAChBQ,aAAa;IAAbA,aAAa,GAAAD,mBAAA,cAAG,KAAK,GAAAA,mBAAA;IAAAE,gBAAA,GAAAT,KAAA,CACrBU,UAAU;IAAVA,UAAU,GAAAD,gBAAA,cAAG,KAAK,GAAAA,gBAAA;IAAAE,YAAA,GAAAX,KAAA,CAClBY,MAAM;IAANA,MAAM,GAAAD,YAAA,cAAG,IAAI,GAAAA,YAAA;IAAAE,eAAA,GAAAb,KAAA,CACbc,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,gBAAgB,GAAAA,eAAA;IAAAE,aAAA,GAAAf,KAAA,CAC5BgB,OAAO;IAAPA,OAAO,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,qBAAA,GAAAjB,KAAA,CACfkB,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAnB,KAAA,CACxBoB,eAAe;IAAfA,eAAe,GAAAD,qBAAA,cAAG,CAAC,GAAAA,qBAAA;IAAAE,qBAAA,GAAArB,KAAA,CACnBsB,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAvB,KAAA,CACzBwB,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,cAAA,GAAAzB,KAAA,CAC5B0B,QAAQ;IAARA,QAAQ,GAAAD,cAAA,cAAG,IAAI,GAAAA,cAAA;IAAAE,eAAA,GAAA3B,KAAA,CACf4B,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,KAAK,GAAAA,eAAA;EAEjB;EACA,IAAME,mBAAmB,GAAGP,iBAAiB,KAAKE,oBAAoB;EACtE;EACA,IAAMM,aAAa,GAAGd,OAAO,IAAI,CAACY,SAAS;EAE3C,oBACEzF,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACrD,UAAU;IAACO,UAAU,EAAE2C;EAAU,GAC/BxB,KAAK,gBACJjE,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAqF,gBAAK;IACJC,WAAW,EAAEC,qCAAY;IACzBC,UAAU,EAAE7B,QAAQ,GAAG8B,mBAAW,GAAGC,SAAU;IAC/CC,YAAY,EAAE9B,aAAa,GAAG,IAAA+B,uBAAe,EAAC,CAAC,GAAGF;EAAU,gBAE5DlG,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IACES,KAAK,EAAE;MACLC,KAAK,EAAE,MAAM;MACbC,MAAM,EAAE,MAAM;MACdC,UAAU,EAAE;IACd;EAAE,CACH,CACI,CAAC,GACN,IAAI,eAERxG,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAO,gBACpB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACvF,OAAA,CAAAsG,WAAW,QACTpC,UAAU,gBACTvE,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAClF,YAAA,CAAAkG,UAAU;IAACC,EAAE,EAAC,MAAM;IAACC,OAAO,EAAC,WAAW;IAACC,KAAK,EAAC;EAAU,OAAAC,MAAA,CACnDvC,MAAM,MACD,CAAC,GACX,IAAI,EACPV,KACU,CAAC,EAEb0B,SAAS,GAAG,IAAI,gBAAGzF,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACvF,OAAA,CAAA4G,UAAU;IAAC,cAAW;EAAc,CAAE,CACnD,CAAC,eAEXjH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAM,gBACnB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAC5C,iBAAiB,qBAChBhD,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAS,GACtB5E,UAAU,CAAC6E,GAAG,CAAC,UAACJ,KAAK;IAAA,oBACpB/G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAC3C,SAAS;MAACmE,GAAG,EAAEL,KAAM;MAAC3D,MAAM,EAAE2D;IAAM,CAAE,CAAC;EAAA,CACzC,CACG,CAAC,eACP/G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACnF,WAAA,CAAA4G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,IAAY,CAAC,eACxC/G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjClH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAU,gBACxBlH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAAgH,gBAAgB,MAAE,CAAC,eACpBtH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACnF,WAAA,CAAA4G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,GAAW,CAClC,CAAC,eACP/G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjClH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAU,gBACxBlH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAAiH,kBAAkB,MAAE,CAAC,eACtBvH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACnF,WAAA,CAAA4G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAC,GAAW,CAClC,CAAC,EACNhC,gBAAgB,gBACf/E,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAA5F,MAAA,CAAAsB,OAAA,CAAAkG,QAAA,qBACExH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjClH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC,UAAU;IAACnD,KAAK,EAAC;EAAc,gBAC7C/D,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAAmH,cAAc,MAAE,CAAC,eAClBzH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACnF,WAAA,CAAA4G,QAAQ;IAACN,KAAK,EAAC;EAAU,GAAE9B,eAA0B,CAClD,CACN,CAAC,GACD,IAAI,EACPS,mBAAmB,gBAClB1F,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAA5F,MAAA,CAAAsB,OAAA,CAAAkG,QAAA,qBACExH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA;IAAMsB,SAAS,EAAC;EAAQ,GAAC,MAAO,CAAC,eACjClH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACvC,iBAAiB;IAACU,KAAK,EAAC;EAAqB,gBAC5C/D,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAAoH,UAAU,MAAE,CACI,CACnB,CAAC,GACD,IACa,CACX,CAAC,eAEX1H,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAQ,gBACrB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtC,UAAU;IAACE,QAAQ,EAAEmC;EAAc,GAAEhB,SAAsB,CAAC,eAC7D3E,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,aAAO,CAAC,EACPL,QAAQ,gBACPvF,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACjF,QAAA,CAAAgH,WAAW;IACVC,GAAG,EAAEC,sBAAa,CAACC,IAAK;IACxBC,KAAK,EAAE,EAAG;IACVC,SAAS,EAAE,KAAM;IACjB;EAAU,GACX,IAEY,CAAC,gBAEdhI,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACnC,iBAAiB;IAACwE,IAAI,EAAC,QAAQ;IAAC,cAAW,aAAa;IAAC;EAAU,gBAClEjI,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAA4H,cAAc,MAAE,CACA,CAEb,CACA,CAAC;AAEjB,CAAC;;AAED;;AAEO,IAAMC,eAAe,GAAAvE,OAAA,CAAAuE,eAAA,GAAG,SAAlBA,eAAeA,CAC1BC,KAAoD;EAAA,oBAEpDpI,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACvF,OAAA,CAAAgI,WAAW,EAAArG,QAAA;IACVsG,IAAI,eAAEtI,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACtF,MAAA,CAAAiH,kBAAkB,MAAE,CAAE;IAC7BgB,KAAK,EAAC;EAAgB,GAClBH,KAAK,CACV,CAAC;AAAA,CACH;;AAED;AACO,IAAMI,YAAY,GAAA5E,OAAA,CAAA4E,YAAA,GAAG,SAAfA,YAAYA,CAAA;EAAA,oBACvBxI,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAAA5F,MAAA,CAAAsB,OAAA,CAAAkG,QAAA,qBACExH,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAO,gBACpB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACrF,QAAA,CAAAkI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAM;EAAE,CAAE,CAC9C,CAAC,eACXtG,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAM,gBACnB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACrF,QAAA,CAAAkI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAM;EAAE,CAAE,CAC9C,CAAC,eACXtG,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACpF,YAAA,CAAAiG,cAAQ;IAACC,IAAI,EAAC;EAAQ,gBACrB1G,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACrF,QAAA,CAAAkI,cAAc;IAACpC,KAAK,EAAE;MAAEE,MAAM,EAAE,EAAE;MAAED,KAAK,EAAE;IAAG,CAAE;IAAC;EAAU,CAAE,CAAC,eAC/DtG,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,aAAO,CAAC,eACR5F,MAAA,CAAAsB,OAAA,CAAAsE,aAAA,CAACrF,QAAA,CAAAkI,cAAc;IACb,kBAAU;IACVpC,KAAK,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEmC,YAAY,EAAE;IAAM;EAAE,CACvD,CACO,CACV,CAAC;AAAA,CACJ","ignoreList":[]}

package/dist/cjs/presentation/stackedCard/content/shared.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.playControl = exports.coverManagement = exports.StyledFavicon = exports.StyledColorCover = exports.StyledClamp = exports.StyledChip = exports.Placeholder = exports.EntityDots = void 0;
+exports.playControl = exports.coverManagement = exports.StyledFavicon = exports.StyledColorCover = exports.StyledClamp = exports.StyledChip = exports.Placeholder = exports.EntityDots = exports.COVER_RATIO_SWATCH = exports.COVER_RATIO_IMAGE = exports.COVER_RATIO_HERO = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Icons = require("../../../components/Icons");
+var _StackedCard = require("../../../components/StackedCard");
 var _Typography = require("../../../components/Typography");
 var _Typography2 = require("../../../components/Typography/Typography");
-var _primitives = require("../primitives");
 var _excluded = ["icon", "label", "height", "dashed"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -23,14 +23,34 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * menu, the cover-management controls, the clamp, the favicon, the chips and
  * the placeholder frame are content concerns, so they belong here where the
  * typed cards (TaskCard, LinkCard, …) compose them.
+ *
+ * The card itself — the shell, the Stack/StackRow/Cover primitives and the
+ * cover chrome — is the shipped design-system component,
+ * `components/StackedCard`. These stories import it under the concept
+ * vocabulary (Cover, StackRow, …) so the spec prose and the code keep using
+ * the same words.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Per-type cover ratios                                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The design system ships one default cover ratio
+ * (`STACKED_CARD_COVER_RATIO`). How tall a cover reads is a decision of the
+ * content type, so the variants live here with the content: a link hero, a
+ * full-bleed image, a colour swatch band.
  */
+var COVER_RATIO_HERO = exports.COVER_RATIO_HERO = "320 / 190";
+var COVER_RATIO_IMAGE = exports.COVER_RATIO_IMAGE = "260 / 168";
+var COVER_RATIO_SWATCH = exports.COVER_RATIO_SWATCH = "260 / 104";
 
 /* ------------------------------------------------------------------ */
 /* Cover chrome — media control + cover management                     */
 /* ------------------------------------------------------------------ */
 
 /** Centered media control (play), for a cover that wraps audio/video. */
-var playControl = exports.playControl = /*#__PURE__*/_react.default.createElement(_primitives.PlayBadge, null, /*#__PURE__*/_react.default.createElement(_Icons.PlayIcon, null));
+var playControl = exports.playControl = /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardPlayBadge, null, /*#__PURE__*/_react.default.createElement(_Icons.PlayIcon, null));
 
 /**
  * Top-right cover management. Acts on the COVER (collapse it, remove it) — not
@@ -43,15 +63,15 @@ var coverManagement = exports.coverManagement = function coverManagement() {
     removeLabel = _ref$removeLabel === void 0 ? "Remove cover" : _ref$removeLabel,
     onCollapse = _ref.onCollapse,
     onRemove = _ref.onRemove;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.CoverButton, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCoverButton, {
     type: "button",
     "aria-label": "Collapse cover",
     onClick: onCollapse
-  }, /*#__PURE__*/_react.default.createElement(_primitives.CollapseGlyph, null)), /*#__PURE__*/_react.default.createElement(_primitives.CoverButton, {
+  }, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCollapseGlyph, null)), /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardCoverButton, {
     type: "button",
     "aria-label": removeLabel,
     onClick: onRemove
-  }, /*#__PURE__*/_react.default.createElement(_primitives.RemoveCoverGlyph, null)));
+  }, /*#__PURE__*/_react.default.createElement(_StackedCard.StackedCardRemoveCoverGlyph, null)));
 };
 
 /* ------------------------------------------------------------------ */
@@ -67,7 +87,7 @@ var EntityDots = exports.EntityDots = function EntityDots(props) {
     type: "button",
     "aria-label": "Options",
     "data-fixed": true,
-    className: "sc-control"
+    className: _StackedCard.STACKED_CARD_CONTROL_CLASS
   }, props), /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null));
 };
 

package/dist/cjs/presentation/stackedCard/content/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Icons","_Typography","_Typography2","_primitives","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","_extends","assign","bind","arguments","apply","playControl","exports","createElement","PlayBadge","PlayIcon","coverManagement","_ref","undefined","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","CoverButton","type","onClick","CollapseGlyph","RemoveCoverGlyph","StyledEntityDots","styled","button","withConfig","displayName","componentId","EntityDots","props","className","TreeDotsIcon","StyledClamp","Body2","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","css","Placeholder","_ref6","icon","label","height","dashed","rest","Typography","as","variant","color"],"sources":["../../../../../src/presentation/stackedCard/content/shared.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { PlayIcon, TreeDotsIcon } from \"../../../components/Icons\";\nimport { Body2 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\nimport {\n  CollapseGlyph,\n  CoverButton,\n  PlayBadge,\n  RemoveCoverGlyph,\n} from \"../primitives\";\n\n/**\n * Content-level chrome shared by the typed StackedCard components.\n *\n * These live OUTSIDE the shell on purpose. The shell is hollow; the \"…\" entity\n * menu, the cover-management controls, the clamp, the favicon, the chips and\n * the placeholder frame are content concerns, so they belong here where the\n * typed cards (TaskCard, LinkCard, …) compose them.\n */\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome — media control + cover management                     */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (play), for a cover that wraps audio/video. */\nexport const playControl = (\n  <PlayBadge>\n    <PlayIcon />\n  </PlayBadge>\n);\n\n/**\n * Top-right cover management. Acts on the COVER (collapse it, remove it) — not\n * on the entity. Callers wire the click handlers; the default is inert chrome\n * for the static demos.\n */\nexport const coverManagement = ({\n  removeLabel = \"Remove cover\",\n  onCollapse,\n  onRemove,\n}: {\n  removeLabel?: string;\n  onCollapse?: () => void;\n  onRemove?: () => void;\n} = {}): ReactElement => (\n  <>\n    <CoverButton type=\"button\" aria-label=\"Collapse cover\" onClick={onCollapse}>\n      <CollapseGlyph />\n    </CoverButton>\n    <CoverButton type=\"button\" aria-label={removeLabel} onClick={onRemove}>\n      <RemoveCoverGlyph />\n    </CoverButton>\n  </>\n);\n\n/* ------------------------------------------------------------------ */\n/* Entity \"…\" menu — acts on the ENTITY, lives in a content row         */\n/* ------------------------------------------------------------------ */\n\nconst StyledEntityDots = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--color-theme-700);\n  background: var(--color-theme-200);\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: var(--color-theme-300);\n  }\n`;\n\nexport const EntityDots = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <StyledEntityDots\n    type=\"button\"\n    aria-label=\"Options\"\n    data-fixed\n    className=\"sc-control\"\n    {...props}\n  >\n    <TreeDotsIcon />\n  </StyledEntityDots>\n);\n\n/* ------------------------------------------------------------------ */\n/* Text + inline bits                                                   */\n/* ------------------------------------------------------------------ */\n\n/** Two-line title clamp — the card's name row content. */\nexport const StyledClamp = styled(Body2)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\n/** A favicon square — a solid data colour stands in for the real favicon. */\nexport const StyledFavicon = styled.span<{ $bg: string }>`\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: ${({ $bg }) => $bg};\n  flex-shrink: 0;\n`;\n\n/** A small pill for link metadata (media kind, duration, …). */\nexport const StyledChip = styled.span`\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--color-theme-300);\n  color: var(--color-theme-800);\n  font-size: 11px;\n  white-space: nowrap;\n`;\n\n/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */\nexport const StyledColorCover = styled.div<{ $color: string }>`\n  width: 100%;\n  height: 100%;\n  background: ${({ $color }) => $color};\n`;\n\n/* ------------------------------------------------------------------ */\n/* Placeholder frame — the interactive empty state, per type           */\n/* ------------------------------------------------------------------ */\n\nconst StyledPlaceholder = styled.button<{\n  $height?: number;\n  $dashed?: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  height: ${({ $height }) => $height ?? 150}px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-theme-600);\n  text-align: center;\n  cursor: pointer;\n\n  ${({ $dashed }) =>\n    $dashed &&\n    css`\n      margin: 8px;\n      width: calc(100% - 16px);\n      border: 1.5px dashed var(--color-theme-400);\n      border-radius: 6px;\n\n      &:hover {\n        border-color: var(--sc-selection-ring);\n        color: var(--color-theme-700);\n      }\n    `}\n\n  > svg {\n    width: 40px;\n    height: 40px;\n    color: var(--color-theme-500);\n  }\n`;\n\n/**\n * The shared placeholder frame. Each type supplies its own icon and verb-first,\n * sentence-case invitation (ActiveCollab voice). Interactive by design — the\n * whole frame is a button — and distinct from the loading skeleton.\n */\nexport const Placeholder = ({\n  icon,\n  label,\n  height,\n  dashed,\n  ...rest\n}: {\n  icon: ReactNode;\n  label: ReactNode;\n  height?: number;\n  dashed?: boolean;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>): ReactElement => (\n  <StyledPlaceholder type=\"button\" $height={height} $dashed={dashed} {...rest}>\n    {icon}\n    <Typography as=\"span\" variant=\"Body 2\" color=\"secondary\">\n      {label}\n    </Typography>\n  </StyledPlaceholder>\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"shared.js","names":["_react","_interopRequireDefault","require","_styledComponents","_interopRequireWildcard","_Icons","_StackedCard","_Typography","_Typography2","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","length","indexOf","propertyIsEnumerable","_extends","assign","bind","arguments","apply","COVER_RATIO_HERO","exports","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","playControl","createElement","StackedCardPlayBadge","PlayIcon","coverManagement","_ref","undefined","_ref$removeLabel","removeLabel","onCollapse","onRemove","Fragment","StackedCardCoverButton","type","onClick","StackedCardCollapseGlyph","StackedCardRemoveCoverGlyph","StyledEntityDots","styled","button","withConfig","displayName","componentId","EntityDots","props","className","STACKED_CARD_CONTROL_CLASS","TreeDotsIcon","StyledClamp","Body2","StyledFavicon","span","_ref2","$bg","StyledChip","StyledColorCover","div","_ref3","$color","StyledPlaceholder","_ref4","$height","_ref5","$dashed","css","Placeholder","_ref6","icon","label","height","dashed","rest","Typography","as","variant","color"],"sources":["../../../../../src/presentation/stackedCard/content/shared.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\nimport { PlayIcon, TreeDotsIcon } from \"../../../components/Icons\";\nimport {\n  STACKED_CARD_CONTROL_CLASS,\n  StackedCardCollapseGlyph as CollapseGlyph,\n  StackedCardCoverButton as CoverButton,\n  StackedCardPlayBadge as PlayBadge,\n  StackedCardRemoveCoverGlyph as RemoveCoverGlyph,\n} from \"../../../components/StackedCard\";\nimport { Body2 } from \"../../../components/Typography\";\nimport { Typography } from \"../../../components/Typography/Typography\";\n\n/**\n * Content-level chrome shared by the typed StackedCard components.\n *\n * These live OUTSIDE the shell on purpose. The shell is hollow; the \"…\" entity\n * menu, the cover-management controls, the clamp, the favicon, the chips and\n * the placeholder frame are content concerns, so they belong here where the\n * typed cards (TaskCard, LinkCard, …) compose them.\n *\n * The card itself — the shell, the Stack/StackRow/Cover primitives and the\n * cover chrome — is the shipped design-system component,\n * `components/StackedCard`. These stories import it under the concept\n * vocabulary (Cover, StackRow, …) so the spec prose and the code keep using\n * the same words.\n */\n\n/* ------------------------------------------------------------------ */\n/* Per-type cover ratios                                               */\n/* ------------------------------------------------------------------ */\n\n/**\n * The design system ships one default cover ratio\n * (`STACKED_CARD_COVER_RATIO`). How tall a cover reads is a decision of the\n * content type, so the variants live here with the content: a link hero, a\n * full-bleed image, a colour swatch band.\n */\nexport const COVER_RATIO_HERO = \"320 / 190\";\nexport const COVER_RATIO_IMAGE = \"260 / 168\";\nexport const COVER_RATIO_SWATCH = \"260 / 104\";\n\n/* ------------------------------------------------------------------ */\n/* Cover chrome — media control + cover management                     */\n/* ------------------------------------------------------------------ */\n\n/** Centered media control (play), for a cover that wraps audio/video. */\nexport const playControl = (\n  <PlayBadge>\n    <PlayIcon />\n  </PlayBadge>\n);\n\n/**\n * Top-right cover management. Acts on the COVER (collapse it, remove it) — not\n * on the entity. Callers wire the click handlers; the default is inert chrome\n * for the static demos.\n */\nexport const coverManagement = ({\n  removeLabel = \"Remove cover\",\n  onCollapse,\n  onRemove,\n}: {\n  removeLabel?: string;\n  onCollapse?: () => void;\n  onRemove?: () => void;\n} = {}): ReactElement => (\n  <>\n    <CoverButton type=\"button\" aria-label=\"Collapse cover\" onClick={onCollapse}>\n      <CollapseGlyph />\n    </CoverButton>\n    <CoverButton type=\"button\" aria-label={removeLabel} onClick={onRemove}>\n      <RemoveCoverGlyph />\n    </CoverButton>\n  </>\n);\n\n/* ------------------------------------------------------------------ */\n/* Entity \"…\" menu — acts on the ENTITY, lives in a content row         */\n/* ------------------------------------------------------------------ */\n\nconst StyledEntityDots = styled.button`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--color-theme-700);\n  background: var(--color-theme-200);\n\n  svg {\n    width: 16px;\n    height: 16px;\n    display: block;\n  }\n\n  &:hover {\n    background: var(--color-theme-300);\n  }\n`;\n\nexport const EntityDots = (\n  props: React.ButtonHTMLAttributes<HTMLButtonElement>\n): ReactElement => (\n  <StyledEntityDots\n    type=\"button\"\n    aria-label=\"Options\"\n    data-fixed\n    className={STACKED_CARD_CONTROL_CLASS}\n    {...props}\n  >\n    <TreeDotsIcon />\n  </StyledEntityDots>\n);\n\n/* ------------------------------------------------------------------ */\n/* Text + inline bits                                                   */\n/* ------------------------------------------------------------------ */\n\n/** Two-line title clamp — the card's name row content. */\nexport const StyledClamp = styled(Body2)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n`;\n\n/** A favicon square — a solid data colour stands in for the real favicon. */\nexport const StyledFavicon = styled.span<{ $bg: string }>`\n  display: inline-flex;\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  background: ${({ $bg }) => $bg};\n  flex-shrink: 0;\n`;\n\n/** A small pill for link metadata (media kind, duration, …). */\nexport const StyledChip = styled.span`\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: var(--color-theme-300);\n  color: var(--color-theme-800);\n  font-size: 11px;\n  white-space: nowrap;\n`;\n\n/** A solid-colour cover fill (swatch value, generic link cover, image stand-in). */\nexport const StyledColorCover = styled.div<{ $color: string }>`\n  width: 100%;\n  height: 100%;\n  background: ${({ $color }) => $color};\n`;\n\n/* ------------------------------------------------------------------ */\n/* Placeholder frame — the interactive empty state, per type           */\n/* ------------------------------------------------------------------ */\n\nconst StyledPlaceholder = styled.button<{\n  $height?: number;\n  $dashed?: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  height: ${({ $height }) => $height ?? 150}px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--color-theme-600);\n  text-align: center;\n  cursor: pointer;\n\n  ${({ $dashed }) =>\n    $dashed &&\n    css`\n      margin: 8px;\n      width: calc(100% - 16px);\n      border: 1.5px dashed var(--color-theme-400);\n      border-radius: 6px;\n\n      &:hover {\n        border-color: var(--sc-selection-ring);\n        color: var(--color-theme-700);\n      }\n    `}\n\n  > svg {\n    width: 40px;\n    height: 40px;\n    color: var(--color-theme-500);\n  }\n`;\n\n/**\n * The shared placeholder frame. Each type supplies its own icon and verb-first,\n * sentence-case invitation (ActiveCollab voice). Interactive by design — the\n * whole frame is a button — and distinct from the loading skeleton.\n */\nexport const Placeholder = ({\n  icon,\n  label,\n  height,\n  dashed,\n  ...rest\n}: {\n  icon: ReactNode;\n  label: ReactNode;\n  height?: number;\n  dashed?: boolean;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>): ReactElement => (\n  <StyledPlaceholder type=\"button\" $height={height} $dashed={dashed} {...rest}>\n    {icon}\n    <Typography as=\"span\" variant=\"Body 2\" color=\"secondary\">\n      {label}\n    </Typography>\n  </StyledPlaceholder>\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/stackedCard/storyScaffold.js

@@ -10,13 +10,15 @@ var _Typography = require("../../components/Typography");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,
- * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem
- * needs. Presentation-only; keeps the three StackedCard stories laying out the
- * same way instead of each re-declaring the sheet chrome.
+ * Section, Labeled, Grid, Column) plus the sheet's `--sc-*` values.
+ * Presentation-only; keeps the StackedCard stories laying out the same way
+ * instead of each re-declaring the sheet chrome.
  *
- * The `--sc-*` variables are declared here as design-system PROPOSALS (a
- * selection ring + a dark scrim family). The shell and primitives reference
- * these only, so no rgba/hex is baked into a reusable style.
+ * The `--sc-*` variables (a selection ring + a dark scrim family) are the
+ * shipped component's theming hooks: `components/StackedCard` reads each one
+ * through a `var()` with a built-in fallback, and declaring them here on the
+ * sheet retints every card inside it. No rgba/hex is baked into a reusable
+ * style.
  */
 
 var StyledSheet = exports.StyledSheet = _styledComponents.default.div.withConfig({

package/dist/cjs/presentation/stackedCard/storyScaffold.js.map

@@ -1 +1 @@
-{"version":3,"file":"storyScaffold.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Typography","e","__esModule","default","StyledSheet","exports","styled","div","withConfig","displayName","componentId","StyledSection","section","StyledGrid","StyledColumn","StyledLabeled","figure","Labeled","_ref","label","children","createElement","Caption1","color","Section","_ref2","caption","note","weight","className","SheetHeading","_ref3","title","Fragment","Title2"],"sources":["../../../../src/presentation/stackedCard/storyScaffold.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Caption1, Title2 } from \"../../components/Typography\";\n\n/**\n * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,\n * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem\n * needs. Presentation-only; keeps the three StackedCard stories laying out the\n * same way instead of each re-declaring the sheet chrome.\n *\n * The `--sc-*` variables are declared here as design-system PROPOSALS (a\n * selection ring + a dark scrim family). The shell and primitives reference\n * these only, so no rgba/hex is baked into a reusable style.\n */\n\nexport const StyledSheet = styled.div`\n  --sc-selection-ring: var(--color-primary-500, #2f6bff);\n  --sc-scrim: rgba(0, 0, 0, 0.55);\n  --sc-scrim-strong: rgba(0, 0, 0, 0.72);\n  --sc-scrim-fg: #ffffff;\n  --sc-completed-tint: rgba(72, 201, 176, 0.16);\n\n  min-height: 100vh;\n  padding: 32px 40px 64px;\n  background: var(--page-paper-dimmed, var(--color-theme-200));\n\n  .sheet-title {\n    margin-bottom: 8px;\n  }\n\n  .sheet-lede {\n    display: block;\n    margin-bottom: 24px;\n    max-width: 760px;\n  }\n`;\n\nconst StyledSection = styled.section`\n  margin-top: 40px;\n\n  > .section-caption {\n    display: block;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  > .section-note {\n    display: block;\n    margin-bottom: 16px;\n    max-width: 720px;\n  }\n`;\n\nexport const StyledGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n  align-items: flex-start;\n`;\n\nexport const StyledColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst StyledLabeled = styled.figure`\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  > figcaption {\n    order: -1;\n    max-width: 320px;\n  }\n`;\n\nexport const Labeled = ({\n  label,\n  children,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledLabeled>\n    <figcaption>\n      <Caption1 color=\"secondary\">{label}</Caption1>\n    </figcaption>\n    {children}\n  </StyledLabeled>\n);\n\nexport const Section = ({\n  caption,\n  note,\n  children,\n}: {\n  caption: string;\n  note?: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledSection>\n    <Caption1 weight=\"bold\" color=\"tertiary\" className=\"section-caption\">\n      {caption}\n    </Caption1>\n    {note ? (\n      <Caption1 color=\"tertiary\" className=\"section-note\">\n        {note}\n      </Caption1>\n    ) : null}\n    <StyledGrid>{children}</StyledGrid>\n  </StyledSection>\n);\n\nexport const SheetHeading = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}): ReactElement => (\n  <>\n    <Title2 className=\"sheet-title\">{title}</Title2>\n    <Caption1 color=\"tertiary\" className=\"sheet-lede\">\n      {children}\n    </Caption1>\n  </>\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"storyScaffold.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Typography","e","__esModule","default","StyledSheet","exports","styled","div","withConfig","displayName","componentId","StyledSection","section","StyledGrid","StyledColumn","StyledLabeled","figure","Labeled","_ref","label","children","createElement","Caption1","color","Section","_ref2","caption","note","weight","className","SheetHeading","_ref3","title","Fragment","Title2"],"sources":["../../../../src/presentation/stackedCard/storyScaffold.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Caption1, Title2 } from \"../../components/Typography\";\n\n/**\n * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,\n * Section, Labeled, Grid, Column) plus the sheet's `--sc-*` values.\n * Presentation-only; keeps the StackedCard stories laying out the same way\n * instead of each re-declaring the sheet chrome.\n *\n * The `--sc-*` variables (a selection ring + a dark scrim family) are the\n * shipped component's theming hooks: `components/StackedCard` reads each one\n * through a `var()` with a built-in fallback, and declaring them here on the\n * sheet retints every card inside it. No rgba/hex is baked into a reusable\n * style.\n */\n\nexport const StyledSheet = styled.div`\n  --sc-selection-ring: var(--color-primary-500, #2f6bff);\n  --sc-scrim: rgba(0, 0, 0, 0.55);\n  --sc-scrim-strong: rgba(0, 0, 0, 0.72);\n  --sc-scrim-fg: #ffffff;\n  --sc-completed-tint: rgba(72, 201, 176, 0.16);\n\n  min-height: 100vh;\n  padding: 32px 40px 64px;\n  background: var(--page-paper-dimmed, var(--color-theme-200));\n\n  .sheet-title {\n    margin-bottom: 8px;\n  }\n\n  .sheet-lede {\n    display: block;\n    margin-bottom: 24px;\n    max-width: 760px;\n  }\n`;\n\nconst StyledSection = styled.section`\n  margin-top: 40px;\n\n  > .section-caption {\n    display: block;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  > .section-note {\n    display: block;\n    margin-bottom: 16px;\n    max-width: 720px;\n  }\n`;\n\nexport const StyledGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n  align-items: flex-start;\n`;\n\nexport const StyledColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst StyledLabeled = styled.figure`\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  > figcaption {\n    order: -1;\n    max-width: 320px;\n  }\n`;\n\nexport const Labeled = ({\n  label,\n  children,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledLabeled>\n    <figcaption>\n      <Caption1 color=\"secondary\">{label}</Caption1>\n    </figcaption>\n    {children}\n  </StyledLabeled>\n);\n\nexport const Section = ({\n  caption,\n  note,\n  children,\n}: {\n  caption: string;\n  note?: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledSection>\n    <Caption1 weight=\"bold\" color=\"tertiary\" className=\"section-caption\">\n      {caption}\n    </Caption1>\n    {note ? (\n      <Caption1 color=\"tertiary\" className=\"section-note\">\n        {note}\n      </Caption1>\n    ) : null}\n    <StyledGrid>{children}</StyledGrid>\n  </StyledSection>\n);\n\nexport const SheetHeading = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}): ReactElement => (\n  <>\n    <Title2 className=\"sheet-title\">{title}</Title2>\n    <Caption1 color=\"tertiary\" className=\"sheet-lede\">\n      {children}\n    </Caption1>\n  </>\n);\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/GlobalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGAqhBvB,CAAC"}
+{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,gGAshBvB,CAAC"}

package/dist/esm/components/GlobalStyle.js

@@ -1,3 +1,3 @@
 import { createGlobalStyle } from "styled-components";
-export const GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"]);
+export const GlobalStyle = createGlobalStyle([":root{--color-primary:#5d2bff;--color-secondary:#5d2bff;--color-theme-100:#ffffff;--color-theme-200:#f6f6f9;--color-theme-300:#ebebee;--color-theme-400:#d7d7da;--color-theme-500:#b9b9bd;--color-theme-600:#89898e;--color-theme-700:#6d6d73;--color-theme-800:#5b5b61;--color-theme-900:#303037;--color-primary-200:rgba(93,43,255,0.05);--color-primary-300:rgba(93,43,255,0.1);--color-primary-400:rgba(93,43,255,0.25);--color-primary-500:rgba(93,43,255,0.5);--color-primary-600:rgba(93,43,255,0.75);--color-primary-700:#5d2bff;--color-primary-800:#4a21cd;--color-primary-900:#32178b;--color-secondary-200:rgba(93,43,255,0.05);--color-secondary-300:rgba(93,43,255,0.1);--color-secondary-400:rgba(93,43,255,0.25);--color-secondary-500:rgba(93,43,255,0.5);--color-secondary-600:rgba(93,43,255,0.75);--color-secondary-700:#5d2bff;--color-secondary-800:#4a21cd;--color-secondary-900:#32178b;--color-theme-transparent-200:rgba(36,36,76,0.04);--color-theme-transparent-300:rgba(48,48,55,0.1);--color-theme-transparent-400:rgba(48,48,55,0.2);--color-theme-transparent-500:rgba(48,48,55,0.34);--color-theme-transparent-600:rgba(48,48,55,0.57);--color-theme-transparent-700:rgba(48,48,55,0.7);--color-theme-transparent-800:rgba(48,48,55,0.8);--color-primary-opaque-300:#efeaff;--color-primary-opaque-400:#d6caff;--color-secondary-opaque-300:#efeaff;--color-secondary-opaque-400:#d6caff;--color-sucess-green:#64cd93;--color-pale-green:#c3e799;--color-progress-blue:#4182f2;--color-yellow:#FDF196;--color-yellow-darker:#948D5D;--color-yellow-lighter:#EBD429;--color-orange:#FBBB75;--color-orange-darker:#916C43;--color-orange-lighter:#E99841;--color-beige:#EAC2AD;--color-beige-darker:#877064;--color-beige-lighter:#B98A72;--color-pink:#FBD6E7;--color-pink-darker:#917C86;--color-pink-lighter:#E4A1C0;--color-coral:#FF9C9C;--color-coral-darker:#945A5A;--color-coral-lighter:#DB4545;--color-purple-dirty:#C49CB6;--color-purple-dirty-darker:#715A69;--color-purple-dirty-lighter:#B16E9A;--color-purple:#BEACF9;--color-purple-darker:#6E6390;--color-purple-lighter:#9B86DF;--color-blue-aqua:#BDF7FD;--color-blue-aqua-darker:#6D8F92;--color-blue-aqua-lighter:#7BDDE7;--color-blue-pale:#BEEAFF;--color-blue-pale-darker:#6E8794;--color-blue-pale-lighter:#92BFD4;--color-blue-sky:#A0CBFD;--color-blue-sky-darker:#5C7592;--color-blue-sky-lighter:#568CCB;--color-turquoise:#B9E4E0;--color-turquoise-darker:#6B8482;--color-turquoise-lighter:#70BFB8;--color-green-pale:#C3E799;--color-green-pale-darker:#718658;--color-green-pale-lighter:#80C333;--color-green-olive-drab:#98B57C;--color-green-olive-drab-darker:#647157;--color-green-olive-drab-lighter:#819F65;--color-gray-silver:#DDDDDD;--color-gray-silver-darker:#808080;--color-gray-silver-lighter:#ACACAC;--color-gray:#CACACA;--color-gray-darker:#757575;--color-gray-lighter:#7D7D7D;--body-bg-main:rgb(244,245,247);--body-bg-main-transparent:rgba(244,245,247,0);--page-paper-main:#ffffff;--border-primary:#d7d7da;--note-bg:#fff9f1;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.06),0 16px 16px 0 rgba(0,0,0,0.04),0 4px 4px 0 rgba(0,0,0,0.04),0 2px 2px 0 rgba(0,0,0,0.04);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.06),0 32px 32px 0 rgba(0,0,0,0.03),0 16px 16px 0 rgba(0,0,0,0.02),0 4px 4px 0 rgba(0,0,0,0.02),0 2px 2px 0 rgba(0,0,0,0.02);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.17);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.05),0 10px 15px -3px rgba(0,0,0,0.1);--shadow-tertiary-hover:0 4px 10px -2px rgba(0,0,0,0.1),0 12px 20px -3px rgba(0,0,0,0.2);--page-paper-main-shadow:rgba( 255,255,255,0 );--modal-background:rgba(244,245,247,0.6);--highlight-dark:rgba(0,0,0,0.03);--input-background-color:#ffffff;--ai-gradient:linear-gradient(135deg,#4da2ed,#9f69e5,#ec43d8,#f72222);--ai-gradient-lighter:linear-gradient( 135deg,rgba(77,162,237,0.1),rgba(159,105,229,0.1),rgba(236,67,216,0.1),rgba(230,10,10,0.1) );--red-alert:rgb(237,97,97);--warning:#ffcc6b;--only-white:#ffffff;--only-black:#000000;--ac-br-4:4px;--ac-br-6:6px;--ac-br-8:8px;--ac-br-rounded:999px;}.cupcake{--color-primary:#29bcdd;--color-secondary:#fe6fa7;--color-primary-200:rgba(41,188,221,0.07);--color-primary-300:rgba(41,188,221,0.12);--color-primary-400:rgba(41,188,221,0.26);--color-primary-500:rgba(41,188,221,0.52);--color-primary-600:rgba(41,188,221,0.75);--color-primary-700:#29bcdd;--color-primary-800:#219fbb;--color-primary-900:#1a768b;--color-secondary-200:rgba(254,111,167,0.07);--color-secondary-300:rgba(254,111,167,0.13);--color-secondary-400:rgba(254,111,167,0.27);--color-secondary-500:rgba(254,111,167,0.52);--color-secondary-600:rgba(254,111,167,0.75);--color-secondary-700:#fe6fa7;--color-secondary-800:#dd6091;--color-secondary-900:#ab496f;--color-primary-opaque-300:#e5f7fb;--color-primary-opaque-400:#c8eef6;--color-secondary-opaque-300:#ffecf4;--color-secondary-opaque-400:#ffd8e7;}.classic{--color-primary:#4182f2;--color-secondary:#4182f2;--color-primary-200:rgba(65,130,242,0.07);--color-primary-300:rgba(65,130,242,0.13);--color-primary-400:rgba(65,130,242,0.26);--color-primary-500:rgba(65,130,242,0.52);--color-primary-600:rgba(65,130,242,0.75);--color-primary-700:#4182f2;--color-primary-800:#356bc8;--color-primary-900:#244a8a;--color-secondary-200:rgba(65,130,242,0.07);--color-secondary-300:rgba(65,130,242,0.13);--color-secondary-400:rgba(65,130,242,0.26);--color-secondary-500:rgba(65,130,242,0.52);--color-secondary-600:rgba(65,130,242,0.75);--color-secondary-700:#4182f2;--color-secondary-800:#356bc8;--color-secondary-900:#244a8a;--color-primary-opaque-300:#e6effd;--color-primary-opaque-400:#cedffc;--color-secondary-opaque-300:#e6effd;--color-secondary-opaque-400:#cedffc;}.neon{--color-primary:#67ffc8;--color-secondary:#67ffc8;--color-theme-100:#000000;--color-theme-200:#31333e;--color-theme-300:#2b2d37;--color-theme-400:#1f2024;--color-theme-500:#6D6D73;--color-theme-600:#89898e;--color-theme-700:#b0b0b5;--color-theme-800:#dfdfe5;--color-theme-900:#ffffff;--color-primary-200:rgba(103,255,200,0.05);--color-primary-300:rgba(103,255,200,0.1);--color-primary-400:rgba(103,255,200,0.25);--color-primary-500:rgba(103,255,200,0.5);--color-primary-600:rgba(103,255,200,0.75);--color-primary-700:#67ffc8;--color-primary-800:#a5ffdf;--color-primary-900:#d0fdec;--color-secondary-200:rgba(103,255,200,0.05);--color-secondary-300:rgba(103,255,200,0.1);--color-secondary-400:rgba(103,255,200,0.25);--color-secondary-500:rgba(103,255,200,0.5);--color-secondary-600:rgba(103,255,200,0.75);--color-secondary-700:#67ffc8;--color-secondary-800:#a5ffdf;--color-secondary-900:#d0fdec;--color-theme-transparent-200:rgba(6,7,8,0.12);--color-theme-transparent-300:rgba(6,7,8,0.22);--color-theme-transparent-400:rgba(6,7,8,0.5);--color-theme-transparent-500:rgba(255,255,255,0.27);--color-theme-transparent-600:rgba(255,255,255,0.4);--color-theme-transparent-700:rgba(255,255,255,0.6);--color-theme-transparent-800:rgba(255,255,255,0.85);--color-primary-opaque-300:#3b4e51;--color-primary-opaque-400:#436b64;--color-secondary-opaque-300:#3b4e51;--color-secondary-opaque-400:#436b64;--body-bg-main:rgb(44,46,56);--body-bg-main-transparent:rgba(44,46,56,0);--page-paper-main:#373a44;--border-primary:#1f2024;--note-bg:#464545;--shadow-primary-hover:0 64px 64px 0 rgba(0,0,0,0.2),0 32px 32px 0 rgba(0,0,0,0.2),0 16px 16px 0 rgba(0,0,0,0.2),0 4px 4px 0 rgba(0,0,0,0.2),0 2px 2px 0 rgba(0,0,0,0.2);--shadow-primary:0 64px 64px 0 rgba(0,0,0,0.1),0 32px 32px 0 rgba(0,0,0,0.1),0 16px 16px 0 rgba(0,0,0,0.1),0 4px 4px 0 rgba(0,0,0,0.1),0 2px 2px 0 rgba(0,0,0,0.1);--shadow-secondary:0 4px 14px 0 rgba(0,0,0,0.3);--shadow-tertiary:0 4px 6px -2px rgba(0,0,0,0.1),0 10px 15px -3px rgba(0,0,0,0.15);--shadow-tertiary-hover:0 4px 12px -2px rgba(0,0,0,0.4),0 10px 30px -3px rgba(0,0,0,0.5);--page-paper-main-shadow:rgba( 55,58,68,0 );--modal-background:rgba(44,46,56,0.7);--highlight-dark:rgba(0,0,0,0.06);--input-background-color:#2c2e38;--only-white:#ffffff;--only-black:#000000;}html{color-scheme:light;}html{&.neon{color-scheme:dark;}}.ac-shadow,.ac-shadow--raised{&--lg{box-shadow:var(--shadow-primary);}&--sm{box-shadow:var(--shadow-tertiary);}}.ac-shadow--raised{&--lg{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-primary-hover);}}&--sm{transition:box-shadow 0.3s;&:hover{box-shadow:var(--shadow-tertiary-hover);}}}.ac-shadow-optimized--sm{position:relative;box-shadow:var(--shadow-tertiary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-tertiary);opacity:0;border-radius:var(--ac-br-6);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-shadow-optimized--lg{position:relative;box-shadow:var(--shadow-primary);&::before{position:absolute;top:0;left:0;width:100%;height:100%;content:\"\";box-shadow:var(--shadow-primary);opacity:0;border-radius:var(--ac-br-8);transition:opacity 0.3s ease;z-index:-1;}@media (hover:hover){&:hover::before{opacity:1;}}}.ac-border-radius{&-4{border-radius:var(--ac-br-4);}&-6{border-radius:var(--ac-br-6);}&-8{border-radius:var(--ac-br-8);}&-rounded{border-radius:var(--ac-br-rounded);}}.c-cooltip{position:relative;--cooltip-spacing:0.5rem;--cooltip-padding:0.25rem 0.625rem;--cooltip-max-width:12.5rem;--cooltip-transition-duration:0.15s,0.1s,0.15s;--cooltip-transition-delay:0.6s;--cooltip-timing:ease,ease,cubic-bezier(0.39,0.575,0.565,1);}.c-cooltip::after{pointer-events:none;content:attr(data-tooltip);position:absolute;color:#fff;opacity:0;background-color:rgba(0,0,0,0.9);border-radius:0.5rem;font-size:0.75rem;font-weight:500;line-height:1.3;max-width:var(--cooltip-max-width);padding:var(--cooltip-padding);text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.c-cooltip--top::after{bottom:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--right::after{left:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip--bottom::after{top:calc(100% + var(--cooltip-spacing));left:50%;transform:scale(0.85) translateX(-50%);transform-origin:0;}.c-cooltip--left::after{right:calc(100% + var(--cooltip-spacing));transform:scale(0.85);}.c-cooltip:disabled::after,[aria-pressed=\"true\"]::after{display:none;}@media (hover:hover){.c-cooltip--top:not(:focus):hover::after,.c-cooltip--bottom:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1) translateX(-50%);opacity:1;}.c-cooltip--right:not(:focus):hover::after,.c-cooltip--left:not(:focus):hover::after{transition-property:opacity,transform;transition-duration:var(--cooltip-transition-duration);transition-delay:var(--cooltip-transition-delay);transition-timing-function:var(--cooltip-timing);transform:scale(1);opacity:1;}}.c-date-picker--calendar{width:260px;padding:16px 0px 8px 0px;margin:auto;background-color:var(--page-paper-main);}"]);
 //# sourceMappingURL=GlobalStyle.js.map

package/dist/esm/components/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n    --color-pale-green: #c3e799;\n\n    --color-yellow: #FDF196;\n    --color-yellow-darker: #948D5D;\n    --color-yellow-lighter: #EBD429;\n    --color-orange: #FBBB75;\n    --color-orange-darker: #916C43;\n    --color-orange-lighter: #E99841;\n    --color-beige: #EAC2AD;\n    --color-beige-darker: #877064;\n    --color-beige-lighter: #B98A72;\n    --color-pink: #FBD6E7;\n    --color-pink-darker: #917C86;\n    --color-pink-lighter: #E4A1C0;\n    --color-coral: #FF9C9C;\n    --color-coral-darker: #945A5A;\n    --color-coral-lighter: #DB4545;\n    --color-purple-dirty: #C49CB6;\n    --color-purple-dirty-darker: #715A69;\n    --color-purple-dirty-lighter: #B16E9A;\n    --color-purple: #BEACF9;\n    --color-purple-darker: #6E6390;\n    --color-purple-lighter: #9B86DF;\n    --color-blue-aqua: #BDF7FD;\n    --color-blue-aqua-darker: #6D8F92;\n    --color-blue-aqua-lighter: #7BDDE7;\n    --color-blue-pale: #BEEAFF;\n    --color-blue-pale-darker: #6E8794;\n    --color-blue-pale-lighter: #92BFD4;\n    --color-blue-sky: #A0CBFD;\n    --color-blue-sky-darker: #5C7592;\n    --color-blue-sky-lighter: #568CCB;\n    --color-turquoise: #B9E4E0;\n    --color-turquoise-darker: #6B8482;\n    --color-turquoise-lighter: #70BFB8;\n    --color-green-pale: #C3E799;\n    --color-green-pale-darker: #718658;\n    --color-green-pale-lighter: #80C333;\n    --color-green-olive-drab: #98B57C;\n    --color-green-olive-drab-darker: #647157;\n    --color-green-olive-drab-lighter: #819F65;\n    --color-gray-silver: #DDDDDD;\n    --color-gray-silver-darker: #808080;\n    --color-gray-silver-lighter: #ACACAC;\n    --color-gray: #CACACA;\n    --color-gray-darker: #757575;\n    --color-gray-lighter: #7D7D7D;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n    \n    --ai-gradient-lighter: linear-gradient(\n      135deg,\n      rgba(77, 162, 237, 0.1),\n      rgba(159, 105, 229, 0.1),\n      rgba(236, 67, 216, 0.1),\n      rgba(230, 10, 10, 0.1)\n    );\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  html {\n    color-scheme: light;\n  }\n\n  html {\n    &.neon {\n      color-scheme: dark;\n    }\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n    /*\n      * Prefer scoped variables in this case.\n      * This lines of CSS should be scoped too.\n      */\n\n    --cooltip-spacing: 0.5rem;\n    --cooltip-padding: 0.25rem 0.625rem;\n    --cooltip-max-width: 12.5rem;\n\n    --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n    --cooltip-transition-delay: 0.6s;\n    --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n  }\n\n  .c-cooltip::after {\n    /*\n      * will-change is intended to be used as a last resort,\n      * in order to try to deal with existing performance problems.\n      * It should not be used to anticipate performance problems.\n      * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n      *\n      * will-change: transform, opacity\n      */\n    pointer-events: none;\n    content: attr(data-tooltip);\n    position: absolute;\n    color: #fff;\n    opacity: 0;\n    background-color: rgba(0, 0, 0, 0.9);\n    border-radius: 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.3;\n    max-width: var(--cooltip-max-width);\n    padding: var(--cooltip-padding);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .c-cooltip--top::after {\n    bottom: calc(100% + var(--cooltip-spacing));\n    left: 50%;\n    transform: scale(0.85) translateX(-50%);\n    transform-origin: 0;\n  }\n\n  .c-cooltip--right::after {\n    left: calc(100% + var(--cooltip-spacing));\n    transform: scale(0.85);\n  }\n\n  .c-cooltip--bottom::after {\n    top: calc(100% + var(--cooltip-spacing));\n    left: 50%;\n    transform: scale(0.85) translateX(-50%);\n    transform-origin: 0;\n  }\n\n  .c-cooltip--left::after {\n    right: calc(100% + var(--cooltip-spacing));\n    transform: scale(0.85);\n  }\n\n  /*\n  * Make sure that disabled and aria pressed\n  * items do not have tooltips available.\n  */\n  .c-cooltip:disabled::after,\n  [aria-pressed=\"true\"]::after {\n    display: none;\n  }\n\n  /*\n  *\n  * Only use hover when is available .\n  * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n  */\n  @media (hover: hover) {\n    /*\n      * Here we maybe have a complex selector but actually it's not.\n      * We simply asks here to show tooltip only on hover.\n      * Focused elements (in this case, clicked elements) should hide the tooltip.\n      */\n    .c-cooltip--top:not(:focus):hover::after,\n    .c-cooltip--bottom:not(:focus):hover::after {\n      transition-property: opacity, transform;\n      transition-duration: var(--cooltip-transition-duration);\n      transition-delay: var(--cooltip-transition-delay);\n      transition-timing-function: var(--cooltip-timing);\n      transform: scale(1) translateX(-50%);\n      opacity: 1;\n    }\n\n    /*\n      *\n      * This is not code duplication!\n      * Transform properties are tricky to animate and values\n      * are not the same depending on the tooltip position.\n      *\n      * Animating only one transform, eg. scale(1) will\n      * override all previously set transforms, eg. translateY.\n      * So we need to always chain them.\n      * eg. transform: scale(1) translateY(-50%) etc...\n      */\n\n    .c-cooltip--right:not(:focus):hover::after,\n    .c-cooltip--left:not(:focus):hover::after {\n      transition-property: opacity, transform;\n      transition-duration: var(--cooltip-transition-duration);\n      transition-delay: var(--cooltip-transition-delay);\n      transition-timing-function: var(--cooltip-timing);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .c-date-picker--calendar {\n    width: 260px;\n    padding: 16px 0px 8px 0px;\n    margin: auto;\n    background-color: var(--page-paper-main);\n  }\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,OAAO,MAAMC,WAAW,GAAGD,iBAAiB,qsVAqhB3C","ignoreList":[]}
+{"version":3,"file":"GlobalStyle.js","names":["createGlobalStyle","GlobalStyle"],"sources":["../../../src/components/GlobalStyle.ts"],"sourcesContent":["import { createGlobalStyle } from \"styled-components\";\n\nexport const GlobalStyle = createGlobalStyle`\n  :root {\n    --color-primary: #5d2bff;\n    --color-secondary: #5d2bff;\n\n    --color-theme-100: #ffffff;\n    --color-theme-200: #f6f6f9;\n    --color-theme-300: #ebebee;\n    --color-theme-400: #d7d7da;\n    --color-theme-500: #b9b9bd;\n    --color-theme-600: #89898e;\n    --color-theme-700: #6d6d73;\n    --color-theme-800: #5b5b61;\n    --color-theme-900: #303037;\n\n    --color-primary-200: rgba(93, 43, 255, 0.05);\n    --color-primary-300: rgba(93, 43, 255, 0.1);\n    --color-primary-400: rgba(93, 43, 255, 0.25);\n    --color-primary-500: rgba(93, 43, 255, 0.5);\n    --color-primary-600: rgba(93, 43, 255, 0.75);\n    --color-primary-700: #5d2bff;\n    --color-primary-800: #4a21cd;\n    --color-primary-900: #32178b;\n\n    --color-secondary-200: rgba(93, 43, 255, 0.05);\n    --color-secondary-300: rgba(93, 43, 255, 0.1);\n    --color-secondary-400: rgba(93, 43, 255, 0.25);\n    --color-secondary-500: rgba(93, 43, 255, 0.5);\n    --color-secondary-600: rgba(93, 43, 255, 0.75);\n    --color-secondary-700: #5d2bff;\n    --color-secondary-800: #4a21cd;\n    --color-secondary-900: #32178b;\n\n    --color-theme-transparent-200: rgba(36,36,76,0.04);\n    --color-theme-transparent-300: rgba(48,48,55,0.1);\n    --color-theme-transparent-400: rgba(48,48,55,0.2);\n    --color-theme-transparent-500: rgba(48,48,55,0.34);\n    --color-theme-transparent-600: rgba(48,48,55,0.57);\n    --color-theme-transparent-700: rgba(48,48,55,0.7);\n    --color-theme-transparent-800: rgba(48,48,55,0.8);\n\n    --color-primary-opaque-300: #efeaff;\n    --color-primary-opaque-400: #d6caff;\n\n    --color-secondary-opaque-300: #efeaff;\n    --color-secondary-opaque-400: #d6caff;\n\n    --color-sucess-green: #64cd93;\n    --color-pale-green: #c3e799;\n    --color-progress-blue: #4182f2;\n\n    --color-yellow: #FDF196;\n    --color-yellow-darker: #948D5D;\n    --color-yellow-lighter: #EBD429;\n    --color-orange: #FBBB75;\n    --color-orange-darker: #916C43;\n    --color-orange-lighter: #E99841;\n    --color-beige: #EAC2AD;\n    --color-beige-darker: #877064;\n    --color-beige-lighter: #B98A72;\n    --color-pink: #FBD6E7;\n    --color-pink-darker: #917C86;\n    --color-pink-lighter: #E4A1C0;\n    --color-coral: #FF9C9C;\n    --color-coral-darker: #945A5A;\n    --color-coral-lighter: #DB4545;\n    --color-purple-dirty: #C49CB6;\n    --color-purple-dirty-darker: #715A69;\n    --color-purple-dirty-lighter: #B16E9A;\n    --color-purple: #BEACF9;\n    --color-purple-darker: #6E6390;\n    --color-purple-lighter: #9B86DF;\n    --color-blue-aqua: #BDF7FD;\n    --color-blue-aqua-darker: #6D8F92;\n    --color-blue-aqua-lighter: #7BDDE7;\n    --color-blue-pale: #BEEAFF;\n    --color-blue-pale-darker: #6E8794;\n    --color-blue-pale-lighter: #92BFD4;\n    --color-blue-sky: #A0CBFD;\n    --color-blue-sky-darker: #5C7592;\n    --color-blue-sky-lighter: #568CCB;\n    --color-turquoise: #B9E4E0;\n    --color-turquoise-darker: #6B8482;\n    --color-turquoise-lighter: #70BFB8;\n    --color-green-pale: #C3E799;\n    --color-green-pale-darker: #718658;\n    --color-green-pale-lighter: #80C333;\n    --color-green-olive-drab: #98B57C;\n    --color-green-olive-drab-darker: #647157;\n    --color-green-olive-drab-lighter: #819F65;\n    --color-gray-silver: #DDDDDD;\n    --color-gray-silver-darker: #808080;\n    --color-gray-silver-lighter: #ACACAC;\n    --color-gray: #CACACA;\n    --color-gray-darker: #757575;\n    --color-gray-lighter: #7D7D7D;\n\n    --body-bg-main: rgb(244, 245, 247);\n    --body-bg-main-transparent: rgba(244, 245, 247, 0);\n    --page-paper-main: #ffffff;\n    --border-primary: #d7d7da;\n\n    --note-bg: #fff9f1;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.06), 0 16px 16px 0 rgba(0, 0, 0, 0.04),\n      0 4px 4px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.04);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.06),\n      0 32px 32px 0 rgba(0, 0, 0, 0.03), 0 16px 16px 0 rgba(0, 0, 0, 0.02),\n      0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 2px 2px 0 rgba(0, 0, 0, 0.02);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.17);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.05),\n      0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    --shadow-tertiary-hover: 0 4px 10px -2px rgba(0, 0, 0, 0.1),\n      0 12px 20px -3px rgba(0, 0, 0, 0.2);\n\n    --page-paper-main-shadow: rgba(\n      255,\n      255,\n      255,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(244, 245, 247, 0.6);\n\n    --highlight-dark: rgba(0, 0, 0, 0.03);\n\n    --input-background-color: #ffffff;\n\n    --ai-gradient: linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222);\n    \n    --ai-gradient-lighter: linear-gradient(\n      135deg,\n      rgba(77, 162, 237, 0.1),\n      rgba(159, 105, 229, 0.1),\n      rgba(236, 67, 216, 0.1),\n      rgba(230, 10, 10, 0.1)\n    );\n\n    --red-alert: rgb(237, 97, 97);\n\n    --warning: #ffcc6b;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n\n    --ac-br-4: 4px;\n\n    --ac-br-6: 6px;\n\n    --ac-br-8: 8px;\n\n    --ac-br-rounded: 999px;\n  }\n\n  .cupcake {\n    --color-primary: #29bcdd;\n    --color-secondary: #fe6fa7;\n\n    --color-primary-200: rgba(41, 188, 221, 0.07);\n    --color-primary-300: rgba(41, 188, 221, 0.12);\n    --color-primary-400: rgba(41, 188, 221, 0.26);\n    --color-primary-500: rgba(41, 188, 221, 0.52);\n    --color-primary-600: rgba(41, 188, 221, 0.75);\n    --color-primary-700: #29bcdd;\n    --color-primary-800: #219fbb;\n    --color-primary-900: #1a768b;\n\n    --color-secondary-200: rgba(254, 111, 167, 0.07);\n    --color-secondary-300: rgba(254, 111, 167, 0.13);\n    --color-secondary-400: rgba(254, 111, 167, 0.27);\n    --color-secondary-500: rgba(254, 111, 167, 0.52);\n    --color-secondary-600: rgba(254, 111, 167, 0.75);\n    --color-secondary-700: #fe6fa7;\n    --color-secondary-800: #dd6091;\n    --color-secondary-900: #ab496f;\n\n    --color-primary-opaque-300: #e5f7fb;\n    --color-primary-opaque-400: #c8eef6;\n\n    --color-secondary-opaque-300: #ffecf4;\n    --color-secondary-opaque-400: #ffd8e7;\n  }\n\n  .classic {\n    --color-primary: #4182f2;\n    --color-secondary: #4182f2;\n\n    --color-primary-200: rgba(65, 130, 242, 0.07);\n    --color-primary-300: rgba(65, 130, 242, 0.13);\n    --color-primary-400: rgba(65, 130, 242, 0.26);\n    --color-primary-500: rgba(65, 130, 242, 0.52);\n    --color-primary-600: rgba(65, 130, 242, 0.75);\n    --color-primary-700: #4182f2;\n    --color-primary-800: #356bc8;\n    --color-primary-900: #244a8a;\n\n    --color-secondary-200: rgba(65, 130, 242, 0.07);\n    --color-secondary-300: rgba(65, 130, 242, 0.13);\n    --color-secondary-400: rgba(65, 130, 242, 0.26);\n    --color-secondary-500: rgba(65, 130, 242, 0.52);\n    --color-secondary-600: rgba(65, 130, 242, 0.75);\n    --color-secondary-700: #4182f2;\n    --color-secondary-800: #356bc8;\n    --color-secondary-900: #244a8a;\n\n    --color-primary-opaque-300: #e6effd;\n    --color-primary-opaque-400: #cedffc;\n\n    --color-secondary-opaque-300: #e6effd;\n    --color-secondary-opaque-400: #cedffc;\n  }\n\n  .neon {\n    --color-primary: #67ffc8;\n    --color-secondary: #67ffc8;\n\n    --color-theme-100: #000000;\n    --color-theme-200: #31333e;\n    --color-theme-300: #2b2d37;\n    --color-theme-400: #1f2024;\n    --color-theme-500: #6D6D73;\n    --color-theme-600: #89898e;\n    --color-theme-700: #b0b0b5;\n    --color-theme-800: #dfdfe5;\n    --color-theme-900: #ffffff;\n\n    --color-primary-200: rgba(103, 255, 200, 0.05);\n    --color-primary-300: rgba(103, 255, 200, 0.1);\n    --color-primary-400: rgba(103, 255, 200, 0.25);\n    --color-primary-500: rgba(103, 255, 200, 0.5);\n    --color-primary-600: rgba(103, 255, 200, 0.75);\n    --color-primary-700: #67ffc8;\n    --color-primary-800: #a5ffdf;\n    --color-primary-900: #d0fdec;\n\n    --color-secondary-200: rgba(103, 255, 200, 0.05);\n    --color-secondary-300: rgba(103, 255, 200, 0.1);\n    --color-secondary-400: rgba(103, 255, 200, 0.25);\n    --color-secondary-500: rgba(103, 255, 200, 0.5);\n    --color-secondary-600: rgba(103, 255, 200, 0.75);\n    --color-secondary-700: #67ffc8;\n    --color-secondary-800: #a5ffdf;\n    --color-secondary-900: #d0fdec;\n\n    --color-theme-transparent-200: rgba(6,7,8,0.12);\n    --color-theme-transparent-300: rgba(6,7,8,0.22);\n    --color-theme-transparent-400: rgba(6,7,8,0.5);\n    --color-theme-transparent-500: rgba(255,255,255,0.27);\n    --color-theme-transparent-600: rgba(255,255,255,0.4);\n    --color-theme-transparent-700: rgba(255,255,255,0.6);\n    --color-theme-transparent-800: rgba(255,255,255,0.85);\n\n    --color-primary-opaque-300: #3b4e51;\n    --color-primary-opaque-400: #436b64;\n\n    --color-secondary-opaque-300: #3b4e51;\n    --color-secondary-opaque-400: #436b64;\n\n    --body-bg-main: rgb(44, 46, 56);\n    --body-bg-main-transparent: rgba(44, 46, 56, 0);\n    --page-paper-main: #373a44;\n    --border-primary: #1f2024;\n\n    --note-bg: #464545;\n\n    --shadow-primary-hover: 0 64px 64px 0 rgba(0, 0, 0, 0.2),\n      0 32px 32px 0 rgba(0, 0, 0, 0.2), 0 16px 16px 0 rgba(0, 0, 0, 0.2),\n      0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);\n    --shadow-primary: 0 64px 64px 0 rgba(0, 0, 0, 0.1),\n      0 32px 32px 0 rgba(0, 0, 0, 0.1), 0 16px 16px 0 rgba(0, 0, 0, 0.1),\n      0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);\n\n    --shadow-secondary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);\n\n    --shadow-tertiary: 0 4px 6px -2px rgba(0, 0, 0, 0.1),\n      0 10px 15px -3px rgba(0, 0, 0, 0.15);\n    --shadow-tertiary-hover: 0 4px 12px -2px rgba(0, 0, 0, 0.4),\n      0 10px 30px -3px rgba(0, 0, 0, 0.5);\n\n    --page-paper-main-shadow: rgba(\n      55,\n      58,\n      68,\n      0\n    ); /* Shadow list shadow for page paper main */\n\n    --modal-background: rgba(44, 46, 56, 0.7);\n\n    --highlight-dark: rgba(0, 0, 0, 0.06);\n\n    --input-background-color: #2c2e38;\n\n    --only-white: #ffffff;\n\n    --only-black: #000000;\n  }\n\n  html {\n    color-scheme: light;\n  }\n\n  html {\n    &.neon {\n      color-scheme: dark;\n    }\n  }\n\n  .ac-shadow,\n  .ac-shadow--raised {\n    &--lg {\n      box-shadow: var(--shadow-primary);\n    }\n    &--sm {\n      box-shadow: var(--shadow-tertiary);\n    }\n  }\n\n  .ac-shadow--raised {\n    &--lg {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-primary-hover);\n      }\n    }\n    &--sm {\n      transition: box-shadow 0.3s;\n      &:hover {\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    }\n  }\n\n  .ac-shadow-optimized--sm {\n    position: relative;\n    box-shadow: var(--shadow-tertiary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-tertiary);\n      opacity: 0;\n      border-radius: var(--ac-br-6);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-shadow-optimized--lg {\n    position: relative;\n    box-shadow: var(--shadow-primary);\n\n    &::before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      content: \"\";\n      box-shadow: var(--shadow-primary);\n      opacity: 0;\n      border-radius: var(--ac-br-8);\n      transition: opacity 0.3s ease;\n      z-index: -1;\n    }\n\n    @media (hover: hover) {\n      &:hover::before {\n        opacity: 1;\n      }\n    }\n  }\n\n  .ac-border-radius {\n    &-4 {\n      border-radius: var(--ac-br-4);\n    }\n\n    &-6 {\n      border-radius: var(--ac-br-6);\n    }\n\n    &-8 {\n      border-radius: var(--ac-br-8);\n    }\n\n    &-rounded {\n      border-radius: var(--ac-br-rounded);\n    }\n  }\n\n\n  // CSS Tooltip ::after content: data-tooltip\n\n  .c-cooltip {\n  position: relative;\n\n    /*\n      * Prefer scoped variables in this case.\n      * This lines of CSS should be scoped too.\n      */\n\n    --cooltip-spacing: 0.5rem;\n    --cooltip-padding: 0.25rem 0.625rem;\n    --cooltip-max-width: 12.5rem;\n\n    --cooltip-transition-duration: 0.15s, 0.1s, 0.15s;\n    --cooltip-transition-delay: 0.6s;\n    --cooltip-timing: ease, ease, cubic-bezier(0.39, 0.575, 0.565, 1);\n  }\n\n  .c-cooltip::after {\n    /*\n      * will-change is intended to be used as a last resort,\n      * in order to try to deal with existing performance problems.\n      * It should not be used to anticipate performance problems.\n      * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change\n      *\n      * will-change: transform, opacity\n      */\n    pointer-events: none;\n    content: attr(data-tooltip);\n    position: absolute;\n    color: #fff;\n    opacity: 0;\n    background-color: rgba(0, 0, 0, 0.9);\n    border-radius: 0.5rem;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.3;\n    max-width: var(--cooltip-max-width);\n    padding: var(--cooltip-padding);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .c-cooltip--top::after {\n    bottom: calc(100% + var(--cooltip-spacing));\n    left: 50%;\n    transform: scale(0.85) translateX(-50%);\n    transform-origin: 0;\n  }\n\n  .c-cooltip--right::after {\n    left: calc(100% + var(--cooltip-spacing));\n    transform: scale(0.85);\n  }\n\n  .c-cooltip--bottom::after {\n    top: calc(100% + var(--cooltip-spacing));\n    left: 50%;\n    transform: scale(0.85) translateX(-50%);\n    transform-origin: 0;\n  }\n\n  .c-cooltip--left::after {\n    right: calc(100% + var(--cooltip-spacing));\n    transform: scale(0.85);\n  }\n\n  /*\n  * Make sure that disabled and aria pressed\n  * items do not have tooltips available.\n  */\n  .c-cooltip:disabled::after,\n  [aria-pressed=\"true\"]::after {\n    display: none;\n  }\n\n  /*\n  *\n  * Only use hover when is available .\n  * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover\n  */\n  @media (hover: hover) {\n    /*\n      * Here we maybe have a complex selector but actually it's not.\n      * We simply asks here to show tooltip only on hover.\n      * Focused elements (in this case, clicked elements) should hide the tooltip.\n      */\n    .c-cooltip--top:not(:focus):hover::after,\n    .c-cooltip--bottom:not(:focus):hover::after {\n      transition-property: opacity, transform;\n      transition-duration: var(--cooltip-transition-duration);\n      transition-delay: var(--cooltip-transition-delay);\n      transition-timing-function: var(--cooltip-timing);\n      transform: scale(1) translateX(-50%);\n      opacity: 1;\n    }\n\n    /*\n      *\n      * This is not code duplication!\n      * Transform properties are tricky to animate and values\n      * are not the same depending on the tooltip position.\n      *\n      * Animating only one transform, eg. scale(1) will\n      * override all previously set transforms, eg. translateY.\n      * So we need to always chain them.\n      * eg. transform: scale(1) translateY(-50%) etc...\n      */\n\n    .c-cooltip--right:not(:focus):hover::after,\n    .c-cooltip--left:not(:focus):hover::after {\n      transition-property: opacity, transform;\n      transition-duration: var(--cooltip-transition-duration);\n      transition-delay: var(--cooltip-transition-delay);\n      transition-timing-function: var(--cooltip-timing);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  .c-date-picker--calendar {\n    width: 260px;\n    padding: 16px 0px 8px 0px;\n    margin: auto;\n    background-color: var(--page-paper-main);\n  }\n`;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,mBAAmB;AAErD,OAAO,MAAMC,WAAW,GAAGD,iBAAiB,muVAshB3C","ignoreList":[]}

package/dist/esm/components/StackedCard/Glyphs.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+/**
+ * StackedCard chrome glyphs.
+ *
+ * These are part of the card's own chrome — they act on the CARD (collapse the
+ * cover, remove the cover, resize the card), never on the entity a card
+ * represents. They ship with the component rather than coming from the icon
+ * collection so a facade never has to re-pick them and every stacked card
+ * reads the same.
+ */
+/** Collapse the cover down to its thin strip. */
+export declare const StackedCardCollapseGlyph: () => ReactElement;
+/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */
+export declare const StackedCardExpandGlyph: () => ReactElement;
+/** Drop the cover entirely. */
+export declare const StackedCardRemoveCoverGlyph: () => ReactElement;
+/** The bottom-right resize grip. */
+export declare const StackedCardResizeHandleGlyph: () => ReactElement;
+//# sourceMappingURL=Glyphs.d.ts.map

package/dist/esm/components/StackedCard/Glyphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyphs.d.ts","sourceRoot":"","sources":["../../../../src/components/StackedCard/Glyphs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;;;GAQG;AAEH,iDAAiD;AACjD,eAAO,MAAM,wBAAwB,QAAO,YAU3C,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,QAAO,YAUzC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,2BAA2B,QAAO,YAkB9C,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,4BAA4B,QAAO,YAe/C,CAAC"}

package/dist/esm/components/StackedCard/Glyphs.js

@@ -0,0 +1,72 @@
+import React from "react";
+
+/**
+ * StackedCard chrome glyphs.
+ *
+ * These are part of the card's own chrome — they act on the CARD (collapse the
+ * cover, remove the cover, resize the card), never on the entity a card
+ * represents. They ship with the component rather than coming from the icon
+ * collection so a facade never has to re-pick them and every stacked card
+ * reads the same.
+ */
+
+/** Collapse the cover down to its thin strip. */
+export const StackedCardCollapseGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M6.5 2.5v4h-4M9.5 13.5v-4h4",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
+/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */
+export const StackedCardExpandGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M2.5 6.5v-4h4M13.5 9.5v4h-4",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
+/** Drop the cover entirely. */
+export const StackedCardRemoveCoverGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "2.25",
+  y: "3.75",
+  width: "11.5",
+  height: "8.5",
+  rx: "1.5",
+  stroke: "currentColor",
+  strokeWidth: "1.5"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M6 9.5L10 6M10 9.5L6 6",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}));
+
+/** The bottom-right resize grip. */
+export const StackedCardResizeHandleGlyph = () => /*#__PURE__*/React.createElement("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 6v6H6M12 9.5L9.5 12",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round"
+}));
+//# sourceMappingURL=Glyphs.js.map

package/dist/esm/components/StackedCard/Glyphs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Glyphs.js","names":["React","StackedCardCollapseGlyph","createElement","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","StackedCardExpandGlyph","StackedCardRemoveCoverGlyph","x","y","width","height","rx","StackedCardResizeHandleGlyph"],"sources":["../../../../src/components/StackedCard/Glyphs.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\n/**\n * StackedCard chrome glyphs.\n *\n * These are part of the card's own chrome — they act on the CARD (collapse the\n * cover, remove the cover, resize the card), never on the entity a card\n * represents. They ship with the component rather than coming from the icon\n * collection so a facade never has to re-pick them and every stacked card\n * reads the same.\n */\n\n/** Collapse the cover down to its thin strip. */\nexport const StackedCardCollapseGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M6.5 2.5v4h-4M9.5 13.5v-4h4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** Expand a collapsed cover — the inverse of collapse, shown on the strip. */\nexport const StackedCardExpandGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <path\n      d=\"M2.5 6.5v-4h4M13.5 9.5v4h-4\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n\n/** Drop the cover entirely. */\nexport const StackedCardRemoveCoverGlyph = (): ReactElement => (\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n    <rect\n      x=\"2.25\"\n      y=\"3.75\"\n      width=\"11.5\"\n      height=\"8.5\"\n      rx=\"1.5\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    />\n    <path\n      d=\"M6 9.5L10 6M10 9.5L6 6\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\n/** The bottom-right resize grip. */\nexport const StackedCardResizeHandleGlyph = (): ReactElement => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 6v6H6M12 9.5L9.5 12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,kBACtCD,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,6BAA6B;EAC/BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CACE,CACN;;AAED;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAAA,kBACpCV,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,6BAA6B;EAC/BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC;AAAO,CACvB,CACE,CACN;;AAED;AACA,OAAO,MAAME,2BAA2B,GAAGA,CAAA,kBACzCX,KAAA,CAAAE,aAAA;EAAKC,OAAO,EAAC,WAAW;EAACC,IAAI,EAAC,MAAM;EAAC,eAAY;AAAM,gBACrDJ,KAAA,CAAAE,aAAA;EACEU,CAAC,EAAC,MAAM;EACRC,CAAC,EAAC,MAAM;EACRC,KAAK,EAAC,MAAM;EACZC,MAAM,EAAC,KAAK;EACZC,EAAE,EAAC,KAAK;EACRV,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC;AAAK,CAClB,CAAC,eACFP,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,wBAAwB;EAC1BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC;AAAO,CACtB,CACE,CACN;;AAED;AACA,OAAO,MAAMS,4BAA4B,GAAGA,CAAA,kBAC1CjB,KAAA,CAAAE,aAAA;EACEY,KAAK,EAAC,IAAI;EACVC,MAAM,EAAC,IAAI;EACXZ,OAAO,EAAC,WAAW;EACnBC,IAAI,EAAC,MAAM;EACX,eAAY;AAAM,gBAElBJ,KAAA,CAAAE,aAAA;EACEG,CAAC,EAAC,yBAAyB;EAC3BC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC;AAAO,CACtB,CACE,CACN","ignoreList":[]}