@elliemae/ds-tab-button 3.60.0-next.20

package/dist/cjs/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\n\nimport { DSTypography, type DSTypographyT } from '@elliemae/ds-typography';\nimport { DSTabButtonName, TAB_BUTTON_SLOTS, TAB_TYPES } from './constants/index.js';\nimport type { DSTabButtonT } from './react-desc-prop-types.js';\n\ninterface StyledTabButtonPropsT {\n  isActive?: boolean;\n  disabled?: boolean;\n  tabType: DSTabButtonT.TabButtonVariant;\n  notificationBadge?: boolean;\n}\n\ninterface StyledTypographyPropsT extends DSTypographyT.Props {\n  $isSelected?: boolean;\n  $isDisabled?: boolean;\n  $tabType: DSTabButtonT.TabButtonVariant;\n}\n\nconst borderAroundFocus = css<StyledTabButtonPropsT>`\n  &:after {\n    pointer-events: none;\n    display: block;\n    position: absolute;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 3;\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n\nconst borderAroundFocusUnderline = css<StyledTabButtonPropsT>`\n  &:before {\n    position: absolute;\n    content: '';\n    left: -16px;\n    right: 0;\n    top: calc(100% - 2px);\n    transform: none;\n    width: calc(100% + 32px);\n    height: 2px;\n    z-index: 10;\n    background: linear-gradient(\n      to right,\n      transparent 0px,\n      transparent 12px,\n      white 12px,\n      white 16px,\n      transparent 16px,\n      transparent calc(100% - 16px),\n      white calc(100% - 16px),\n      white calc(100% - 12px),\n      transparent calc(100% - 12px),\n      transparent 100%\n    );\n  }\n`;\n\nconst unlineLabelSelected = css<StyledTypographyPropsT>`\n  &:before {\n    pointer-events: none;\n    display: block;\n    content: '';\n    position: absolute;\n    height: 3px;\n    width: calc(100% + var(--border-width) * 2);\n    left: calc(var(--border-width) * -1);\n    bottom: 0;\n    top: initial;\n    z-index: 6;\n    background: ${({ theme }) => theme.colors.brand[700]};\n    border-left: var(--border-width) solid ${({ theme }) => theme.colors.neutral['000']};\n    border-right: var(--border-width) solid ${({ theme }) => theme.colors.neutral['000']};\n  }\n`;\n\nconst baseButtonStyles = css<StyledTabButtonPropsT>`\n  --border-width: 2px;\n  --height-padding: ${({ tabType }) =>\n    tabType === TAB_TYPES.PRIMARY_SMALL || tabType === TAB_TYPES.SECONDARY ? '2px' : '7px'};\n  --width-padding: 16px;\n  --width-padding-calc: calc(var(--width-padding) * 2);\n\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0 var(--width-padding);\n  margin: 0;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType }) => {\n    if (tabType === TAB_TYPES.SECONDARY) return 'capitalize';\n    return 'uppercase';\n  }};\n  width: fit-content;\n  display: flex;\n  gap: ${({ notificationBadge }) => (notificationBadge ? '2px' : '8px')};\n  white-space: nowrap;\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${({ tabType }) => (tabType === TAB_TYPES.PRIMARY ? `min-height: 32px;` : `min-height: 22px;`)}\n\n  &[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n  }\n\n  &:hover:not(disabled) {\n    color: ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    outline: none;\n    ${borderAroundFocus}\n    ${({ isActive, tabType }) => (tabType !== TAB_TYPES.SECONDARY && isActive ? borderAroundFocusUnderline : ``)}\n  }\n`;\n\nexport const StyledNotificationBadge = styled('span', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.REQUIRED_MARK,\n})`\n  width: 0.46rem;\n  height: 0.46rem;\n  background-color: ${({ theme }) => theme.colors.danger[900]};\n  border-radius: 50%;\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  right: 0;\n`;\n\nexport const StyledTabButton = styled('button', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.ROOT,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\n\nexport const StyledTypography = styled(DSTypography, {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.LABEL,\n})<StyledTypographyPropsT>`\n  padding: var(--height-padding) 0;\n  position: relative;\n  z-index: 4;\n  white-space: nowrap;\n  ${({ $isSelected, $tabType }) => $isSelected && $tabType !== TAB_TYPES.SECONDARY && unlineLabelSelected}\n  ${({ $isSelected }) => $isSelected && `font-weight: 600;`}\n  ${({ $isDisabled, theme }) => $isDisabled && `color: ${theme.colors.neutral[600]};`}\n`;\n\nexport const StyledChildrenWrapper = styled('span', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.CHILDREN_WRAPPER,\n})`\n  margin: var(--height-padding) 0;\n  position: relative;\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/typescript-testing/DSTabButtonNamespace.js

@@ -0,0 +1,122 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require("../index.js");
+const testRequiredProps = {
+  label: "string"
+};
+const testOptionalProps = {
+  className: "string",
+  dsTabbuttonRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testPartialDefaults = {};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  variant: "primary",
+  isSelected: false,
+  notificationBadge: false,
+  applyAriaDisabled: false,
+  required: false
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  label: "string",
+  className: "string",
+  dsTabbuttonRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testInferedTypeCompatibility = {
+  label: "string",
+  className: "string",
+  onSomethingEvent: (newVal, e) => {
+  },
+  dsTabbuttonRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  }
+};
+const testDefinitionAsConst = {
+  label: "string",
+  className: "string",
+  onSomethingEvent: (newVal, e) => {
+  },
+  dsTabbuttonRoot: {
+    onClick: () => {
+    },
+    "data-testid": "over-ride-test-id",
+    "aria-label": "over-ride-aria-label"
+  },
+  foo: "string",
+  bar: 0,
+  something: "string"
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTabButton, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTabButton, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSTabButton, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSTabButton,
+    {
+      label: "string",
+      className: "string",
+      dsTabbuttonRoot: {
+        onClick: () => {
+        },
+        "data-testid": "over-ride-test-id",
+        "aria-label": "over-ride-aria-label"
+      }
+    }
+  )
+] });
+//# sourceMappingURL=DSTabButtonNamespace.js.map

package/dist/cjs/typescript-testing/DSTabButtonNamespace.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/DSTabButtonNamespace.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSTabButton, type DSTabButtonT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSTabButtonT.Props;\ntype ComponentPropsInternals = DSTabButtonT.InternalProps;\ntype ComponentPropsDefaultProps = DSTabButtonT.DefaultProps;\ntype ComponentPropsOptionalProps = DSTabButtonT.OptionalProps;\ntype ComponentPropsRequiredProps = DSTabButtonT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  label: 'string',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  className: 'string',\n  dsTabbuttonRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  variant: 'primary',\n  isSelected: false,\n  notificationBadge: false,\n  applyAriaDisabled: false,\n  required: false,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  label: 'string',\n  className: 'string',\n  dsTabbuttonRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  label: 'string',\n  className: 'string',\n  onSomethingEvent: (newVal: string, e: React.ChangeEvent<HTMLElement>) => {},\n  dsTabbuttonRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  label: 'string',\n  className: 'string',\n  onSomethingEvent: (newVal: string, e: React.ChangeEvent<HTMLElement>) => {},\n  dsTabbuttonRoot: {\n    onClick: () => {},\n    'data-testid': 'over-ride-test-id',\n    'aria-label': 'over-ride-aria-label',\n  },\n  foo: 'string',\n  bar: 0,\n  something: 'string',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSTabButton {...testExplicitDefinition} />\n    <DSTabButton {...testInferedTypeCompatibility} />\n    <DSTabButton {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSTabButton\n      label=\"string\"\n      className=\"string\"\n      dsTabbuttonRoot={{\n        onClick: () => {},\n        'data-testid': 'over-ride-test-id',\n        'aria-label': 'over-ride-aria-label',\n      }}\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACkGrB;AAjGF,eAA+C;AAS/C,MAAM,oBAAiD;AAAA,EACrD,OAAO;AACT;AAEA,MAAM,oBAAiD;AAAA,EACrD,WAAW;AAAA,EACX,iBAAiB;AAAA,IACf,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAIA,MAAM,sBAA2D,CAAC;AAElE,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,iBAAiB;AAAA,IACf,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAGA,MAAM,+BAA+B;AAAA,EACnC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,kBAAkB,CAAC,QAAgB,MAAsC;AAAA,EAAC;AAAA,EAC1E,iBAAiB;AAAA,IACf,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAEA,MAAM,wBAAwB;AAAA,EAC5B,OAAO;AAAA,EACP,WAAW;AAAA,EACX,kBAAkB,CAAC,QAAgB,MAAsC;AAAA,EAAC;AAAA,EAC1E,iBAAiB;AAAA,IACf,SAAS,MAAM;AAAA,IAAC;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AACb;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAC/C,4CAAC,wBAAa,GAAG,uBAAuB;AAAA,EAExC;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAU;AAAA,MACV,iBAAiB;AAAA,QACf,SAAS,MAAM;AAAA,QAAC;AAAA,QAChB,eAAe;AAAA,QACf,cAAc;AAAA,MAChB;AAAA;AAAA,EACF;AAAA,GACF;",
+  "names": []
+}

package/dist/esm/DSTabButton.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-props-helpers";
+import { DSTabButtonPropTypesSchema } from "./react-desc-prop-types.js";
+import { useTabButton } from "./config/useTabButton.js";
+import { DSTabButtonName } from "./constants/index.js";
+import {
+  StyledChildrenWrapper,
+  StyledNotificationBadge,
+  StyledTabButton,
+  StyledTypography,
+  ScreenReaderOnly
+} from "./styles.js";
+const DSTabButton = (props) => {
+  const { propsWithDefault, xstyledProps } = useTabButton(props);
+  const {
+    onClick,
+    onKeyDown,
+    disabled = false,
+    children,
+    isSelected,
+    variant,
+    label,
+    notificationBadge,
+    required,
+    applyAriaDisabled,
+    ...rest
+  } = propsWithDefault;
+  const hasChildren = !!children;
+  const isDisabled = disabled || applyAriaDisabled;
+  return /* @__PURE__ */ jsxs(
+    StyledTabButton,
+    {
+      ...rest,
+      type: "button",
+      "aria-disabled": isDisabled,
+      tabType: variant,
+      disabled,
+      onClick: !isDisabled ? onClick : void 0,
+      onKeyDown: isDisabled ? (e) => {
+        if (e.key === "Enter" || e.key === " ") return;
+        onKeyDown?.(e);
+      } : onKeyDown,
+      ...xstyledProps,
+      getOwnerProps: () => propsWithDefault,
+      getOwnerPropsArguments: () => ({}),
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledTypography,
+          {
+            $isSelected: isSelected,
+            $isDisabled: isDisabled,
+            $tabType: variant,
+            variant: "b2",
+            component: "span",
+            getOwnerProps: () => propsWithDefault,
+            getOwnerPropsArguments: () => ({}),
+            children: label
+          }
+        ),
+        notificationBadge || required ? /* @__PURE__ */ jsx(StyledChildrenWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: /* @__PURE__ */ jsx(
+          StyledNotificationBadge,
+          {
+            "aria-hidden": "true",
+            getOwnerProps: () => propsWithDefault,
+            getOwnerPropsArguments: () => ({})
+          }
+        ) }) : null,
+        required ? /* @__PURE__ */ jsx(ScreenReaderOnly, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children: "Required" }) : null,
+        hasChildren && !notificationBadge ? /* @__PURE__ */ jsx(StyledChildrenWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), children }) : null
+      ]
+    }
+  );
+};
+DSTabButton.displayName = DSTabButtonName;
+const DSTabButtonWithSchema = describe(DSTabButton);
+DSTabButtonWithSchema.propTypes = DSTabButtonPropTypesSchema;
+export {
+  DSTabButton,
+  DSTabButtonWithSchema
+};
+//# sourceMappingURL=DSTabButton.js.map

package/dist/esm/DSTabButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSTabButtonT, DSTabButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useTabButton } from './config/useTabButton.js';\nimport { DSTabButtonName } from './constants/index.js';\nimport {\n  StyledChildrenWrapper,\n  StyledNotificationBadge,\n  StyledTabButton,\n  StyledTypography,\n  ScreenReaderOnly,\n} from './styles.js';\n\nconst DSTabButton: React.ComponentType<DSTabButtonT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useTabButton(props);\n\n  const {\n    onClick,\n    onKeyDown,\n    disabled = false,\n    children,\n    isSelected,\n    variant,\n    label,\n    notificationBadge,\n    required,\n    applyAriaDisabled,\n    ...rest\n  } = propsWithDefault;\n  const hasChildren = !!children;\n  const isDisabled = disabled || applyAriaDisabled;\n\n  return (\n    <StyledTabButton\n      {...rest}\n      type=\"button\"\n      aria-disabled={isDisabled}\n      tabType={variant}\n      disabled={disabled}\n      onClick={!isDisabled ? onClick : undefined}\n      onKeyDown={\n        isDisabled\n          ? (e: React.KeyboardEvent<HTMLElement>) => {\n              if (e.key === 'Enter' || e.key === ' ') return;\n              onKeyDown?.(e);\n            }\n          : onKeyDown\n      }\n      {...xstyledProps}\n      getOwnerProps={() => propsWithDefault}\n      getOwnerPropsArguments={() => ({})}\n    >\n      <StyledTypography\n        $isSelected={isSelected}\n        $isDisabled={isDisabled}\n        $tabType={variant}\n        variant=\"b2\"\n        component=\"span\"\n        getOwnerProps={() => propsWithDefault}\n        getOwnerPropsArguments={() => ({})}\n      >\n        {label}\n      </StyledTypography>\n      {notificationBadge || required ? (\n        <StyledChildrenWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})}>\n          <StyledNotificationBadge\n            aria-hidden=\"true\"\n            getOwnerProps={() => propsWithDefault}\n            getOwnerPropsArguments={() => ({})}\n          />\n        </StyledChildrenWrapper>\n      ) : null}\n      {required ? (\n        <ScreenReaderOnly getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})}>\n          Required\n        </ScreenReaderOnly>\n      ) : null}\n      {hasChildren && !notificationBadge ? (\n        <StyledChildrenWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})}>\n          {children}\n        </StyledChildrenWrapper>\n      ) : null}\n    </StyledTabButton>\n  );\n};\n\nDSTabButton.displayName = DSTabButtonName;\nconst DSTabButtonWithSchema = describe(DSTabButton);\nDSTabButtonWithSchema.propTypes = DSTabButtonPropTypesSchema;\n\nexport { DSTabButton, DSTabButtonWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiCnB,SAmBE,KAnBF;AAhCJ,SAAS,gBAAgB;AACzB,SAA4B,kCAAkC;AAC9D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,EAAE,kBAAkB,aAAa,IAAI,aAAa,KAAK;AAE7D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,CAAC,CAAC;AACtB,QAAM,aAAa,YAAY;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,SAAS,CAAC,aAAa,UAAU;AAAA,MACjC,WACE,aACI,CAAC,MAAwC;AACvC,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IAAK;AACxC,oBAAY,CAAC;AAAA,MACf,IACA;AAAA,MAEL,GAAG;AAAA,MACJ,eAAe,MAAM;AAAA,MACrB,wBAAwB,OAAO,CAAC;AAAA,MAEhC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAa;AAAA,YACb,aAAa;AAAA,YACb,UAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,eAAe,MAAM;AAAA,YACrB,wBAAwB,OAAO,CAAC;AAAA,YAE/B;AAAA;AAAA,QACH;AAAA,QACC,qBAAqB,WACpB,oBAAC,yBAAsB,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAC5F;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,eAAe,MAAM;AAAA,YACrB,wBAAwB,OAAO,CAAC;AAAA;AAAA,QAClC,GACF,IACE;AAAA,QACH,WACC,oBAAC,oBAAiB,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAI,sBAE7F,IACE;AAAA,QACH,eAAe,CAAC,oBACf,oBAAC,yBAAsB,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAC3F,UACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "names": []
+}

package/dist/esm/config/useTabButton.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import React2 from "react";
+import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { uid } from "uid";
+import { DSTabButtonPropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const useTabButton = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSTabButtonPropTypes);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const instanceUid = React2.useMemo(() => `ds-tab-button-${uid(5)}`, []);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      instanceUid
+      // ...eventHandlers,
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      instanceUid
+      // eventHandlers,
+    ]
+  );
+};
+export {
+  useTabButton
+};
+//# sourceMappingURL=useTabButton.js.map

package/dist/esm/config/useTabButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabButton.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSTabButtonT, DSTabButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface TabButtonCTX {\n  propsWithDefault: DSTabButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useTabButton = (propsFromUser: DSTabButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSTabButtonT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSTabButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-tab-button-${uid(5)}`, []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAA4B,sBAAsB,oBAAoB;AACtE,SAAS,wBAAwB;AAQ1B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,oBAAoB;AAIvD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAMrE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSTabButtonName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSTabButtonName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

package/dist/esm/config/useValidateProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSTabButtonT } from '../react-desc-prop-types.js';\nimport { DSTabButtonName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSTabButtonT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSTabButtonName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,OAAmC,cAA4C;AAE9G,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSTabButtonName = "DSTabbutton";
+const TAB_TYPES = {
+  PRIMARY: "primary",
+  PRIMARY_SMALL: "primary-small",
+  SECONDARY: "secondary"
+};
+const TAB_TYPES_VALUES_AS_ARRAY = Object.values(TAB_TYPES);
+const TAB_BUTTON_SLOTS = {
+  ROOT: "root",
+  LABEL: "label",
+  REQUIRED_MARK: "required-mark",
+  CHILDREN_WRAPPER: "children-wrapper"
+};
+const TAB_BUTTON_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSTabButtonName, TAB_BUTTON_SLOTS)
+};
+export {
+  DSTabButtonName,
+  TAB_BUTTON_DATA_TESTID,
+  TAB_BUTTON_SLOTS,
+  TAB_TYPES,
+  TAB_TYPES_VALUES_AS_ARRAY
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSTabButtonName = 'DSTabbutton';\n\nexport const TAB_TYPES = {\n  PRIMARY: 'primary',\n  PRIMARY_SMALL: 'primary-small',\n  SECONDARY: 'secondary',\n} as const;\n\nexport const TAB_TYPES_VALUES_AS_ARRAY = Object.values(TAB_TYPES);\n\nexport const TAB_BUTTON_SLOTS = {\n  ROOT: 'root',\n  LABEL: 'label',\n  REQUIRED_MARK: 'required-mark',\n  CHILDREN_WRAPPER: 'children-wrapper',\n} as const;\n\nexport const TAB_BUTTON_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSTabButtonName, TAB_BUTTON_SLOTS),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,kBAAkB;AAExB,MAAM,YAAY;AAAA,EACvB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,WAAW;AACb;AAEO,MAAM,4BAA4B,OAAO,OAAO,SAAS;AAEzD,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,eAAe;AAAA,EACf,kBAAkB;AACpB;AAEO,MAAM,yBAAyB;AAAA,EACpC,GAAG,wBAAwB,iBAAiB,gBAAgB;AAC9D;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { DSTabButton, DSTabButtonWithSchema } from "./DSTabButton.js";
+import { TAB_BUTTON_SLOTS, TAB_BUTTON_DATA_TESTID } from "./constants/index.js";
+export {
+  DSTabButton,
+  DSTabButtonWithSchema,
+  TAB_BUTTON_DATA_TESTID,
+  TAB_BUTTON_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSTabButton, DSTabButtonWithSchema } from './DSTabButton.js';\nexport { type DSTabButtonT } from './react-desc-prop-types.js';\nexport { TAB_BUTTON_SLOTS, TAB_BUTTON_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,aAAa,6BAA6B;AAEnD,SAAS,kBAAkB,8BAA8B;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,10 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSTabButtonName, TAB_BUTTON_SLOTS, TAB_TYPES } from "./constants/index.js";
+const defaultProps = {
+  variant: TAB_TYPES.PRIMARY,
+  isSelected: false,
+  notificationBadge: false,
+  required: false
+};
+const DSTabButtonPropTypes = {
+  ...getPropsPerSlotPropTypes(DSTabButtonName, TAB_BUTTON_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  label: PropTypes.string.description("The label of the tab button."),
+  variant: PropTypes.oneOf(["primary", "secondary", "primary-small"]).description("The variant of the tab button.").defaultValue("primary"),
+  isSelected: PropTypes.bool.description("Indicates if the tab button is currently selected.").defaultValue(false),
+  notificationBadge: PropTypes.bool.description("Indicates if the tab button has a notification badge.").defaultValue(false),
+  required: PropTypes.bool.description("Indicates if the tab button is required.").defaultValue(false),
+  applyAriaDisabled: PropTypes.bool.description("Indicates if the tab button should apply aria-disabled.").defaultValue(false)
+};
+const DSTabButtonPropTypesSchema = DSTabButtonPropTypes;
+export {
+  DSTabButtonPropTypes,
+  DSTabButtonPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTabButtonName, TAB_BUTTON_SLOTS, TAB_TYPES } from './constants/index.js';\n\nexport declare namespace DSTabButtonT {\n  export type TabButtonVariant = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n  export interface RequiredProps {\n    label: string;\n  }\n\n  export interface DefaultProps {\n    variant: TabButtonVariant;\n    isSelected: boolean;\n    notificationBadge?: boolean;\n    required?: boolean;\n    applyAriaDisabled?: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSTabButtonName, typeof TAB_BUTTON_SLOTS> {\n    className?: string;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps | keyof RequiredProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSTabButtonT.DefaultProps = {\n  variant: TAB_TYPES.PRIMARY,\n  isSelected: false,\n  notificationBadge: false,\n  required: false,\n};\n\nexport const DSTabButtonPropTypes: DSPropTypesSchema<DSTabButtonT.Props> = {\n  ...getPropsPerSlotPropTypes(DSTabButtonName, TAB_BUTTON_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('The label of the tab button.'),\n  variant: PropTypes.oneOf(['primary', 'secondary', 'primary-small'])\n    .description('The variant of the tab button.')\n    .defaultValue('primary'),\n  isSelected: PropTypes.bool.description('Indicates if the tab button is currently selected.').defaultValue(false),\n  notificationBadge: PropTypes.bool\n    .description('Indicates if the tab button has a notification badge.')\n    .defaultValue(false),\n  required: PropTypes.bool.description('Indicates if the tab button is required.').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description('Indicates if the tab button should apply aria-disabled.')\n    .defaultValue(false),\n};\n\nexport const DSTabButtonPropTypesSchema = DSTabButtonPropTypes as unknown as ValidationMap<DSTabButtonT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB,kBAAkB,iBAAiB;AAoCtD,MAAM,eAA0C;AAAA,EACrD,SAAS,UAAU;AAAA,EACnB,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,iBAAiB,gBAAgB;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,8BAA8B;AAAA,EAClE,SAAS,UAAU,MAAM,CAAC,WAAW,aAAa,eAAe,CAAC,EAC/D,YAAY,gCAAgC,EAC5C,aAAa,SAAS;AAAA,EACzB,YAAY,UAAU,KAAK,YAAY,oDAAoD,EAAE,aAAa,KAAK;AAAA,EAC/G,mBAAmB,UAAU,KAC1B,YAAY,uDAAuD,EACnE,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EACnG,mBAAmB,UAAU,KAC1B,YAAY,yDAAyD,EACrE,aAAa,KAAK;AACvB;AAEO,MAAM,6BAA6B;",
+  "names": []
+}

package/dist/esm/styles.js

@@ -0,0 +1,156 @@
+import * as React from "react";
+import { styled, css } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
+import { DSTabButtonName, TAB_BUTTON_SLOTS, TAB_TYPES } from "./constants/index.js";
+const borderAroundFocus = css`
+  &:after {
+    pointer-events: none;
+    display: block;
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    border-radius: 2px;
+    border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+  }
+`;
+const borderAroundFocusUnderline = css`
+  &:before {
+    position: absolute;
+    content: '';
+    left: -16px;
+    right: 0;
+    top: calc(100% - 2px);
+    transform: none;
+    width: calc(100% + 32px);
+    height: 2px;
+    z-index: 10;
+    background: linear-gradient(
+      to right,
+      transparent 0px,
+      transparent 12px,
+      white 12px,
+      white 16px,
+      transparent 16px,
+      transparent calc(100% - 16px),
+      white calc(100% - 16px),
+      white calc(100% - 12px),
+      transparent calc(100% - 12px),
+      transparent 100%
+    );
+  }
+`;
+const unlineLabelSelected = css`
+  &:before {
+    pointer-events: none;
+    display: block;
+    content: '';
+    position: absolute;
+    height: 3px;
+    width: calc(100% + var(--border-width) * 2);
+    left: calc(var(--border-width) * -1);
+    bottom: 0;
+    top: initial;
+    z-index: 6;
+    background: ${({ theme }) => theme.colors.brand[700]};
+    border-left: var(--border-width) solid ${({ theme }) => theme.colors.neutral["000"]};
+    border-right: var(--border-width) solid ${({ theme }) => theme.colors.neutral["000"]};
+  }
+`;
+const baseButtonStyles = css`
+  --border-width: 2px;
+  --height-padding: ${({ tabType }) => tabType === TAB_TYPES.PRIMARY_SMALL || tabType === TAB_TYPES.SECONDARY ? "2px" : "7px"};
+  --width-padding: 16px;
+  --width-padding-calc: calc(var(--width-padding) * 2);
+
+  position: relative;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--width-padding);
+  margin: 0;
+  transition: 100ms cubic-bezier(0, 0, 0.42, 1);
+  text-transform: ${({ tabType }) => {
+  if (tabType === TAB_TYPES.SECONDARY) return "capitalize";
+  return "uppercase";
+}};
+  width: fit-content;
+  display: flex;
+  gap: ${({ notificationBadge }) => notificationBadge ? "2px" : "8px"};
+  white-space: nowrap;
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  ${({ tabType }) => tabType === TAB_TYPES.PRIMARY ? `min-height: 32px;` : `min-height: 22px;`}
+
+  &[aria-disabled='true'] {
+    color: ${({ theme }) => theme.colors.neutral[500]};
+    cursor: not-allowed;
+  }
+
+  &:hover:not(disabled) {
+    color: ${({ theme }) => theme.colors.brand[600]};
+  }
+
+  &:focus {
+    outline: none;
+    ${borderAroundFocus}
+    ${({ isActive, tabType }) => tabType !== TAB_TYPES.SECONDARY && isActive ? borderAroundFocusUnderline : ``}
+  }
+`;
+const StyledNotificationBadge = styled("span", {
+  name: DSTabButtonName,
+  slot: TAB_BUTTON_SLOTS.REQUIRED_MARK
+})`
+  width: 0.46rem;
+  height: 0.46rem;
+  background-color: ${({ theme }) => theme.colors.danger[900]};
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+const StyledTabButton = styled("button", {
+  name: DSTabButtonName,
+  slot: TAB_BUTTON_SLOTS.ROOT
+})`
+  ${baseButtonStyles}
+`;
+const StyledTypography = styled(DSTypography, {
+  name: DSTabButtonName,
+  slot: TAB_BUTTON_SLOTS.LABEL
+})`
+  padding: var(--height-padding) 0;
+  position: relative;
+  z-index: 4;
+  white-space: nowrap;
+  ${({ $isSelected, $tabType }) => $isSelected && $tabType !== TAB_TYPES.SECONDARY && unlineLabelSelected}
+  ${({ $isSelected }) => $isSelected && `font-weight: 600;`}
+  ${({ $isDisabled, theme }) => $isDisabled && `color: ${theme.colors.neutral[600]};`}
+`;
+const StyledChildrenWrapper = styled("span", {
+  name: DSTabButtonName,
+  slot: TAB_BUTTON_SLOTS.CHILDREN_WRAPPER
+})`
+  margin: var(--height-padding) 0;
+  position: relative;
+`;
+const ScreenReaderOnly = styled.span`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+export {
+  ScreenReaderOnly,
+  StyledChildrenWrapper,
+  StyledNotificationBadge,
+  StyledTabButton,
+  StyledTypography
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\n\nimport { DSTypography, type DSTypographyT } from '@elliemae/ds-typography';\nimport { DSTabButtonName, TAB_BUTTON_SLOTS, TAB_TYPES } from './constants/index.js';\nimport type { DSTabButtonT } from './react-desc-prop-types.js';\n\ninterface StyledTabButtonPropsT {\n  isActive?: boolean;\n  disabled?: boolean;\n  tabType: DSTabButtonT.TabButtonVariant;\n  notificationBadge?: boolean;\n}\n\ninterface StyledTypographyPropsT extends DSTypographyT.Props {\n  $isSelected?: boolean;\n  $isDisabled?: boolean;\n  $tabType: DSTabButtonT.TabButtonVariant;\n}\n\nconst borderAroundFocus = css<StyledTabButtonPropsT>`\n  &:after {\n    pointer-events: none;\n    display: block;\n    position: absolute;\n    content: '';\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 3;\n    border-radius: 2px;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n\nconst borderAroundFocusUnderline = css<StyledTabButtonPropsT>`\n  &:before {\n    position: absolute;\n    content: '';\n    left: -16px;\n    right: 0;\n    top: calc(100% - 2px);\n    transform: none;\n    width: calc(100% + 32px);\n    height: 2px;\n    z-index: 10;\n    background: linear-gradient(\n      to right,\n      transparent 0px,\n      transparent 12px,\n      white 12px,\n      white 16px,\n      transparent 16px,\n      transparent calc(100% - 16px),\n      white calc(100% - 16px),\n      white calc(100% - 12px),\n      transparent calc(100% - 12px),\n      transparent 100%\n    );\n  }\n`;\n\nconst unlineLabelSelected = css<StyledTypographyPropsT>`\n  &:before {\n    pointer-events: none;\n    display: block;\n    content: '';\n    position: absolute;\n    height: 3px;\n    width: calc(100% + var(--border-width) * 2);\n    left: calc(var(--border-width) * -1);\n    bottom: 0;\n    top: initial;\n    z-index: 6;\n    background: ${({ theme }) => theme.colors.brand[700]};\n    border-left: var(--border-width) solid ${({ theme }) => theme.colors.neutral['000']};\n    border-right: var(--border-width) solid ${({ theme }) => theme.colors.neutral['000']};\n  }\n`;\n\nconst baseButtonStyles = css<StyledTabButtonPropsT>`\n  --border-width: 2px;\n  --height-padding: ${({ tabType }) =>\n    tabType === TAB_TYPES.PRIMARY_SMALL || tabType === TAB_TYPES.SECONDARY ? '2px' : '7px'};\n  --width-padding: 16px;\n  --width-padding-calc: calc(var(--width-padding) * 2);\n\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0 var(--width-padding);\n  margin: 0;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType }) => {\n    if (tabType === TAB_TYPES.SECONDARY) return 'capitalize';\n    return 'uppercase';\n  }};\n  width: fit-content;\n  display: flex;\n  gap: ${({ notificationBadge }) => (notificationBadge ? '2px' : '8px')};\n  white-space: nowrap;\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${({ tabType }) => (tabType === TAB_TYPES.PRIMARY ? `min-height: 32px;` : `min-height: 22px;`)}\n\n  &[aria-disabled='true'] {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n  }\n\n  &:hover:not(disabled) {\n    color: ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    outline: none;\n    ${borderAroundFocus}\n    ${({ isActive, tabType }) => (tabType !== TAB_TYPES.SECONDARY && isActive ? borderAroundFocusUnderline : ``)}\n  }\n`;\n\nexport const StyledNotificationBadge = styled('span', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.REQUIRED_MARK,\n})`\n  width: 0.46rem;\n  height: 0.46rem;\n  background-color: ${({ theme }) => theme.colors.danger[900]};\n  border-radius: 50%;\n  display: inline-block;\n  position: absolute;\n  top: 0;\n  right: 0;\n`;\n\nexport const StyledTabButton = styled('button', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.ROOT,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\n\nexport const StyledTypography = styled(DSTypography, {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.LABEL,\n})<StyledTypographyPropsT>`\n  padding: var(--height-padding) 0;\n  position: relative;\n  z-index: 4;\n  white-space: nowrap;\n  ${({ $isSelected, $tabType }) => $isSelected && $tabType !== TAB_TYPES.SECONDARY && unlineLabelSelected}\n  ${({ $isSelected }) => $isSelected && `font-weight: 600;`}\n  ${({ $isDisabled, theme }) => $isDisabled && `color: ${theme.colors.neutral[600]};`}\n`;\n\nexport const StyledChildrenWrapper = styled('span', {\n  name: DSTabButtonName,\n  slot: TAB_BUTTON_SLOTS.CHILDREN_WRAPPER,\n})`\n  margin: var(--height-padding) 0;\n  position: relative;\n`;\n\nexport const ScreenReaderOnly = styled.span`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n"],
+  "mappings": "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",
+  "names": []
+}