@veeqo/ui 9.10.3 → 10.0.0-beta.2

package/dist/components/DataTable/components/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAG,MAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKR,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAO5B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAG/B,MAAA,aAAa,GAAG,MAAM,CAAC,IAAI,CAO7B,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAChC,aAAA,EAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKR,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}

package/dist/components/DataTable/components/EmptyBodyContent.cjs

@@ -7,8 +7,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const EmptyBodyContent = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${index.theme.sizes.lg};padding-bottom:${index.theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${index.theme.sizes.md};`;
-const EmptyBodyGlyphWrapper = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${index.theme.sizes.md};background-color:${index.theme.colors.neutral.grey.light};border-radius:${index.theme.radius.full};`;
+const EmptyBodyContent = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--80fqan" }) `padding-top:${index.theme.sizes.lg};padding-bottom:${index.theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${index.theme.sizes.md};`;
+const EmptyBodyGlyphWrapper = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--gozoo2" }) `padding:${index.theme.sizes.md};background-color:${index.theme.colors.neutral.grey.light};border-radius:${index.theme.radius.full};`;
 
 exports.EmptyBodyContent = EmptyBodyContent;
 exports.EmptyBodyGlyphWrapper = EmptyBodyGlyphWrapper;

package/dist/components/DataTable/components/EmptyBodyContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAOa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzBC,WAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtDA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClCC,WAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI;;;;;"}
+{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAOa,MAAA,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzBC,WAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtDA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClCC,WAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI;;;;;"}

package/dist/components/DataTable/components/EmptyBodyContent.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const EmptyBodyContent = styled.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${theme.sizes.lg};padding-bottom:${theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${theme.sizes.md};`;
-const EmptyBodyGlyphWrapper = styled.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${theme.sizes.md};background-color:${theme.colors.neutral.grey.light};border-radius:${theme.radius.full};`;
+const EmptyBodyContent = styled.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--80fqan" }) `padding-top:${theme.sizes.lg};padding-bottom:${theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${theme.sizes.md};`;
+const EmptyBodyGlyphWrapper = styled.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--gozoo2" }) `padding:${theme.sizes.md};background-color:${theme.colors.neutral.grey.light};border-radius:${theme.radius.full};`;
 
 export { EmptyBodyContent, EmptyBodyGlyphWrapper };
 //# sourceMappingURL=EmptyBodyContent.js.map

package/dist/components/DataTable/components/EmptyBodyContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":[],"mappings":";;;AAOa,MAAA,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzB,KAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtD,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClC,KAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI;;;;"}
+{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":[],"mappings":";;;AAOa,MAAA,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzB,KAAK,CAAC,KAAK,CAAC,EAAE,CACX,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtD,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClC,KAAK,CAAC,KAAK,CAAC,EAAE,CACL,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAClC,eAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI;;;;"}

package/dist/components/DataTable/components/Header.cjs

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Header = styled__default.default.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${constants.headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};border-bottom:1px solid ${index.theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
+const Header = styled__default.default.th.withConfig({ displayName: "vui--Header", componentId: "vui--1cog66w" }) `height:${constants.headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};border-bottom:1px solid ${index.theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
 
 exports.Header = Header;
 //# sourceMappingURL=Header.cjs.map

package/dist/components/DataTable/components/Header.js

@@ -5,7 +5,7 @@ import '../types.js';
 import 'react';
 import { headerCellHeight, defaultCellSpacing } from '../constants.js';
 
-const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};border-bottom:1px solid ${theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
+const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--1cog66w" }) `height:${headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};border-bottom:1px solid ${theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
 
 export { Header };
 //# sourceMappingURL=Header.js.map

package/dist/components/DataTable/components/LoadingCellContent.cjs

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 /* Loading content shimmer animation */
 const shimmerLight = index.theme.colors.neutral.grey.base;
 const shimmerDark = index.theme.colors.neutral.grey.dark;
-const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${index.theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
+const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1ve27x7" }) `height:20px;width:75%;border-radius:${index.theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
 
 exports.LoadingCellContent = LoadingCellContent;
 //# sourceMappingURL=LoadingCellContent.cjs.map

package/dist/components/DataTable/components/LoadingCellContent.js

@@ -4,7 +4,7 @@ import { theme } from '../../../theme/index.js';
 /* Loading content shimmer animation */
 const shimmerLight = theme.colors.neutral.grey.base;
 const shimmerDark = theme.colors.neutral.grey.dark;
-const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
+const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1ve27x7" }) `height:20px;width:75%;border-radius:${theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
 
 export { LoadingCellContent };
 //# sourceMappingURL=LoadingCellContent.js.map

package/dist/components/DataTable/components/NoWrap.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const NoWrap = styled__default.default.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = styled__default.default.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--gp96g8" }) `white-space:nowrap;`;
 
 exports.NoWrap = NoWrap;
 //# sourceMappingURL=NoWrap.cjs.map

package/dist/components/DataTable/components/NoWrap.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const NoWrap = styled.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = styled.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--gp96g8" }) `white-space:nowrap;`;
 
 export { NoWrap };
 //# sourceMappingURL=NoWrap.js.map

package/dist/components/DataTable/components/Row.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--j1gmuf" }) `display:contents;${({ selected }) => selected &&
     `
     &&&& > td {
       background-color: ${index.theme.colors.brand.blue.lightest};

package/dist/components/DataTable/components/Row.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--j1gmuf" }) `display:contents;${({ selected }) => selected &&
     `
     &&&& > td {
       background-color: ${theme.colors.brand.blue.lightest};

package/dist/components/DataTable/components/ScrollContainer.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const ScrollContainer = styled__default.default.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = styled__default.default.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--89sqty" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
 
 exports.ScrollContainer = ScrollContainer;
 //# sourceMappingURL=ScrollContainer.cjs.map

package/dist/components/DataTable/components/ScrollContainer.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const ScrollContainer = styled.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = styled.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--89sqty" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
 
 export { ScrollContainer };
 //# sourceMappingURL=ScrollContainer.js.map

package/dist/components/DataTable/components/TableGrid.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
 const defaultDensity = 'base';
-const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--uiuxyy" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
 
 exports.TableGrid = TableGrid;
 //# sourceMappingURL=TableGrid.cjs.map

package/dist/components/DataTable/components/TableGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtBC,WAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}
+{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtBC,WAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}

package/dist/components/DataTable/components/TableGrid.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
 const defaultDensity = 'base';
-const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--uiuxyy" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
 
 export { TableGrid };
 //# sourceMappingURL=TableGrid.js.map

package/dist/components/DataTable/components/TableGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtB,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}
+{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtB,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}

package/dist/components/DataTable/components/Truncate.cjs

@@ -6,7 +6,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--1kkdpgh" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
 
 exports.Truncate = Truncate;
 //# sourceMappingURL=Truncate.cjs.map

package/dist/components/DataTable/components/Truncate.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--1kkdpgh" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
 
 export { Truncate };
 //# sourceMappingURL=Truncate.js.map

package/dist/components/DataTable/components/Wrapper.cjs

@@ -12,7 +12,7 @@ const borderModeStyles = {
     vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
     none: 'border-width: 0;',
 };
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--femv7s" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=Wrapper.cjs.map

package/dist/components/DataTable/components/Wrapper.js

@@ -6,7 +6,7 @@ const borderModeStyles = {
     vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
     none: 'border-width: 0;',
 };
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--femv7s" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
 export { Wrapper };
 //# sourceMappingURL=Wrapper.js.map

package/dist/components/DateInputField/DateInputField.cjs

@@ -20,7 +20,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true, rightAction, startValue, endValue, isDisabled, isReadOnly, isRangeInput = false, hasError, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }) => {
+const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true, rightAction, startValue, endValue, disabled, isReadOnly, isRangeInput = false, hasError, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }) => {
     const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable.useIsDateUnavailable(validationProps);
     const [isStartInvalid, setIsStartInvalid] = React.useState(false);
     const [isEndInvalid, setIsEndInvalid] = React.useState(false);
@@ -45,13 +45,13 @@ const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true,
         setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);
     }, [startValue, endValue, isRangeInput, validateDate]);
     return (React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignX: "stretch", alignY: "center", spacing: 0 },
-        React__default.default.createElement(styled.DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "$hasError": hasError, isDisabled: isDisabled },
-            React__default.default.createElement(Stack.Stack, { spacing: 0, direction: "horizontal", alignX: "center" },
-                React__default.default.createElement(reactAriaComponents.DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
+        React__default.default.createElement(styled.DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, hasError: hasError, isDisabled: disabled },
+            React__default.default.createElement(Stack.Stack, { spacing: "sm", direction: "horizontal", alignX: "center" },
+                React__default.default.createElement(reactAriaComponents.DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: disabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
                     React__default.default.createElement(reactAriaComponents.DateInput, { slot: "start" }, (segment) => React__default.default.createElement(reactAriaComponents.DateSegment, { segment: segment }))),
                 isRangeInput && (React__default.default.createElement(React__default.default.Fragment, null,
                     React__default.default.createElement("span", { className: "date-range-input-splitter", "aria-hidden": "true" }, "-"),
-                    React__default.default.createElement(reactAriaComponents.DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: onChangeEndDate, value: endValue, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": "end date", isDisabled: isDisabled, isReadOnly: isReadOnly, validate: validateDate, isInvalid: isEndInvalid, ...validationProps },
+                    React__default.default.createElement(reactAriaComponents.DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: onChangeEndDate, value: endValue, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": "end date", isDisabled: disabled, isReadOnly: isReadOnly, validate: validateDate, isInvalid: isEndInvalid, ...validationProps },
                         React__default.default.createElement(reactAriaComponents.DateInput, { slot: "end" }, (segment) => React__default.default.createElement(reactAriaComponents.DateSegment, { segment: segment })))))),
             rightAction && (React__default.default.createElement(Button.Button, { type: "button", ref: rightActionRef, variant: "flat", style: {
                     padding: '2px',

package/dist/components/DateInputField/DateInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputField.cjs","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  isDisabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        $hasError={hasError}\n        isDisabled={isDisabled}\n      >\n        <Stack spacing={0} direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={isDisabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["useIsDateUnavailable","useState","useCallback","useEffect","React","Stack","DateRangeGroup","DateField","DateInput","DateSegment","Button"],"mappings":"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"}
+{"version":3,"file":"DateInputField.cjs","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        hasError={hasError}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["useIsDateUnavailable","useState","useCallback","useEffect","React","Stack","DateRangeGroup","DateField","DateInput","DateSegment","Button"],"mappings":"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"}

package/dist/components/DateInputField/DateInputField.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DateInputFieldProps } from './types';
-export declare const DateInputField: ({ id, className, style, shouldForceLeadingZeros, rightAction, startValue, endValue, isDisabled, isReadOnly, isRangeInput, hasError, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }: DateInputFieldProps) => React.JSX.Element;
+export declare const DateInputField: ({ id, className, style, shouldForceLeadingZeros, rightAction, startValue, endValue, disabled, isReadOnly, isRangeInput, hasError, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }: DateInputFieldProps) => React.JSX.Element;

package/dist/components/DateInputField/DateInputField.js

@@ -14,7 +14,7 @@ import '../Calendars/components/subcomponents/CalendarHeading.js';
 import { useIsDateUnavailable } from '../Calendars/data/useIsDateUnavailable.js';
 import '../Calendars/components/Calendar/styled.js';
 
-const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true, rightAction, startValue, endValue, isDisabled, isReadOnly, isRangeInput = false, hasError, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }) => {
+const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true, rightAction, startValue, endValue, disabled, isReadOnly, isRangeInput = false, hasError, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-labelledby': ariaLabelledBy, onChange, onChangeStartDate, onChangeEndDate, rangeRef, rightActionRef, ...validationProps }) => {
     const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);
     const [isStartInvalid, setIsStartInvalid] = useState(false);
     const [isEndInvalid, setIsEndInvalid] = useState(false);
@@ -39,13 +39,13 @@ const DateInputField = ({ id, className, style, shouldForceLeadingZeros = true,
         setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);
     }, [startValue, endValue, isRangeInput, validateDate]);
     return (React__default.createElement(Stack, { direction: "horizontal", alignX: "stretch", alignY: "center", spacing: 0 },
-        React__default.createElement(DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "$hasError": hasError, isDisabled: isDisabled },
-            React__default.createElement(Stack, { spacing: 0, direction: "horizontal", alignX: "center" },
-                React__default.createElement(DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
+        React__default.createElement(DateRangeGroup, { ref: rangeRef, style: style, className: className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, hasError: hasError, isDisabled: disabled },
+            React__default.createElement(Stack, { spacing: "sm", direction: "horizontal", alignX: "center" },
+                React__default.createElement(DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: isRangeInput ? onChangeStartDate : onChange, value: startValue, validate: validateDate, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": isRangeInput ? 'start date' : 'date', isDisabled: disabled, isReadOnly: isReadOnly, isInvalid: isStartInvalid, ...validationProps },
                     React__default.createElement(DateInput, { slot: "start" }, (segment) => React__default.createElement(DateSegment, { segment: segment }))),
                 isRangeInput && (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("span", { className: "date-range-input-splitter", "aria-hidden": "true" }, "-"),
-                    React__default.createElement(DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: onChangeEndDate, value: endValue, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": "end date", isDisabled: isDisabled, isReadOnly: isReadOnly, validate: validateDate, isInvalid: isEndInvalid, ...validationProps },
+                    React__default.createElement(DateField, { shouldForceLeadingZeros: shouldForceLeadingZeros, onChange: onChangeEndDate, value: endValue, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== undefined ? ariaLabelledBy : `${id}-label`, "aria-label": "end date", isDisabled: disabled, isReadOnly: isReadOnly, validate: validateDate, isInvalid: isEndInvalid, ...validationProps },
                         React__default.createElement(DateInput, { slot: "end" }, (segment) => React__default.createElement(DateSegment, { segment: segment })))))),
             rightAction && (React__default.createElement(Button, { type: "button", ref: rightActionRef, variant: "flat", style: {
                     padding: '2px',

package/dist/components/DateInputField/DateInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputField.js","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  isDisabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        $hasError={hasError}\n        isDisabled={isDisabled}\n      >\n        <Stack spacing={0} direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={isDisabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={isDisabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DateInputField.js","sources":["../../../src/components/DateInputField/DateInputField.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { DateField, DateInput, DateRange, DateSegment, DateValue } from 'react-aria-components';\nimport { DateRangeGroup } from './styled';\nimport { DateInputFieldProps } from './types';\nimport { Button } from '../Button';\nimport { Stack } from '../Stack';\nimport { useIsDateUnavailable } from '../Calendars';\n\nexport const DateInputField = ({\n  id,\n  className,\n  style,\n  shouldForceLeadingZeros = true,\n  rightAction,\n  startValue,\n  endValue,\n  disabled,\n  isReadOnly,\n  isRangeInput = false,\n  hasError,\n  'aria-label': ariaLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-labelledby': ariaLabelledBy,\n  onChange,\n  onChangeStartDate,\n  onChangeEndDate,\n  rangeRef,\n  rightActionRef,\n  ...validationProps\n}: DateInputFieldProps) => {\n  const { isDateUnavailable, isDateRangeUnavailable } = useIsDateUnavailable(validationProps);\n  const [isStartInvalid, setIsStartInvalid] = useState(false);\n  const [isEndInvalid, setIsEndInvalid] = useState(false);\n\n  const validateDate = useCallback(\n    (value: DateValue): true | string => {\n      if (!value) return 'no date';\n      if (!isRangeInput) return isDateUnavailable(value) ? 'Invalid date selection' : true;\n\n      const range = {\n        start: value === startValue ? value : startValue,\n        end: value === endValue ? value : endValue,\n      };\n\n      if (!range.start || !range.end) {\n        return isDateUnavailable(value) ? 'Invalid date selection' : true;\n      }\n      if (isDateRangeUnavailable(range as DateRange)) return 'Invalid range selection';\n\n      return true;\n    },\n    [isRangeInput, startValue, endValue, isDateUnavailable, isDateRangeUnavailable],\n  );\n\n  useEffect(() => {\n    setIsStartInvalid(startValue ? validateDate(startValue) !== true : false);\n    setIsEndInvalid(isRangeInput && endValue ? validateDate(endValue) !== true : false);\n  }, [startValue, endValue, isRangeInput, validateDate]);\n\n  return (\n    <Stack direction=\"horizontal\" alignX=\"stretch\" alignY=\"center\" spacing={0}>\n      <DateRangeGroup\n        ref={rangeRef}\n        style={style}\n        className={className}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedBy}\n        aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n        hasError={hasError}\n        isDisabled={disabled}\n      >\n        <Stack spacing=\"sm\" direction=\"horizontal\" alignX=\"center\">\n          <DateField\n            shouldForceLeadingZeros={shouldForceLeadingZeros}\n            onChange={isRangeInput ? onChangeStartDate : onChange}\n            value={startValue}\n            validate={validateDate}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n            aria-label={isRangeInput ? 'start date' : 'date'}\n            isDisabled={disabled}\n            isReadOnly={isReadOnly}\n            isInvalid={isStartInvalid}\n            {...validationProps}\n          >\n            <DateInput slot=\"start\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n          </DateField>\n\n          {isRangeInput && (\n            <>\n              <span className=\"date-range-input-splitter\" aria-hidden=\"true\">\n                -\n              </span>\n              <DateField\n                shouldForceLeadingZeros={shouldForceLeadingZeros}\n                onChange={onChangeEndDate}\n                value={endValue}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy ?? `${id}-label`}\n                aria-label=\"end date\"\n                isDisabled={disabled}\n                isReadOnly={isReadOnly}\n                validate={validateDate}\n                isInvalid={isEndInvalid}\n                {...validationProps}\n              >\n                <DateInput slot=\"end\">{(segment) => <DateSegment segment={segment} />}</DateInput>\n              </DateField>\n            </>\n          )}\n        </Stack>\n\n        {rightAction && (\n          <Button\n            type=\"button\"\n            ref={rightActionRef}\n            variant=\"flat\"\n            style={{\n              padding: '2px',\n              height: 'unset',\n            }}\n            {...rightAction}\n          />\n        )}\n      </DateRangeGroup>\n    </Stack>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DateInputField/styled.cjs

@@ -2,18 +2,14 @@
 
 var styled = require('styled-components');
 var reactAriaComponents = require('react-aria-components');
-var utils = require('../../theme/utils.cjs');
 var index = require('../../theme/index.cjs');
+var inputStyles = require('../../utils/forms/inputStyles.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--cprola" }) `${utils.getTextStyles(index.theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${index.theme.colors.neutral.ink.lightest};border-radius:${index.theme.radius.base};gap:${index.theme.sizes.xs};padding:${index.theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
-    `
-    box-shadow: 0 0 0 4px ${index.theme.colors.secondary.red.light};
-    border: 1px solid ${index.theme.colors.secondary.red.base};
-  `} *[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${index.theme.colors.neutral.ink.light};}.date-range-input-splitter{margin:0 ${index.theme.sizes.sm};}&[data-disabled]{cursor:not-allowed;background-color:${index.theme.colors.neutral.grey.light};.react-aria-DateInput .react-aria-DateSegment,.date-range-input-splitter{cursor:not-allowed;color:${index.theme.colors.neutral.ink.light};}}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${index.theme.radius.base};&[data-focused]{color:white;background-color:${index.theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${index.theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${index.theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
+const DateRangeGroup = styled__default.default(reactAriaComponents.Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1lv2dzh" }) `${inputStyles.inputBaseStyles} ${inputStyles.inputDisabledStyles} gap:${index.theme.sizes.sm};justify-content:space-between;z-index:1;&[data-focus-within]{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};border-color:${index.theme.colors.secondary.blue.base};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${index.theme.colors.secondary.red.light};border:1px solid ${index.theme.colors.secondary.red.base};}*[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${index.theme.colors.neutral.ink.light};}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${index.theme.radius.base};&[data-focused]{color:white;background-color:${index.theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${index.theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${index.theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
 
 exports.DateRangeGroup = DateRangeGroup;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/DateInputField/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","getTextStyles","theme"],"mappings":";;;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,mBAAa,CAACC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,IAAI,QAE3BA,WAAK,CAAC,KAAK,CAAC,EAAE,YACVA,WAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKUA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3BA,WAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtBA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9BA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles';\nimport { InputProps } from '../types';\n\nexport const DateRangeGroup = styled(Group)<InputProps>`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n\n  gap: ${theme.sizes.sm};\n  justify-content: space-between;\n  z-index: 1;\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":["styled","Group","inputBaseStyles","inputDisabledStyles","theme"],"mappings":";;;;;;;;;;;MAMa,cAAc,GAAGA,uBAAM,CAACC,yBAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvCC,2BAAe,CAAA,CAAA,EACfC,+BAAmB,CAEd,KAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,sFAKKA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iBACzCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,iDAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CACpC,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,gHAM1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAYpB,gJAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAG9B,kCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAMhD,0CAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,kCAAA;;;;"}

package/dist/components/DateInputField/styled.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-export declare const DateRangeGroup: import("styled-components").StyledComponent<(props: import("react-aria-components").GroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {
-    $hasError?: boolean | undefined;
-}, never>;
+import { InputProps } from '../types';
+export declare const DateRangeGroup: import("styled-components").StyledComponent<(props: import("react-aria-components").GroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, InputProps, never>;

package/dist/components/DateInputField/styled.js

@@ -1,13 +1,9 @@
 import styled from 'styled-components';
 import { Group } from 'react-aria-components';
-import { getTextStyles } from '../../theme/utils.js';
 import { theme } from '../../theme/index.js';
+import { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles.js';
 
-const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--cprola" }) `${getTextStyles(theme.text.body)} display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;z-index:1;border:1px solid ${theme.colors.neutral.ink.lightest};border-radius:${theme.radius.base};gap:${theme.sizes.xs};padding:${theme.sizes.sm};&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}${({ $hasError }) => !!$hasError &&
-    `
-    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};
-    border: 1px solid ${theme.colors.secondary.red.base};
-  `} *[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${theme.colors.neutral.ink.light};}.date-range-input-splitter{margin:0 ${theme.sizes.sm};}&[data-disabled]{cursor:not-allowed;background-color:${theme.colors.neutral.grey.light};.react-aria-DateInput .react-aria-DateSegment,.date-range-input-splitter{cursor:not-allowed;color:${theme.colors.neutral.ink.light};}}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${theme.radius.base};&[data-focused]{color:white;background-color:${theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
+const DateRangeGroup = styled(Group).withConfig({ displayName: "vui--DateRangeGroup", componentId: "vui--1lv2dzh" }) `${inputBaseStyles} ${inputDisabledStyles} gap:${theme.sizes.sm};justify-content:space-between;z-index:1;&[data-focus-within]{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};border-color:${theme.colors.secondary.blue.base};}&:has(*[data-invalid]){box-shadow:0 0 0 4px ${theme.colors.secondary.red.light};border:1px solid ${theme.colors.secondary.red.base};}*[data-placeholder],*[data-placeholder] + div,*:has(*[data-placeholder])~ .date-range-input-splitter{color:${theme.colors.neutral.ink.light};}.react-aria-DateInput{display:flex;align-items:center;cursor:text;caret-color:transparent;.react-aria-DateSegment{padding:0 1px;border-radius:${theme.radius.base};&[data-focused]{color:white;background-color:${theme.colors.secondary.blue.dark};&[data-invalid]{background-color:${theme.colors.secondary.red.lightest};}}&[data-invalid]{font-weight:bold;color:${theme.colors.secondary.red.dark};}&:focus-visible{outline:none;}}}`;
 
 export { DateRangeGroup };
 //# sourceMappingURL=styled.js.map

package/dist/components/DateInputField/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { getTextStyles } from 'Theme/utils';\nimport { theme } from '../../theme';\n\nexport const DateRangeGroup = styled(Group)<{ $hasError?: boolean }>`\n  ${getTextStyles(theme.text.body)}\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  height: 22px;\n  z-index: 1;\n\n  border: 1px solid ${theme.colors.neutral.ink.lightest};\n  border-radius: ${theme.radius.base};\n\n  gap: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  ${({ $hasError }) =>\n    !!$hasError &&\n    `\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  `}\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .date-range-input-splitter {\n    margin: 0 ${theme.sizes.sm};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.light};\n\n    .react-aria-DateInput .react-aria-DateSegment,\n    .date-range-input-splitter {\n      cursor: not-allowed;\n      color: ${theme.colors.neutral.ink.light};\n    }\n  }\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,EACvC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iHAUZ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAA,eAAA,EACpC,KAAK,CAAC,MAAM,CAAC,IAAI,QAE3B,KAAK,CAAC,KAAK,CAAC,EAAE,YACV,KAAK,CAAC,KAAK,CAAC,EAAE,CAGC,2CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iDAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,KAGnD,CAAC,EAAE,SAAS,EAAE,KACd,CAAC,CAAC,SAAS;AACX,IAAA;AACwB,0BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA;AACpC,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA;AACpD,EAAA,CAAA,CAAA,4GAAA,EAKU,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,yCAI3B,KAAK,CAAC,KAAK,CAAC,EAAE,CAKN,uDAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,mGAAA,EAKxC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iJAAA,EAYtB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,6CAMhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/DateInputField/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Group } from 'react-aria-components';\nimport { theme } from '../../theme';\nimport { inputBaseStyles, inputDisabledStyles } from '../../utils/forms/inputStyles';\nimport { InputProps } from '../types';\n\nexport const DateRangeGroup = styled(Group)<InputProps>`\n  ${inputBaseStyles}\n  ${inputDisabledStyles}\n\n  gap: ${theme.sizes.sm};\n  justify-content: space-between;\n  z-index: 1;\n\n  &[data-focus-within] {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n    border-color: ${theme.colors.secondary.blue.base};\n  }\n\n  &:has(*[data-invalid]) {\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.red.light};\n    border: 1px solid ${theme.colors.secondary.red.base};\n  }\n\n  *[data-placeholder],\n  *[data-placeholder] + div,\n  *:has(*[data-placeholder]) ~ .date-range-input-splitter {\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  .react-aria-DateInput {\n    display: flex;\n    align-items: center;\n\n    cursor: text;\n    caret-color: transparent;\n\n    .react-aria-DateSegment {\n      padding: 0 1px;\n      border-radius: ${theme.radius.base};\n\n      &[data-focused] {\n        color: white;\n        background-color: ${theme.colors.secondary.blue.dark};\n\n        &[data-invalid] {\n          background-color: ${theme.colors.secondary.red.lightest};\n        }\n      }\n\n      &[data-invalid] {\n        font-weight: bold;\n        color: ${theme.colors.secondary.red.dark};\n      }\n\n      &:focus-visible {\n        outline: none;\n      }\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;MAMa,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EACvC,eAAe,CAAA,CAAA,EACf,mBAAmB,CAEd,KAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,sFAKK,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,iBACzC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,iDAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CACpC,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,gHAM1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAYpB,gJAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,8CAAA,EAIZ,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAG9B,kCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAMhD,0CAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,kCAAA;;;;"}

package/dist/components/DateInputField/types.d.ts

@@ -2,13 +2,14 @@ import { CSSProperties } from 'react';
 import { DateValue } from 'react-aria-components';
 import { CalendarDate } from '@internationalized/date';
 import { ButtonProps } from '../Button/types';
+import { InputProps } from '../types';
 export type DateValidationProps = {
     minValue?: DateValue;
     maxValue?: DateValue;
     disabledRanges?: CalendarDate[][] | undefined;
     disallowWeekends?: boolean | undefined;
 };
-type CommonDateInputProps = {
+type CommonDateInputProps = InputProps & {
     id?: string;
     className?: string;
     style?: CSSProperties;
@@ -16,9 +17,7 @@ type CommonDateInputProps = {
     rightAction?: ButtonProps;
     startValue?: DateValue | null;
     endValue?: DateValue | null;
-    isDisabled?: boolean;
     isReadOnly?: boolean;
-    hasError?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;

package/dist/components/DatePicker/DatePicker.cjs

@@ -50,7 +50,7 @@ const DatePicker = ({ className, style, value, onChange, 'aria-label': ariaLabel
     const isSelectedDateInvalid = React.useMemo(() => (value ? isDateUnavailable(value) : false), [isDateUnavailable, value]);
     const error = withLabelProps.error || (isSelectedDateInvalid ? 'Invalid date selection' : undefined);
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(index.DateInputField, { isDisabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
+        React__default.default.createElement(index.DateInputField, { disabled: isDisabled, "aria-label": ariaLabel, startValue: value, rightActionRef: openDropdownRef, rightAction: {
                 iconSlot: React__default.default.createElement(CalendarIcon.CalendarIcon, null),
                 'aria-label': 'Open Calendar',
                 onClick: () => setShouldShowDropdown(!shouldShowDropdown),