npm - @economic/taco - Versions diffs - 8.1.2-hanger-base-ui.3 → 8.1.2 - Mend

@economic/taco 8.1.2-hanger-base-ui.3 → 8.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/dist/components/Select2/utilities.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utilities.cjs","sources":["../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 ~~bg-white~~ aria-current:~~wcag~~-gray-~~200~~ aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:~~wcag~~-gray-~~200~~': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n default:\n return 'text-sm';\n }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["FontSizes"],"mappings":";;;;AAIa,MAAA,wBAAwB,CAAC,wBAAwB,UAC1D;AAAA,EACI;AAAA,EAEA;AAAA,IACI,~~uBAAuB~~,CAAC;AAAA,EAAA;~~AAEhC~~;AAEG,MAAM,4BAA4B,MAAM;AAElC,MAAA,cAAc,CAAC,aAAwB;AAChD,UAAQ,UAAU;AAAA,IACd,KAAKA,MAAU,UAAA;AACJ,aAAA;AAAA,IAEX,KAAKA,MAAU,UAAA;AACJ,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,eAAe,CAAC,OAA+C,gBAAwB;;AAC5F,OAAA,WAAM,MAAM,cAAZ,mBAAuB,cAAc,SAAS,YAAY,YAAY,IAAI;AACnE,WAAA;AAAA,EAAA;AAGP,OAAA,WAAM,MAAM,gBAAZ,mBAAyB,cAAc,SAAS,YAAY,YAAY,IAAI;AACrE,WAAA;AAAA,EAAA;AAGJ,SAAA,OAAO,MAAM,MAAM,QAAQ,EAAE,cAAc,SAAS,YAAY,aAAa;AACxF;;;;;"}
1	+ {"version":3,"file":"utilities.cjs","sources":["../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 aria-current:bg-gray-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:bg-gray-100': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n default:\n return 'text-sm';\n }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["FontSizes"],"mappings":";;;;AAIa,MAAA,wBAAwB,CAAC,wBAAwB,UAC1D;AAAA,EACI;AAAA,EAEA;AAAA,IACI,qBAAqB,CAAC;AAAA,EAAA;AAE9B;AAEG,MAAM,4BAA4B,MAAM;AAElC,MAAA,cAAc,CAAC,aAAwB;AAChD,UAAQ,UAAU;AAAA,IACd,KAAKA,MAAU,UAAA;AACJ,aAAA;AAAA,IAEX,KAAKA,MAAU,UAAA;AACJ,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,eAAe,CAAC,OAA+C,gBAAwB;;AAC5F,OAAA,WAAM,MAAM,cAAZ,mBAAuB,cAAc,SAAS,YAAY,YAAY,IAAI;AACnE,WAAA;AAAA,EAAA;AAGP,OAAA,WAAM,MAAM,gBAAZ,mBAAyB,cAAc,SAAS,YAAY,YAAY,IAAI;AACrE,WAAA;AAAA,EAAA;AAGJ,SAAA,OAAO,MAAM,MAAM,QAAQ,EAAE,cAAc,SAAS,YAAY,aAAa;AACxF;;;;;"}

package/dist/components/Select2/utilities.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import cn from "clsx";
 import { FontSizes } from "../../types.js";
 const createOptionClassName = (shouldPauseHoverState = false) => cn(
-  "group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-gray-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal",
+  "group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 aria-current:bg-gray-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal",
   {
-    "hover:wcag-gray-200": !shouldPauseHoverState
+    "hover:bg-gray-100": !shouldPauseHoverState
   }
 );
 const createCollectionClassName = () => "flex flex-col gap-px";

package/dist/components/Select2/utilities.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utilities.js","sources":["../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 ~~bg-white~~ aria-current:~~wcag~~-gray-~~200~~ aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:~~wcag~~-gray-~~200~~': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n default:\n return 'text-sm';\n }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,CAAC,wBAAwB,UAC1D;AAAA,EACI;AAAA,EAEA;AAAA,IACI,~~uBAAuB~~,CAAC;AAAA,EAAA;~~AAEhC~~;AAEG,MAAM,4BAA4B,MAAM;AAElC,MAAA,cAAc,CAAC,aAAwB;AAChD,UAAQ,UAAU;AAAA,IACd,KAAK,UAAU;AACJ,aAAA;AAAA,IAEX,KAAK,UAAU;AACJ,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,eAAe,CAAC,OAA+C,gBAAwB;;AAC5F,OAAA,WAAM,MAAM,cAAZ,mBAAuB,cAAc,SAAS,YAAY,YAAY,IAAI;AACnE,WAAA;AAAA,EAAA;AAGP,OAAA,WAAM,MAAM,gBAAZ,mBAAyB,cAAc,SAAS,YAAY,YAAY,IAAI;AACrE,WAAA;AAAA,EAAA;AAGJ,SAAA,OAAO,MAAM,MAAM,QAAQ,EAAE,cAAc,SAAS,YAAY,aAAa;AACxF;"}
1	+ {"version":3,"file":"utilities.js","sources":["../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n cn(\n 'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 aria-current:bg-gray-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n {\n 'hover:bg-gray-100': !shouldPauseHoverState,\n }\n );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n switch (fontSize) {\n case FontSizes.small:\n return 'text-xs';\n\n case FontSizes.large:\n return 'text-base';\n\n default:\n return 'text-sm';\n }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n return true;\n }\n\n return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,CAAC,wBAAwB,UAC1D;AAAA,EACI;AAAA,EAEA;AAAA,IACI,qBAAqB,CAAC;AAAA,EAAA;AAE9B;AAEG,MAAM,4BAA4B,MAAM;AAElC,MAAA,cAAc,CAAC,aAAwB;AAChD,UAAQ,UAAU;AAAA,IACd,KAAK,UAAU;AACJ,aAAA;AAAA,IAEX,KAAK,UAAU;AACJ,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,eAAe,CAAC,OAA+C,gBAAwB;;AAC5F,OAAA,WAAM,MAAM,cAAZ,mBAAuB,cAAc,SAAS,YAAY,YAAY,IAAI;AACnE,WAAA;AAAA,EAAA;AAGP,OAAA,WAAM,MAAM,gBAAZ,mBAAyB,cAAc,SAAS,YAAY,YAAY,IAAI;AACrE,WAAA;AAAA,EAAA;AAGJ,SAAA,OAAO,MAAM,MAAM,QAAQ,EAAE,cAAc,SAAS,YAAY,aAAa;AACxF;"}

package/dist/components/Shortcut/Shortcut.cjs CHANGED Viewed

@@ -48,7 +48,7 @@ const Shortcut = ({ keys, ...props }) => {
     "kbd",
     {
       key,
-      className: "font-display text-gray-700 rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white"
+      className: "font-display bg-black-subtle rounded-sm px-1 text-center font-bold text-gray-700 [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white"
     },
     key
   )));

package/dist/components/Shortcut/Shortcut.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Shortcut.cjs","sources":["../../../src/components/Shortcut/Shortcut.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isMacOs, KeyDownHandlerOptions } from '../../utils/keyboard';\n\nconst replaceWithShortform = (key: string) => {\n switch (key) {\n case 'Escape':\n return 'Esc';\n\n case 'Delete':\n return 'Del';\n\n case 'Space':\n case ' ':\n return 'Space';\n\n case 'ArrowLeft':\n return '◄';\n\n case 'ArrowRight':\n return '►';\n\n case 'ArrowUp':\n return '▲';\n\n case 'ArrowDown':\n return '▼';\n\n default:\n return key.length === 1 ? key.toLocaleUpperCase() : key;\n }\n};\n\nconst getShortcutText = (key: string \| KeyDownHandlerOptions) => {\n if (!key) {\n return [];\n }\n\n if (typeof key === 'string') {\n return [replaceWithShortform(key)];\n }\n\n const keys: string[] = [];\n\n if (key.shift) {\n keys.push(isMacOs() ? '⇧' : 'Shift');\n }\n\n if (key.meta) {\n keys.push(isMacOs() ? '⌘' : 'Ctrl');\n }\n\n keys.push(replaceWithShortform(key.key));\n\n return keys;\n};\n\nexport type ShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n keys: string \| KeyDownHandlerOptions;\n};\nexport const Shortcut = ({ keys, ...props }: ShortcutProps) => {\n const className = cn('inline-flex gap-0.5', props.className);\n const texts = getShortcutText(keys);\n\n return (\n <span {...props} className={className}>\n {texts.map(key => (\n <kbd\n key={key}\n className=\"font-display ~~text~~-~~gray~~-~~700~~ rounded-sm ~~bg-black/[0.09]~~ px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white\">\n {key}\n </kbd>\n ))}\n </span>\n );\n};\n"],"names":["isMacOs"],"mappings":";;;;;AAIA,MAAM,uBAAuB,CAAC,QAAgB;AAC1C,UAAQ,KAAK;AAAA,IACT,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AAAA,IACL,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX;AACI,aAAO,IAAI,WAAW,IAAI,IAAI,kBAAsB,IAAA;AAAA,EAAA;AAEhE;AAEA,MAAM,kBAAkB,CAAC,QAAwC;AAC7D,MAAI,CAAC,KAAK;AACN,WAAO,CAAC;AAAA,EAAA;AAGR,MAAA,OAAO,QAAQ,UAAU;AAClB,WAAA,CAAC,qBAAqB,GAAG,CAAC;AAAA,EAAA;AAGrC,QAAM,OAAiB,CAAC;AAExB,MAAI,IAAI,OAAO;AACX,SAAK,KAAKA,SAAAA,YAAY,MAAM,OAAO;AAAA,EAAA;AAGvC,MAAI,IAAI,MAAM;AACV,SAAK,KAAKA,SAAAA,YAAY,MAAM,MAAM;AAAA,EAAA;AAGtC,OAAK,KAAK,qBAAqB,IAAI,GAAG,CAAC;AAEhC,SAAA;AACX;AAKO,MAAM,WAAW,CAAC,EAAE,MAAM,GAAG,YAA2B;AAC3D,QAAM,YAAY,GAAG,uBAAuB,MAAM,SAAS;AACrD,QAAA,QAAQ,gBAAgB,IAAI;AAElC,6CACK,QAAM,EAAA,GAAG,OAAO,UACZ,GAAA,MAAM,IAAI,CACP,QAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IACT;AAAA,EAAA,CAER,CACL;AAER;;"}
1	+ {"version":3,"file":"Shortcut.cjs","sources":["../../../src/components/Shortcut/Shortcut.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isMacOs, KeyDownHandlerOptions } from '../../utils/keyboard';\n\nconst replaceWithShortform = (key: string) => {\n switch (key) {\n case 'Escape':\n return 'Esc';\n\n case 'Delete':\n return 'Del';\n\n case 'Space':\n case ' ':\n return 'Space';\n\n case 'ArrowLeft':\n return '◄';\n\n case 'ArrowRight':\n return '►';\n\n case 'ArrowUp':\n return '▲';\n\n case 'ArrowDown':\n return '▼';\n\n default:\n return key.length === 1 ? key.toLocaleUpperCase() : key;\n }\n};\n\nconst getShortcutText = (key: string \| KeyDownHandlerOptions) => {\n if (!key) {\n return [];\n }\n\n if (typeof key === 'string') {\n return [replaceWithShortform(key)];\n }\n\n const keys: string[] = [];\n\n if (key.shift) {\n keys.push(isMacOs() ? '⇧' : 'Shift');\n }\n\n if (key.meta) {\n keys.push(isMacOs() ? '⌘' : 'Ctrl');\n }\n\n keys.push(replaceWithShortform(key.key));\n\n return keys;\n};\n\nexport type ShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n keys: string \| KeyDownHandlerOptions;\n};\nexport const Shortcut = ({ keys, ...props }: ShortcutProps) => {\n const className = cn('inline-flex gap-0.5', props.className);\n const texts = getShortcutText(keys);\n\n return (\n <span {...props} className={className}>\n {texts.map(key => (\n <kbd\n key={key}\n className=\"font-display bg-black-subtle rounded-sm px-1 text-center font-bold text-gray-700 [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white\">\n {key}\n </kbd>\n ))}\n </span>\n );\n};\n"],"names":["isMacOs"],"mappings":";;;;;AAIA,MAAM,uBAAuB,CAAC,QAAgB;AAC1C,UAAQ,KAAK;AAAA,IACT,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AAAA,IACL,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX;AACI,aAAO,IAAI,WAAW,IAAI,IAAI,kBAAsB,IAAA;AAAA,EAAA;AAEhE;AAEA,MAAM,kBAAkB,CAAC,QAAwC;AAC7D,MAAI,CAAC,KAAK;AACN,WAAO,CAAC;AAAA,EAAA;AAGR,MAAA,OAAO,QAAQ,UAAU;AAClB,WAAA,CAAC,qBAAqB,GAAG,CAAC;AAAA,EAAA;AAGrC,QAAM,OAAiB,CAAC;AAExB,MAAI,IAAI,OAAO;AACX,SAAK,KAAKA,SAAAA,YAAY,MAAM,OAAO;AAAA,EAAA;AAGvC,MAAI,IAAI,MAAM;AACV,SAAK,KAAKA,SAAAA,YAAY,MAAM,MAAM;AAAA,EAAA;AAGtC,OAAK,KAAK,qBAAqB,IAAI,GAAG,CAAC;AAEhC,SAAA;AACX;AAKO,MAAM,WAAW,CAAC,EAAE,MAAM,GAAG,YAA2B;AAC3D,QAAM,YAAY,GAAG,uBAAuB,MAAM,SAAS;AACrD,QAAA,QAAQ,gBAAgB,IAAI;AAElC,6CACK,QAAM,EAAA,GAAG,OAAO,UACZ,GAAA,MAAM,IAAI,CACP,QAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IACT;AAAA,EAAA,CAER,CACL;AAER;;"}

package/dist/components/Shortcut/Shortcut.js CHANGED Viewed

@@ -46,7 +46,7 @@ const Shortcut = ({ keys, ...props }) => {
     "kbd",
     {
       key,
-      className: "font-display text-gray-700 rounded-sm bg-black/[0.09] px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white"
+      className: "font-display bg-black-subtle rounded-sm px-1 text-center font-bold text-gray-700 [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white"
     },
     key
   )));

package/dist/components/Shortcut/Shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Shortcut.js","sources":["../../../src/components/Shortcut/Shortcut.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isMacOs, KeyDownHandlerOptions } from '../../utils/keyboard';\n\nconst replaceWithShortform = (key: string) => {\n switch (key) {\n case 'Escape':\n return 'Esc';\n\n case 'Delete':\n return 'Del';\n\n case 'Space':\n case ' ':\n return 'Space';\n\n case 'ArrowLeft':\n return '◄';\n\n case 'ArrowRight':\n return '►';\n\n case 'ArrowUp':\n return '▲';\n\n case 'ArrowDown':\n return '▼';\n\n default:\n return key.length === 1 ? key.toLocaleUpperCase() : key;\n }\n};\n\nconst getShortcutText = (key: string \| KeyDownHandlerOptions) => {\n if (!key) {\n return [];\n }\n\n if (typeof key === 'string') {\n return [replaceWithShortform(key)];\n }\n\n const keys: string[] = [];\n\n if (key.shift) {\n keys.push(isMacOs() ? '⇧' : 'Shift');\n }\n\n if (key.meta) {\n keys.push(isMacOs() ? '⌘' : 'Ctrl');\n }\n\n keys.push(replaceWithShortform(key.key));\n\n return keys;\n};\n\nexport type ShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n keys: string \| KeyDownHandlerOptions;\n};\nexport const Shortcut = ({ keys, ...props }: ShortcutProps) => {\n const className = cn('inline-flex gap-0.5', props.className);\n const texts = getShortcutText(keys);\n\n return (\n <span {...props} className={className}>\n {texts.map(key => (\n <kbd\n key={key}\n className=\"font-display ~~text~~-~~gray~~-~~700~~ rounded-sm ~~bg-black/[0.09]~~ px-1 text-center font-bold [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white\">\n {key}\n </kbd>\n ))}\n </span>\n );\n};\n"],"names":["React"],"mappings":";;;AAIA,MAAM,uBAAuB,CAAC,QAAgB;AAC1C,UAAQ,KAAK;AAAA,IACT,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AAAA,IACL,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX;AACI,aAAO,IAAI,WAAW,IAAI,IAAI,kBAAsB,IAAA;AAAA,EAAA;AAEhE;AAEA,MAAM,kBAAkB,CAAC,QAAwC;AAC7D,MAAI,CAAC,KAAK;AACN,WAAO,CAAC;AAAA,EAAA;AAGR,MAAA,OAAO,QAAQ,UAAU;AAClB,WAAA,CAAC,qBAAqB,GAAG,CAAC;AAAA,EAAA;AAGrC,QAAM,OAAiB,CAAC;AAExB,MAAI,IAAI,OAAO;AACX,SAAK,KAAK,YAAY,MAAM,OAAO;AAAA,EAAA;AAGvC,MAAI,IAAI,MAAM;AACV,SAAK,KAAK,YAAY,MAAM,MAAM;AAAA,EAAA;AAGtC,OAAK,KAAK,qBAAqB,IAAI,GAAG,CAAC;AAEhC,SAAA;AACX;AAKO,MAAM,WAAW,CAAC,EAAE,MAAM,GAAG,YAA2B;AAC3D,QAAM,YAAY,GAAG,uBAAuB,MAAM,SAAS;AACrD,QAAA,QAAQ,gBAAgB,IAAI;AAElC,sDACK,QAAM,EAAA,GAAG,OAAO,UACZ,GAAA,MAAM,IAAI,CACP,QAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IACT;AAAA,EAAA,CAER,CACL;AAER;"}
1	+ {"version":3,"file":"Shortcut.js","sources":["../../../src/components/Shortcut/Shortcut.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { isMacOs, KeyDownHandlerOptions } from '../../utils/keyboard';\n\nconst replaceWithShortform = (key: string) => {\n switch (key) {\n case 'Escape':\n return 'Esc';\n\n case 'Delete':\n return 'Del';\n\n case 'Space':\n case ' ':\n return 'Space';\n\n case 'ArrowLeft':\n return '◄';\n\n case 'ArrowRight':\n return '►';\n\n case 'ArrowUp':\n return '▲';\n\n case 'ArrowDown':\n return '▼';\n\n default:\n return key.length === 1 ? key.toLocaleUpperCase() : key;\n }\n};\n\nconst getShortcutText = (key: string \| KeyDownHandlerOptions) => {\n if (!key) {\n return [];\n }\n\n if (typeof key === 'string') {\n return [replaceWithShortform(key)];\n }\n\n const keys: string[] = [];\n\n if (key.shift) {\n keys.push(isMacOs() ? '⇧' : 'Shift');\n }\n\n if (key.meta) {\n keys.push(isMacOs() ? '⌘' : 'Ctrl');\n }\n\n keys.push(replaceWithShortform(key.key));\n\n return keys;\n};\n\nexport type ShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n keys: string \| KeyDownHandlerOptions;\n};\nexport const Shortcut = ({ keys, ...props }: ShortcutProps) => {\n const className = cn('inline-flex gap-0.5', props.className);\n const texts = getShortcutText(keys);\n\n return (\n <span {...props} className={className}>\n {texts.map(key => (\n <kbd\n key={key}\n className=\"font-display bg-black-subtle rounded-sm px-1 text-center font-bold text-gray-700 [[data-appearance=danger]_&]:text-white [[data-appearance=primary]_&]:text-white [[data-taco=tooltip]_&]:bg-gray-300/[0.25] [[data-taco=tooltip]_&]:text-white\">\n {key}\n </kbd>\n ))}\n </span>\n );\n};\n"],"names":["React"],"mappings":";;;AAIA,MAAM,uBAAuB,CAAC,QAAgB;AAC1C,UAAQ,KAAK;AAAA,IACT,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AAAA,IACL,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX,KAAK;AACM,aAAA;AAAA,IAEX;AACI,aAAO,IAAI,WAAW,IAAI,IAAI,kBAAsB,IAAA;AAAA,EAAA;AAEhE;AAEA,MAAM,kBAAkB,CAAC,QAAwC;AAC7D,MAAI,CAAC,KAAK;AACN,WAAO,CAAC;AAAA,EAAA;AAGR,MAAA,OAAO,QAAQ,UAAU;AAClB,WAAA,CAAC,qBAAqB,GAAG,CAAC;AAAA,EAAA;AAGrC,QAAM,OAAiB,CAAC;AAExB,MAAI,IAAI,OAAO;AACX,SAAK,KAAK,YAAY,MAAM,OAAO;AAAA,EAAA;AAGvC,MAAI,IAAI,MAAM;AACV,SAAK,KAAK,YAAY,MAAM,MAAM;AAAA,EAAA;AAGtC,OAAK,KAAK,qBAAqB,IAAI,GAAG,CAAC;AAEhC,SAAA;AACX;AAKO,MAAM,WAAW,CAAC,EAAE,MAAM,GAAG,YAA2B;AAC3D,QAAM,YAAY,GAAG,uBAAuB,MAAM,SAAS;AACrD,QAAA,QAAQ,gBAAgB,IAAI;AAElC,sDACK,QAAM,EAAA,GAAG,OAAO,UACZ,GAAA,MAAM,IAAI,CACP,QAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,IACT;AAAA,EAAA,CAER,CACL;AAER;"}

package/dist/components/Switch/Switch.cjs CHANGED Viewed

@@ -26,8 +26,8 @@ const Switch = React__namespace.forwardRef(function Switch2(props, ref) {
   const className = cn(
     "h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer",
     {
-      "bg-gray-500 hover:bg-gray-700 checked:bg-blue-500 checked:hover:bg-blue-700": !props.disabled,
-      "bg-gray-500/50 checked:bg-blue-500/50 cursor-not-allowed": props.disabled
+      "bg-gray-300 hover:bg-gray-500 checked:bg-blue-500 checked:hover:bg-blue-700": !props.disabled,
+      "bg-gray-100 checked:bg-blue-300 cursor-not-allowed": props.disabled
     }
   );
   let labelledByProps = null;

package/dist/components/Switch/Switch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.cjs","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {\n /** Label for the switch /\n label?: React.ReactNode;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n / The current checked state (controlled) /\n checked: boolean;\n / Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps \| ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLInputElement>) {\n const { checked, label, onChange, defaultChecked, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer',\n {\n 'bg-gray-~~500~~ hover:bg-gray-~~700~~ checked:bg-blue-500 checked:hover:bg-blue-700': !props.disabled,\n 'bg-gray-~~500/50~~ checked:bg-blue-~~500/50~~ cursor-not-allowed': props.disabled,\n }\n );\n\n let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.checked);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n const element = (\n <div className={cn('relative w-fit', props.className)}>\n <input\n {...otherProps}\n {...labelledByProps}\n checked={checked}\n className={className}\n data-taco=\"switch\"\n defaultChecked={defaultChecked}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span className=\"pointer-events-none absolute right-0 mt-0.5 h-4 w-4 -translate-x-[1.1rem] rounded-full bg-white transition-transform will-change-transform peer-checked:-translate-x-[0.15rem] peer-disabled:opacity-50\" />\n </div>\n );\n\n if (label) {\n return (\n <span className=\"flex gap-2 self-start\" data-taco=\"switch-container\">\n {element}\n <label\n className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n htmlFor={id}\n id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["React","Switch","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,SAAS,OAAO,UAAU,gBAAgB,GAAG,eAAe;AAC9D,QAAA,KAAKC,MAAAA,MAAM,MAAM,EAAE;AAEzB,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,+EAA+E,CAAC,MAAM;AAAA,MACtF,~~4DAA4D~~,MAAM;AAAA,IAAA;AAAA,~~EAE1E~~;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAGE,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,yDACD,OAAI,EAAA,WAAW,GAAG,kBAAkB,MAAM,SAAS,EAChD,GAAAF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA,GAETA,iCAAA,cAAC,QAAK,EAAA,WAAU,2MAA0M,CAC9N;AAGJ,MAAI,OAAO;AACP,0DACK,QAAK,EAAA,WAAU,yBAAwB,aAAU,sBAC7C,SACDA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,OAAO,cAAc;;"}
1	+ {"version":3,"file":"Switch.cjs","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {\n /** Label for the switch /\n label?: React.ReactNode;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n / The current checked state (controlled) /\n checked: boolean;\n / Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps \| ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLInputElement>) {\n const { checked, label, onChange, defaultChecked, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer',\n {\n 'bg-gray-300 hover:bg-gray-500 checked:bg-blue-500 checked:hover:bg-blue-700': !props.disabled,\n 'bg-gray-100 checked:bg-blue-300 cursor-not-allowed': props.disabled,\n }\n );\n\n let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.checked);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n const element = (\n <div className={cn('relative w-fit', props.className)}>\n <input\n {...otherProps}\n {...labelledByProps}\n checked={checked}\n className={className}\n data-taco=\"switch\"\n defaultChecked={defaultChecked}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span className=\"pointer-events-none absolute right-0 mt-0.5 h-4 w-4 -translate-x-[1.1rem] rounded-full bg-white transition-transform will-change-transform peer-checked:-translate-x-[0.15rem] peer-disabled:opacity-50\" />\n </div>\n );\n\n if (label) {\n return (\n <span className=\"flex gap-2 self-start\" data-taco=\"switch-container\">\n {element}\n <label\n className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n htmlFor={id}\n id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["React","Switch","useId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAASA,iBAAM,WAAW,SAASC,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,SAAS,OAAO,UAAU,gBAAgB,GAAG,eAAe;AAC9D,QAAA,KAAKC,MAAAA,MAAM,MAAM,EAAE;AAEzB,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,+EAA+E,CAAC,MAAM;AAAA,MACtF,sDAAsD,MAAM;AAAA,IAAA;AAAA,EAEpE;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAGE,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,yDACD,OAAI,EAAA,WAAW,GAAG,kBAAkB,MAAM,SAAS,EAChD,GAAAF,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA,GAETA,iCAAA,cAAC,QAAK,EAAA,WAAU,2MAA0M,CAC9N;AAGJ,MAAI,OAAO;AACP,0DACK,QAAK,EAAA,WAAU,yBAAwB,aAAU,sBAC7C,SACDA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,OAAO,cAAc;;"}

package/dist/components/Switch/Switch.js CHANGED Viewed

@@ -7,8 +7,8 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
   const className = cn(
     "h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer",
     {
-      "bg-gray-500 hover:bg-gray-700 checked:bg-blue-500 checked:hover:bg-blue-700": !props.disabled,
-      "bg-gray-500/50 checked:bg-blue-500/50 cursor-not-allowed": props.disabled
+      "bg-gray-300 hover:bg-gray-500 checked:bg-blue-500 checked:hover:bg-blue-700": !props.disabled,
+      "bg-gray-100 checked:bg-blue-300 cursor-not-allowed": props.disabled
     }
   );
   let labelledByProps = null;

package/dist/components/Switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {\n /** Label for the switch /\n label?: React.ReactNode;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n / The current checked state (controlled) /\n checked: boolean;\n / Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps \| ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLInputElement>) {\n const { checked, label, onChange, defaultChecked, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer',\n {\n 'bg-gray-~~500~~ hover:bg-gray-~~700~~ checked:bg-blue-500 checked:hover:bg-blue-700': !props.disabled,\n 'bg-gray-~~500/50~~ checked:bg-blue-~~500/50~~ cursor-not-allowed': props.disabled,\n }\n );\n\n let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.checked);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n const element = (\n <div className={cn('relative w-fit', props.className)}>\n <input\n {...otherProps}\n {...labelledByProps}\n checked={checked}\n className={className}\n data-taco=\"switch\"\n defaultChecked={defaultChecked}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span className=\"pointer-events-none absolute right-0 mt-0.5 h-4 w-4 -translate-x-[1.1rem] rounded-full bg-white transition-transform will-change-transform peer-checked:-translate-x-[0.15rem] peer-disabled:opacity-50\" />\n </div>\n );\n\n if (label) {\n return (\n <span className=\"flex gap-2 self-start\" data-taco=\"switch-container\">\n {element}\n <label\n className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n htmlFor={id}\n id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["Switch"],"mappings":";;;AA4BO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,SAAS,OAAO,UAAU,gBAAgB,GAAG,eAAe;AAC9D,QAAA,KAAK,MAAM,MAAM,EAAE;AAEzB,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,+EAA+E,CAAC,MAAM;AAAA,MACtF,~~4DAA4D~~,MAAM;AAAA,IAAA;AAAA,~~EAE1E~~;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAGE,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,8CACD,OAAI,EAAA,WAAW,GAAG,kBAAkB,MAAM,SAAS,EAChD,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA,GAET,sBAAA,cAAC,QAAK,EAAA,WAAU,2MAA0M,CAC9N;AAGJ,MAAI,OAAO;AACP,+CACK,QAAK,EAAA,WAAU,yBAAwB,aAAU,sBAC7C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,OAAO,cAAc;"}
1	+ {"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {\n /** Label for the switch /\n label?: React.ReactNode;\n / Whether user input is required /\n required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n checked?: never;\n onChange?: never;\n / The default checked state (uncontrolled) /\n defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n defaultChecked?: never;\n / The current checked state (controlled) /\n checked: boolean;\n / Handler called when the checked state changes */\n onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps \| ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLInputElement>) {\n const { checked, label, onChange, defaultChecked, ...otherProps } = props;\n const id = useId(props.id);\n\n const className = cn(\n 'h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus appearance-none peer enabled:cursor-pointer',\n {\n 'bg-gray-300 hover:bg-gray-500 checked:bg-blue-500 checked:hover:bg-blue-700': !props.disabled,\n 'bg-gray-100 checked:bg-blue-300 cursor-not-allowed': props.disabled,\n }\n );\n\n let labelledByProps: Record<string, string> \| null = null;\n\n if (label) {\n labelledByProps = {\n 'aria-labelledby': `${id}-label`,\n id,\n };\n }\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event.target.checked);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n event.currentTarget.click();\n }\n };\n\n const element = (\n <div className={cn('relative w-fit', props.className)}>\n <input\n {...otherProps}\n {...labelledByProps}\n checked={checked}\n className={className}\n data-taco=\"switch\"\n defaultChecked={defaultChecked}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={ref}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span className=\"pointer-events-none absolute right-0 mt-0.5 h-4 w-4 -translate-x-[1.1rem] rounded-full bg-white transition-transform will-change-transform peer-checked:-translate-x-[0.15rem] peer-disabled:opacity-50\" />\n </div>\n );\n\n if (label) {\n return (\n <span className=\"flex gap-2 self-start\" data-taco=\"switch-container\">\n {element}\n <label\n className={cn(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n htmlFor={id}\n id={`${id}-label`}>\n {label}\n </label>\n </span>\n );\n }\n\n return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["Switch"],"mappings":";;;AA4BO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAkC;AACzG,QAAM,EAAE,SAAS,OAAO,UAAU,gBAAgB,GAAG,eAAe;AAC9D,QAAA,KAAK,MAAM,MAAM,EAAE;AAEzB,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,+EAA+E,CAAC,MAAM;AAAA,MACtF,sDAAsD,MAAM;AAAA,IAAA;AAAA,EAEpE;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAGE,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEM,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEM,QAAA,8CACD,OAAI,EAAA,WAAW,GAAG,kBAAkB,MAAM,SAAS,EAChD,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,EAAA,GAET,sBAAA,cAAC,QAAK,EAAA,WAAU,2MAA0M,CAC9N;AAGJ,MAAI,OAAO;AACP,+CACK,QAAK,EAAA,WAAU,yBAAwB,aAAU,sBAC7C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACpF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,OAAO,cAAc;"}

package/dist/components/Table/components/BaseTable.cjs CHANGED Viewed

@@ -20,7 +20,7 @@ const BaseTable = React.forwardRef(function BaseTable2(props, ref) {
     {
       key: index,
       role: "row",
-      className: "flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-300 font-bold"
+      className: "flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-100 font-bold"
     },
     headerGroup.headers.map((cell, index2) => /* @__PURE__ */ React.createElement(renderColumn.Column, { key: index2, index: index2, cell }))
   ))), /* @__PURE__ */ React.createElement("div", { role: "rowgroup", className: "yt-table__body", ref: bodyRef }, children));

package/dist/components/Table/components/BaseTable.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTable.cjs","sources":["../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useMergedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-~~300~~ font-bold\">\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["BaseTable","useMergedRef","index","Column"],"mappings":";;;;;;;AAQO,MAAM,oBAAoB,MAAuB;AAEjD,MAAM,YAAY,MAAM,WAAW,SAASA,WAAU,OAA0B,KAAgC;AAC7G,QAAA,WAAWC,0BAA6B,GAAG;AAC3C,QAAA,EAAE,WAAW,UAAU,gBAAgB,GAAG,cAAc,WAAW,SAAS,GAAG,WAAA,IAAe;AAEpG,QAAM,UAAU,MAAM;AACd,QAAA,aAAa,SAAS,SAAS;AAC/B,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE/B,GAAG,EAAE;AAEL,QAAM,YAAY,GAAG,0DAA0D,MAAM,SAAS;AAG1F,SAAA,sBAAA,cAAC,SAAK,GAAG,YAAY,MAAK,SAAQ,WAAsB,KAAK,SACzD,GAAA,sBAAA,cAAC,SAAI,MAAK,YAAW,WAAU,kBAAiB,KAAK,aAChD,6CAAc,IAAI,CAAC,aAAkC,UAClD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,YAAY,QAAQ,IAAI,CAAC,MAAWC,WAChC,sBAAA,cAAAC,aAAAA,QAAA,EAAO,KAAKD,QAAO,OAAOA,QAAO,MAAY,CACjD;AAAA,EAER,EACL,GAEA,sBAAA,cAAC,OAAI,EAAA,MAAK,YAAW,WAAU,kBAAiB,KAAK,QAChD,GAAA,QACL,CACJ;AAER,CAAC;;;"}
1	+ {"version":3,"file":"BaseTable.cjs","sources":["../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useMergedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-100 font-bold\">\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["BaseTable","useMergedRef","index","Column"],"mappings":";;;;;;;AAQO,MAAM,oBAAoB,MAAuB;AAEjD,MAAM,YAAY,MAAM,WAAW,SAASA,WAAU,OAA0B,KAAgC;AAC7G,QAAA,WAAWC,0BAA6B,GAAG;AAC3C,QAAA,EAAE,WAAW,UAAU,gBAAgB,GAAG,cAAc,WAAW,SAAS,GAAG,WAAA,IAAe;AAEpG,QAAM,UAAU,MAAM;AACd,QAAA,aAAa,SAAS,SAAS;AAC/B,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE/B,GAAG,EAAE;AAEL,QAAM,YAAY,GAAG,0DAA0D,MAAM,SAAS;AAG1F,SAAA,sBAAA,cAAC,SAAK,GAAG,YAAY,MAAK,SAAQ,WAAsB,KAAK,SACzD,GAAA,sBAAA,cAAC,SAAI,MAAK,YAAW,WAAU,kBAAiB,KAAK,aAChD,6CAAc,IAAI,CAAC,aAAkC,UAClD,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,YAAY,QAAQ,IAAI,CAAC,MAAWC,WAChC,sBAAA,cAAAC,aAAAA,QAAA,EAAO,KAAKD,QAAO,OAAOA,QAAO,MAAY,CACjD;AAAA,EAER,EACL,GAEA,sBAAA,cAAC,OAAI,EAAA,MAAK,YAAW,WAAU,kBAAiB,KAAK,QAChD,GAAA,QACL,CACJ;AAER,CAAC;;;"}

package/dist/components/Table/components/BaseTable.js CHANGED Viewed

@@ -18,7 +18,7 @@ const BaseTable = React__default.forwardRef(function BaseTable2(props, ref) {
     {
       key: index,
       role: "row",
-      className: "flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-300 font-bold"
+      className: "flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-100 font-bold"
     },
     headerGroup.headers.map((cell, index2) => /* @__PURE__ */ React__default.createElement(Column, { key: index2, index: index2, cell }))
   ))), /* @__PURE__ */ React__default.createElement("div", { role: "rowgroup", className: "yt-table__body", ref: bodyRef }, children));

package/dist/components/Table/components/BaseTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTable.js","sources":["../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useMergedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-~~300~~ font-bold\">\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["React","BaseTable","index"],"mappings":";;;;;AAQO,MAAM,oBAAoB,MAAuB;AAEjD,MAAM,YAAYA,eAAM,WAAW,SAASC,WAAU,OAA0B,KAAgC;AAC7G,QAAA,WAAW,aAA6B,GAAG;AAC3C,QAAA,EAAE,WAAW,UAAU,gBAAgB,GAAG,cAAc,WAAW,SAAS,GAAG,WAAA,IAAe;AAEpGD,iBAAM,UAAU,MAAM;AACd,QAAA,aAAa,SAAS,SAAS;AAC/B,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE/B,GAAG,EAAE;AAEL,QAAM,YAAY,GAAG,0DAA0D,MAAM,SAAS;AAG1F,SAAAA,+BAAA,cAAC,SAAK,GAAG,YAAY,MAAK,SAAQ,WAAsB,KAAK,SACzD,GAAAA,+BAAA,cAAC,SAAI,MAAK,YAAW,WAAU,kBAAiB,KAAK,aAChD,6CAAc,IAAI,CAAC,aAAkC,UAClDA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,YAAY,QAAQ,IAAI,CAAC,MAAWE,WAChCF,+BAAA,cAAA,QAAA,EAAO,KAAKE,QAAO,OAAOA,QAAO,MAAY,CACjD;AAAA,EAER,EACL,GAEAF,+BAAA,cAAC,OAAI,EAAA,MAAK,YAAW,WAAU,kBAAiB,KAAK,QAChD,GAAA,QACL,CACJ;AAER,CAAC;"}
1	+ {"version":3,"file":"BaseTable.js","sources":["../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n const tableRef = useMergedRef<HTMLDivElement>(ref);\n const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n React.useEffect(() => {\n if (autoFocus && tableRef.current) {\n tableRef.current.focus();\n }\n }, []);\n\n const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n return (\n <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n <div\n key={index}\n role=\"row\"\n className=\"flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 border-gray-100 font-bold\">\n {headerGroup.headers.map((cell: any, index: number) => (\n <Column key={index} index={index} cell={cell} />\n ))}\n </div>\n ))}\n </div>\n\n <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n {children}\n </div>\n </div>\n );\n});\n"],"names":["React","BaseTable","index"],"mappings":";;;;;AAQO,MAAM,oBAAoB,MAAuB;AAEjD,MAAM,YAAYA,eAAM,WAAW,SAASC,WAAU,OAA0B,KAAgC;AAC7G,QAAA,WAAW,aAA6B,GAAG;AAC3C,QAAA,EAAE,WAAW,UAAU,gBAAgB,GAAG,cAAc,WAAW,SAAS,GAAG,WAAA,IAAe;AAEpGD,iBAAM,UAAU,MAAM;AACd,QAAA,aAAa,SAAS,SAAS;AAC/B,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE/B,GAAG,EAAE;AAEL,QAAM,YAAY,GAAG,0DAA0D,MAAM,SAAS;AAG1F,SAAAA,+BAAA,cAAC,SAAK,GAAG,YAAY,MAAK,SAAQ,WAAsB,KAAK,SACzD,GAAAA,+BAAA,cAAC,SAAI,MAAK,YAAW,WAAU,kBAAiB,KAAK,aAChD,6CAAc,IAAI,CAAC,aAAkC,UAClDA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,IACT,YAAY,QAAQ,IAAI,CAAC,MAAWE,WAChCF,+BAAA,cAAA,QAAA,EAAO,KAAKE,QAAO,OAAOA,QAAO,MAAY,CACjD;AAAA,EAER,EACL,GAEAF,+BAAA,cAAC,OAAI,EAAA,MAAK,YAAW,WAAU,kBAAiB,KAAK,QAChD,GAAA,QACL,CACJ;AAER,CAAC;"}

package/dist/components/Table/util/renderRow.cjs CHANGED Viewed

@@ -39,9 +39,9 @@ const Row = React.forwardRef(function TableRow({ row, index, instance, headerGro
       paddingLeft: row.depth ? `${row.depth * 2}rem` : void 0
     },
     className: cn(
-      "yt-table__row border-gray-300 flex border-b min-h-[2.5rem] hover:bg-gray-100",
+      "yt-table__row border-gray-100 flex border-b min-h-[2.5rem] hover:bg-gray-100",
       {
-        "yt-table__row--active bg-gray-200 hover:bg-gray-200": activeIndex === index,
+        "yt-table__row--active bg-gray-100 hover:bg-gray-100": activeIndex === index,
         "yt-table__row--clickable": !!onRowClick,
         "yt-table__row--dragging": !!row.isDragging,
         "yt-table__row--editing": !!row.isEditing

package/dist/components/Table/util/renderRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderRow.cjs","sources":["../../../../src/components/Table/util/renderRow.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { FocusScope } from '@react-aria/focus';\nimport { InternalTableCell, LegacyTableRow } from '../types';\nimport { sanitizeRowProps } from '../util';\n\nconst renderCell = (cell: InternalTableCell, row: LegacyTableRow<any>): JSX.Element => {\n const props = {\n ...cell.getCellProps(),\n className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {\n 'justify-start text-left': cell.column.align === 'left',\n 'justify-end text-right': cell.column.align === 'right',\n 'text-center': !cell.column.align,\n }),\n style: {\n ...cell.column.style,\n flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex,\n },\n };\n return (\n <div {...props} role=\"gridcell\" data-taco=\"table-cell\">\n {cell.render('Cell') \|\| null}\n </div>\n );\n};\n\nexport const Row = React.forwardRef(function TableRow({ row, index, instance, headerGroups: _1, ...rowProps }: any, ref: any) {\n const {\n activeIndex,\n onRowClick,\n rowClassName,\n rowExpansionRenderer,\n rowHeight,\n setActiveIndex,\n style,\n inlineEditingUniqueId,\n } = rowProps;\n const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n\n const props = {\n ...row.getRowProps(),\n style: {\n ...style,\n minHeight: rowHeight ? `${rowHeight}px` : undefined,\n paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined,\n },\n className: cn(\n 'yt-table__row border-gray-~~300~~ flex border-b min-h-[2.5rem] hover:bg-gray-100',\n {\n 'yt-table__row--active bg-gray-~~200~~ hover:bg-gray-~~200~~': activeIndex === index,\n 'yt-table__row--clickable': !!onRowClick,\n 'yt-table__row--dragging': !!row.isDragging,\n 'yt-table__row--editing': !!row.isEditing,\n },\n typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName\n ),\n onClick: onRowClick\n ? (event: React.MouseEvent<HTMLElement>) => {\n if (\n event.target === event.currentTarget \|\|\n (event.target as HTMLElement).classList.contains('yt-table__cell')\n ) {\n event.preventDefault();\n event.persist();\n setActiveIndex(index);\n onRowClick(sanitizedRow);\n }\n }\n : () => {\n setActiveIndex(index);\n },\n };\n\n let cells = row.cells;\n\n if (row.depth > 0) {\n cells = row.cells.filter((cell: any) => !cell.column.hiddenOnSubRows);\n }\n\n const expandedRow = rowExpansionRenderer && row.isExpanded && <div>{rowExpansionRenderer(sanitizedRow, instance)}</div>;\n const rowContent = React.useMemo(() => {\n return (\n <>\n <FocusScope key={row.original._createKey} contain restoreFocus autoFocus>\n <div {...props} role=\"row\" ref={ref}>\n <input type=\"hidden\" name=\"_rowIndexPath\" value={row.id} />\n <input type=\"hidden\" name=\"_inlineEditingUniqueId\" value={row.original[inlineEditingUniqueId]} />\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n </FocusScope>\n {expandedRow}\n </>\n );\n }, [row.original._createKey]);\n\n if (row.isEditing) {\n return rowContent;\n }\n\n return (\n <>\n <div {...props} role=\"row\" ref={ref}>\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n {expandedRow}\n </>\n );\n});\n"],"names":["sanitizeRowProps","FocusScope"],"mappings":"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"}
1	+ {"version":3,"file":"renderRow.cjs","sources":["../../../../src/components/Table/util/renderRow.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { FocusScope } from '@react-aria/focus';\nimport { InternalTableCell, LegacyTableRow } from '../types';\nimport { sanitizeRowProps } from '../util';\n\nconst renderCell = (cell: InternalTableCell, row: LegacyTableRow<any>): JSX.Element => {\n const props = {\n ...cell.getCellProps(),\n className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {\n 'justify-start text-left': cell.column.align === 'left',\n 'justify-end text-right': cell.column.align === 'right',\n 'text-center': !cell.column.align,\n }),\n style: {\n ...cell.column.style,\n flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex,\n },\n };\n return (\n <div {...props} role=\"gridcell\" data-taco=\"table-cell\">\n {cell.render('Cell') \|\| null}\n </div>\n );\n};\n\nexport const Row = React.forwardRef(function TableRow({ row, index, instance, headerGroups: _1, ...rowProps }: any, ref: any) {\n const {\n activeIndex,\n onRowClick,\n rowClassName,\n rowExpansionRenderer,\n rowHeight,\n setActiveIndex,\n style,\n inlineEditingUniqueId,\n } = rowProps;\n const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n\n const props = {\n ...row.getRowProps(),\n style: {\n ...style,\n minHeight: rowHeight ? `${rowHeight}px` : undefined,\n paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined,\n },\n className: cn(\n 'yt-table__row border-gray-100 flex border-b min-h-[2.5rem] hover:bg-gray-100',\n {\n 'yt-table__row--active bg-gray-100 hover:bg-gray-100': activeIndex === index,\n 'yt-table__row--clickable': !!onRowClick,\n 'yt-table__row--dragging': !!row.isDragging,\n 'yt-table__row--editing': !!row.isEditing,\n },\n typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName\n ),\n onClick: onRowClick\n ? (event: React.MouseEvent<HTMLElement>) => {\n if (\n event.target === event.currentTarget \|\|\n (event.target as HTMLElement).classList.contains('yt-table__cell')\n ) {\n event.preventDefault();\n event.persist();\n setActiveIndex(index);\n onRowClick(sanitizedRow);\n }\n }\n : () => {\n setActiveIndex(index);\n },\n };\n\n let cells = row.cells;\n\n if (row.depth > 0) {\n cells = row.cells.filter((cell: any) => !cell.column.hiddenOnSubRows);\n }\n\n const expandedRow = rowExpansionRenderer && row.isExpanded && <div>{rowExpansionRenderer(sanitizedRow, instance)}</div>;\n const rowContent = React.useMemo(() => {\n return (\n <>\n <FocusScope key={row.original._createKey} contain restoreFocus autoFocus>\n <div {...props} role=\"row\" ref={ref}>\n <input type=\"hidden\" name=\"_rowIndexPath\" value={row.id} />\n <input type=\"hidden\" name=\"_inlineEditingUniqueId\" value={row.original[inlineEditingUniqueId]} />\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n </FocusScope>\n {expandedRow}\n </>\n );\n }, [row.original._createKey]);\n\n if (row.isEditing) {\n return rowContent;\n }\n\n return (\n <>\n <div {...props} role=\"row\" ref={ref}>\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n {expandedRow}\n </>\n );\n});\n"],"names":["sanitizeRowProps","FocusScope"],"mappings":"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"}

package/dist/components/Table/util/renderRow.js CHANGED Viewed

@@ -37,9 +37,9 @@ const Row = React__default.forwardRef(function TableRow({ row, index, instance,
       paddingLeft: row.depth ? `${row.depth * 2}rem` : void 0
     },
     className: cn(
-      "yt-table__row border-gray-300 flex border-b min-h-[2.5rem] hover:bg-gray-100",
+      "yt-table__row border-gray-100 flex border-b min-h-[2.5rem] hover:bg-gray-100",
       {
-        "yt-table__row--active bg-gray-200 hover:bg-gray-200": activeIndex === index,
+        "yt-table__row--active bg-gray-100 hover:bg-gray-100": activeIndex === index,
         "yt-table__row--clickable": !!onRowClick,
         "yt-table__row--dragging": !!row.isDragging,
         "yt-table__row--editing": !!row.isEditing

package/dist/components/Table/util/renderRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"renderRow.js","sources":["../../../../src/components/Table/util/renderRow.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { FocusScope } from '@react-aria/focus';\nimport { InternalTableCell, LegacyTableRow } from '../types';\nimport { sanitizeRowProps } from '../util';\n\nconst renderCell = (cell: InternalTableCell, row: LegacyTableRow<any>): JSX.Element => {\n const props = {\n ...cell.getCellProps(),\n className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {\n 'justify-start text-left': cell.column.align === 'left',\n 'justify-end text-right': cell.column.align === 'right',\n 'text-center': !cell.column.align,\n }),\n style: {\n ...cell.column.style,\n flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex,\n },\n };\n return (\n <div {...props} role=\"gridcell\" data-taco=\"table-cell\">\n {cell.render('Cell') \|\| null}\n </div>\n );\n};\n\nexport const Row = React.forwardRef(function TableRow({ row, index, instance, headerGroups: _1, ...rowProps }: any, ref: any) {\n const {\n activeIndex,\n onRowClick,\n rowClassName,\n rowExpansionRenderer,\n rowHeight,\n setActiveIndex,\n style,\n inlineEditingUniqueId,\n } = rowProps;\n const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n\n const props = {\n ...row.getRowProps(),\n style: {\n ...style,\n minHeight: rowHeight ? `${rowHeight}px` : undefined,\n paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined,\n },\n className: cn(\n 'yt-table__row border-gray-~~300~~ flex border-b min-h-[2.5rem] hover:bg-gray-100',\n {\n 'yt-table__row--active bg-gray-~~200~~ hover:bg-gray-~~200~~': activeIndex === index,\n 'yt-table__row--clickable': !!onRowClick,\n 'yt-table__row--dragging': !!row.isDragging,\n 'yt-table__row--editing': !!row.isEditing,\n },\n typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName\n ),\n onClick: onRowClick\n ? (event: React.MouseEvent<HTMLElement>) => {\n if (\n event.target === event.currentTarget \|\|\n (event.target as HTMLElement).classList.contains('yt-table__cell')\n ) {\n event.preventDefault();\n event.persist();\n setActiveIndex(index);\n onRowClick(sanitizedRow);\n }\n }\n : () => {\n setActiveIndex(index);\n },\n };\n\n let cells = row.cells;\n\n if (row.depth > 0) {\n cells = row.cells.filter((cell: any) => !cell.column.hiddenOnSubRows);\n }\n\n const expandedRow = rowExpansionRenderer && row.isExpanded && <div>{rowExpansionRenderer(sanitizedRow, instance)}</div>;\n const rowContent = React.useMemo(() => {\n return (\n <>\n <FocusScope key={row.original._createKey} contain restoreFocus autoFocus>\n <div {...props} role=\"row\" ref={ref}>\n <input type=\"hidden\" name=\"_rowIndexPath\" value={row.id} />\n <input type=\"hidden\" name=\"_inlineEditingUniqueId\" value={row.original[inlineEditingUniqueId]} />\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n </FocusScope>\n {expandedRow}\n </>\n );\n }, [row.original._createKey]);\n\n if (row.isEditing) {\n return rowContent;\n }\n\n return (\n <>\n <div {...props} role=\"row\" ref={ref}>\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n {expandedRow}\n </>\n );\n});\n"],"names":["React"],"mappings":";;;;AAMA,MAAM,aAAa,CAAC,MAAyB,QAA0C;AACnF,QAAM,QAAQ;AAAA,IACV,GAAG,KAAK,aAAa;AAAA,IACrB,WAAW,GAAG,mDAAmD,KAAK,OAAO,WAAW;AAAA,MACpF,2BAA2B,KAAK,OAAO,UAAU;AAAA,MACjD,0BAA0B,KAAK,OAAO,UAAU;AAAA,MAChD,eAAe,CAAC,KAAK,OAAO;AAAA,IAAA,CAC/B;AAAA,IACD,OAAO;AAAA,MACH,GAAG,KAAK,OAAO;AAAA,MACf,MAAM,OAAO,KAAK,OAAO,SAAS,aAAa,KAAK,OAAO,KAAK,GAAG,IAAI,KAAK,OAAO;AAAA,IAAA;AAAA,EAE3F;AACA,SACKA,+BAAA,cAAA,OAAA,EAAK,GAAG,OAAO,MAAK,YAAW,aAAU,aAAA,GACrC,KAAK,OAAO,MAAM,KAAK,IAC5B;AAER;AAEO,MAAM,MAAMA,eAAM,WAAW,SAAS,SAAS,EAAE,KAAK,OAAO,UAAU,cAAc,IAAI,GAAG,SAAA,GAAiB,KAAU;AACpH,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA;AACE,QAAA,eAAe,iBAAiB,KAAK,oBAAoB;AAE/D,QAAM,QAAQ;AAAA,IACV,GAAG,IAAI,YAAY;AAAA,IACnB,OAAO;AAAA,MACH,GAAG;AAAA,MACH,WAAW,YAAY,GAAG,SAAS,OAAO;AAAA,MAC1C,aAAa,IAAI,QAAQ,GAAG,IAAI,QAAQ,CAAC,QAAQ;AAAA,IACrD;AAAA,IACA,WAAW;AAAA,MACP;AAAA,MACA;AAAA,QACI,uDAAuD,gBAAgB;AAAA,QACvE,4BAA4B,CAAC,CAAC;AAAA,QAC9B,2BAA2B,CAAC,CAAC,IAAI;AAAA,QACjC,0BAA0B,CAAC,CAAC,IAAI;AAAA,MACpC;AAAA,MACA,OAAO,iBAAiB,aAAa,aAAa,YAAY,IAAI;AAAA,IACtE;AAAA,IACA,SAAS,aACH,CAAC,UAAyC;AAElC,UAAA,MAAM,WAAW,MAAM,iBACtB,MAAM,OAAuB,UAAU,SAAS,gBAAgB,GACnE;AACE,cAAM,eAAe;AACrB,cAAM,QAAQ;AACd,uBAAe,KAAK;AACpB,mBAAW,YAAY;AAAA,MAAA;AAAA,IAC3B,IAEJ,MAAM;AACF,qBAAe,KAAK;AAAA,IAAA;AAAA,EAElC;AAEA,MAAI,QAAQ,IAAI;AAEZ,MAAA,IAAI,QAAQ,GAAG;AACP,YAAA,IAAI,MAAM,OAAO,CAAC,SAAc,CAAC,KAAK,OAAO,eAAe;AAAA,EAAA;AAGlE,QAAA,cAAc,wBAAwB,IAAI,2DAAe,OAAK,MAAA,qBAAqB,cAAc,QAAQ,CAAE;AAC3G,QAAA,aAAaA,eAAM,QAAQ,MAAM;AAE/B,WAAAA,+BAAA,cAAAA,eAAA,UAAA,MACKA,+BAAA,cAAA,YAAA,EAAW,KAAK,IAAI,SAAS,YAAY,SAAO,MAAC,cAAY,MAAC,WAAS,QACnEA,+BAAA,cAAA,OAAA,EAAK,GAAG,OAAO,MAAK,OAAM,OACtBA,+BAAA,cAAA,SAAA,EAAM,MAAK,UAAS,MAAK,iBAAgB,OAAO,IAAI,GAAA,CAAI,GACzDA,+BAAA,cAAC,SAAM,EAAA,MAAK,UAAS,MAAK,0BAAyB,OAAO,IAAI,SAAS,qBAAqB,GAAG,GAC9F,MAAM,IAAI,CAAC,SAA4B,WAAW,MAAM,YAAY,CAAC,CAC1E,CACJ,GACC,WACL;AAAA,EAEL,GAAA,CAAC,IAAI,SAAS,UAAU,CAAC;AAE5B,MAAI,IAAI,WAAW;AACR,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,OAAO,MAAK,OAAM,IACtB,GAAA,MAAM,IAAI,CAAC,SAA4B,WAAW,MAAM,YAAY,CAAC,CAC1E,GACC,WACL;AAER,CAAC;"}
1	+ {"version":3,"file":"renderRow.js","sources":["../../../../src/components/Table/util/renderRow.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { FocusScope } from '@react-aria/focus';\nimport { InternalTableCell, LegacyTableRow } from '../types';\nimport { sanitizeRowProps } from '../util';\n\nconst renderCell = (cell: InternalTableCell, row: LegacyTableRow<any>): JSX.Element => {\n const props = {\n ...cell.getCellProps(),\n className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {\n 'justify-start text-left': cell.column.align === 'left',\n 'justify-end text-right': cell.column.align === 'right',\n 'text-center': !cell.column.align,\n }),\n style: {\n ...cell.column.style,\n flex: typeof cell.column.flex === 'function' ? cell.column.flex(row) : cell.column.flex,\n },\n };\n return (\n <div {...props} role=\"gridcell\" data-taco=\"table-cell\">\n {cell.render('Cell') \|\| null}\n </div>\n );\n};\n\nexport const Row = React.forwardRef(function TableRow({ row, index, instance, headerGroups: _1, ...rowProps }: any, ref: any) {\n const {\n activeIndex,\n onRowClick,\n rowClassName,\n rowExpansionRenderer,\n rowHeight,\n setActiveIndex,\n style,\n inlineEditingUniqueId,\n } = rowProps;\n const sanitizedRow = sanitizeRowProps(row, rowExpansionRenderer);\n\n const props = {\n ...row.getRowProps(),\n style: {\n ...style,\n minHeight: rowHeight ? `${rowHeight}px` : undefined,\n paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined,\n },\n className: cn(\n 'yt-table__row border-gray-100 flex border-b min-h-[2.5rem] hover:bg-gray-100',\n {\n 'yt-table__row--active bg-gray-100 hover:bg-gray-100': activeIndex === index,\n 'yt-table__row--clickable': !!onRowClick,\n 'yt-table__row--dragging': !!row.isDragging,\n 'yt-table__row--editing': !!row.isEditing,\n },\n typeof rowClassName === 'function' ? rowClassName(sanitizedRow) : rowClassName\n ),\n onClick: onRowClick\n ? (event: React.MouseEvent<HTMLElement>) => {\n if (\n event.target === event.currentTarget \|\|\n (event.target as HTMLElement).classList.contains('yt-table__cell')\n ) {\n event.preventDefault();\n event.persist();\n setActiveIndex(index);\n onRowClick(sanitizedRow);\n }\n }\n : () => {\n setActiveIndex(index);\n },\n };\n\n let cells = row.cells;\n\n if (row.depth > 0) {\n cells = row.cells.filter((cell: any) => !cell.column.hiddenOnSubRows);\n }\n\n const expandedRow = rowExpansionRenderer && row.isExpanded && <div>{rowExpansionRenderer(sanitizedRow, instance)}</div>;\n const rowContent = React.useMemo(() => {\n return (\n <>\n <FocusScope key={row.original._createKey} contain restoreFocus autoFocus>\n <div {...props} role=\"row\" ref={ref}>\n <input type=\"hidden\" name=\"_rowIndexPath\" value={row.id} />\n <input type=\"hidden\" name=\"_inlineEditingUniqueId\" value={row.original[inlineEditingUniqueId]} />\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n </FocusScope>\n {expandedRow}\n </>\n );\n }, [row.original._createKey]);\n\n if (row.isEditing) {\n return rowContent;\n }\n\n return (\n <>\n <div {...props} role=\"row\" ref={ref}>\n {cells.map((cell: InternalTableCell) => renderCell(cell, sanitizedRow))}\n </div>\n {expandedRow}\n </>\n );\n});\n"],"names":["React"],"mappings":"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"}

package/dist/components/Table3/components/Row/Editing/CreateNewRow.cjs CHANGED Viewed

@@ -43,7 +43,7 @@ function CreateNewRow(props) {
     "bottom-0": !tableMeta.footer.isEnabled,
     "border-b !border-t-[0]": !hasScrollbar
   });
-  return /* @__PURE__ */ React.createElement("tr", { "data-row-create": true, className, tabIndex: -1 }, /* @__PURE__ */ React.createElement("td", { className: "col-span-full !bg-gray-50 !px-1" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("tr", { "data-row-create": true, className, tabIndex: -1 }, /* @__PURE__ */ React.createElement("td", { className: "col-span-full !bg-gray-50/50 !px-1" }, /* @__PURE__ */ React.createElement(
     Button.Button,
     {
       appearance: "transparent",

package/dist/components/Table3/components/Row/Editing/CreateNewRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateNewRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport type { TableRef } from '../../../../../primitives/Table/types';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nconst SCROLL_NEAR_BOTTOM_THRESHOLD_PX = 80;\nconst SCROLL_DELAY_MS = 150;\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, hasScrollbar, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as keyof TType] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter \|\|\n !!table.getState().columnFilters?.length \|\|\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId as string));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId as string) === 'saving';\n\n const handleCreate = async () => {\n if (isDisabled) {\n return;\n }\n\n const tableElement = tableRef.current;\n const isNearBottom =\n tableElement &&\n tableElement.scrollHeight - tableElement.scrollTop - tableElement.clientHeight < SCROLL_NEAR_BOTTOM_THRESHOLD_PX;\n\n await tableMeta.editing.createRow(table);\n\n // The sticky temporary row overlaps the last data row, so scroll to reveal it\n if (isNearBottom) {\n setTimeout(() => {\n tableElement.scrollTo({ top: tableElement.scrollHeight, behavior: 'smooth' });\n }, SCROLL_DELAY_MS);\n }\n };\n const shortcut = { key: 'Enter', meta: true };\n\n let tooltip;\n\n if (isSaving) {\n tooltip = texts.table3.editing.buttons.create.saving;\n } else if (isDisabled) {\n tooltip = texts.table3.editing.buttons.create.disabled;\n } else {\n tooltip = <Shortcut keys={shortcut} />;\n }\n\n const className = clsx('group/row !sticky z-[21]', {\n 'bottom-10': tableMeta.footer.isEnabled,\n 'bottom-0': !tableMeta.footer.isEnabled,\n 'border-b !border-t-[0]': !hasScrollbar,\n });\n\n return (\n <tr data-row-create className={className} tabIndex={-1}>\n <td className=\"col-span-full !bg-gray-50 !px-1\">\n <Button\n appearance=\"transparent\"\n className=\"sticky left-[4px] font-bold group-hover:bg-gray-200\"\n disabled={isDisabled}\n onClick={handleCreate}\n ref={buttonRef}\n shortcut={shortcut}\n tooltip={tooltip}>\n <Icon name=\"circle-plus\" />\n {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["useLocalization","Shortcut","clsx","Button","Icon"],"mappings":";;;;;;;;AAiBA,MAAM,kCAAkC;AACxC,MAAM,kBAAkB;AAEjB,SAAS,aAA8B,OAAiC;;AAC3E,QAAM,EAAE,WAAW,cAAc,OAAO,WAAW,aAAa;AAC1D,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAE5B,QAAA,gBAAgB,UAAU,QAAQ;AACxC,QAAM,mBAAiB,mBAAc,CAAC,MAAf,mBAAmB,UAAU,yBAAuC;AAErF,QAAA,aACF,CAAC,CAAC,MAAM,SAAW,EAAA,gBACnB,CAAC,GAAC,WAAM,SAAA,EAAW,kBAAjB,mBAAgC,WACjC,CAAC,CAAC,kBAAkB,CAAC,CAAC,UAAU,QAAQ,aAAa,cAAwB;AAC5E,QAAA,WAAW,CAAC,CAAC,kBAAkB,UAAU,QAAQ,aAAa,cAAwB,MAAM;AAElG,QAAM,eAAe,YAAY;AAC7B,QAAI,YAAY;AACZ;AAAA,IAAA;AAGJ,UAAM,eAAe,SAAS;AAC9B,UAAM,eACF,gBACA,aAAa,eAAe,aAAa,YAAY,aAAa,eAAe;AAE/E,UAAA,UAAU,QAAQ,UAAU,KAAK;AAGvC,QAAI,cAAc;AACd,iBAAW,MAAM;AACb,qBAAa,SAAS,EAAE,KAAK,aAAa,cAAc,UAAU,UAAU;AAAA,SAC7E,eAAe;AAAA,IAAA;AAAA,EAE1B;AACA,QAAM,WAAW,EAAE,KAAK,SAAS,MAAM,KAAK;AAExC,MAAA;AAEJ,MAAI,UAAU;AACV,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,aACvC,YAAY;AACnB,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,OAC3C;AACO,cAAA,sBAAA,cAACC,SAAS,UAAA,EAAA,MAAM,UAAU;AAAA,EAAA;AAGlC,QAAA,YAAYC,QAAK,4BAA4B;AAAA,IAC/C,aAAa,UAAU,OAAO;AAAA,IAC9B,YAAY,CAAC,UAAU,OAAO;AAAA,IAC9B,0BAA0B,CAAC;AAAA,EAAA,CAC9B;AAGG,SAAA,sBAAA,cAAC,MAAG,EAAA,mBAAe,MAAC,WAAsB,UAAU,GAChD,GAAA,sBAAA,cAAC,MAAG,EAAA,WAAU,~~kCACV~~,GAAA,sBAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,WAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IACA,sBAAA,cAACC,KAAAA,MAAK,EAAA,MAAK,cAAc,CAAA;AAAA,IACxB,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,CAE7C,CACJ;AAER;;"}
1	+ {"version":3,"file":"CreateNewRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport type { TableRef } from '../../../../../primitives/Table/types';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nconst SCROLL_NEAR_BOTTOM_THRESHOLD_PX = 80;\nconst SCROLL_DELAY_MS = 150;\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, hasScrollbar, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as keyof TType] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter \|\|\n !!table.getState().columnFilters?.length \|\|\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId as string));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId as string) === 'saving';\n\n const handleCreate = async () => {\n if (isDisabled) {\n return;\n }\n\n const tableElement = tableRef.current;\n const isNearBottom =\n tableElement &&\n tableElement.scrollHeight - tableElement.scrollTop - tableElement.clientHeight < SCROLL_NEAR_BOTTOM_THRESHOLD_PX;\n\n await tableMeta.editing.createRow(table);\n\n // The sticky temporary row overlaps the last data row, so scroll to reveal it\n if (isNearBottom) {\n setTimeout(() => {\n tableElement.scrollTo({ top: tableElement.scrollHeight, behavior: 'smooth' });\n }, SCROLL_DELAY_MS);\n }\n };\n const shortcut = { key: 'Enter', meta: true };\n\n let tooltip;\n\n if (isSaving) {\n tooltip = texts.table3.editing.buttons.create.saving;\n } else if (isDisabled) {\n tooltip = texts.table3.editing.buttons.create.disabled;\n } else {\n tooltip = <Shortcut keys={shortcut} />;\n }\n\n const className = clsx('group/row !sticky z-[21]', {\n 'bottom-10': tableMeta.footer.isEnabled,\n 'bottom-0': !tableMeta.footer.isEnabled,\n 'border-b !border-t-[0]': !hasScrollbar,\n });\n\n return (\n <tr data-row-create className={className} tabIndex={-1}>\n <td className=\"col-span-full !bg-gray-50/50 !px-1\">\n <Button\n appearance=\"transparent\"\n className=\"sticky left-[4px] font-bold group-hover:bg-gray-200\"\n disabled={isDisabled}\n onClick={handleCreate}\n ref={buttonRef}\n shortcut={shortcut}\n tooltip={tooltip}>\n <Icon name=\"circle-plus\" />\n {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["useLocalization","Shortcut","clsx","Button","Icon"],"mappings":";;;;;;;;AAiBA,MAAM,kCAAkC;AACxC,MAAM,kBAAkB;AAEjB,SAAS,aAA8B,OAAiC;;AAC3E,QAAM,EAAE,WAAW,cAAc,OAAO,WAAW,aAAa;AAC1D,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAE5B,QAAA,gBAAgB,UAAU,QAAQ;AACxC,QAAM,mBAAiB,mBAAc,CAAC,MAAf,mBAAmB,UAAU,yBAAuC;AAErF,QAAA,aACF,CAAC,CAAC,MAAM,SAAW,EAAA,gBACnB,CAAC,GAAC,WAAM,SAAA,EAAW,kBAAjB,mBAAgC,WACjC,CAAC,CAAC,kBAAkB,CAAC,CAAC,UAAU,QAAQ,aAAa,cAAwB;AAC5E,QAAA,WAAW,CAAC,CAAC,kBAAkB,UAAU,QAAQ,aAAa,cAAwB,MAAM;AAElG,QAAM,eAAe,YAAY;AAC7B,QAAI,YAAY;AACZ;AAAA,IAAA;AAGJ,UAAM,eAAe,SAAS;AAC9B,UAAM,eACF,gBACA,aAAa,eAAe,aAAa,YAAY,aAAa,eAAe;AAE/E,UAAA,UAAU,QAAQ,UAAU,KAAK;AAGvC,QAAI,cAAc;AACd,iBAAW,MAAM;AACb,qBAAa,SAAS,EAAE,KAAK,aAAa,cAAc,UAAU,UAAU;AAAA,SAC7E,eAAe;AAAA,IAAA;AAAA,EAE1B;AACA,QAAM,WAAW,EAAE,KAAK,SAAS,MAAM,KAAK;AAExC,MAAA;AAEJ,MAAI,UAAU;AACV,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,aACvC,YAAY;AACnB,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,OAC3C;AACO,cAAA,sBAAA,cAACC,SAAS,UAAA,EAAA,MAAM,UAAU;AAAA,EAAA;AAGlC,QAAA,YAAYC,QAAK,4BAA4B;AAAA,IAC/C,aAAa,UAAU,OAAO;AAAA,IAC9B,YAAY,CAAC,UAAU,OAAO;AAAA,IAC9B,0BAA0B,CAAC;AAAA,EAAA,CAC9B;AAGG,SAAA,sBAAA,cAAC,MAAG,EAAA,mBAAe,MAAC,WAAsB,UAAU,GAChD,GAAA,sBAAA,cAAC,MAAG,EAAA,WAAU,qCACV,GAAA,sBAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,WAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IACA,sBAAA,cAACC,KAAAA,MAAK,EAAA,MAAK,cAAc,CAAA;AAAA,IACxB,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,CAE7C,CACJ;AAER;;"}

package/dist/components/Table3/components/Row/Editing/CreateNewRow.js CHANGED Viewed

@@ -41,7 +41,7 @@ function CreateNewRow(props) {
     "bottom-0": !tableMeta.footer.isEnabled,
     "border-b !border-t-[0]": !hasScrollbar
   });
-  return /* @__PURE__ */ React__default.createElement("tr", { "data-row-create": true, className, tabIndex: -1 }, /* @__PURE__ */ React__default.createElement("td", { className: "col-span-full !bg-gray-50 !px-1" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("tr", { "data-row-create": true, className, tabIndex: -1 }, /* @__PURE__ */ React__default.createElement("td", { className: "col-span-full !bg-gray-50/50 !px-1" }, /* @__PURE__ */ React__default.createElement(
     Button,
     {
       appearance: "transparent",

package/dist/components/Table3/components/Row/Editing/CreateNewRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreateNewRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport type { TableRef } from '../../../../../primitives/Table/types';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nconst SCROLL_NEAR_BOTTOM_THRESHOLD_PX = 80;\nconst SCROLL_DELAY_MS = 150;\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, hasScrollbar, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as keyof TType] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter \|\|\n !!table.getState().columnFilters?.length \|\|\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId as string));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId as string) === 'saving';\n\n const handleCreate = async () => {\n if (isDisabled) {\n return;\n }\n\n const tableElement = tableRef.current;\n const isNearBottom =\n tableElement &&\n tableElement.scrollHeight - tableElement.scrollTop - tableElement.clientHeight < SCROLL_NEAR_BOTTOM_THRESHOLD_PX;\n\n await tableMeta.editing.createRow(table);\n\n // The sticky temporary row overlaps the last data row, so scroll to reveal it\n if (isNearBottom) {\n setTimeout(() => {\n tableElement.scrollTo({ top: tableElement.scrollHeight, behavior: 'smooth' });\n }, SCROLL_DELAY_MS);\n }\n };\n const shortcut = { key: 'Enter', meta: true };\n\n let tooltip;\n\n if (isSaving) {\n tooltip = texts.table3.editing.buttons.create.saving;\n } else if (isDisabled) {\n tooltip = texts.table3.editing.buttons.create.disabled;\n } else {\n tooltip = <Shortcut keys={shortcut} />;\n }\n\n const className = clsx('group/row !sticky z-[21]', {\n 'bottom-10': tableMeta.footer.isEnabled,\n 'bottom-0': !tableMeta.footer.isEnabled,\n 'border-b !border-t-[0]': !hasScrollbar,\n });\n\n return (\n <tr data-row-create className={className} tabIndex={-1}>\n <td className=\"col-span-full !bg-gray-50 !px-1\">\n <Button\n appearance=\"transparent\"\n className=\"sticky left-[4px] font-bold group-hover:bg-gray-200\"\n disabled={isDisabled}\n onClick={handleCreate}\n ref={buttonRef}\n shortcut={shortcut}\n tooltip={tooltip}>\n <Icon name=\"circle-plus\" />\n {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAiBA,MAAM,kCAAkC;AACxC,MAAM,kBAAkB;AAEjB,SAAS,aAA8B,OAAiC;;AAC3E,QAAM,EAAE,WAAW,cAAc,OAAO,WAAW,aAAa;AAC1D,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAE5B,QAAA,gBAAgB,UAAU,QAAQ;AACxC,QAAM,mBAAiB,mBAAc,CAAC,MAAf,mBAAmB,UAAU,yBAAuC;AAErF,QAAA,aACF,CAAC,CAAC,MAAM,SAAW,EAAA,gBACnB,CAAC,GAAC,WAAM,SAAA,EAAW,kBAAjB,mBAAgC,WACjC,CAAC,CAAC,kBAAkB,CAAC,CAAC,UAAU,QAAQ,aAAa,cAAwB;AAC5E,QAAA,WAAW,CAAC,CAAC,kBAAkB,UAAU,QAAQ,aAAa,cAAwB,MAAM;AAElG,QAAM,eAAe,YAAY;AAC7B,QAAI,YAAY;AACZ;AAAA,IAAA;AAGJ,UAAM,eAAe,SAAS;AAC9B,UAAM,eACF,gBACA,aAAa,eAAe,aAAa,YAAY,aAAa,eAAe;AAE/E,UAAA,UAAU,QAAQ,UAAU,KAAK;AAGvC,QAAI,cAAc;AACd,iBAAW,MAAM;AACb,qBAAa,SAAS,EAAE,KAAK,aAAa,cAAc,UAAU,UAAU;AAAA,SAC7E,eAAe;AAAA,IAAA;AAAA,EAE1B;AACA,QAAM,WAAW,EAAE,KAAK,SAAS,MAAM,KAAK;AAExC,MAAA;AAEJ,MAAI,UAAU;AACV,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,aACvC,YAAY;AACnB,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,OAC3C;AACO,cAAAA,+BAAA,cAAC,UAAS,EAAA,MAAM,UAAU;AAAA,EAAA;AAGlC,QAAA,YAAY,KAAK,4BAA4B;AAAA,IAC/C,aAAa,UAAU,OAAO;AAAA,IAC9B,YAAY,CAAC,UAAU,OAAO;AAAA,IAC9B,0BAA0B,CAAC;AAAA,EAAA,CAC9B;AAGG,SAAAA,+BAAA,cAAC,MAAG,EAAA,mBAAe,MAAC,WAAsB,UAAU,GAChD,GAAAA,+BAAA,cAAC,MAAG,EAAA,WAAU,~~kCACV~~,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,WAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IACAA,+BAAA,cAAC,MAAK,EAAA,MAAK,cAAc,CAAA;AAAA,IACxB,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,CAE7C,CACJ;AAER;"}
1	+ {"version":3,"file":"CreateNewRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/CreateNewRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Button } from '../../../../Button/Button';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport type { TableRef } from '../../../../../primitives/Table/types';\n\ntype CreateNewRowProps<TType = unknown> = {\n buttonRef: React.Ref<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nconst SCROLL_NEAR_BOTTOM_THRESHOLD_PX = 80;\nconst SCROLL_DELAY_MS = 150;\n\nexport function CreateNewRow<TType = unknown>(props: CreateNewRowProps<TType>) {\n const { buttonRef, hasScrollbar, table, tableMeta, tableRef } = props;\n const { texts } = useLocalization();\n\n const temporaryRows = tableMeta.editing.temporaryRows as TType[];\n const temporaryRowId = temporaryRows[0]?.[tableMeta.rowIdentityAccessor as keyof TType] ?? '';\n\n const isDisabled =\n !!table.getState().globalFilter \|\|\n !!table.getState().columnFilters?.length \|\|\n (!!temporaryRowId && !!tableMeta.editing.hasRowErrors(temporaryRowId as string));\n const isSaving = !!temporaryRowId && tableMeta.editing.getRowStatus(temporaryRowId as string) === 'saving';\n\n const handleCreate = async () => {\n if (isDisabled) {\n return;\n }\n\n const tableElement = tableRef.current;\n const isNearBottom =\n tableElement &&\n tableElement.scrollHeight - tableElement.scrollTop - tableElement.clientHeight < SCROLL_NEAR_BOTTOM_THRESHOLD_PX;\n\n await tableMeta.editing.createRow(table);\n\n // The sticky temporary row overlaps the last data row, so scroll to reveal it\n if (isNearBottom) {\n setTimeout(() => {\n tableElement.scrollTo({ top: tableElement.scrollHeight, behavior: 'smooth' });\n }, SCROLL_DELAY_MS);\n }\n };\n const shortcut = { key: 'Enter', meta: true };\n\n let tooltip;\n\n if (isSaving) {\n tooltip = texts.table3.editing.buttons.create.saving;\n } else if (isDisabled) {\n tooltip = texts.table3.editing.buttons.create.disabled;\n } else {\n tooltip = <Shortcut keys={shortcut} />;\n }\n\n const className = clsx('group/row !sticky z-[21]', {\n 'bottom-10': tableMeta.footer.isEnabled,\n 'bottom-0': !tableMeta.footer.isEnabled,\n 'border-b !border-t-[0]': !hasScrollbar,\n });\n\n return (\n <tr data-row-create className={className} tabIndex={-1}>\n <td className=\"col-span-full !bg-gray-50/50 !px-1\">\n <Button\n appearance=\"transparent\"\n className=\"sticky left-[4px] font-bold group-hover:bg-gray-200\"\n disabled={isDisabled}\n onClick={handleCreate}\n ref={buttonRef}\n shortcut={shortcut}\n tooltip={tooltip}>\n <Icon name=\"circle-plus\" />\n {texts.table3.editing.buttons.create.label}\n </Button>\n </td>\n </tr>\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAiBA,MAAM,kCAAkC;AACxC,MAAM,kBAAkB;AAEjB,SAAS,aAA8B,OAAiC;;AAC3E,QAAM,EAAE,WAAW,cAAc,OAAO,WAAW,aAAa;AAC1D,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAE5B,QAAA,gBAAgB,UAAU,QAAQ;AACxC,QAAM,mBAAiB,mBAAc,CAAC,MAAf,mBAAmB,UAAU,yBAAuC;AAErF,QAAA,aACF,CAAC,CAAC,MAAM,SAAW,EAAA,gBACnB,CAAC,GAAC,WAAM,SAAA,EAAW,kBAAjB,mBAAgC,WACjC,CAAC,CAAC,kBAAkB,CAAC,CAAC,UAAU,QAAQ,aAAa,cAAwB;AAC5E,QAAA,WAAW,CAAC,CAAC,kBAAkB,UAAU,QAAQ,aAAa,cAAwB,MAAM;AAElG,QAAM,eAAe,YAAY;AAC7B,QAAI,YAAY;AACZ;AAAA,IAAA;AAGJ,UAAM,eAAe,SAAS;AAC9B,UAAM,eACF,gBACA,aAAa,eAAe,aAAa,YAAY,aAAa,eAAe;AAE/E,UAAA,UAAU,QAAQ,UAAU,KAAK;AAGvC,QAAI,cAAc;AACd,iBAAW,MAAM;AACb,qBAAa,SAAS,EAAE,KAAK,aAAa,cAAc,UAAU,UAAU;AAAA,SAC7E,eAAe;AAAA,IAAA;AAAA,EAE1B;AACA,QAAM,WAAW,EAAE,KAAK,SAAS,MAAM,KAAK;AAExC,MAAA;AAEJ,MAAI,UAAU;AACV,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,aACvC,YAAY;AACnB,cAAU,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,OAC3C;AACO,cAAAA,+BAAA,cAAC,UAAS,EAAA,MAAM,UAAU;AAAA,EAAA;AAGlC,QAAA,YAAY,KAAK,4BAA4B;AAAA,IAC/C,aAAa,UAAU,OAAO;AAAA,IAC9B,YAAY,CAAC,UAAU,OAAO;AAAA,IAC9B,0BAA0B,CAAC;AAAA,EAAA,CAC9B;AAGG,SAAAA,+BAAA,cAAC,MAAG,EAAA,mBAAe,MAAC,WAAsB,UAAU,GAChD,GAAAA,+BAAA,cAAC,MAAG,EAAA,WAAU,qCACV,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,YAAW;AAAA,MACX,WAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IAAA;AAAA,IACAA,+BAAA,cAAC,MAAK,EAAA,MAAK,cAAc,CAAA;AAAA,IACxB,MAAM,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAAA,CAE7C,CACJ;AAER;"}

package/dist/components/Table3/components/Row/Editing/TemporaryRow.cjs CHANGED Viewed

@@ -43,7 +43,7 @@ function TemporaryRow(props) {
       }
     }
   };
-  const className = cn.clsx("group/row border-gray-300 !sticky z-[22] print:hidden border-t-2", {
+  const className = cn.clsx("group/row border-gray-100 !sticky z-[22] print:hidden border-t-2", {
     "bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]": tableMeta.footer.isEnabled,
     "bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]": !tableMeta.footer.isEnabled,
     "border-b !border-t": !hasScrollbar

package/dist/components/Table3/components/Row/Editing/TemporaryRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemporaryRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\n\ntype TemporaryRowsProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n row: ReactTableRow<TType>;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n const target = event.target as Element;\n\n // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (saved) {\n requestAnimationFrame(() => {\n createRowButtonRef.current?.focus();\n });\n }\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n\n // save or discard changes when we leave the row\n await tableMeta.editing.saveChanges(table);\n\n const lastIndex = tableMeta.length - 1;\n tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n if (tableRef.current) {\n // scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n requestAnimationFrame(() => {\n if (tableRef.current) {\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n }\n });\n }\n }\n };\n\n const className = clsx('group/row border-gray-~~300~~ !sticky z-[22] print:hidden border-t-2', {\n 'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n 'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n 'border-b !border-t': !hasScrollbar,\n });\n\n return (\n <Row<TType>\n key={row.id}\n cellRenderer={RENDERERS.cell}\n index={tableMeta.length}\n measureRow={() => null}\n renderer={RENDERERS.row}\n row={row}\n table={table}\n className={className}\n onKeyDown={handleKeyDown}\n hideInternalColumns\n hideRowActions={!tableMeta.editing.isEditing}\n />\n );\n}\n"],"names":["isAriaDirectionKey","isElementInsideExternalRelatedOverlay","isElementTriggeredFromContainer","clsx","Row","RENDERERS"],"mappings":";;;;;;;;AAiBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAc,EAAE,IAAI,CAAO,QAAA,sBAAA,cAAC,cAAoB,EAAA,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAExE,QAAA,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAIA,KAAAA,mBAAmB,KAAK,KAAKC,IAAsC,sCAAA,QAAQ,QAAQ,GAAG;AACtF;AAAA,IAAA;AAGA,QAAA,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAe;AAErB,UAAI,CAACC,IAAAA,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;;AACxB,qCAAmB,YAAnB,mBAA4B;AAAA,UAAM,CACrC;AAAA,QAAA;AAAA,MACL;AAAA,IACJ,WACO,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGhB,YAAA,UAAU,QAAQ,YAAY,KAAK;AAEnC,YAAA,YAAY,UAAU,SAAS;AAC3B,gBAAA,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAET,iBAAA,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AACT,qBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAAA;AAAA,QAClD,CACH;AAAA,MAAA;AAAA,IACL;AAAA,EAER;AAEM,QAAA,YAAYC,QAAK,oEAAoE;AAAA,IACvF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAGG,SAAA,sBAAA;AAAA,IAACC,IAAA;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAcC,UAAU,UAAA;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAUA,UAAU,UAAA;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EACvC;AAER;;"}
1	+ {"version":3,"file":"TemporaryRow.cjs","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\n\ntype TemporaryRowsProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n row: ReactTableRow<TType>;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n const target = event.target as Element;\n\n // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (saved) {\n requestAnimationFrame(() => {\n createRowButtonRef.current?.focus();\n });\n }\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n\n // save or discard changes when we leave the row\n await tableMeta.editing.saveChanges(table);\n\n const lastIndex = tableMeta.length - 1;\n tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n if (tableRef.current) {\n // scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n requestAnimationFrame(() => {\n if (tableRef.current) {\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n }\n });\n }\n }\n };\n\n const className = clsx('group/row border-gray-100 !sticky z-[22] print:hidden border-t-2', {\n 'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n 'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n 'border-b !border-t': !hasScrollbar,\n });\n\n return (\n <Row<TType>\n key={row.id}\n cellRenderer={RENDERERS.cell}\n index={tableMeta.length}\n measureRow={() => null}\n renderer={RENDERERS.row}\n row={row}\n table={table}\n className={className}\n onKeyDown={handleKeyDown}\n hideInternalColumns\n hideRowActions={!tableMeta.editing.isEditing}\n />\n );\n}\n"],"names":["isAriaDirectionKey","isElementInsideExternalRelatedOverlay","isElementTriggeredFromContainer","clsx","Row","RENDERERS"],"mappings":";;;;;;;;AAiBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAc,EAAE,IAAI,CAAO,QAAA,sBAAA,cAAC,cAAoB,EAAA,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAExE,QAAA,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAIA,KAAAA,mBAAmB,KAAK,KAAKC,IAAsC,sCAAA,QAAQ,QAAQ,GAAG;AACtF;AAAA,IAAA;AAGA,QAAA,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAe;AAErB,UAAI,CAACC,IAAAA,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;;AACxB,qCAAmB,YAAnB,mBAA4B;AAAA,UAAM,CACrC;AAAA,QAAA;AAAA,MACL;AAAA,IACJ,WACO,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGhB,YAAA,UAAU,QAAQ,YAAY,KAAK;AAEnC,YAAA,YAAY,UAAU,SAAS;AAC3B,gBAAA,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAET,iBAAA,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AACT,qBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAAA;AAAA,QAClD,CACH;AAAA,MAAA;AAAA,IACL;AAAA,EAER;AAEM,QAAA,YAAYC,QAAK,oEAAoE;AAAA,IACvF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAGG,SAAA,sBAAA;AAAA,IAACC,IAAA;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAcC,UAAU,UAAA;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAUA,UAAU,UAAA;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EACvC;AAER;;"}

package/dist/components/Table3/components/Row/Editing/TemporaryRow.js CHANGED Viewed

@@ -41,7 +41,7 @@ function TemporaryRow(props) {
       }
     }
   };
-  const className = clsx("group/row border-gray-300 !sticky z-[22] print:hidden border-t-2", {
+  const className = clsx("group/row border-gray-100 !sticky z-[22] print:hidden border-t-2", {
     "bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]": tableMeta.footer.isEnabled,
     "bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]": !tableMeta.footer.isEnabled,
     "border-b !border-t": !hasScrollbar

package/dist/components/Table3/components/Row/Editing/TemporaryRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemporaryRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\n\ntype TemporaryRowsProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n row: ReactTableRow<TType>;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n const target = event.target as Element;\n\n // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (saved) {\n requestAnimationFrame(() => {\n createRowButtonRef.current?.focus();\n });\n }\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n\n // save or discard changes when we leave the row\n await tableMeta.editing.saveChanges(table);\n\n const lastIndex = tableMeta.length - 1;\n tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n if (tableRef.current) {\n // scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n requestAnimationFrame(() => {\n if (tableRef.current) {\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n }\n });\n }\n }\n };\n\n const className = clsx('group/row border-gray-~~300~~ !sticky z-[22] print:hidden border-t-2', {\n 'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n 'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n 'border-b !border-t': !hasScrollbar,\n });\n\n return (\n <Row<TType>\n key={row.id}\n cellRenderer={RENDERERS.cell}\n index={tableMeta.length}\n measureRow={() => null}\n renderer={RENDERERS.row}\n row={row}\n table={table}\n className={className}\n onKeyDown={handleKeyDown}\n hideInternalColumns\n hideRowActions={!tableMeta.editing.isEditing}\n />\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAiBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAc,EAAE,IAAI,CAAO,QAAAA,+BAAA,cAAC,cAAoB,EAAA,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAExE,QAAA,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAI,mBAAmB,KAAK,KAAK,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IAAA;AAGA,QAAA,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAe;AAErB,UAAI,CAAC,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;;AACxB,qCAAmB,YAAnB,mBAA4B;AAAA,UAAM,CACrC;AAAA,QAAA;AAAA,MACL;AAAA,IACJ,WACO,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGhB,YAAA,UAAU,QAAQ,YAAY,KAAK;AAEnC,YAAA,YAAY,UAAU,SAAS;AAC3B,gBAAA,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAET,iBAAA,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AACT,qBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAAA;AAAA,QAClD,CACH;AAAA,MAAA;AAAA,IACL;AAAA,EAER;AAEM,QAAA,YAAY,KAAK,oEAAoE;AAAA,IACvF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAGG,SAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAc,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EACvC;AAER;"}
1	+ {"version":3,"file":"TemporaryRow.js","sources":["../../../../../../src/components/Table3/components/Row/Editing/TemporaryRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { Row } from '../../../../../primitives/Table/Core/components/Row/Row';\nimport { RENDERERS } from '../../../useTable3';\nimport { isElementTriggeredFromContainer, isElementInsideExternalRelatedOverlay } from '../../../../../utils/dom';\nimport { TableRef } from '../../../../../primitives/Table/types';\nimport { isAriaDirectionKey } from '../../../../../utils/aria';\n\ntype TemporaryRowsProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nexport function TemporaryRows<TType = unknown>(props: TemporaryRowsProps<TType>) {\n return props.table.getBottomRows().map(row => <TemporaryRow<TType> key={row.id} row={row} {...props} />);\n}\n\ntype TemporaryRowProps<TType = unknown> = {\n createRowButtonRef: React.RefObject<HTMLButtonElement>;\n hasScrollbar: boolean;\n row: ReactTableRow<TType>;\n table: ReactTable<TType>;\n tableMeta: ReactTableMeta<TType>;\n tableRef: React.RefObject<TableRef>;\n};\n\nfunction TemporaryRow<TType = unknown>(props: TemporaryRowProps<TType>) {\n const { createRowButtonRef, hasScrollbar, row, table, tableMeta, tableRef } = props;\n\n const handleKeyDown = async (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n const target = event.target as Element;\n\n // Skip handling if the event is from a related dropdown (overlay, e.q. Select2 options dropdown) outside the row\n if (isAriaDirectionKey(event) && isElementInsideExternalRelatedOverlay(target, tableRef)) {\n return;\n }\n\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n\n if (!isElementTriggeredFromContainer(target, event.currentTarget)) {\n const saved = await tableMeta.editing.saveChanges(table);\n\n if (saved) {\n requestAnimationFrame(() => {\n createRowButtonRef.current?.focus();\n });\n }\n }\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n\n // save or discard changes when we leave the row\n await tableMeta.editing.saveChanges(table);\n\n const lastIndex = tableMeta.length - 1;\n tableMeta.rowActive.setRowActiveIndex(lastIndex);\n\n if (tableRef.current) {\n // scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n\n // there's a delay in calculating row heights, so the scrollTop isn't always correct first time - recalculate it\n requestAnimationFrame(() => {\n if (tableRef.current) {\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n }\n });\n }\n }\n };\n\n const className = clsx('group/row border-gray-100 !sticky z-[22] print:hidden border-t-2', {\n 'bottom-[calc(5rem_+_5px)] data-[row-editing-move]:bottom-[calc(5rem_+_5px)]': tableMeta.footer.isEnabled,\n 'bottom-[calc(2.5rem_+_5px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_5px)]': !tableMeta.footer.isEnabled,\n 'border-b !border-t': !hasScrollbar,\n });\n\n return (\n <Row<TType>\n key={row.id}\n cellRenderer={RENDERERS.cell}\n index={tableMeta.length}\n measureRow={() => null}\n renderer={RENDERERS.row}\n row={row}\n table={table}\n className={className}\n onKeyDown={handleKeyDown}\n hideInternalColumns\n hideRowActions={!tableMeta.editing.isEditing}\n />\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAiBO,SAAS,cAA+B,OAAkC;AAC7E,SAAO,MAAM,MAAM,cAAc,EAAE,IAAI,CAAO,QAAAA,+BAAA,cAAC,cAAoB,EAAA,KAAK,IAAI,IAAI,KAAW,GAAG,OAAO,CAAE;AAC3G;AAWA,SAAS,aAA8B,OAAiC;AACpE,QAAM,EAAE,oBAAoB,cAAc,KAAK,OAAO,WAAW,aAAa;AAExE,QAAA,gBAAgB,OAAO,UAAoD;AAC7E,UAAM,SAAS,MAAM;AAGrB,QAAI,mBAAmB,KAAK,KAAK,sCAAsC,QAAQ,QAAQ,GAAG;AACtF;AAAA,IAAA;AAGA,QAAA,MAAM,QAAQ,aAAa;AAC3B,YAAM,eAAe;AAErB,UAAI,CAAC,gCAAgC,QAAQ,MAAM,aAAa,GAAG;AAC/D,cAAM,QAAQ,MAAM,UAAU,QAAQ,YAAY,KAAK;AAEvD,YAAI,OAAO;AACP,gCAAsB,MAAM;;AACxB,qCAAmB,YAAnB,mBAA4B;AAAA,UAAM,CACrC;AAAA,QAAA;AAAA,MACL;AAAA,IACJ,WACO,MAAM,QAAQ,WAAW;AAChC,YAAM,eAAe;AACrB,YAAM,gBAAgB;AAGhB,YAAA,UAAU,QAAQ,YAAY,KAAK;AAEnC,YAAA,YAAY,UAAU,SAAS;AAC3B,gBAAA,UAAU,kBAAkB,SAAS;AAE/C,UAAI,SAAS,SAAS;AAET,iBAAA,QAAQ,YAAY,SAAS,QAAQ;AAG9C,8BAAsB,MAAM;AACxB,cAAI,SAAS,SAAS;AACT,qBAAA,QAAQ,YAAY,SAAS,QAAQ;AAAA,UAAA;AAAA,QAClD,CACH;AAAA,MAAA;AAAA,IACL;AAAA,EAER;AAEM,QAAA,YAAY,KAAK,oEAAoE;AAAA,IACvF,+EAA+E,UAAU,OAAO;AAAA,IAChG,mFAAmF,CAAC,UAAU,OAAO;AAAA,IACrG,sBAAsB,CAAC;AAAA,EAAA,CAC1B;AAGG,SAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK,IAAI;AAAA,MACT,cAAc,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,YAAY,MAAM;AAAA,MAClB,UAAU,UAAU;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,qBAAmB;AAAA,MACnB,gBAAgB,CAAC,UAAU,QAAQ;AAAA,IAAA;AAAA,EACvC;AAER;"}

package/dist/components/Table3/components/Toolbar/Editing/Editing.cjs CHANGED Viewed

@@ -18,7 +18,7 @@ function Editing(props) {
     "button",
     {
       "aria-checked": tableMeta.editing.isEditing,
-      className: "focus-visible:yt-focus group inline-flex h-8  w-14 flex-shrink-0 rounded-full bg-gray-500 p-1 hover:bg-gray-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700",
+      className: "focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 p-1 hover:bg-gray-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700",
       "data-table": "editing-toggle",
       "data-taco": "mode",
       onClick: handleClick,

package/dist/components/Table3/components/Toolbar/Editing/Editing.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editing.cjs","sources":["../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\nimport { Icon } from '../../../../Icon/Icon';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n scrollToIndex: any;\n table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const handleClick = () => {\n tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n };\n\n const tooltip = (\n <>\n {texts.table3.editing.buttons.edit.tooltip}\n <Shortcut className=\"ml-2\" keys={shortcut} />\n </>\n );\n\n return (\n <Tooltip title={tooltip}>\n <button\n aria-checked={tableMeta.editing.isEditing}\n className={\n 'focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-~~500~~ p-1 hover:bg-gray-~~700~~ aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700'\n }\n data-table=\"editing-toggle\"\n data-taco=\"mode\"\n onClick={handleClick}\n role=\"switch\"\n type=\"button\">\n <span className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n </span>\n </button>\n </Tooltip>\n );\n}\n"],"names":["useLocalization","Shortcut","shortcut","Tooltip","Icon"],"mappings":";;;;;;;;AAcO,SAAS,QAAyB,OAA4B;AAC3D,QAAA,EAAE,eAAe,MAAA,IAAU;AAC3B,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAC5B,QAAA,YAAY,MAAM,QAAQ;AAEhC,QAAM,cAAc,MAAM;AACtB,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF;AAEA,QAAM,UACF,sBAAA,cAAA,MAAA,UAAA,MACK,MAAM,OAAO,QAAQ,QAAQ,KAAK,SACnC,sBAAA,cAACC,SAAS,UAAA,EAAA,WAAU,QAAO,MAAMC,kBAAU,CAC/C;AAIA,SAAA,sBAAA,cAACC,QAAQ,SAAA,EAAA,OAAO,QACZ,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,UAAU,QAAQ;AAAA,MAChC,WACI;AAAA,MAEJ,cAAW;AAAA,MACX,aAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,IACL,sBAAA,cAAC,QAAK,EAAA,WAAU,gMACZ,GAAA,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,gCAAA,CAAgC,CACvE;AAAA,EAAA,CAER;AAER;;"}
1	+ {"version":3,"file":"Editing.cjs","sources":["../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\nimport { Icon } from '../../../../Icon/Icon';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n scrollToIndex: any;\n table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const handleClick = () => {\n tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n };\n\n const tooltip = (\n <>\n {texts.table3.editing.buttons.edit.tooltip}\n <Shortcut className=\"ml-2\" keys={shortcut} />\n </>\n );\n\n return (\n <Tooltip title={tooltip}>\n <button\n aria-checked={tableMeta.editing.isEditing}\n className={\n 'focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 p-1 hover:bg-gray-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700'\n }\n data-table=\"editing-toggle\"\n data-taco=\"mode\"\n onClick={handleClick}\n role=\"switch\"\n type=\"button\">\n <span className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n </span>\n </button>\n </Tooltip>\n );\n}\n"],"names":["useLocalization","Shortcut","shortcut","Tooltip","Icon"],"mappings":";;;;;;;;AAcO,SAAS,QAAyB,OAA4B;AAC3D,QAAA,EAAE,eAAe,MAAA,IAAU;AAC3B,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAC5B,QAAA,YAAY,MAAM,QAAQ;AAEhC,QAAM,cAAc,MAAM;AACtB,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF;AAEA,QAAM,UACF,sBAAA,cAAA,MAAA,UAAA,MACK,MAAM,OAAO,QAAQ,QAAQ,KAAK,SACnC,sBAAA,cAACC,SAAS,UAAA,EAAA,WAAU,QAAO,MAAMC,kBAAU,CAC/C;AAIA,SAAA,sBAAA,cAACC,QAAQ,SAAA,EAAA,OAAO,QACZ,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,UAAU,QAAQ;AAAA,MAChC,WACI;AAAA,MAEJ,cAAW;AAAA,MACX,aAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,IACL,sBAAA,cAAC,QAAK,EAAA,WAAU,gMACZ,GAAA,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,gCAAA,CAAgC,CACvE;AAAA,EAAA,CAER;AAER;;"}

package/dist/components/Table3/components/Toolbar/Editing/Editing.js CHANGED Viewed

@@ -16,7 +16,7 @@ function Editing(props) {
     "button",
     {
       "aria-checked": tableMeta.editing.isEditing,
-      className: "focus-visible:yt-focus group inline-flex h-8  w-14 flex-shrink-0 rounded-full bg-gray-500 p-1 hover:bg-gray-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700",
+      className: "focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 p-1 hover:bg-gray-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700",
       "data-table": "editing-toggle",
       "data-taco": "mode",
       onClick: handleClick,

package/dist/components/Table3/components/Toolbar/Editing/Editing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editing.js","sources":["../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\nimport { Icon } from '../../../../Icon/Icon';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n scrollToIndex: any;\n table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const handleClick = () => {\n tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n };\n\n const tooltip = (\n <>\n {texts.table3.editing.buttons.edit.tooltip}\n <Shortcut className=\"ml-2\" keys={shortcut} />\n </>\n );\n\n return (\n <Tooltip title={tooltip}>\n <button\n aria-checked={tableMeta.editing.isEditing}\n className={\n 'focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-~~500~~ p-1 hover:bg-gray-~~700~~ aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700'\n }\n data-table=\"editing-toggle\"\n data-taco=\"mode\"\n onClick={handleClick}\n role=\"switch\"\n type=\"button\">\n <span className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n </span>\n </button>\n </Tooltip>\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAcO,SAAS,QAAyB,OAA4B;AAC3D,QAAA,EAAE,eAAe,MAAA,IAAU;AAC3B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAC5B,QAAA,YAAY,MAAM,QAAQ;AAEhC,QAAM,cAAc,MAAM;AACtB,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF;AAEA,QAAM,UACFA,+BAAA,cAAAA,eAAA,UAAA,MACK,MAAM,OAAO,QAAQ,QAAQ,KAAK,SACnCA,+BAAA,cAAC,UAAS,EAAA,WAAU,QAAO,MAAM,UAAU,CAC/C;AAIA,SAAAA,+BAAA,cAAC,SAAQ,EAAA,OAAO,QACZ,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,UAAU,QAAQ;AAAA,MAChC,WACI;AAAA,MAEJ,cAAW;AAAA,MACX,aAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,IACLA,+BAAA,cAAC,QAAK,EAAA,WAAU,gMACZ,GAAAA,+BAAA,cAAC,QAAK,MAAK,eAAc,WAAU,gCAAA,CAAgC,CACvE;AAAA,EAAA,CAER;AAER;"}
1	+ {"version":3,"file":"Editing.js","sources":["../../../../../../src/components/Table3/components/Toolbar/Editing/Editing.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { shortcut } from '../../../util/editing';\nimport { Icon } from '../../../../Icon/Icon';\n\ntype EditingProps<TType = unknown> = React.HTMLAttributes<HTMLButtonElement> & {\n scrollToIndex: any;\n table: ReactTable<TType>;\n};\n\nexport function Editing<TType = unknown>(props: EditingProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const handleClick = () => {\n tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing, table, scrollToIndex);\n };\n\n const tooltip = (\n <>\n {texts.table3.editing.buttons.edit.tooltip}\n <Shortcut className=\"ml-2\" keys={shortcut} />\n </>\n );\n\n return (\n <Tooltip title={tooltip}>\n <button\n aria-checked={tableMeta.editing.isEditing}\n className={\n 'focus-visible:yt-focus group inline-flex h-8 w-14 flex-shrink-0 rounded-full bg-gray-200 p-1 hover:bg-gray-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700'\n }\n data-table=\"editing-toggle\"\n data-taco=\"mode\"\n onClick={handleClick}\n role=\"switch\"\n type=\"button\">\n <span className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n </span>\n </button>\n </Tooltip>\n );\n}\n"],"names":["React"],"mappings":";;;;;;AAcO,SAAS,QAAyB,OAA4B;AAC3D,QAAA,EAAE,eAAe,MAAA,IAAU;AAC3B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAC5B,QAAA,YAAY,MAAM,QAAQ;AAEhC,QAAM,cAAc,MAAM;AACtB,cAAU,QAAQ,cAAc,CAAC,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EACtF;AAEA,QAAM,UACFA,+BAAA,cAAAA,eAAA,UAAA,MACK,MAAM,OAAO,QAAQ,QAAQ,KAAK,SACnCA,+BAAA,cAAC,UAAS,EAAA,WAAU,QAAO,MAAM,UAAU,CAC/C;AAIA,SAAAA,+BAAA,cAAC,SAAQ,EAAA,OAAO,QACZ,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,UAAU,QAAQ;AAAA,MAChC,WACI;AAAA,MAEJ,cAAW;AAAA,MACX,aAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,IAAA;AAAA,IACLA,+BAAA,cAAC,QAAK,EAAA,WAAU,gMACZ,GAAAA,+BAAA,cAAC,QAAK,MAAK,eAAc,WAAU,gCAAA,CAAgC,CACvE;AAAA,EAAA,CAER;AAER;"}

package/dist/components/Tabs/components/TabList.cjs CHANGED Viewed

@@ -16,7 +16,7 @@ const focusManagerOptions = {
 const TabList = React.forwardRef(function Tab(props, ref) {
   const { children, ...otherProps } = props;
   const className = cn(
-    "border-gray-300 flex flex-row m-0 mb-4 print:hidden",
+    "border-gray-100 flex flex-row m-0 mb-4 print:hidden",
     "aria-orientation-horizontal:border-b",
     "aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col",
     props.className