@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.2 → 10.7.0

package/dist/Table/components/commonComponents.js

@@ -0,0 +1,138 @@
+import { darken } from 'polished';
+import styled, { css } from 'styled-components';
+import { fontStyleMapping } from '../../Text/fontMapping';
+import { theme } from '../../theme';
+import { focusOutlineStyle } from '../../utils/focusOutline';
+export const StyledTable = styled.table `
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  overflow: auto;
+  background: ${theme.colors.coconut};
+  border-spacing: 30px;
+`;
+export const StyledHeaderCell = styled.th `
+  background: ${theme.colors.coconut};
+  border-bottom: ${({ $hasKeyline }) => $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};
+  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};
+  top: 0;
+  z-index: 2;
+  text-align: left;
+  vertical-align: bottom;
+  ${fontStyleMapping.label};
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  ${({ $headerColor }) => $headerColor &&
+    css `
+      background: ${theme.colors[$headerColor]};
+    `}
+
+  ${({ $headerHeight }) => $headerHeight &&
+    css `
+      height: ${$headerHeight};
+    `}
+
+  ${({ $maxWidth }) => $maxWidth &&
+    css `
+      max-width: ${$maxWidth};
+    `}
+
+  ${({ $minWidth }) => $minWidth &&
+    css `
+      min-width: ${$minWidth};
+    `}
+    
+  ${({ $columnPadding }) => $columnPadding &&
+    css `
+      padding-left: ${$columnPadding};
+      padding-right: ${$columnPadding};
+    `};
+`;
+export const StyledCell = styled.td `
+  vertical-align: middle;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  ${({ $hideOverflow }) => $hideOverflow &&
+    css `
+      overflow: hidden;
+    `};
+
+  ${({ $noWrapContent }) => $noWrapContent &&
+    css `
+      white-space: nowrap;
+    `};
+
+  ${({ $truncateContent }) => $truncateContent &&
+    css `
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    `};
+
+  ${({ $stickyCell }) => $stickyCell &&
+    css `
+      position: sticky;
+      right: 0;
+    `};
+
+  ${({ $rowPadding }) => $rowPadding &&
+    css `
+      padding-top: ${$rowPadding};
+      padding-bottom: ${$rowPadding};
+    `};
+
+  ${({ $columnPadding }) => $columnPadding &&
+    css `
+      padding-left: ${$columnPadding};
+      padding-right: ${$columnPadding};
+    `};
+
+  ${({ $maxWidth }) => $maxWidth &&
+    css `
+      max-width: ${$maxWidth};
+    `}
+
+  ${({ $rowActionsBgColor }) => $rowActionsBgColor &&
+    css `
+      background: ${theme.colors[$rowActionsBgColor]};
+    `}
+`;
+export const StyledRow = styled.tr `
+  background: ${theme.colors.custard};
+
+  ${({ $rowBorderColor }) => $rowBorderColor &&
+    css `
+      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};
+    `}
+
+  ${({ $rowColor }) => $rowColor &&
+    css `
+      background: ${theme.colors[$rowColor]};
+    `}
+
+  ${({ $stripedColor }) => $stripedColor &&
+    css `
+      &:nth-child(even) {
+        background: ${theme.colors[$stripedColor]};
+      }
+    `}
+
+    ${({ $clickableRow, $rowColor }) => $clickableRow &&
+    css `
+      cursor: pointer;
+      &:hover {
+        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+      }
+      &:focus-visible {
+        ${focusOutlineStyle}
+        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};
+      }
+    `}
+`;
+//# sourceMappingURL=commonComponents.js.map

package/dist/Table/components/commonComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAG5D,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;gBAKvB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAEnC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAkC;gBAC3D,KAAK,CAAC,MAAM,CAAC,OAAO;mBACjB,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,WAAW,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM;cAClD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;IAKlE,gBAAgB,CAAC,KAAK;;;;;;IAMtB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY;IACZ,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACzC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;gBACS,aAAa;KACxB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAkC;;;;;;;IAOjE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACzB,gBAAgB;IAChB,GAAG,CAAA;;;;KAIF;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;qBACc,WAAW;wBACR,WAAW;KAC9B;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAC3B,kBAAkB;IAClB,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC;KAC/C;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAkC;gBACpD,KAAK,CAAC,MAAM,CAAC,OAAO;;IAEhC,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CACxB,eAAe;IACf,GAAG,CAAA;iCAC0B,KAAK,CAAC,MAAM,CAAC,eAAe,CAAC;KACzD;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;oBACa,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;KACtC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;sBAEe,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;;KAE5C;;MAEC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,CACnC,aAAa;IACb,GAAG,CAAA;;;sBAGe,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;;;UAG7D,iBAAiB;sBACL,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC;;KAElE;CACJ,CAAA","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps } from '../types'\n\nexport const StyledTable = styled.table`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.coconut};\n  border-bottom: ${({ $hasKeyline }) =>\n    $hasKeyline ? `1px solid ${theme.colors.liquorice}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${theme.colors[$headerColor]};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $rowPadding }) =>\n    $rowPadding &&\n    css`\n      padding-top: ${$rowPadding};\n      padding-bottom: ${$rowPadding};\n    `};\n\n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${theme.colors[$rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${theme.colors.custard};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[$rowBorderColor]};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${theme.colors[$rowColor]};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[$stripedColor]};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[$rowColor ?? 'custard'])};\n      }\n    `}\n`\n"]}

package/dist/Table/helpers.js

@@ -0,0 +1,12 @@
+import { isValidElement } from 'react';
+export const isMappedReactElement = (obj) => {
+    if (!Array.isArray(obj))
+        return false;
+    if (!obj[0])
+        return false;
+    if (!isValidElement(obj[0]))
+        return false;
+    const allReactElements = obj.every((val, i, arr) => typeof val === typeof arr[0]);
+    return allReactElements;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/Table/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/Table/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,OAAO,CAAA;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,GAAY,EACgB,EAAE;IAC9B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAAE,OAAO,KAAK,CAAA;IACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IACzB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,KAAK,CAAA;IACzC,MAAM,gBAAgB,GAAG,GAAG,CAAC,KAAK,CAChC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC,CAC9C,CAAA;IACD,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA","sourcesContent":["import { ReactElement, isValidElement } from 'react'\n\nexport const isMappedReactElement = (\n  obj: unknown,\n): obj is ReactElement<any>[] => {\n  if (!Array.isArray(obj)) return false\n  if (!obj[0]) return false\n  if (!isValidElement(obj[0])) return false\n  const allReactElements = obj.every(\n    (val, i, arr) => typeof val === typeof arr[0],\n  )\n  return allReactElements\n}\n"]}

package/dist/Table/index.js

@@ -0,0 +1,3 @@
+export * from './Table';
+export * from './components/TableRow';
+//# sourceMappingURL=index.js.map

package/dist/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,uBAAuB,CAAA","sourcesContent":["export * from './Table'\nexport * from './components/TableRow'\n"]}

package/dist/Table/types.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { IconStrictProps } from '../IconStrict';
 import { Color } from '../theme';

package/dist/Table/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/Table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: Color\n  stickyCell?: boolean\n  headerColor?: Color\n  rowColor?: Color\n  rowBorderColor?: Color\n  rowActionsBgColor?: Color\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: Color\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: Color\n  /** The default color for each table row. */\n  rowColor?: Color\n  /** The default color for each table row border. */\n  rowBorderColor?: Color\n  /** A React element to show when a row is expanded. */\n  subTable?: {\n    table: (rowData: T) => ReactElement<any>\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Settings for sub rows. */\n  subRows?: {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n    /** If true, the sub rows will only be shown when the row is expanded. */\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: string\n  /** The X padding for each row. */\n  columnPadding?: string\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n  rowData: T\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}

package/dist/Tag/Tag.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { theme } from '../theme';
+export const Tag = ({ label, color, borderColor, bgColor, className, ...marginProps }) => (React.createElement(Wrapper, { "$bgColor": bgColor, className: className, "$borderColor": borderColor, ...marginProps, alignContent: "center", justifyContent: "center" },
+    React.createElement(TagText, { tag: "span", typo: "label", color: color }, label)));
+const Wrapper = styled(Box) `
+  background-color: ${({ $bgColor }) => $bgColor && theme.colors[$bgColor]};
+  border: ${({ $borderColor }) => $borderColor && `1px solid ${theme.colors[$borderColor]}`};
+
+  border-radius: 6px;
+  padding: 4px 8px;
+
+  height: 22px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+`;
+const TagText = styled(Text) `
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+  text-transform: uppercase;
+`;
+//# sourceMappingURL=Tag.js.map

package/dist/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAUvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,gBACI,OAAO,EACjB,SAAS,EAAE,SAAS,kBACN,WAAW,KACrB,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ;IAEvB,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAC1C,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC9D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAC7B,YAAY,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;;;;;;;;;CAS5D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\n\nexport type TagProps = {\n  label: string\n  color: Color\n  bgColor: Color\n  borderColor?: Color\n  className?: string\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  ...marginProps\n}) => (\n  <Wrapper\n    $bgColor={bgColor}\n    className={className}\n    $borderColor={borderColor}\n    {...marginProps}\n    alignContent=\"center\"\n    justifyContent=\"center\"\n  >\n    <TagText tag=\"span\" typo=\"label\" color={color}>\n      {label}\n    </TagText>\n  </Wrapper>\n)\n\ntype WrapperProps = TransientProps<Pick<TagProps, 'bgColor' | 'borderColor'>>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor && theme.colors[$bgColor]};\n  border: ${({ $borderColor }) =>\n    $borderColor && `1px solid ${theme.colors[$borderColor]}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n"]}

package/dist/Tag/index.js

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+//# sourceMappingURL=index.js.map

package/dist/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA","sourcesContent":["export { Tag } from './Tag'\n"]}

package/dist/Text/Text.js

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { linkStyleOverride } from '../Link/Link';
+import { theme } from '../theme';
+import { fontStyleMapping } from './fontMapping';
+export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '', ...props }, ref) => (React.createElement(Container, { forwardedAs: tag, className: className, "$typo": typo, "$align": align, "$color": color, cursor: cursor, title: title, ...props, ref: ref }, children)));
+Text.displayName = 'Text';
+const isNewTypo = (value) => {
+    return Object.keys(fontStyleMapping).includes(value);
+};
+const Container = styled(Box)(({ $align, $color, $cursor, $typo }) => css `
+    /** TYPOGRAPHY STYLES */
+
+    ${isNewTypo($typo) && fontStyleMapping[$typo]}
+
+    /** DEPRECATED TYPOGRAPHY STYLES */
+    ${$typo === 'header-large' &&
+    css `
+      font-size: 24px;
+      line-height: 31px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 42px;
+        line-height: 54px;
+      }
+    `}
+
+  ${$typo === 'header-medium' &&
+    css `
+      font-size: 21px;
+      line-height: 27px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 32px;
+        line-height: 41px;
+      }
+    `}
+
+  ${$typo === 'header-small' &&
+    css `
+      font-size: 18px;
+      line-height: 23px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 21px;
+        line-height: 27px;
+      }
+    `}
+
+  ${$typo === 'desc-heavy' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 700;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${$typo === 'desc-medium' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${$typo === 'desc-light' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${$typo === 'desc-small' &&
+    css `
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 14px;
+        line-height: 18px;
+      }
+    `}
+
+  ${$typo === 'base' &&
+    css `
+      font-size: 14px;
+      line-height: 23px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 26px;
+      }
+    `}
+
+  ${$typo === 'base-small' &&
+    css `
+      font-size: 12px;
+      line-height: 20px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 14px;
+        line-height: 23px;
+      }
+    `}
+
+  ${$typo === 'base-xsmall' &&
+    css `
+      font-size: 10px;
+      line-height: 16px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 12px;
+        line-height: 19px;
+      }
+    `}
+  
+  ${$typo === 'label-large' &&
+    css `
+      font-size: 12px;
+      line-height: 100%;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.75px;
+    `}
+
+    text-align: ${$align};
+    cursor: ${$cursor};
+    color: ${theme.colors[$color]};
+    ${linkStyleOverride({ color: theme.colors[$color] })}
+  `);
+//# sourceMappingURL=Text.js.map

package/dist/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA2DhD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,IAAI,YACH,KAAK,YACL,KAAK,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,CACb,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,CAAC,KAAa,EAAiB,EAAE;IACjD,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,SAAS,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC;;;MAG3C,KAAK,KAAK,cAAc;IAC1B,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,eAAe;IACzB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,cAAc;IACxB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,MAAM;IAChB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;KAMF;;kBAEa,MAAM;cACV,OAAO;aACR,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;MAC3B,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;GACrD,CACF,CAAA","sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\n\ninterface IText {\n  /** typography class name to apply predefined styles */\n  $typo: string\n  /** text-align  */\n  $align: string\n  /** color from the theme  */\n  $color: Color\n  $cursor: string\n}\n\n/**\n * @deprecated Use only new Typo\n */\n\nexport type DeprecatedTypo =\n  | 'header-large'\n  | 'header-medium'\n  | 'header-small'\n  | 'desc-heavy'\n  | 'desc-medium'\n  | 'desc-light'\n  | 'desc-small'\n  | 'base'\n  | 'base-small'\n  | 'base-xsmall'\n  | 'label-large'\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  // Record<never, never> matches any non-null and non-undefined type so\n  // IntelliSense can suggest Typo to autocomplete\n  typo?: Typo | (string & Record<never, never>)\n  align?: string\n  color?: Color\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'liquorice',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      forwardedAs={tag}\n      className={className}\n      $typo={typo}\n      $align={align}\n      $color={color}\n      cursor={cursor}\n      title={title}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </Container>\n  ),\n)\n\nText.displayName = 'Text'\n\nconst isNewTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ $align, $color, $cursor, $typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isNewTypo($typo) && fontStyleMapping[$typo]}\n\n    /** DEPRECATED TYPOGRAPHY STYLES */\n    ${$typo === 'header-large' &&\n    css`\n      font-size: 24px;\n      line-height: 31px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 42px;\n        line-height: 54px;\n      }\n    `}\n\n  ${$typo === 'header-medium' &&\n    css`\n      font-size: 21px;\n      line-height: 27px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 32px;\n        line-height: 41px;\n      }\n    `}\n\n  ${$typo === 'header-small' &&\n    css`\n      font-size: 18px;\n      line-height: 23px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 21px;\n        line-height: 27px;\n      }\n    `}\n\n  ${$typo === 'desc-heavy' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 700;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-medium' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-light' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-small' &&\n    css`\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 18px;\n      }\n    `}\n\n  ${$typo === 'base' &&\n    css`\n      font-size: 14px;\n      line-height: 23px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 26px;\n      }\n    `}\n\n  ${$typo === 'base-small' &&\n    css`\n      font-size: 12px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'base-xsmall' &&\n    css`\n      font-size: 10px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 12px;\n        line-height: 19px;\n      }\n    `}\n  \n  ${$typo === 'label-large' &&\n    css`\n      font-size: 12px;\n      line-height: 100%;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.75px;\n    `}\n\n    text-align: ${$align};\n    cursor: ${$cursor};\n    color: ${theme.colors[$color]};\n    ${linkStyleOverride({ color: theme.colors[$color] })}\n  `,\n)\n"]}

package/dist/Text/fontMapping.js

@@ -0,0 +1,87 @@
+import { theme } from '../theme';
+export const fontStyleMapping = {
+    'hero-alternate': `
+    font-size: 40px;
+    font-family: 'MarshmallowYouth';
+    font-weight: ${theme.font.weight.bold};
+    line-height: 40px;
+
+    @media (min-width: 768px) {
+      font-size: 56px;
+      line-height: 52px;
+    }
+  `,
+    hero: `
+    font-size: 32px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 40px;
+
+    @media (min-width: 768px) {
+      font-size: 40px;
+      line-height: 44px;
+    }
+  `,
+    'heading-alternate': `
+    font-size: 40px;
+    font-family: 'MarshmallowYouth';
+    font-weight: ${theme.font.weight.bold};
+    line-height: 40px;
+  `,
+    'heading-large': `
+    font-size: 28px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 32px;
+
+    @media (min-width: 768px) {
+      font-size: 32px;
+      line-height: 40px;
+    }
+  `,
+    'heading-medium': `
+    font-size: 24px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 32px;
+  `,
+    'heading-small': `
+    font-size: 20px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 28px;
+  `,
+    'headline-regular': `
+    font-size: 16px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 20px;
+  `,
+    'headline-small': `
+    font-size: 14px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 20px;
+  `,
+    'body-standfirst': `
+    font-size: 18px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 24px;
+  `,
+    'body-regular': `
+    font-size: 16px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 20px;
+  `,
+    'body-small': `
+    font-size: 14px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 20px;
+  `,
+    caption: `
+    font-size: 12px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 16px;
+  `,
+    label: `
+    font-size: 10px;
+    line-height: 12px;
+    font-weight: ${theme.font.weight.medium};
+    text-transform: uppercase;
+  `,
+};
+//# sourceMappingURL=fontMapping.js.map

package/dist/Text/fontMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontMapping.js","sourceRoot":"","sources":["../../src/Text/fontMapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,gBAAgB,EAAE;;;mBAGD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;GAOtC;IACD,IAAI,EAAE;;mBAEW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,mBAAmB,EAAE;;;mBAGJ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;GAEtC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,kBAAkB,EAAE;;mBAEH,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,iBAAiB,EAAE;;mBAEF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,cAAc,EAAE;;mBAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,YAAY,EAAE;;mBAEG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,OAAO,EAAE;;mBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,KAAK,EAAE;;;mBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;CACF,CAAA","sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\nexport const fontStyleMapping: Record<Typo, string> = {\n  'hero-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 56px;\n      line-height: 52px;\n    }\n  `,\n  hero: `\n    font-size: 32px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 40px;\n      line-height: 44px;\n    }\n  `,\n  'heading-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n  `,\n  'heading-large': `\n    font-size: 28px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n\n    @media (min-width: 768px) {\n      font-size: 32px;\n      line-height: 40px;\n    }\n  `,\n  'heading-medium': `\n    font-size: 24px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n  `,\n  'heading-small': `\n    font-size: 20px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 28px;\n  `,\n  'headline-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'headline-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'body-standfirst': `\n    font-size: 18px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 24px;\n  `,\n  'body-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  'body-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  caption: `\n    font-size: 12px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 16px;\n  `,\n  label: `\n    font-size: 10px;\n    line-height: 12px;\n    font-weight: ${theme.font.weight.medium};\n    text-transform: uppercase;\n  `,\n}\n"]}

package/dist/Text/index.js

@@ -0,0 +1,2 @@
+export * from './Text';
+//# sourceMappingURL=index.js.map

package/dist/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA","sourcesContent":["export * from './Text'\n"]}

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { FieldsetProps } from '../fields/Fieldset';
 export type DateObject = {
     day?: string | null;

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Fieldset } from '../fields/Fieldset';
+import { TextInput } from '../TextInput';
+import { InputValidationError } from '../utils/dateOfBirth/schema';
+/**
+ * Renders a set of input fields to collect a date of birth as separate day, month,
+ * and year fields.
+ *
+ * ### Date of birth input validations
+ * - All fields are present and correctly formatted.
+ * - The age is at least 17 years old.
+ * - The year is not before 1900.
+ */
+export const TextDateOfBirthInput = forwardRef(function TextDateOfBirthInput({ onChange, value, label, assistiveText, hookformError, showCompleted = false, dataTestId, }, ref) {
+    const inputValidationErrorValues = Object.values(InputValidationError);
+    return (React.createElement(Fieldset, { label: label, assistiveText: assistiveText, completed: showCompleted && Boolean(value.day && value.month && value.year), error: Boolean(hookformError), errorMsg: hookformError?.message, "data-testid": dataTestId },
+        React.createElement(Box, { flex: true, gap: "16px" },
+            React.createElement(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", "$width": 60, value: value.day || '', placeholder: "", onChange: (day) => {
+                    onChange({
+                        ...value,
+                        day,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('day') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }),
+            React.createElement(SetWidthTextInput, { label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", "$width": 60, value: value.month || '', placeholder: "", onChange: (month) => {
+                    onChange({
+                        ...value,
+                        month,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('month') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }),
+            React.createElement(SetWidthTextInput, { label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", "$width": 80, value: value.year || '', placeholder: "", onChange: (year) => {
+                    onChange({
+                        ...value,
+                        year,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('year') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }))));
+});
+const SetWidthTextInput = styled(TextInput) `
+  width: ${({ $width }) => `${$width}px`};
+`;
+//# sourceMappingURL=TextDateOfBirthInput.js.map

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n  day?: string | null\n  month?: string | null\n  year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n  value: DateObject\n  onChange: (value: DateObject) => void\n  showCompleted?: boolean\n  hookformError?: {\n    type: string\n    message?: string\n  }\n  dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n  HTMLInputElement,\n  TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n  {\n    onChange,\n    value,\n    label,\n    assistiveText,\n    hookformError,\n    showCompleted = false,\n    dataTestId,\n  },\n  ref,\n) {\n  const inputValidationErrorValues = Object.values(InputValidationError)\n\n  return (\n    <Fieldset\n      label={label}\n      assistiveText={assistiveText}\n      completed={\n        showCompleted && Boolean(value.day && value.month && value.year)\n      }\n      error={Boolean(hookformError)}\n      errorMsg={hookformError?.message}\n      data-testid={dataTestId}\n    >\n      <Box flex gap=\"16px\">\n        <SetWidthTextInput\n          ref={ref}\n          label=\"day\"\n          autoCompleteAttr=\"bday-day\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.day || ''}\n          placeholder=\"\"\n          onChange={(day) => {\n            onChange({\n              ...value,\n              day,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('day') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n        <SetWidthTextInput\n          label=\"month\"\n          autoCompleteAttr=\"bday-month\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.month || ''}\n          placeholder=\"\"\n          onChange={(month) => {\n            onChange({\n              ...value,\n              month,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('month') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n        <SetWidthTextInput\n          label=\"year\"\n          autoCompleteAttr=\"bday-year\"\n          inputModeAttr=\"numeric\"\n          $width={80}\n          value={value.year || ''}\n          placeholder=\"\"\n          onChange={(year) => {\n            onChange({\n              ...value,\n              year,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('year') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n      </Box>\n    </Fieldset>\n  )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n  width: ${({ $width }) => `${$width}px`};\n`\n"]}

package/dist/TextDateOfBirthInput/index.js

@@ -0,0 +1,2 @@
+export * from './TextDateOfBirthInput';
+//# sourceMappingURL=index.js.map

package/dist/TextDateOfBirthInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './TextDateOfBirthInput'\n"]}

package/dist/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, FormEvent, HTMLInputAutoCompleteAttribute } from 'react';
+import React, { FocusEvent, FormEvent, HTMLInputAutoCompleteAttribute } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 interface Props extends CommonFieldProps {
     type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel';

package/dist/TextInput/TextInput.js

@@ -0,0 +1,30 @@
+import React, { forwardRef, } from 'react';
+import { Box } from '../Box';
+import { Field } from '../fields/Field';
+import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
+import { useUniqueId } from '../utils/id';
+/**
+ * A reusable TextInput component that supports various input types, custom styling, icons,
+ * and autofill detection.
+ *
+ * ### Caveats:
+ * - `onAutoFill` triggers after animation end (animation duration is 2s),
+ * the animation starts when a user selects or hovers over an autofill option
+ */
+export const TextInput = forwardRef(function TextInput({ id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, onAutoFill, disabled = false, frontIcon, trailingIcon, fallbackStyle, autoCompleteAttr = 'off', inputModeAttr, ...fieldProps }, ref) {
+    const id = useUniqueId(idProp);
+    const handleAnimationEnd = (e) => {
+        if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {
+            onAutoFill();
+        }
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
+            frontIcon && (React.createElement(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, onAnimationEnd: handleAnimationEnd, placeholder: placeholder, value: value, "$error": error, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, autoComplete: autoCompleteAttr, onChange: (e) => {
+                    onChange && onChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, onBlur: onBlur, inputMode: inputModeAttr }),
+            trailingIcon && (React.createElement(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "sesame" })))));
+});
+//# sourceMappingURL=TextInput.js.map