ods-ant 0.2.0 → 0.4.1

package/dist-lib/feedback/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../src/ds/feedback/Skeleton.tsx"],"sourcesContent":["import { Skeleton as AntSkeleton } from 'antd';\nimport type { SkeletonProps as AntSkeletonProps } from 'antd';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSSkeletonVariant = 'table' | 'card' | 'form' | 'details' | 'list';\n\ntype RestrictedAntProps = 'avatar' | 'paragraph' | 'title' | 'classNames' | 'styles' | 'prefixCls';\n\nexport type SkeletonProps = Omit<AntSkeletonProps, RestrictedAntProps> & {\n  /** Semantic DS skeleton layout matching the content being loaded. */\n  dsVariant?: DSSkeletonVariant;\n  /** Number of placeholder rows rendered by row-based DS variants. */\n  dsRows?: number;\n  /** Number of placeholder columns rendered by table/details DS variants. */\n  dsColumns?: number;\n  /** Loaded content rendered when `loading` is false. */\n  children?: ReactNode;\n};\n\ntype DSSkeletonComponent = FC<SkeletonProps> & {\n  Button: typeof AntSkeleton.Button;\n  Avatar: typeof AntSkeleton.Avatar;\n  Input: typeof AntSkeleton.Input;\n  Image: typeof AntSkeleton.Image;\n  Node: typeof AntSkeleton.Node;\n};\n\nconst STYLE_ID = 'ds-skeleton-styles';\nconst DS_SKELETON_CLASS = 'ds-skeleton';\n\nconst DEFAULT_ROWS: Record<DSSkeletonVariant, number> = {\n  table: 4,\n  card: 1,\n  form: 4,\n  details: 4,\n  list: 4,\n};\n\nconst DEFAULT_COLUMNS: Record<DSSkeletonVariant, number> = {\n  table: 4,\n  card: 1,\n  form: 1,\n  details: 2,\n  list: 1,\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction clampCount(value: number | undefined, fallback: number, min: number, max: number) {\n  if (value === undefined || Number.isNaN(value)) return fallback;\n  return Math.min(Math.max(Math.round(value), min), max);\n}\n\nfunction createRange(count: number) {\n  return Array.from({ length: count }, (_, index) => index);\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { skeleton } = 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_SKELETON_CLASS} {\n      box-sizing: border-box;\n      width: 100%;\n      padding: ${skeleton.spacing.shell};\n      border: 1px solid ${skeleton.border.default};\n      border-radius: ${skeleton.border.radius};\n      background: ${skeleton.surface.default};\n      color: ${skeleton.placeholder.base};\n      font-family: 'Nunito', sans-serif;\n      --ds-skeleton-placeholder: ${skeleton.placeholder.base};\n      --ds-skeleton-placeholder-strong: ${skeleton.placeholder.strong};\n      --ds-skeleton-highlight: ${skeleton.placeholder.highlight};\n    }\n\n    .${DS_SKELETON_CLASS},\n    .${DS_SKELETON_CLASS} * {\n      box-sizing: border-box;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton,\n    .${DS_SKELETON_CLASS} .ant-skeleton-element {\n      width: 100%;\n      display: block;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ant-skeleton-button,\n    .${DS_SKELETON_CLASS} .ant-skeleton-avatar,\n    .${DS_SKELETON_CLASS} .ant-skeleton-image {\n      background-color: var(--ds-skeleton-placeholder) !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ant-skeleton-button {\n      min-width: 0 !important;\n      width: 100% !important;\n      border-radius: ${skeleton.border.radius} !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-avatar {\n      width: ${skeleton.size.listAvatar}px !important;\n      height: ${skeleton.size.listAvatar}px !important;\n      min-width: ${skeleton.size.listAvatar}px !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ant-skeleton-image {\n      width: 100% !important;\n      height: 100% !important;\n      border-radius: ${skeleton.border.radius} !important;\n    }\n\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-input,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-button,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-avatar,\n    .${DS_SKELETON_CLASS}[data-ds-skeleton-round='false'] .ant-skeleton-image {\n      border-radius: 0 !important;\n    }\n\n    .${DS_SKELETON_CLASS} .ds-skeleton-line .ant-skeleton-input,\n    .${DS_SKELETON_CLASS} .ds-skeleton-line.ant-skeleton-input {\n      height: 14px !important;\n    }\n\n    .ds-skeleton-line-strong .ant-skeleton-input,\n    .ds-skeleton-line-strong.ant-skeleton-input {\n      background-color: var(--ds-skeleton-placeholder-strong) !important;\n    }\n\n    .ds-skeleton-table {\n      display: flex;\n      flex-direction: column;\n      gap: ${skeleton.spacing.compactRowGap};\n      background: ${skeleton.surface.default};\n    }\n\n    .ds-skeleton-table-grid {\n      display: grid;\n      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));\n      gap: 12px;\n      align-items: center;\n    }\n\n    .ds-skeleton-table-header {\n      min-height: ${skeleton.size.tableHeader};\n      padding-bottom: 10px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-table-row {\n      min-height: ${skeleton.size.tableRow};\n      padding: 8px 0;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-table-row:last-child {\n      border-bottom: 0;\n    }\n\n    .ds-skeleton-card {\n      display: grid;\n      grid-template-columns: minmax(128px, 32%) minmax(0, 1fr);\n      gap: 16px;\n      align-items: stretch;\n      background: ${skeleton.surface.default};\n    }\n\n    .ds-skeleton-card-media {\n      min-height: ${skeleton.size.cardMedia};\n    }\n\n    .ds-skeleton-card-body,\n    .ds-skeleton-form,\n    .ds-skeleton-details,\n    .ds-skeleton-list {\n      display: flex;\n      flex-direction: column;\n      gap: ${skeleton.spacing.rowGap};\n    }\n\n    .ds-skeleton-card-action {\n      width: 132px;\n      max-width: 48%;\n      margin-top: 6px;\n    }\n\n    .ds-skeleton-form-row {\n      display: grid;\n      grid-template-columns: minmax(112px, 24%) minmax(0, 1fr);\n      gap: 12px;\n      align-items: center;\n    }\n\n    .ds-skeleton-form-control .ant-skeleton-input,\n    .ds-skeleton-form-control.ant-skeleton-input {\n      height: ${skeleton.size.formInput} !important;\n    }\n\n    .ds-skeleton-details {\n      padding: 0;\n    }\n\n    .ds-skeleton-details-row {\n      display: grid;\n      grid-template-columns: repeat(var(--ds-skeleton-columns), minmax(0, 1fr));\n      gap: 16px;\n      padding-bottom: 10px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-details-row:last-child {\n      border-bottom: 0;\n      padding-bottom: 0;\n    }\n\n    .ds-skeleton-details-cell {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ds-skeleton-details-value .ant-skeleton-input,\n    .ds-skeleton-details-value.ant-skeleton-input {\n      height: ${skeleton.size.detailsValue} !important;\n    }\n\n    .ds-skeleton-list-item {\n      display: grid;\n      grid-template-columns: ${skeleton.size.listAvatar}px minmax(0, 1fr) 92px;\n      gap: 12px;\n      align-items: center;\n      min-height: 54px;\n      padding-bottom: 12px;\n      border-bottom: 1px solid ${skeleton.border.default};\n    }\n\n    .ds-skeleton-list-item:last-child {\n      border-bottom: 0;\n      padding-bottom: 0;\n    }\n\n    .ds-skeleton-list-copy {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .ds-skeleton-list-action {\n      min-width: 0;\n    }\n\n    @media (max-width: 640px) {\n      .${DS_SKELETON_CLASS} {\n        padding: ${skeleton.spacing.compactShell};\n      }\n\n      .ds-skeleton-card,\n      .ds-skeleton-form-row,\n      .ds-skeleton-list-item {\n        grid-template-columns: 1fr;\n      }\n\n      .ds-skeleton-card-media {\n        min-height: 96px;\n      }\n\n      .ds-skeleton-list-action {\n        width: 50%;\n      }\n    }\n  `;\n}\n\nfunction SkeletonLine({ active, width, strong, className }: {\n  active: boolean;\n  width?: CSSProperties['width'];\n  strong?: boolean;\n  className?: string;\n}) {\n  return (\n    <AntSkeleton.Input\n      active={active}\n      block\n      className={mergeClassNames('ds-skeleton-line', strong ? 'ds-skeleton-line-strong' : undefined, className)}\n      size=\"small\"\n      style={{ width }}\n    />\n  );\n}\n\nfunction renderTable(active: boolean, rowCount: number, columnCount: number) {\n  return (\n    <div className=\"ds-skeleton-table\" style={{ '--ds-skeleton-columns': columnCount } as CSSProperties}>\n      <div className=\"ds-skeleton-table-grid ds-skeleton-table-header\">\n        {createRange(columnCount).map((columnIndex) => (\n          <SkeletonLine key={columnIndex} active={active} width={columnIndex === columnCount - 1 ? '56%' : '72%'} strong />\n        ))}\n      </div>\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-table-grid ds-skeleton-table-row\" key={rowIndex}>\n          {createRange(columnCount).map((columnIndex) => (\n            <SkeletonLine key={columnIndex} active={active} width={columnIndex === 0 ? '84%' : columnIndex === columnCount - 1 ? '48%' : '68%'} />\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderCard(active: boolean, round: boolean) {\n  return (\n    <div className=\"ds-skeleton-card\">\n      <div className=\"ds-skeleton-card-media\">\n        <AntSkeleton.Image active={active} />\n      </div>\n      <div className=\"ds-skeleton-card-body\">\n        <SkeletonLine active={active} width=\"48%\" strong />\n        <SkeletonLine active={active} width=\"92%\" />\n        <SkeletonLine active={active} width=\"78%\" />\n        <SkeletonLine active={active} width=\"64%\" />\n        <div className=\"ds-skeleton-card-action\">\n          <AntSkeleton.Button active={active} block shape={round ? 'round' : 'default'} size=\"small\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction renderForm(active: boolean, rowCount: number) {\n  return (\n    <div className=\"ds-skeleton-form\">\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-form-row\" key={rowIndex}>\n          <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '72%' : '58%'} strong />\n          <AntSkeleton.Input active={active} block className=\"ds-skeleton-form-control\" size=\"default\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderDetails(active: boolean, rowCount: number, columnCount: number) {\n  return (\n    <div className=\"ds-skeleton-details\" style={{ '--ds-skeleton-columns': columnCount } as CSSProperties}>\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-details-row\" key={rowIndex}>\n          {createRange(columnCount).map((columnIndex) => (\n            <div className=\"ds-skeleton-details-cell\" key={columnIndex}>\n              <SkeletonLine active={active} width=\"44%\" strong />\n              <SkeletonLine active={active} width={(rowIndex + columnIndex) % 2 === 0 ? '82%' : '64%'} className=\"ds-skeleton-details-value\" />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderList(active: boolean, round: boolean, rowCount: number) {\n  return (\n    <div className=\"ds-skeleton-list\">\n      {createRange(rowCount).map((rowIndex) => (\n        <div className=\"ds-skeleton-list-item\" key={rowIndex}>\n          <AntSkeleton.Avatar active={active} shape=\"circle\" />\n          <div className=\"ds-skeleton-list-copy\">\n            <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '54%' : '68%'} strong />\n            <SkeletonLine active={active} width={rowIndex % 2 === 0 ? '82%' : '72%'} />\n          </div>\n          <div className=\"ds-skeleton-list-action\">\n            <AntSkeleton.Button active={active} block shape={round ? 'round' : 'default'} size=\"small\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction renderVariant(dsVariant: DSSkeletonVariant, active: boolean, round: boolean, rowCount: number, columnCount: number) {\n  if (dsVariant === 'table') return renderTable(active, rowCount, columnCount);\n  if (dsVariant === 'card') return renderCard(active, round);\n  if (dsVariant === 'form') return renderForm(active, rowCount);\n  if (dsVariant === 'details') return renderDetails(active, rowCount, columnCount);\n  return renderList(active, round, rowCount);\n}\n\nexport const Skeleton: DSSkeletonComponent = ({\n  active = true,\n  children,\n  className,\n  dsColumns,\n  dsRows,\n  dsVariant = 'table',\n  loading = true,\n  rootClassName,\n  round = true,\n  style,\n}: SkeletonProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  if (loading === false) {\n    return children ? <>{children}</> : null;\n  }\n\n  const rowCount = clampCount(dsRows, DEFAULT_ROWS[dsVariant], 1, 8);\n  const columnCount = clampCount(dsColumns, DEFAULT_COLUMNS[dsVariant], 1, 6);\n\n  return (\n    <div\n      aria-label=\"Loading\"\n      className={mergeClassNames(DS_SKELETON_CLASS, rootClassName, className)}\n      data-ds-skeleton-variant={dsVariant}\n      data-ds-skeleton-round={round ? 'true' : 'false'}\n      role=\"status\"\n      style={style}\n    >\n      {renderVariant(dsVariant, active, round, rowCount, columnCount)}\n    </div>\n  );\n};\n\nSkeleton.displayName = 'Skeleton';\nSkeleton.Button = AntSkeleton.Button;\nSkeleton.Avatar = AntSkeleton.Avatar;\nSkeleton.Input = AntSkeleton.Input;\nSkeleton.Image = AntSkeleton.Image;\nSkeleton.Node = AntSkeleton.Node;\n"],"mappings":"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"}

package/dist-lib/feedback/Spin.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../core-bPY3ouxp.cjs`),t=require(`../theme.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-spin-styles`,o=`ds-spin`,s=`ds-spin-circular-loader`,c={small:`24px`,default:`40px`,middle:`40px`,medium:`40px`,large:`75px`};function l(){if(typeof document>`u`)return;let n=document.getElementById(a);n||(n=document.createElement(`style`),n.id=a,document.head.appendChild(n));let{button:r,input:i}=t.dsSemanticTokens;n.textContent=`
+    @keyframes ds-spin-circular-loader-rotate {
+      to { transform: rotate(360deg); }
+    }
+
+    .${o}.ant-spin,
+    .${o}.ant-spin-nested-loading,
+    .${o}.ant-spin .ant-spin-text {
+      font-family: 'Nunito', sans-serif !important;
+    }
+
+    .${o}.ant-spin .ant-spin-dot {
+      width: var(--ds-spin-loader-size, ${c.default}) !important;
+      height: var(--ds-spin-loader-size, ${c.default}) !important;
+      display: inline-flex !important;
+      align-items: center;
+      justify-content: center;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    .${o}.ant-spin .ant-spin-dot-holder {
+      color: ${r.primary.default} !important;
+    }
+
+    .${s} {
+      width: var(--ds-spin-loader-size, ${c.default});
+      height: var(--ds-spin-loader-size, ${c.default});
+      display: inline-block;
+      border-radius: 50%;
+      background: conic-gradient(${r.primary.default} 0deg 92deg, ${i.background.disabled} 92deg 360deg);
+      animation: ds-spin-circular-loader-rotate 1s linear infinite;
+      position: relative;
+    }
+
+    .${s}::after {
+      content: '';
+      position: absolute;
+      inset: 18%;
+      border-radius: 50%;
+      background: ${i.background.default};
+    }
+
+    .${o}.ant-spin .ant-spin-text,
+    .${o}.ant-spin-nested-loading .ant-spin-text {
+      color: ${i.text.focus} !important;
+      font-size: 14px;
+      line-height: 18px;
+      font-weight: 600;
+      margin-top: 8px;
+    }
+
+    .${o}.ant-spin-sm .${s} {
+      --ds-spin-loader-size: ${c.small};
+    }
+
+    .${o}.ant-spin-lg .${s} {
+      --ds-spin-loader-size: ${c.large};
+    }
+
+    .${o}.ant-spin-fullscreen {
+      background: color-mix(in srgb, ${e.t.surface.subtle} 72%, transparent) !important;
+    }
+  `}function u(...e){return e.filter(Boolean).join(` `)}function d(e,t){return e===void 0?c[t??`default`]:typeof e==`number`?`${e}px`:e}function f(){return(0,i.jsx)(`span`,{className:s,"aria-hidden":`true`})}function p({className:e,indicator:t,size:a=`default`,style:s,dsLoaderSize:c,...p}){(0,r.useEffect)(()=>{l()},[]);let m={...s,"--ds-spin-loader-size":d(c,a)};return(0,i.jsx)(n.Spin,{...p,size:a,className:u(o,e),indicator:t??(0,i.jsx)(f,{}),style:m})}exports.Spin=p;
+//# sourceMappingURL=Spin.cjs.map

package/dist-lib/feedback/Spin.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.cjs","names":[],"sources":["../../src/ds/feedback/Spin.tsx"],"sourcesContent":["import { Spin as AntSpin } from 'antd';\nimport type { SpinProps } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\n\nconst STYLE_ID = 'ds-spin-styles';\nconst DS_SPIN_CLASS = 'ds-spin';\nconst DS_SPIN_INDICATOR_CLASS = 'ds-spin-circular-loader';\n\ntype DSSpinSize = NonNullable<SpinProps['size']>;\n\nexport type DSSpinProps = SpinProps & {\n  dsLoaderSize?: string | number;\n};\n\nconst loaderSizeBySpinSize: Record<DSSpinSize, string> = {\n  small: '24px',\n  default: '40px',\n  middle: '40px',\n  medium: '40px',\n  large: '75px',\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\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  const { button, input } = dsSemanticTokens;\n  style.textContent = `\n    @keyframes ds-spin-circular-loader-rotate {\n      to { transform: rotate(360deg); }\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin,\n    .${DS_SPIN_CLASS}.ant-spin-nested-loading,\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-text {\n      font-family: 'Nunito', sans-serif !important;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-dot {\n      width: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default}) !important;\n      height: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default}) !important;\n      display: inline-flex !important;\n      align-items: center;\n      justify-content: center;\n      margin: 0 !important;\n      transform: none !important;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-dot-holder {\n      color: ${button.primary.default} !important;\n    }\n\n    .${DS_SPIN_INDICATOR_CLASS} {\n      width: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default});\n      height: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default});\n      display: inline-block;\n      border-radius: 50%;\n      background: conic-gradient(${button.primary.default} 0deg 92deg, ${input.background.disabled} 92deg 360deg);\n      animation: ds-spin-circular-loader-rotate 1s linear infinite;\n      position: relative;\n    }\n\n    .${DS_SPIN_INDICATOR_CLASS}::after {\n      content: '';\n      position: absolute;\n      inset: 18%;\n      border-radius: 50%;\n      background: ${input.background.default};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-text,\n    .${DS_SPIN_CLASS}.ant-spin-nested-loading .ant-spin-text {\n      color: ${input.text.focus} !important;\n      font-size: 14px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-top: 8px;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-sm .${DS_SPIN_INDICATOR_CLASS} {\n      --ds-spin-loader-size: ${loaderSizeBySpinSize.small};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-lg .${DS_SPIN_INDICATOR_CLASS} {\n      --ds-spin-loader-size: ${loaderSizeBySpinSize.large};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-fullscreen {\n      background: color-mix(in srgb, ${CORE_COLORS.surface.subtle} 72%, transparent) !important;\n    }\n  `;\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nfunction formatLoaderSize(size: string | number | undefined, spinSize: SpinProps['size']) {\n  if (size === undefined) {\n    return loaderSizeBySpinSize[spinSize ?? 'default'];\n  }\n\n  return typeof size === 'number' ? `${size}px` : size;\n}\n\nfunction CircularLoader() {\n  return <span className={DS_SPIN_INDICATOR_CLASS} aria-hidden=\"true\" />;\n}\n\nexport function Spin({ className, indicator, size = 'default', style, dsLoaderSize, ...props }: DSSpinProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ['--ds-spin-loader-size' as string]: formatLoaderSize(dsLoaderSize, size),\n  };\n\n  return (\n    <AntSpin\n      {...props}\n      size={size}\n      className={mergeClassNames(DS_SPIN_CLASS, className)}\n      indicator={indicator ?? <CircularLoader />}\n      style={mergedStyle}\n    />\n  );\n}\n"],"mappings":"8OAOA,IAAM,EAAW,iBACX,EAAgB,UAChB,EAA0B,0BAQ1B,EAAmD,CACvD,MAAO,OACP,QAAS,OACT,OAAQ,OACR,OAAQ,OACR,MAAO,OACR,CAED,SAAS,GAAe,CACtB,GAAI,OAAO,SAAa,IAAa,OAErC,IAAI,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,GAAM,CAAE,SAAQ,SAAU,EAAA,iBAC1B,EAAM,YAAc;;;;;OAKf,EAAc;OACd,EAAc;OACd,EAAc;;;;OAId,EAAc;0CACqB,EAAqB,QAAQ;2CAC5B,EAAqB,QAAQ;;;;;;;;OAQjE,EAAc;eACN,EAAO,QAAQ,QAAQ;;;OAG/B,EAAwB;0CACW,EAAqB,QAAQ;2CAC5B,EAAqB,QAAQ;;;mCAGrC,EAAO,QAAQ,QAAQ,eAAe,EAAM,WAAW,SAAS;;;;;OAK5F,EAAwB;;;;;oBAKX,EAAM,WAAW,QAAQ;;;OAGtC,EAAc;OACd,EAAc;eACN,EAAM,KAAK,MAAM;;;;;;;OAOzB,EAAc,gBAAgB,EAAwB;+BAC9B,EAAqB,MAAM;;;OAGnD,EAAc,gBAAgB,EAAwB;+BAC9B,EAAqB,MAAM;;;OAGnD,EAAc;uCACkB,EAAA,EAAY,QAAQ,OAAO;;IAKlE,SAAS,EAAgB,GAAG,EAAkC,CAC5D,OAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI,CAGxC,SAAS,EAAiB,EAAmC,EAA6B,CAKxF,OAJI,IAAS,IAAA,GACJ,EAAqB,GAAY,WAGnC,OAAO,GAAS,SAAW,GAAG,EAAK,IAAM,EAGlD,SAAS,GAAiB,CACxB,OAAO,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAyB,cAAY,OAAS,CAAA,CAGxE,SAAgB,EAAK,CAAE,YAAW,YAAW,OAAO,UAAW,QAAO,eAAc,GAAG,GAAsB,EAC3G,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAEN,IAAM,EAA6B,CACjC,GAAG,EACF,wBAAoC,EAAiB,EAAc,EAAK,CAC1E,CAED,OACE,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAI,EACE,OACN,UAAW,EAAgB,EAAe,EAAU,CACpD,UAAW,IAAa,EAAA,EAAA,KAAC,EAAD,EAAkB,CAAA,CAC1C,MAAO,EACP,CAAA"}

package/dist-lib/feedback/Spin.js

@@ -0,0 +1,115 @@
+import { t as e } from "../core-C-tv3mqr.js";
+import { dsSemanticTokens as t } from "../theme.js";
+import { Spin as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/feedback/Spin.tsx
+var a = "ds-spin-styles", o = "ds-spin", s = "ds-spin-circular-loader", c = {
+	small: "24px",
+	default: "40px",
+	middle: "40px",
+	medium: "40px",
+	large: "75px"
+};
+function l() {
+	if (typeof document > "u") return;
+	let n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n));
+	let { button: r, input: i } = t;
+	n.textContent = `
+    @keyframes ds-spin-circular-loader-rotate {
+      to { transform: rotate(360deg); }
+    }
+
+    .${o}.ant-spin,
+    .${o}.ant-spin-nested-loading,
+    .${o}.ant-spin .ant-spin-text {
+      font-family: 'Nunito', sans-serif !important;
+    }
+
+    .${o}.ant-spin .ant-spin-dot {
+      width: var(--ds-spin-loader-size, ${c.default}) !important;
+      height: var(--ds-spin-loader-size, ${c.default}) !important;
+      display: inline-flex !important;
+      align-items: center;
+      justify-content: center;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    .${o}.ant-spin .ant-spin-dot-holder {
+      color: ${r.primary.default} !important;
+    }
+
+    .${s} {
+      width: var(--ds-spin-loader-size, ${c.default});
+      height: var(--ds-spin-loader-size, ${c.default});
+      display: inline-block;
+      border-radius: 50%;
+      background: conic-gradient(${r.primary.default} 0deg 92deg, ${i.background.disabled} 92deg 360deg);
+      animation: ds-spin-circular-loader-rotate 1s linear infinite;
+      position: relative;
+    }
+
+    .${s}::after {
+      content: '';
+      position: absolute;
+      inset: 18%;
+      border-radius: 50%;
+      background: ${i.background.default};
+    }
+
+    .${o}.ant-spin .ant-spin-text,
+    .${o}.ant-spin-nested-loading .ant-spin-text {
+      color: ${i.text.focus} !important;
+      font-size: 14px;
+      line-height: 18px;
+      font-weight: 600;
+      margin-top: 8px;
+    }
+
+    .${o}.ant-spin-sm .${s} {
+      --ds-spin-loader-size: ${c.small};
+    }
+
+    .${o}.ant-spin-lg .${s} {
+      --ds-spin-loader-size: ${c.large};
+    }
+
+    .${o}.ant-spin-fullscreen {
+      background: color-mix(in srgb, ${e.surface.subtle} 72%, transparent) !important;
+    }
+  `;
+}
+function u(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function d(e, t) {
+	return e === void 0 ? c[t ?? "default"] : typeof e == "number" ? `${e}px` : e;
+}
+function f() {
+	return /* @__PURE__ */ i("span", {
+		className: s,
+		"aria-hidden": "true"
+	});
+}
+function p({ className: e, indicator: t, size: a = "default", style: s, dsLoaderSize: c, ...p }) {
+	r(() => {
+		l();
+	}, []);
+	let m = {
+		...s,
+		"--ds-spin-loader-size": d(c, a)
+	};
+	return /* @__PURE__ */ i(n, {
+		...p,
+		size: a,
+		className: u(o, e),
+		indicator: t ?? /* @__PURE__ */ i(f, {}),
+		style: m
+	});
+}
+//#endregion
+export { p as Spin };
+
+//# sourceMappingURL=Spin.js.map

package/dist-lib/feedback/Spin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.js","names":[],"sources":["../../src/ds/feedback/Spin.tsx"],"sourcesContent":["import { Spin as AntSpin } from 'antd';\nimport type { SpinProps } from 'antd';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\n\nconst STYLE_ID = 'ds-spin-styles';\nconst DS_SPIN_CLASS = 'ds-spin';\nconst DS_SPIN_INDICATOR_CLASS = 'ds-spin-circular-loader';\n\ntype DSSpinSize = NonNullable<SpinProps['size']>;\n\nexport type DSSpinProps = SpinProps & {\n  dsLoaderSize?: string | number;\n};\n\nconst loaderSizeBySpinSize: Record<DSSpinSize, string> = {\n  small: '24px',\n  default: '40px',\n  middle: '40px',\n  medium: '40px',\n  large: '75px',\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\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  const { button, input } = dsSemanticTokens;\n  style.textContent = `\n    @keyframes ds-spin-circular-loader-rotate {\n      to { transform: rotate(360deg); }\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin,\n    .${DS_SPIN_CLASS}.ant-spin-nested-loading,\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-text {\n      font-family: 'Nunito', sans-serif !important;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-dot {\n      width: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default}) !important;\n      height: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default}) !important;\n      display: inline-flex !important;\n      align-items: center;\n      justify-content: center;\n      margin: 0 !important;\n      transform: none !important;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-dot-holder {\n      color: ${button.primary.default} !important;\n    }\n\n    .${DS_SPIN_INDICATOR_CLASS} {\n      width: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default});\n      height: var(--ds-spin-loader-size, ${loaderSizeBySpinSize.default});\n      display: inline-block;\n      border-radius: 50%;\n      background: conic-gradient(${button.primary.default} 0deg 92deg, ${input.background.disabled} 92deg 360deg);\n      animation: ds-spin-circular-loader-rotate 1s linear infinite;\n      position: relative;\n    }\n\n    .${DS_SPIN_INDICATOR_CLASS}::after {\n      content: '';\n      position: absolute;\n      inset: 18%;\n      border-radius: 50%;\n      background: ${input.background.default};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin .ant-spin-text,\n    .${DS_SPIN_CLASS}.ant-spin-nested-loading .ant-spin-text {\n      color: ${input.text.focus} !important;\n      font-size: 14px;\n      line-height: 18px;\n      font-weight: 600;\n      margin-top: 8px;\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-sm .${DS_SPIN_INDICATOR_CLASS} {\n      --ds-spin-loader-size: ${loaderSizeBySpinSize.small};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-lg .${DS_SPIN_INDICATOR_CLASS} {\n      --ds-spin-loader-size: ${loaderSizeBySpinSize.large};\n    }\n\n    .${DS_SPIN_CLASS}.ant-spin-fullscreen {\n      background: color-mix(in srgb, ${CORE_COLORS.surface.subtle} 72%, transparent) !important;\n    }\n  `;\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nfunction formatLoaderSize(size: string | number | undefined, spinSize: SpinProps['size']) {\n  if (size === undefined) {\n    return loaderSizeBySpinSize[spinSize ?? 'default'];\n  }\n\n  return typeof size === 'number' ? `${size}px` : size;\n}\n\nfunction CircularLoader() {\n  return <span className={DS_SPIN_INDICATOR_CLASS} aria-hidden=\"true\" />;\n}\n\nexport function Spin({ className, indicator, size = 'default', style, dsLoaderSize, ...props }: DSSpinProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const mergedStyle: CSSProperties = {\n    ...style,\n    ['--ds-spin-loader-size' as string]: formatLoaderSize(dsLoaderSize, size),\n  };\n\n  return (\n    <AntSpin\n      {...props}\n      size={size}\n      className={mergeClassNames(DS_SPIN_CLASS, className)}\n      indicator={indicator ?? <CircularLoader />}\n      style={mergedStyle}\n    />\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAM,IAAW,kBACX,IAAgB,WAChB,IAA0B,2BAQ1B,IAAmD;CACvD,OAAO;CACP,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,OAAO;CACR;AAED,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAI,IAAQ,SAAS,eAAe,EAAS;AAC7C,CAAK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM;CAGlC,IAAM,EAAE,WAAQ,aAAU;AAC1B,GAAM,cAAc;;;;;OAKf,EAAc;OACd,EAAc;OACd,EAAc;;;;OAId,EAAc;0CACqB,EAAqB,QAAQ;2CAC5B,EAAqB,QAAQ;;;;;;;;OAQjE,EAAc;eACN,EAAO,QAAQ,QAAQ;;;OAG/B,EAAwB;0CACW,EAAqB,QAAQ;2CAC5B,EAAqB,QAAQ;;;mCAGrC,EAAO,QAAQ,QAAQ,eAAe,EAAM,WAAW,SAAS;;;;;OAK5F,EAAwB;;;;;oBAKX,EAAM,WAAW,QAAQ;;;OAGtC,EAAc;OACd,EAAc;eACN,EAAM,KAAK,MAAM;;;;;;;OAOzB,EAAc,gBAAgB,EAAwB;+BAC9B,EAAqB,MAAM;;;OAGnD,EAAc,gBAAgB,EAAwB;+BAC9B,EAAqB,MAAM;;;OAGnD,EAAc;uCACkB,EAAY,QAAQ,OAAO;;;;AAKlE,SAAS,EAAgB,GAAG,GAAkC;AAC5D,QAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI;;AAGxC,SAAS,EAAiB,GAAmC,GAA6B;AAKxF,QAJI,MAAS,KAAA,IACJ,EAAqB,KAAY,aAGnC,OAAO,KAAS,WAAW,GAAG,EAAK,MAAM;;AAGlD,SAAS,IAAiB;AACxB,QAAO,kBAAC,QAAD;EAAM,WAAW;EAAyB,eAAY;EAAS,CAAA;;AAGxE,SAAgB,EAAK,EAAE,cAAW,cAAW,UAAO,WAAW,UAAO,iBAAc,GAAG,KAAsB;AAC3G,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAEN,IAAM,IAA6B;EACjC,GAAG;EACF,yBAAoC,EAAiB,GAAc,EAAK;EAC1E;AAED,QACE,kBAAC,GAAD;EACE,GAAI;EACE;EACN,WAAW,EAAgB,GAAe,EAAU;EACpD,WAAW,KAAa,kBAAC,GAAD,EAAkB,CAAA;EAC1C,OAAO;EACP,CAAA"}

package/dist-lib/feedback/Tour.cjs

@@ -0,0 +1,154 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../core-bPY3ouxp.cjs`),t=require(`../theme.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-tour-styles`,o={onboarding:{type:`primary`,placement:`bottom`,mask:!0,arrow:!0},featureDiscovery:{type:`default`,placement:`bottom`,mask:!1,arrow:!0},workflow:{type:`default`,placement:`right`,mask:{color:`rgba(30, 57, 78, 0.42)`},arrow:!0},compliance:{type:`primary`,placement:`bottomLeft`,mask:!0,arrow:!1}};function s(...e){return e.filter(Boolean).join(` `).trim()}function c(){if(typeof document>`u`)return;let{button:n,tooltip:r}=t.dsSemanticTokens,i=document.getElementById(a);i||(i=document.createElement(`style`),i.id=a,document.head.appendChild(i)),i.textContent=`
+    .ds-tour {
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-tour .ant-tour-section {
+      border-radius: 10px;
+      border: 1px solid ${e.t.surface.divider};
+      box-shadow: 0 8px 20px rgba(30, 57, 78, 0.16);
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-section {
+      background: ${e.t.surface.subtle} !important;
+      border-color: ${e.t.brand.brandTint} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-title {
+      color: ${r.surface.title} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-description {
+      color: ${r.surface.body} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-close {
+      color: ${r.surface.body} !important;
+    }
+
+    .ds-tour .ant-tour-header {
+      margin-bottom: 8px;
+    }
+
+    .ds-tour .ant-tour-title {
+      color: ${r.surface.title};
+      font-size: 16px;
+      line-height: 22px;
+      font-weight: 700;
+    }
+
+    .ds-tour .ant-tour-description {
+      color: ${r.surface.body};
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 600;
+    }
+
+    .ds-tour .ant-tour-close {
+      color: ${r.surface.body};
+    }
+
+    .ds-tour .ant-tour-indicator {
+      width: 8px !important;
+      height: 8px !important;
+      border-radius: 999px;
+      border: 1px solid ${e.t.brand.brandTint} !important;
+      background: ${e.t.surface.neutralSoft} !important;
+    }
+
+    .ds-tour .ant-tour-indicator:not(.ant-tour-indicator-active) {
+      border-color: ${e.t.brand.brandTint} !important;
+      background: ${e.t.surface.neutralSoft} !important;
+    }
+
+    .ds-tour .ant-tour-indicator.ant-tour-indicator-active {
+      background: ${e.t.brand.primary} !important;
+      border-color: ${e.t.brand.primary} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-indicator {
+      border-color: ${e.t.brand.brandTint} !important;
+      background: color-mix(in srgb, ${e.t.brand.brandTint} 30%, transparent) !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-indicator.ant-tour-indicator-active {
+      border-color: ${e.t.brand.primary} !important;
+      background: ${e.t.brand.primary} !important;
+    }
+
+    .ds-tour .ant-tour-buttons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn {
+      border-radius: 6px;
+      min-height: 30px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+      text-transform: uppercase;
+      box-shadow: none !important;
+      transition: none !important;
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-default {
+      border: 1px solid ${n.secondary.defaultBorder};
+      background: ${n.secondary.defaultBg};
+      color: ${n.secondary.defaultText};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-default:hover,
+    .ds-tour .ant-tour-buttons .ant-btn-default:focus,
+    .ds-tour .ant-tour-buttons .ant-btn-default:active {
+      border-color: ${n.secondary.hoverBorder};
+      background: ${n.secondary.hoverBg};
+      color: ${n.secondary.hoverText};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-primary {
+      border: 1px solid ${n.primary.default};
+      background: ${n.primary.default};
+      color: ${n.primary.text};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-primary:hover,
+    .ds-tour .ant-tour-buttons .ant-btn-primary:focus,
+    .ds-tour .ant-tour-buttons .ant-btn-primary:active {
+      border-color: ${n.primary.hover};
+      background: ${n.primary.hover};
+      color: ${n.primary.text};
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-section {
+      padding: 12px;
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-title {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-description {
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .ds-tour.ds-tour--onboarding .ant-tour-section,
+    .ds-tour.ds-tour--compliance .ant-tour-section {
+      border-color: ${e.t.brand.brandTint};
+    }
+
+    .ds-tour.ds-tour--featureDiscovery .ant-tour-section {
+      border-color: ${e.t.surface.divider};
+      box-shadow: 0 6px 14px rgba(30, 57, 78, 0.12);
+    }
+
+    .ds-tour.ds-tour--workflow .ant-tour-section {
+      border-color: ${e.t.brand.brandTint};
+    }
+  `}function l({dsVariant:e=`onboarding`,dsDensity:t=`comfortable`,className:a,type:l,placement:u,mask:d,arrow:f,...p}){(0,r.useEffect)(()=>{c()},[]);let m=o[e];return(0,i.jsx)(n.Tour,{...p,className:s(`ds-tour`,`ds-tour--${e}`,`ds-tour--${t}`,a),type:l??m.type,placement:u??m.placement,mask:d??m.mask,arrow:f??m.arrow})}l.displayName=`Tour`,exports.Tour=l;
+//# sourceMappingURL=Tour.cjs.map

package/dist-lib/feedback/Tour.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.cjs","names":[],"sources":["../../src/ds/feedback/Tour.tsx"],"sourcesContent":["import { Tour as AntTour } from 'antd';\nimport type { TourProps as AntTourProps } from 'antd';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\n\nexport type DSTourVariant = 'onboarding' | 'featureDiscovery' | 'workflow' | 'compliance';\nexport type DSTourDensity = 'comfortable' | 'compact';\n\nexport type TourProps = AntTourProps & {\n  /** Semantic DS variant for tour use-case context. */\n  dsVariant?: DSTourVariant;\n  /** DS density preset for popover spacing. */\n  dsDensity?: DSTourDensity;\n};\n\nconst STYLE_ID = 'ds-tour-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<\n  DSTourVariant,\n  Pick<AntTourProps, 'type' | 'placement' | 'mask' | 'arrow'>\n> = {\n  onboarding: { type: 'primary', placement: 'bottom', mask: true, arrow: true },\n  featureDiscovery: { type: 'default', placement: 'bottom', mask: false, arrow: true },\n  workflow: { type: 'default', placement: 'right', mask: { color: 'rgba(30, 57, 78, 0.42)' }, arrow: true },\n  compliance: { type: 'primary', placement: 'bottomLeft', mask: true, arrow: 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 { button, tooltip } = 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-tour {\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-tour .ant-tour-section {\n      border-radius: 10px;\n      border: 1px solid ${CORE_COLORS.surface.divider};\n      box-shadow: 0 8px 20px rgba(30, 57, 78, 0.16);\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-section {\n      background: ${CORE_COLORS.surface.subtle} !important;\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-title {\n      color: ${tooltip.surface.title} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-description {\n      color: ${tooltip.surface.body} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-close {\n      color: ${tooltip.surface.body} !important;\n    }\n\n    .ds-tour .ant-tour-header {\n      margin-bottom: 8px;\n    }\n\n    .ds-tour .ant-tour-title {\n      color: ${tooltip.surface.title};\n      font-size: 16px;\n      line-height: 22px;\n      font-weight: 700;\n    }\n\n    .ds-tour .ant-tour-description {\n      color: ${tooltip.surface.body};\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 600;\n    }\n\n    .ds-tour .ant-tour-close {\n      color: ${tooltip.surface.body};\n    }\n\n    .ds-tour .ant-tour-indicator {\n      width: 8px !important;\n      height: 8px !important;\n      border-radius: 999px;\n      border: 1px solid ${CORE_COLORS.brand.brandTint} !important;\n      background: ${CORE_COLORS.surface.neutralSoft} !important;\n    }\n\n    .ds-tour .ant-tour-indicator:not(.ant-tour-indicator-active) {\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n      background: ${CORE_COLORS.surface.neutralSoft} !important;\n    }\n\n    .ds-tour .ant-tour-indicator.ant-tour-indicator-active {\n      background: ${CORE_COLORS.brand.primary} !important;\n      border-color: ${CORE_COLORS.brand.primary} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-indicator {\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n      background: color-mix(in srgb, ${CORE_COLORS.brand.brandTint} 30%, transparent) !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-indicator.ant-tour-indicator-active {\n      border-color: ${CORE_COLORS.brand.primary} !important;\n      background: ${CORE_COLORS.brand.primary} !important;\n    }\n\n    .ds-tour .ant-tour-buttons {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn {\n      border-radius: 6px;\n      min-height: 30px;\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      letter-spacing: 0.01em;\n      text-transform: uppercase;\n      box-shadow: none !important;\n      transition: none !important;\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-default {\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-default:hover,\n    .ds-tour .ant-tour-buttons .ant-btn-default:focus,\n    .ds-tour .ant-tour-buttons .ant-btn-default:active {\n      border-color: ${button.secondary.hoverBorder};\n      background: ${button.secondary.hoverBg};\n      color: ${button.secondary.hoverText};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-primary {\n      border: 1px solid ${button.primary.default};\n      background: ${button.primary.default};\n      color: ${button.primary.text};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-primary:hover,\n    .ds-tour .ant-tour-buttons .ant-btn-primary:focus,\n    .ds-tour .ant-tour-buttons .ant-btn-primary:active {\n      border-color: ${button.primary.hover};\n      background: ${button.primary.hover};\n      color: ${button.primary.text};\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-section {\n      padding: 12px;\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-title {\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-description {\n      font-size: 12px;\n      line-height: 18px;\n    }\n\n    .ds-tour.ds-tour--onboarding .ant-tour-section,\n    .ds-tour.ds-tour--compliance .ant-tour-section {\n      border-color: ${CORE_COLORS.brand.brandTint};\n    }\n\n    .ds-tour.ds-tour--featureDiscovery .ant-tour-section {\n      border-color: ${CORE_COLORS.surface.divider};\n      box-shadow: 0 6px 14px rgba(30, 57, 78, 0.12);\n    }\n\n    .ds-tour.ds-tour--workflow .ant-tour-section {\n      border-color: ${CORE_COLORS.brand.brandTint};\n    }\n  `;\n}\n\nexport function Tour({\n  dsVariant = 'onboarding',\n  dsDensity = 'comfortable',\n  className,\n  type,\n  placement,\n  mask,\n  arrow,\n  ...props\n}: TourProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n\n  return (\n    <AntTour\n      {...props}\n      className={mergeClassNames('ds-tour', `ds-tour--${dsVariant}`, `ds-tour--${dsDensity}`, className)}\n      type={type ?? defaults.type}\n      placement={placement ?? defaults.placement}\n      mask={mask ?? defaults.mask}\n      arrow={arrow ?? defaults.arrow}\n    />\n  );\n}\n\nTour.displayName = 'Tour';"],"mappings":"8OAgBA,IAAM,EAAW,iBAEX,EAGF,CACF,WAAY,CAAE,KAAM,UAAW,UAAW,SAAU,KAAM,GAAM,MAAO,GAAM,CAC7E,iBAAkB,CAAE,KAAM,UAAW,UAAW,SAAU,KAAM,GAAO,MAAO,GAAM,CACpF,SAAU,CAAE,KAAM,UAAW,UAAW,QAAS,KAAM,CAAE,MAAO,yBAA0B,CAAE,MAAO,GAAM,CACzG,WAAY,CAAE,KAAM,UAAW,UAAW,aAAc,KAAM,GAAM,MAAO,GAAO,CACnF,CAED,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,SAAQ,WAAY,EAAA,iBACxB,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;;;;;;;0BAOI,EAAA,EAAY,QAAQ,QAAQ;;;;;;oBAMlC,EAAA,EAAY,QAAQ,OAAO;sBACzB,EAAA,EAAY,MAAM,UAAU;;;;eAInC,EAAQ,QAAQ,MAAM;;;;eAItB,EAAQ,QAAQ,KAAK;;;;eAIrB,EAAQ,QAAQ,KAAK;;;;;;;;eAQrB,EAAQ,QAAQ,MAAM;;;;;;;eAOtB,EAAQ,QAAQ,KAAK;;;;;;;eAOrB,EAAQ,QAAQ,KAAK;;;;;;;0BAOV,EAAA,EAAY,MAAM,UAAU;oBAClC,EAAA,EAAY,QAAQ,YAAY;;;;sBAI9B,EAAA,EAAY,MAAM,UAAU;oBAC9B,EAAA,EAAY,QAAQ,YAAY;;;;oBAIhC,EAAA,EAAY,MAAM,QAAQ;sBACxB,EAAA,EAAY,MAAM,QAAQ;;;;sBAI1B,EAAA,EAAY,MAAM,UAAU;uCACX,EAAA,EAAY,MAAM,UAAU;;;;sBAI7C,EAAA,EAAY,MAAM,QAAQ;oBAC5B,EAAA,EAAY,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;0BAsBpB,EAAO,UAAU,cAAc;oBACrC,EAAO,UAAU,UAAU;eAChC,EAAO,UAAU,YAAY;;;;;;sBAMtB,EAAO,UAAU,YAAY;oBAC/B,EAAO,UAAU,QAAQ;eAC9B,EAAO,UAAU,UAAU;;;;0BAIhB,EAAO,QAAQ,QAAQ;oBAC7B,EAAO,QAAQ,QAAQ;eAC5B,EAAO,QAAQ,KAAK;;;;;;sBAMb,EAAO,QAAQ,MAAM;oBACvB,EAAO,QAAQ,MAAM;eAC1B,EAAO,QAAQ,KAAK;;;;;;;;;;;;;;;;;;;sBAmBb,EAAA,EAAY,MAAM,UAAU;;;;sBAI5B,EAAA,EAAY,QAAQ,QAAQ;;;;;sBAK5B,EAAA,EAAY,MAAM,UAAU;;IAKlD,SAAgB,EAAK,CACnB,YAAY,aACZ,YAAY,cACZ,YACA,OACA,YACA,OACA,QACA,GAAG,GACS,EACZ,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAEN,IAAM,EAAW,EAAoB,GAErC,OACE,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAI,EACJ,UAAW,EAAgB,UAAW,YAAY,IAAa,YAAY,IAAa,EAAU,CAClG,KAAM,GAAQ,EAAS,KACvB,UAAW,GAAa,EAAS,UACjC,KAAM,GAAQ,EAAS,KACvB,MAAO,GAAS,EAAS,MACzB,CAAA,CAIN,EAAK,YAAc"}

package/dist-lib/feedback/Tour.js

@@ -0,0 +1,211 @@
+import { t as e } from "../core-C-tv3mqr.js";
+import { dsSemanticTokens as t } from "../theme.js";
+import { Tour as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/feedback/Tour.tsx
+var a = "ds-tour-styles", o = {
+	onboarding: {
+		type: "primary",
+		placement: "bottom",
+		mask: !0,
+		arrow: !0
+	},
+	featureDiscovery: {
+		type: "default",
+		placement: "bottom",
+		mask: !1,
+		arrow: !0
+	},
+	workflow: {
+		type: "default",
+		placement: "right",
+		mask: { color: "rgba(30, 57, 78, 0.42)" },
+		arrow: !0
+	},
+	compliance: {
+		type: "primary",
+		placement: "bottomLeft",
+		mask: !0,
+		arrow: !1
+	}
+};
+function s(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function c() {
+	if (typeof document > "u") return;
+	let { button: n, tooltip: r } = t, i = document.getElementById(a);
+	i || (i = document.createElement("style"), i.id = a, document.head.appendChild(i)), i.textContent = `
+    .ds-tour {
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-tour .ant-tour-section {
+      border-radius: 10px;
+      border: 1px solid ${e.surface.divider};
+      box-shadow: 0 8px 20px rgba(30, 57, 78, 0.16);
+      font-family: 'Nunito', sans-serif;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-section {
+      background: ${e.surface.subtle} !important;
+      border-color: ${e.brand.brandTint} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-title {
+      color: ${r.surface.title} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-description {
+      color: ${r.surface.body} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-close {
+      color: ${r.surface.body} !important;
+    }
+
+    .ds-tour .ant-tour-header {
+      margin-bottom: 8px;
+    }
+
+    .ds-tour .ant-tour-title {
+      color: ${r.surface.title};
+      font-size: 16px;
+      line-height: 22px;
+      font-weight: 700;
+    }
+
+    .ds-tour .ant-tour-description {
+      color: ${r.surface.body};
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 600;
+    }
+
+    .ds-tour .ant-tour-close {
+      color: ${r.surface.body};
+    }
+
+    .ds-tour .ant-tour-indicator {
+      width: 8px !important;
+      height: 8px !important;
+      border-radius: 999px;
+      border: 1px solid ${e.brand.brandTint} !important;
+      background: ${e.surface.neutralSoft} !important;
+    }
+
+    .ds-tour .ant-tour-indicator:not(.ant-tour-indicator-active) {
+      border-color: ${e.brand.brandTint} !important;
+      background: ${e.surface.neutralSoft} !important;
+    }
+
+    .ds-tour .ant-tour-indicator.ant-tour-indicator-active {
+      background: ${e.brand.primary} !important;
+      border-color: ${e.brand.primary} !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-indicator {
+      border-color: ${e.brand.brandTint} !important;
+      background: color-mix(in srgb, ${e.brand.brandTint} 30%, transparent) !important;
+    }
+
+    .ds-tour.ant-tour-primary .ant-tour-indicator.ant-tour-indicator-active {
+      border-color: ${e.brand.primary} !important;
+      background: ${e.brand.primary} !important;
+    }
+
+    .ds-tour .ant-tour-buttons {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn {
+      border-radius: 6px;
+      min-height: 30px;
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+      text-transform: uppercase;
+      box-shadow: none !important;
+      transition: none !important;
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-default {
+      border: 1px solid ${n.secondary.defaultBorder};
+      background: ${n.secondary.defaultBg};
+      color: ${n.secondary.defaultText};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-default:hover,
+    .ds-tour .ant-tour-buttons .ant-btn-default:focus,
+    .ds-tour .ant-tour-buttons .ant-btn-default:active {
+      border-color: ${n.secondary.hoverBorder};
+      background: ${n.secondary.hoverBg};
+      color: ${n.secondary.hoverText};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-primary {
+      border: 1px solid ${n.primary.default};
+      background: ${n.primary.default};
+      color: ${n.primary.text};
+    }
+
+    .ds-tour .ant-tour-buttons .ant-btn-primary:hover,
+    .ds-tour .ant-tour-buttons .ant-btn-primary:focus,
+    .ds-tour .ant-tour-buttons .ant-btn-primary:active {
+      border-color: ${n.primary.hover};
+      background: ${n.primary.hover};
+      color: ${n.primary.text};
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-section {
+      padding: 12px;
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-title {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .ds-tour.ds-tour--compact .ant-tour-description {
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    .ds-tour.ds-tour--onboarding .ant-tour-section,
+    .ds-tour.ds-tour--compliance .ant-tour-section {
+      border-color: ${e.brand.brandTint};
+    }
+
+    .ds-tour.ds-tour--featureDiscovery .ant-tour-section {
+      border-color: ${e.surface.divider};
+      box-shadow: 0 6px 14px rgba(30, 57, 78, 0.12);
+    }
+
+    .ds-tour.ds-tour--workflow .ant-tour-section {
+      border-color: ${e.brand.brandTint};
+    }
+  `;
+}
+function l({ dsVariant: e = "onboarding", dsDensity: t = "comfortable", className: a, type: l, placement: u, mask: d, arrow: f, ...p }) {
+	r(() => {
+		c();
+	}, []);
+	let m = o[e];
+	return /* @__PURE__ */ i(n, {
+		...p,
+		className: s("ds-tour", `ds-tour--${e}`, `ds-tour--${t}`, a),
+		type: l ?? m.type,
+		placement: u ?? m.placement,
+		mask: d ?? m.mask,
+		arrow: f ?? m.arrow
+	});
+}
+l.displayName = "Tour";
+//#endregion
+export { l as Tour };
+
+//# sourceMappingURL=Tour.js.map

package/dist-lib/feedback/Tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.js","names":[],"sources":["../../src/ds/feedback/Tour.tsx"],"sourcesContent":["import { Tour as AntTour } from 'antd';\nimport type { TourProps as AntTourProps } from 'antd';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { CORE_COLORS } from '../../tokens/core';\n\nexport type DSTourVariant = 'onboarding' | 'featureDiscovery' | 'workflow' | 'compliance';\nexport type DSTourDensity = 'comfortable' | 'compact';\n\nexport type TourProps = AntTourProps & {\n  /** Semantic DS variant for tour use-case context. */\n  dsVariant?: DSTourVariant;\n  /** DS density preset for popover spacing. */\n  dsDensity?: DSTourDensity;\n};\n\nconst STYLE_ID = 'ds-tour-styles';\n\nconst DEFAULTS_BY_VARIANT: Record<\n  DSTourVariant,\n  Pick<AntTourProps, 'type' | 'placement' | 'mask' | 'arrow'>\n> = {\n  onboarding: { type: 'primary', placement: 'bottom', mask: true, arrow: true },\n  featureDiscovery: { type: 'default', placement: 'bottom', mask: false, arrow: true },\n  workflow: { type: 'default', placement: 'right', mask: { color: 'rgba(30, 57, 78, 0.42)' }, arrow: true },\n  compliance: { type: 'primary', placement: 'bottomLeft', mask: true, arrow: 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 { button, tooltip } = 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-tour {\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-tour .ant-tour-section {\n      border-radius: 10px;\n      border: 1px solid ${CORE_COLORS.surface.divider};\n      box-shadow: 0 8px 20px rgba(30, 57, 78, 0.16);\n      font-family: 'Nunito', sans-serif;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-section {\n      background: ${CORE_COLORS.surface.subtle} !important;\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-title {\n      color: ${tooltip.surface.title} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-description {\n      color: ${tooltip.surface.body} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-close {\n      color: ${tooltip.surface.body} !important;\n    }\n\n    .ds-tour .ant-tour-header {\n      margin-bottom: 8px;\n    }\n\n    .ds-tour .ant-tour-title {\n      color: ${tooltip.surface.title};\n      font-size: 16px;\n      line-height: 22px;\n      font-weight: 700;\n    }\n\n    .ds-tour .ant-tour-description {\n      color: ${tooltip.surface.body};\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 600;\n    }\n\n    .ds-tour .ant-tour-close {\n      color: ${tooltip.surface.body};\n    }\n\n    .ds-tour .ant-tour-indicator {\n      width: 8px !important;\n      height: 8px !important;\n      border-radius: 999px;\n      border: 1px solid ${CORE_COLORS.brand.brandTint} !important;\n      background: ${CORE_COLORS.surface.neutralSoft} !important;\n    }\n\n    .ds-tour .ant-tour-indicator:not(.ant-tour-indicator-active) {\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n      background: ${CORE_COLORS.surface.neutralSoft} !important;\n    }\n\n    .ds-tour .ant-tour-indicator.ant-tour-indicator-active {\n      background: ${CORE_COLORS.brand.primary} !important;\n      border-color: ${CORE_COLORS.brand.primary} !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-indicator {\n      border-color: ${CORE_COLORS.brand.brandTint} !important;\n      background: color-mix(in srgb, ${CORE_COLORS.brand.brandTint} 30%, transparent) !important;\n    }\n\n    .ds-tour.ant-tour-primary .ant-tour-indicator.ant-tour-indicator-active {\n      border-color: ${CORE_COLORS.brand.primary} !important;\n      background: ${CORE_COLORS.brand.primary} !important;\n    }\n\n    .ds-tour .ant-tour-buttons {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn {\n      border-radius: 6px;\n      min-height: 30px;\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      letter-spacing: 0.01em;\n      text-transform: uppercase;\n      box-shadow: none !important;\n      transition: none !important;\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-default {\n      border: 1px solid ${button.secondary.defaultBorder};\n      background: ${button.secondary.defaultBg};\n      color: ${button.secondary.defaultText};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-default:hover,\n    .ds-tour .ant-tour-buttons .ant-btn-default:focus,\n    .ds-tour .ant-tour-buttons .ant-btn-default:active {\n      border-color: ${button.secondary.hoverBorder};\n      background: ${button.secondary.hoverBg};\n      color: ${button.secondary.hoverText};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-primary {\n      border: 1px solid ${button.primary.default};\n      background: ${button.primary.default};\n      color: ${button.primary.text};\n    }\n\n    .ds-tour .ant-tour-buttons .ant-btn-primary:hover,\n    .ds-tour .ant-tour-buttons .ant-btn-primary:focus,\n    .ds-tour .ant-tour-buttons .ant-btn-primary:active {\n      border-color: ${button.primary.hover};\n      background: ${button.primary.hover};\n      color: ${button.primary.text};\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-section {\n      padding: 12px;\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-title {\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .ds-tour.ds-tour--compact .ant-tour-description {\n      font-size: 12px;\n      line-height: 18px;\n    }\n\n    .ds-tour.ds-tour--onboarding .ant-tour-section,\n    .ds-tour.ds-tour--compliance .ant-tour-section {\n      border-color: ${CORE_COLORS.brand.brandTint};\n    }\n\n    .ds-tour.ds-tour--featureDiscovery .ant-tour-section {\n      border-color: ${CORE_COLORS.surface.divider};\n      box-shadow: 0 6px 14px rgba(30, 57, 78, 0.12);\n    }\n\n    .ds-tour.ds-tour--workflow .ant-tour-section {\n      border-color: ${CORE_COLORS.brand.brandTint};\n    }\n  `;\n}\n\nexport function Tour({\n  dsVariant = 'onboarding',\n  dsDensity = 'comfortable',\n  className,\n  type,\n  placement,\n  mask,\n  arrow,\n  ...props\n}: TourProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n\n  return (\n    <AntTour\n      {...props}\n      className={mergeClassNames('ds-tour', `ds-tour--${dsVariant}`, `ds-tour--${dsDensity}`, className)}\n      type={type ?? defaults.type}\n      placement={placement ?? defaults.placement}\n      mask={mask ?? defaults.mask}\n      arrow={arrow ?? defaults.arrow}\n    />\n  );\n}\n\nTour.displayName = 'Tour';"],"mappings":";;;;;;AAgBA,IAAM,IAAW,kBAEX,IAGF;CACF,YAAY;EAAE,MAAM;EAAW,WAAW;EAAU,MAAM;EAAM,OAAO;EAAM;CAC7E,kBAAkB;EAAE,MAAM;EAAW,WAAW;EAAU,MAAM;EAAO,OAAO;EAAM;CACpF,UAAU;EAAE,MAAM;EAAW,WAAW;EAAS,MAAM,EAAE,OAAO,0BAA0B;EAAE,OAAO;EAAM;CACzG,YAAY;EAAE,MAAM;EAAW,WAAW;EAAc,MAAM;EAAM,OAAO;EAAO;CACnF;AAED,SAAS,EAAgB,GAAG,GAAuC;AACjE,QAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;;AAGpD,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAM,EAAE,WAAQ,eAAY,GACxB,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;;;;;;;0BAOI,EAAY,QAAQ,QAAQ;;;;;;oBAMlC,EAAY,QAAQ,OAAO;sBACzB,EAAY,MAAM,UAAU;;;;eAInC,EAAQ,QAAQ,MAAM;;;;eAItB,EAAQ,QAAQ,KAAK;;;;eAIrB,EAAQ,QAAQ,KAAK;;;;;;;;eAQrB,EAAQ,QAAQ,MAAM;;;;;;;eAOtB,EAAQ,QAAQ,KAAK;;;;;;;eAOrB,EAAQ,QAAQ,KAAK;;;;;;;0BAOV,EAAY,MAAM,UAAU;oBAClC,EAAY,QAAQ,YAAY;;;;sBAI9B,EAAY,MAAM,UAAU;oBAC9B,EAAY,QAAQ,YAAY;;;;oBAIhC,EAAY,MAAM,QAAQ;sBACxB,EAAY,MAAM,QAAQ;;;;sBAI1B,EAAY,MAAM,UAAU;uCACX,EAAY,MAAM,UAAU;;;;sBAI7C,EAAY,MAAM,QAAQ;oBAC5B,EAAY,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;0BAsBpB,EAAO,UAAU,cAAc;oBACrC,EAAO,UAAU,UAAU;eAChC,EAAO,UAAU,YAAY;;;;;;sBAMtB,EAAO,UAAU,YAAY;oBAC/B,EAAO,UAAU,QAAQ;eAC9B,EAAO,UAAU,UAAU;;;;0BAIhB,EAAO,QAAQ,QAAQ;oBAC7B,EAAO,QAAQ,QAAQ;eAC5B,EAAO,QAAQ,KAAK;;;;;;sBAMb,EAAO,QAAQ,MAAM;oBACvB,EAAO,QAAQ,MAAM;eAC1B,EAAO,QAAQ,KAAK;;;;;;;;;;;;;;;;;;;sBAmBb,EAAY,MAAM,UAAU;;;;sBAI5B,EAAY,QAAQ,QAAQ;;;;;sBAK5B,EAAY,MAAM,UAAU;;;;AAKlD,SAAgB,EAAK,EACnB,eAAY,cACZ,eAAY,eACZ,cACA,SACA,cACA,SACA,UACA,GAAG,KACS;AACZ,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAEN,IAAM,IAAW,EAAoB;AAErC,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAgB,WAAW,YAAY,KAAa,YAAY,KAAa,EAAU;EAClG,MAAM,KAAQ,EAAS;EACvB,WAAW,KAAa,EAAS;EACjC,MAAM,KAAQ,EAAS;EACvB,OAAO,KAAS,EAAS;EACzB,CAAA;;AAIN,EAAK,cAAc"}

package/dist-lib/feedback/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Modal.cjs`),t=require(`./Message.cjs`),n=require(`./Notification.cjs`),r=require(`./Popconfirm.cjs`),i=require(`./Spin.cjs`),a=require(`./FloatButton.cjs`),o=require(`./Drawer.cjs`),s=require(`./Progress.cjs`),c=require(`./Skeleton.cjs`),l=require(`./Result.cjs`),u=require(`./Tour.cjs`);exports.Drawer=o.Drawer,exports.FloatButton=a.FloatButton,exports.Modal=e.Modal,exports.Popconfirm=r.Popconfirm,exports.Progress=s.Progress,exports.Result=l.Result,exports.Skeleton=c.Skeleton,exports.Spin=i.Spin,exports.Tour=u.Tour,exports.messageDS=t.messageDS,exports.notificationDS=n.notificationDS,exports.useMessage=t.useMessage,exports.useNotification=n.useNotification;