ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../src/ds/display/Calendar.tsx"],"sourcesContent":["import { Calendar as AntCalendar } from 'antd';\nimport type { CalendarProps as AntCalendarProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { Select } from '../forms/Select';\nimport { Segmented } from './Segmented';\nimport { Tooltip } from './Tooltip';\n\nexport type DSCalendarVariant = 'scheduling' | 'availability' | 'clinical' | 'compact';\nexport type DSCalendarDensity = 'comfortable' | 'compact';\nexport type DSCalendarEventStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral';\n\nexport type DSCalendarEvent = {\n  /** Day tied to this event marker. */\n  date: string | Dayjs;\n  /** Primary event label shown in the calendar cell. */\n  label: ReactNode;\n  /** Optional secondary line for owner/time details. */\n  meta?: ReactNode;\n  /** Semantic event status for marker color. */\n  dsStatus?: DSCalendarEventStatus;\n};\n\ntype AntCalendarPropsDayjs = AntCalendarProps<Dayjs>;\ntype RestrictedAntVisualProps = 'cellRender' | 'dateCellRender' | 'dateFullCellRender' | 'fullscreen' | 'headerRender' | 'showWeek';\ntype CalendarMode = 'month' | 'year';\n\nexport type CalendarProps = Omit<AntCalendarPropsDayjs, RestrictedAntVisualProps> & {\n  /** Semantic DS calendar variant. */\n  dsVariant?: DSCalendarVariant;\n  /** Optional density override. */\n  dsDensity?: DSCalendarDensity;\n  /** Toggle Ant fullscreen mode while preserving DS styling. */\n  dsFullscreen?: boolean;\n  /** Optional week-number display control. */\n  dsShowWeek?: boolean;\n  /** Calendar events rendered in the day cells. */\n  dsEvents?: DSCalendarEvent[];\n  /** Maximum visible events per day cell before overflow indicator. */\n  dsEventLimit?: number;\n};\n\ntype DSCalendarComponent = FC<CalendarProps> & {\n  generateCalendar?: unknown;\n};\n\nconst STYLE_ID = 'ds-calendar-styles';\nconst DS_CALENDAR_CLASS = 'ds-calendar';\n\nconst DEFAULTS_BY_VARIANT: Record<DSCalendarVariant, {\n  density: DSCalendarDensity;\n  fullscreen: boolean;\n  showWeek: boolean;\n}> = {\n  scheduling: { density: 'comfortable', fullscreen: false, showWeek: false },\n  availability: { density: 'comfortable', fullscreen: false, showWeek: true },\n  clinical: { density: 'comfortable', fullscreen: true, showWeek: false },\n  compact: { density: 'compact', fullscreen: false, showWeek: false },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { calendar } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ant-picker-calendar.ds-calendar {\n      font-family: 'Nunito', sans-serif;\n      color: ${calendar.text.day};\n      background: ${calendar.surface.default};\n      border: 1px solid ${calendar.border.grid};\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .ant-picker-calendar .ant-picker-calendar-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      height: auto;\n      min-height: 56px;\n      border-bottom: 1px solid ${calendar.border.grid};\n      background: ${calendar.surface.subtle};\n      padding: 12px 16px;\n    }\n\n    /* Hide Ant default header controls */\n    .ant-picker-calendar-header .ant-picker-calendar-year-select,\n    .ant-picker-calendar-header .ant-picker-calendar-month-select,\n    .ant-picker-calendar-header .ant-picker-calendar-mode-switch {\n      display: none !important;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-wrapper {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 12px;\n      flex: 1;\n      margin: 8px 12px;\n      padding: 4px 0;\n      box-sizing: border-box;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-title {\n      flex: 0 1 auto;\n      color: ${calendar.text.heading};\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 22px;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-header-select {\n      width: var(--ds-calendar-header-select-width, 92px);\n    }\n\n    .ant-picker-calendar .ds-calendar-header-select.ds-calendar-header-select--year {\n      --ds-calendar-header-select-width: 96px;\n    }\n\n    .ant-picker-calendar .ant-picker-content th {\n      color: ${calendar.text.muted};\n      font-size: 12px;\n      font-weight: 700;\n      letter-spacing: 0.04em;\n      text-transform: uppercase;\n    }\n\n    .ant-picker-calendar .ant-picker-content td {\n      border-top: 1px solid ${calendar.border.grid};\n    }\n\n    .ant-picker-calendar .ant-picker-cell .ant-picker-cell-inner {\n      display: block;\n      width: 100%;\n      min-height: var(--ds-calendar-cell-min-height);\n      padding: var(--ds-calendar-cell-padding);\n      border: 1px solid transparent;\n      border-radius: 6px;\n      transition: none !important;\n      box-sizing: border-box;\n    }\n\n    .ant-picker-calendar .ant-picker-cell .ant-picker-calendar-date {\n      width: 100%;\n      margin: 0;\n    }\n\n    .ant-picker-calendar .ant-picker-calendar-date-content {\n      text-align: left;\n    }\n\n    .ant-picker-calendar .ds-calendar-cell-content {\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      min-width: 0;\n      text-align: left;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-cell-inner,\n    .ant-picker-calendar .ant-picker-cell-inner:hover {\n      background: ${calendar.surface.emphasized} !important;\n      border-color: ${calendar.border.selected} !important;\n      color: ${calendar.text.day} !important;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-date-value,\n    .ant-picker-calendar .ant-picker-cell-selected .ant-picker-calendar-year-value {\n      color: ${calendar.text.current} !important;\n    }\n\n    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-date-value,\n    .ant-picker-calendar .ant-picker-cell-today .ant-picker-calendar-year-value {\n      color: ${calendar.text.current};\n      font-weight: 700;\n    }\n\n    .ant-picker-calendar .ds-calendar-events {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      margin-top: 4px;\n    }\n\n    .ant-picker-calendar .ds-calendar-event {\n      display: flex;\n      align-items: flex-start;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ant-picker-calendar .ds-calendar-event-marker {\n      width: var(--ds-calendar-marker-size);\n      height: var(--ds-calendar-marker-size);\n      min-width: var(--ds-calendar-marker-size);\n      min-height: var(--ds-calendar-marker-size);\n      border-radius: 999px;\n      margin-top: 4px;\n      background: var(--ds-calendar-event-color);\n    }\n\n    .ant-picker-calendar .ds-calendar-event-content {\n      min-width: 0;\n      font-size: var(--ds-calendar-title-font-size);\n      line-height: 1.25;\n      color: ${calendar.text.day};\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ant-picker-calendar .ds-calendar-event-meta {\n      margin-top: 1px;\n      font-size: var(--ds-calendar-meta-font-size);\n      line-height: 1.2;\n      color: ${calendar.text.muted};\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .ant-picker-calendar .ds-calendar-overflow-trigger {\n      display: inline-flex;\n      width: fit-content;\n      max-width: 100%;\n      border: 0;\n      background: transparent;\n      padding: 0;\n      color: ${calendar.text.current};\n      font: inherit;\n      cursor: help;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--compact .ant-picker-calendar-header {\n      padding: 6px 10px;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--compact .ds-calendar-header-title {\n      font-size: 14px;\n      line-height: 18px;\n    }\n\n    .${DS_CALENDAR_CLASS}.ant-picker-calendar.ds-calendar--clinical {\n      border-color: ${calendar.border.focus};\n      box-shadow: 0 0 0 1px ${calendar.border.focus};\n    }\n  `;\n}\n\nconst MONTH_OPTIONS = Array.from({ length: 12 }, (_, index) => ({\n  value: index,\n  label: dayjs().month(index).format('MMM'),\n}));\n\nfunction resolveDensity(dsVariant: DSCalendarVariant, dsDensity: DSCalendarDensity | undefined): DSCalendarDensity {\n  return dsDensity ?? DEFAULTS_BY_VARIANT[dsVariant].density;\n}\n\nfunction normalizeDateKey(date: string | Dayjs) {\n  return dayjs(date).format('YYYY-MM-DD');\n}\n\nfunction eventsByDate(events: DSCalendarEvent[] | undefined) {\n  const byDate = new Map<string, DSCalendarEvent[]>();\n  if (!events) return byDate;\n\n  for (const event of events) {\n    const key = normalizeDateKey(event.date);\n    const bucket = byDate.get(key) ?? [];\n    bucket.push(event);\n    byDate.set(key, bucket);\n  }\n\n  return byDate;\n}\n\nfunction getStyle(density: DSCalendarDensity, userStyle: CSSProperties | undefined) {\n  const size = dsSemanticTokens.calendar.size[density];\n\n  return {\n    '--ds-calendar-cell-min-height': size.cellMinHeight,\n    '--ds-calendar-cell-padding': size.cellPadding,\n    '--ds-calendar-title-font-size': size.titleFontSize,\n    '--ds-calendar-meta-font-size': size.metaFontSize,\n    '--ds-calendar-marker-size': size.markerSize,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nfunction getEventColor(status: DSCalendarEventStatus | undefined) {\n  return dsSemanticTokens.calendar.status[status ?? 'neutral'];\n}\n\nfunction getYearOptions(value: Dayjs) {\n  const currentYear = value.year();\n  return Array.from({ length: 11 }, (_, index) => {\n    const year = currentYear - 5 + index;\n    return { value: year, label: String(year) };\n  });\n}\n\nfunction renderCalendarCell(date: Dayjs, info: { type: string }, events: DSCalendarEvent[], dsEventLimit: number) {\n  if (info.type !== 'date') {\n    return null;\n  }\n\n  const key = date.format('YYYY-MM-DD');\n  const visibleEvents = events.slice(0, dsEventLimit);\n  const overflowCount = events.length - visibleEvents.length;\n\n  return (\n    <div className=\"ds-calendar-cell-content\">\n      {visibleEvents.length > 0 ? (\n        <div className=\"ds-calendar-events\">\n          {visibleEvents.map((event, index) => (\n            <div className=\"ds-calendar-event\" key={`${key}-${index}`}>\n              <span className=\"ds-calendar-event-marker\" style={{ '--ds-calendar-event-color': getEventColor(event.dsStatus) } as CSSProperties} />\n              <div style={{ minWidth: 0 }}>\n                <div className=\"ds-calendar-event-content\">{event.label}</div>\n                {event.meta ? <div className=\"ds-calendar-event-meta\">{event.meta}</div> : null}\n              </div>\n            </div>\n          ))}\n          {overflowCount > 0 ? (\n            <Tooltip dsSize=\"mini\" dsBody={`${overflowCount} more calendar events`}>\n              <button type=\"button\" className=\"ds-calendar-event-meta ds-calendar-overflow-trigger\">\n                +{overflowCount} more\n              </button>\n            </Tooltip>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport const Calendar: DSCalendarComponent = ({\n  className,\n  dsDensity,\n  dsEventLimit = 2,\n  dsEvents,\n  dsFullscreen,\n  dsShowWeek,\n  dsVariant = 'scheduling',\n  style,\n  ...props\n}: CalendarProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const eventsLookup = eventsByDate(dsEvents);\n  const controlSize = density === 'compact' ? 'small' : 'middle';\n  const segmentedSize = density === 'compact' ? 'sm' : 'md';\n\n  return (\n    <AntCalendar<Dayjs>\n      {...props}\n      className={mergeClassNames(DS_CALENDAR_CLASS, `ds-calendar--${dsVariant}`, `ds-calendar--${density}`, className)}\n      fullscreen={dsFullscreen ?? defaults.fullscreen}\n      showWeek={dsShowWeek ?? defaults.showWeek}\n      style={getStyle(density, style)}\n      headerRender={({ value, type, onChange, onTypeChange }) => {\n        const yearOptions = getYearOptions(value);\n        const mode = type as CalendarMode;\n\n        return (\n          <div className=\"ds-calendar-header-wrapper\">\n            <div className=\"ds-calendar-header-title\">{value.format(mode === 'year' ? 'YYYY' : 'MMMM YYYY')}</div>\n            <div className=\"ds-calendar-header-controls\">\n              <Select\n                aria-label=\"Calendar month\"\n                className=\"ds-calendar-header-select\"\n                size={controlSize}\n                value={value.month()}\n                options={MONTH_OPTIONS}\n                disabled={mode === 'year'}\n                onChange={(nextMonth) => onChange(value.month(Number(nextMonth)))}\n              />\n              <Select\n                aria-label=\"Calendar year\"\n                className=\"ds-calendar-header-select ds-calendar-header-select--year\"\n                size={controlSize}\n                value={value.year()}\n                options={yearOptions}\n                onChange={(nextYear) => onChange(value.year(Number(nextYear)))}\n              />\n              <Segmented\n                aria-label=\"Calendar panel mode\"\n                dsSize={segmentedSize}\n                value={mode}\n                options={[\n                  { label: 'Month', value: 'month' },\n                  { label: 'Year', value: 'year' },\n                ]}\n                onChange={(nextMode) => onTypeChange(nextMode as CalendarMode)}\n              />\n            </div>\n          </div>\n        );\n      }}\n      cellRender={(date, info) => {\n        const key = date.format('YYYY-MM-DD');\n        const events = eventsLookup.get(key) ?? [];\n        return renderCalendarCell(date, info, events, dsEventLimit);\n      }}\n    />\n  );\n};\n\n(Calendar as DSCalendarComponent).generateCalendar = (AntCalendar as any).generateCalendar;\nCalendar.displayName = 'Calendar';\n"],"mappings":"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"}

package/dist-lib/display/Card.cjs

@@ -0,0 +1,177 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-card-styles`,a=`ds-card`;function o(...e){return e.filter(Boolean).join(` `).trim()}function s(){if(typeof document>`u`)return;let{card:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .${a}.ant-card {
+      width: 100%;
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.body};
+      background: ${t.surface.default};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      box-shadow: none;
+      overflow: hidden;
+      transition: none !important;
+    }
+
+    .${a}.ant-card,
+    .${a}.ant-card .ant-card-head,
+    .${a}.ant-card .ant-card-body,
+    .${a}.ant-card .ant-card-actions,
+    .${a}.ant-card .ant-card-grid,
+    .${a}.ant-card .ant-card-cover {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a}.ant-card .ant-card-head {
+      min-height: 0;
+      padding: 0 var(--ds-card-padding-x);
+      color: ${t.text.title};
+      border-bottom: 1px solid ${t.border.default};
+      background: transparent;
+    }
+
+    .${a}.ant-card .ant-card-head-title {
+      padding: 12px 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .${a}.ant-card .ant-card-extra {
+      padding: 12px 0;
+      color: ${t.text.secondary};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+    }
+
+    .${a}.ant-card .ant-card-body {
+      padding: var(--ds-card-padding);
+      color: ${t.text.body};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${a}.ant-card .ant-card-actions {
+      border-top: 1px solid ${t.border.default};
+      background: ${t.surface.default};
+    }
+
+    .${a}.ant-card .ant-card-actions > li {
+      margin: 8px 0;
+      color: ${t.text.secondary};
+    }
+
+    .${a}.ant-card .ant-card-meta-title {
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      margin-bottom: 4px;
+    }
+
+    .${a}.ant-card .ant-card-meta-description {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.body.fontSize};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${a}.ant-card[data-ds-card-density='compact'] {
+      --ds-card-padding: ${t.padding.compact};
+      --ds-card-padding-x: 12px;
+    }
+
+    .${a}.ant-card[data-ds-card-density='default'] {
+      --ds-card-padding: ${t.padding.default};
+      --ds-card-padding-x: 16px;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='record'] {
+      border-color: ${t.border.default};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='summary'] {
+      background: ${t.surface.subtle};
+      border-color: ${t.border.default};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='summary'] .ant-card-head {
+      border-bottom-color: transparent;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='actionable'] {
+      border-color: ${t.border.muted};
+      cursor: pointer;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='actionable']:hover,
+    .${a}.ant-card[data-ds-card-variant='actionable']:focus-within {
+      border-color: ${t.border.actionable};
+      box-shadow: ${t.shadow.actionable};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='metric'] {
+      background: ${t.surface.metric};
+      border-color: transparent;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='metric'] .ant-card-body {
+      padding: ${t.padding.metric};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='selection'] {
+      border-color: ${t.border.muted};
+      cursor: pointer;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='selection'][data-ds-card-selected='true'] {
+      background: ${t.surface.selected};
+      border-color: ${t.border.selected};
+      box-shadow: ${t.shadow.selected};
+    }
+
+    .ds-card-eyebrow {
+      margin: 0 0 4px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.eyebrow.fontSize};
+      font-weight: ${t.typography.eyebrow.fontWeight};
+      line-height: ${t.typography.eyebrow.lineHeight};
+      letter-spacing: ${t.typography.eyebrow.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .ds-card-title {
+      margin: 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .ds-card-body-text {
+      margin: 8px 0 0;
+      color: ${t.text.body};
+      font-size: ${t.typography.body.fontSize};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .ds-card-metric-value {
+      color: ${t.text.metricValue};
+      font-size: ${t.typography.metricValue.fontSize};
+      font-weight: ${t.typography.metricValue.fontWeight};
+      line-height: ${t.typography.metricValue.lineHeight};
+    }
+
+    .ds-card-metric-label {
+      margin-top: 4px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.metricLabel.fontSize};
+      font-weight: ${t.typography.metricLabel.fontWeight};
+      line-height: ${t.typography.metricLabel.lineHeight};
+      text-transform: uppercase;
+    }
+  `}function c(e){return e??{}}var l=({dsVariant:e=`record`,dsDensity:i=`default`,dsSelected:l=!1,className:u,style:d,hoverable:f,...p})=>((0,n.useEffect)(()=>{s()},[]),(0,r.jsx)(t.Card,{...p,className:o(a,u),"data-ds-card-density":i,"data-ds-card-selected":l?`true`:`false`,"data-ds-card-variant":e,hoverable:f??e===`actionable`,style:c(d),variant:`outlined`}));l.displayName=`Card`,l.Meta=t.Card.Meta,l.Grid=t.Card.Grid,exports.Card=l;
+//# sourceMappingURL=Card.cjs.map

package/dist-lib/display/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.cjs","names":[],"sources":["../../src/ds/display/Card.tsx"],"sourcesContent":["import { Card as AntCard } from 'antd';\nimport type { CardProps as AntCardProps } from 'antd';\nimport type { CSSProperties, FC } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSCardVariant = 'record' | 'summary' | 'actionable' | 'metric' | 'selection';\nexport type DSCardDensity = 'default' | 'compact';\n\nexport type CardProps = AntCardProps & {\n  /** Semantic DS card variant for product surfaces. */\n  dsVariant?: DSCardVariant;\n  /** DS card density. */\n  dsDensity?: DSCardDensity;\n  /** Selected state for selection cards. */\n  dsSelected?: boolean;\n};\n\ntype DSCardComponent = FC<CardProps> & {\n  Meta: typeof AntCard.Meta;\n  Grid: typeof AntCard.Grid;\n};\n\nconst STYLE_ID = 'ds-card-styles';\nconst DS_CARD_CLASS = 'ds-card';\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { card } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_CARD_CLASS}.ant-card {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n      color: ${card.text.body};\n      background: ${card.surface.default};\n      border: 1px solid ${card.border.default};\n      border-radius: ${card.border.radius};\n      box-shadow: none;\n      overflow: hidden;\n      transition: none !important;\n    }\n\n    .${DS_CARD_CLASS}.ant-card,\n    .${DS_CARD_CLASS}.ant-card .ant-card-head,\n    .${DS_CARD_CLASS}.ant-card .ant-card-body,\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions,\n    .${DS_CARD_CLASS}.ant-card .ant-card-grid,\n    .${DS_CARD_CLASS}.ant-card .ant-card-cover {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-head {\n      min-height: 0;\n      padding: 0 var(--ds-card-padding-x);\n      color: ${card.text.title};\n      border-bottom: 1px solid ${card.border.default};\n      background: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-head-title {\n      padding: 12px 0;\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n      white-space: normal;\n      overflow-wrap: anywhere;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-extra {\n      padding: 12px 0;\n      color: ${card.text.secondary};\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 16px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-body {\n      padding: var(--ds-card-padding);\n      color: ${card.text.body};\n      font-size: ${card.typography.body.fontSize};\n      font-weight: ${card.typography.body.fontWeight};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions {\n      border-top: 1px solid ${card.border.default};\n      background: ${card.surface.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions > li {\n      margin: 8px 0;\n      color: ${card.text.secondary};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-meta-title {\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n      margin-bottom: 4px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-meta-description {\n      color: ${card.text.secondary};\n      font-size: ${card.typography.body.fontSize};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-density='compact'] {\n      --ds-card-padding: ${card.padding.compact};\n      --ds-card-padding-x: 12px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-density='default'] {\n      --ds-card-padding: ${card.padding.default};\n      --ds-card-padding-x: 16px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='record'] {\n      border-color: ${card.border.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='summary'] {\n      background: ${card.surface.subtle};\n      border-color: ${card.border.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='summary'] .ant-card-head {\n      border-bottom-color: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable'] {\n      border-color: ${card.border.muted};\n      cursor: pointer;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable']:hover,\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable']:focus-within {\n      border-color: ${card.border.actionable};\n      box-shadow: ${card.shadow.actionable};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='metric'] {\n      background: ${card.surface.metric};\n      border-color: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='metric'] .ant-card-body {\n      padding: ${card.padding.metric};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='selection'] {\n      border-color: ${card.border.muted};\n      cursor: pointer;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='selection'][data-ds-card-selected='true'] {\n      background: ${card.surface.selected};\n      border-color: ${card.border.selected};\n      box-shadow: ${card.shadow.selected};\n    }\n\n    .ds-card-eyebrow {\n      margin: 0 0 4px;\n      color: ${card.text.secondary};\n      font-size: ${card.typography.eyebrow.fontSize};\n      font-weight: ${card.typography.eyebrow.fontWeight};\n      line-height: ${card.typography.eyebrow.lineHeight};\n      letter-spacing: ${card.typography.eyebrow.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .ds-card-title {\n      margin: 0;\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n    }\n\n    .ds-card-body-text {\n      margin: 8px 0 0;\n      color: ${card.text.body};\n      font-size: ${card.typography.body.fontSize};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .ds-card-metric-value {\n      color: ${card.text.metricValue};\n      font-size: ${card.typography.metricValue.fontSize};\n      font-weight: ${card.typography.metricValue.fontWeight};\n      line-height: ${card.typography.metricValue.lineHeight};\n    }\n\n    .ds-card-metric-label {\n      margin-top: 4px;\n      color: ${card.text.secondary};\n      font-size: ${card.typography.metricLabel.fontSize};\n      font-weight: ${card.typography.metricLabel.fontWeight};\n      line-height: ${card.typography.metricLabel.lineHeight};\n      text-transform: uppercase;\n    }\n  `;\n}\n\nfunction buildStyle(userStyle: CSSProperties | undefined): CSSProperties {\n  return userStyle ?? {};\n}\n\nexport const Card: DSCardComponent = ({\n  dsVariant = 'record',\n  dsDensity = 'default',\n  dsSelected = false,\n  className,\n  style,\n  hoverable,\n  ...props\n}: CardProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <AntCard\n      {...props}\n      className={mergeClassNames(DS_CARD_CLASS, className)}\n      data-ds-card-density={dsDensity}\n      data-ds-card-selected={dsSelected ? 'true' : 'false'}\n      data-ds-card-variant={dsVariant}\n      hoverable={hoverable ?? dsVariant === 'actionable'}\n      style={buildStyle(style)}\n      variant=\"outlined\"\n    />\n  );\n};\n\nCard.displayName = 'Card';\nCard.Meta = AntCard.Meta;\nCard.Grid = AntCard.Grid;\n"],"mappings":"4MAuBA,IAAM,EAAW,iBACX,EAAgB,UAEtB,SAAS,EAAgB,GAAG,EAAuC,CACjE,OAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM,CAGpD,SAAS,GAAe,CACtB,GAAI,OAAO,SAAa,IAAa,OAErC,GAAM,CAAE,QAAS,EAAA,iBACb,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;OACf,EAAc;;;eAGN,EAAK,KAAK,KAAK;oBACV,EAAK,QAAQ,QAAQ;0BACf,EAAK,OAAO,QAAQ;uBACvB,EAAK,OAAO,OAAO;;;;;;OAMnC,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;;;;;OAKd,EAAc;;;eAGN,EAAK,KAAK,MAAM;iCACE,EAAK,OAAO,QAAQ;;;;OAI9C,EAAc;;eAEN,EAAK,KAAK,MAAM;mBACZ,EAAK,WAAW,MAAM,SAAS;qBAC7B,EAAK,WAAW,MAAM,WAAW;qBACjC,EAAK,WAAW,MAAM,WAAW;;;;;OAK/C,EAAc;;eAEN,EAAK,KAAK,UAAU;;;;;;OAM5B,EAAc;;eAEN,EAAK,KAAK,KAAK;mBACX,EAAK,WAAW,KAAK,SAAS;qBAC5B,EAAK,WAAW,KAAK,WAAW;qBAChC,EAAK,WAAW,KAAK,WAAW;;;OAG9C,EAAc;8BACS,EAAK,OAAO,QAAQ;oBAC9B,EAAK,QAAQ,QAAQ;;;OAGlC,EAAc;;eAEN,EAAK,KAAK,UAAU;;;OAG5B,EAAc;eACN,EAAK,KAAK,MAAM;mBACZ,EAAK,WAAW,MAAM,SAAS;qBAC7B,EAAK,WAAW,MAAM,WAAW;qBACjC,EAAK,WAAW,MAAM,WAAW;;;;OAI/C,EAAc;eACN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,KAAK,SAAS;qBAC5B,EAAK,WAAW,KAAK,WAAW;;;OAG9C,EAAc;2BACM,EAAK,QAAQ,QAAQ;;;;OAIzC,EAAc;2BACM,EAAK,QAAQ,QAAQ;;;;OAIzC,EAAc;sBACC,EAAK,OAAO,QAAQ;;;OAGnC,EAAc;oBACD,EAAK,QAAQ,OAAO;sBAClB,EAAK,OAAO,QAAQ;;;OAGnC,EAAc;;;;OAId,EAAc;sBACC,EAAK,OAAO,MAAM;;;;OAIjC,EAAc;OACd,EAAc;sBACC,EAAK,OAAO,WAAW;oBACzB,EAAK,OAAO,WAAW;;;OAGpC,EAAc;oBACD,EAAK,QAAQ,OAAO;;;;OAIjC,EAAc;iBACJ,EAAK,QAAQ,OAAO;;;OAG9B,EAAc;sBACC,EAAK,OAAO,MAAM;;;;OAIjC,EAAc;oBACD,EAAK,QAAQ,SAAS;sBACpB,EAAK,OAAO,SAAS;oBACvB,EAAK,OAAO,SAAS;;;;;eAK1B,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,QAAQ,SAAS;qBAC/B,EAAK,WAAW,QAAQ,WAAW;qBACnC,EAAK,WAAW,QAAQ,WAAW;wBAChC,EAAK,WAAW,QAAQ,cAAc;;;;;;eAM/C,EAAK,KAAK,MAAM;mBACZ,EAAK,WAAW,MAAM,SAAS;qBAC7B,EAAK,WAAW,MAAM,WAAW;qBACjC,EAAK,WAAW,MAAM,WAAW;;;;;eAKvC,EAAK,KAAK,KAAK;mBACX,EAAK,WAAW,KAAK,SAAS;qBAC5B,EAAK,WAAW,KAAK,WAAW;;;;eAItC,EAAK,KAAK,YAAY;mBAClB,EAAK,WAAW,YAAY,SAAS;qBACnC,EAAK,WAAW,YAAY,WAAW;qBACvC,EAAK,WAAW,YAAY,WAAW;;;;;eAK7C,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,YAAY,SAAS;qBACnC,EAAK,WAAW,YAAY,WAAW;qBACvC,EAAK,WAAW,YAAY,WAAW;;;IAM5D,SAAS,EAAW,EAAqD,CACvE,OAAO,GAAa,EAAE,CAGxB,IAAa,GAAyB,CACpC,YAAY,SACZ,YAAY,UACZ,aAAa,GACb,YACA,QACA,YACA,GAAG,OAEH,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,EAGJ,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAI,EACJ,UAAW,EAAgB,EAAe,EAAU,CACpD,uBAAsB,EACtB,wBAAuB,EAAa,OAAS,QAC7C,uBAAsB,EACtB,UAAW,GAAa,IAAc,aACtC,MAAO,EAAW,EAAM,CACxB,QAAQ,WACR,CAAA,EAIN,EAAK,YAAc,OACnB,EAAK,KAAO,EAAA,KAAQ,KACpB,EAAK,KAAO,EAAA,KAAQ"}

package/dist-lib/display/Card.js

@@ -0,0 +1,209 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Card as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ds/display/Card.tsx
+var i = "ds-card-styles", a = "ds-card";
+function o(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function s() {
+	if (typeof document > "u") return;
+	let { card: t } = e, n = document.getElementById(i);
+	n || (n = document.createElement("style"), n.id = i, document.head.appendChild(n)), n.textContent = `
+    .${a}.ant-card {
+      width: 100%;
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.body};
+      background: ${t.surface.default};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      box-shadow: none;
+      overflow: hidden;
+      transition: none !important;
+    }
+
+    .${a}.ant-card,
+    .${a}.ant-card .ant-card-head,
+    .${a}.ant-card .ant-card-body,
+    .${a}.ant-card .ant-card-actions,
+    .${a}.ant-card .ant-card-grid,
+    .${a}.ant-card .ant-card-cover {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${a}.ant-card .ant-card-head {
+      min-height: 0;
+      padding: 0 var(--ds-card-padding-x);
+      color: ${t.text.title};
+      border-bottom: 1px solid ${t.border.default};
+      background: transparent;
+    }
+
+    .${a}.ant-card .ant-card-head-title {
+      padding: 12px 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .${a}.ant-card .ant-card-extra {
+      padding: 12px 0;
+      color: ${t.text.secondary};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+    }
+
+    .${a}.ant-card .ant-card-body {
+      padding: var(--ds-card-padding);
+      color: ${t.text.body};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${a}.ant-card .ant-card-actions {
+      border-top: 1px solid ${t.border.default};
+      background: ${t.surface.default};
+    }
+
+    .${a}.ant-card .ant-card-actions > li {
+      margin: 8px 0;
+      color: ${t.text.secondary};
+    }
+
+    .${a}.ant-card .ant-card-meta-title {
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+      margin-bottom: 4px;
+    }
+
+    .${a}.ant-card .ant-card-meta-description {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.body.fontSize};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${a}.ant-card[data-ds-card-density='compact'] {
+      --ds-card-padding: ${t.padding.compact};
+      --ds-card-padding-x: 12px;
+    }
+
+    .${a}.ant-card[data-ds-card-density='default'] {
+      --ds-card-padding: ${t.padding.default};
+      --ds-card-padding-x: 16px;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='record'] {
+      border-color: ${t.border.default};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='summary'] {
+      background: ${t.surface.subtle};
+      border-color: ${t.border.default};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='summary'] .ant-card-head {
+      border-bottom-color: transparent;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='actionable'] {
+      border-color: ${t.border.muted};
+      cursor: pointer;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='actionable']:hover,
+    .${a}.ant-card[data-ds-card-variant='actionable']:focus-within {
+      border-color: ${t.border.actionable};
+      box-shadow: ${t.shadow.actionable};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='metric'] {
+      background: ${t.surface.metric};
+      border-color: transparent;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='metric'] .ant-card-body {
+      padding: ${t.padding.metric};
+    }
+
+    .${a}.ant-card[data-ds-card-variant='selection'] {
+      border-color: ${t.border.muted};
+      cursor: pointer;
+    }
+
+    .${a}.ant-card[data-ds-card-variant='selection'][data-ds-card-selected='true'] {
+      background: ${t.surface.selected};
+      border-color: ${t.border.selected};
+      box-shadow: ${t.shadow.selected};
+    }
+
+    .ds-card-eyebrow {
+      margin: 0 0 4px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.eyebrow.fontSize};
+      font-weight: ${t.typography.eyebrow.fontWeight};
+      line-height: ${t.typography.eyebrow.lineHeight};
+      letter-spacing: ${t.typography.eyebrow.letterSpacing};
+      text-transform: uppercase;
+    }
+
+    .ds-card-title {
+      margin: 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .ds-card-body-text {
+      margin: 8px 0 0;
+      color: ${t.text.body};
+      font-size: ${t.typography.body.fontSize};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .ds-card-metric-value {
+      color: ${t.text.metricValue};
+      font-size: ${t.typography.metricValue.fontSize};
+      font-weight: ${t.typography.metricValue.fontWeight};
+      line-height: ${t.typography.metricValue.lineHeight};
+    }
+
+    .ds-card-metric-label {
+      margin-top: 4px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.metricLabel.fontSize};
+      font-weight: ${t.typography.metricLabel.fontWeight};
+      line-height: ${t.typography.metricLabel.lineHeight};
+      text-transform: uppercase;
+    }
+  `;
+}
+function c(e) {
+	return e ?? {};
+}
+var l = ({ dsVariant: e = "record", dsDensity: i = "default", dsSelected: l = !1, className: u, style: d, hoverable: f, ...p }) => (n(() => {
+	s();
+}, []), /* @__PURE__ */ r(t, {
+	...p,
+	className: o(a, u),
+	"data-ds-card-density": i,
+	"data-ds-card-selected": l ? "true" : "false",
+	"data-ds-card-variant": e,
+	hoverable: f ?? e === "actionable",
+	style: c(d),
+	variant: "outlined"
+}));
+l.displayName = "Card", l.Meta = t.Meta, l.Grid = t.Grid;
+//#endregion
+export { l as Card };
+
+//# sourceMappingURL=Card.js.map

package/dist-lib/display/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../src/ds/display/Card.tsx"],"sourcesContent":["import { Card as AntCard } from 'antd';\nimport type { CardProps as AntCardProps } from 'antd';\nimport type { CSSProperties, FC } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSCardVariant = 'record' | 'summary' | 'actionable' | 'metric' | 'selection';\nexport type DSCardDensity = 'default' | 'compact';\n\nexport type CardProps = AntCardProps & {\n  /** Semantic DS card variant for product surfaces. */\n  dsVariant?: DSCardVariant;\n  /** DS card density. */\n  dsDensity?: DSCardDensity;\n  /** Selected state for selection cards. */\n  dsSelected?: boolean;\n};\n\ntype DSCardComponent = FC<CardProps> & {\n  Meta: typeof AntCard.Meta;\n  Grid: typeof AntCard.Grid;\n};\n\nconst STYLE_ID = 'ds-card-styles';\nconst DS_CARD_CLASS = 'ds-card';\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { card } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_CARD_CLASS}.ant-card {\n      width: 100%;\n      font-family: 'Nunito', sans-serif;\n      color: ${card.text.body};\n      background: ${card.surface.default};\n      border: 1px solid ${card.border.default};\n      border-radius: ${card.border.radius};\n      box-shadow: none;\n      overflow: hidden;\n      transition: none !important;\n    }\n\n    .${DS_CARD_CLASS}.ant-card,\n    .${DS_CARD_CLASS}.ant-card .ant-card-head,\n    .${DS_CARD_CLASS}.ant-card .ant-card-body,\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions,\n    .${DS_CARD_CLASS}.ant-card .ant-card-grid,\n    .${DS_CARD_CLASS}.ant-card .ant-card-cover {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-head {\n      min-height: 0;\n      padding: 0 var(--ds-card-padding-x);\n      color: ${card.text.title};\n      border-bottom: 1px solid ${card.border.default};\n      background: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-head-title {\n      padding: 12px 0;\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n      white-space: normal;\n      overflow-wrap: anywhere;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-extra {\n      padding: 12px 0;\n      color: ${card.text.secondary};\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 16px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-body {\n      padding: var(--ds-card-padding);\n      color: ${card.text.body};\n      font-size: ${card.typography.body.fontSize};\n      font-weight: ${card.typography.body.fontWeight};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions {\n      border-top: 1px solid ${card.border.default};\n      background: ${card.surface.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-actions > li {\n      margin: 8px 0;\n      color: ${card.text.secondary};\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-meta-title {\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n      margin-bottom: 4px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card .ant-card-meta-description {\n      color: ${card.text.secondary};\n      font-size: ${card.typography.body.fontSize};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-density='compact'] {\n      --ds-card-padding: ${card.padding.compact};\n      --ds-card-padding-x: 12px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-density='default'] {\n      --ds-card-padding: ${card.padding.default};\n      --ds-card-padding-x: 16px;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='record'] {\n      border-color: ${card.border.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='summary'] {\n      background: ${card.surface.subtle};\n      border-color: ${card.border.default};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='summary'] .ant-card-head {\n      border-bottom-color: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable'] {\n      border-color: ${card.border.muted};\n      cursor: pointer;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable']:hover,\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='actionable']:focus-within {\n      border-color: ${card.border.actionable};\n      box-shadow: ${card.shadow.actionable};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='metric'] {\n      background: ${card.surface.metric};\n      border-color: transparent;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='metric'] .ant-card-body {\n      padding: ${card.padding.metric};\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='selection'] {\n      border-color: ${card.border.muted};\n      cursor: pointer;\n    }\n\n    .${DS_CARD_CLASS}.ant-card[data-ds-card-variant='selection'][data-ds-card-selected='true'] {\n      background: ${card.surface.selected};\n      border-color: ${card.border.selected};\n      box-shadow: ${card.shadow.selected};\n    }\n\n    .ds-card-eyebrow {\n      margin: 0 0 4px;\n      color: ${card.text.secondary};\n      font-size: ${card.typography.eyebrow.fontSize};\n      font-weight: ${card.typography.eyebrow.fontWeight};\n      line-height: ${card.typography.eyebrow.lineHeight};\n      letter-spacing: ${card.typography.eyebrow.letterSpacing};\n      text-transform: uppercase;\n    }\n\n    .ds-card-title {\n      margin: 0;\n      color: ${card.text.title};\n      font-size: ${card.typography.title.fontSize};\n      font-weight: ${card.typography.title.fontWeight};\n      line-height: ${card.typography.title.lineHeight};\n    }\n\n    .ds-card-body-text {\n      margin: 8px 0 0;\n      color: ${card.text.body};\n      font-size: ${card.typography.body.fontSize};\n      line-height: ${card.typography.body.lineHeight};\n    }\n\n    .ds-card-metric-value {\n      color: ${card.text.metricValue};\n      font-size: ${card.typography.metricValue.fontSize};\n      font-weight: ${card.typography.metricValue.fontWeight};\n      line-height: ${card.typography.metricValue.lineHeight};\n    }\n\n    .ds-card-metric-label {\n      margin-top: 4px;\n      color: ${card.text.secondary};\n      font-size: ${card.typography.metricLabel.fontSize};\n      font-weight: ${card.typography.metricLabel.fontWeight};\n      line-height: ${card.typography.metricLabel.lineHeight};\n      text-transform: uppercase;\n    }\n  `;\n}\n\nfunction buildStyle(userStyle: CSSProperties | undefined): CSSProperties {\n  return userStyle ?? {};\n}\n\nexport const Card: DSCardComponent = ({\n  dsVariant = 'record',\n  dsDensity = 'default',\n  dsSelected = false,\n  className,\n  style,\n  hoverable,\n  ...props\n}: CardProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  return (\n    <AntCard\n      {...props}\n      className={mergeClassNames(DS_CARD_CLASS, className)}\n      data-ds-card-density={dsDensity}\n      data-ds-card-selected={dsSelected ? 'true' : 'false'}\n      data-ds-card-variant={dsVariant}\n      hoverable={hoverable ?? dsVariant === 'actionable'}\n      style={buildStyle(style)}\n      variant=\"outlined\"\n    />\n  );\n};\n\nCard.displayName = 'Card';\nCard.Meta = AntCard.Meta;\nCard.Grid = AntCard.Grid;\n"],"mappings":"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"}