@elliemae/ds-classnames 3.26.1-rc.1 → 3.27.0-next.2

package/dist/cjs/index.js

@@ -5,10 +5,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -17,6 +13,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 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-
@@ -27,13 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
-__export(src_exports, {
-  aggregatedClasses: () => import_aggregatedClasses.default,
-  convertPropToCssClassName: () => import_classNameManager.default,
-  cssPrefix: () => import_classNameManager.cssPrefix
-});
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-var import_classNameManager = __toESM(require("./classNameManager.js"));
-var import_aggregatedClasses = __toESM(require("./aggregatedClasses.js"));
+__reExport(src_exports, require("@elliemae/ds-legacy-classnames"), module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';\nexport { default as aggregatedClasses } from './aggregatedClasses.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAgE;AAChE,+BAA6C;",
+  "sourcesContent": ["export * from '@elliemae/ds-legacy-classnames';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,2CAAd;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,9 +1,3 @@
 import * as React from "react";
-import { default as default2, cssPrefix } from "./classNameManager.js";
-import { default as default3 } from "./aggregatedClasses.js";
-export {
-  default3 as aggregatedClasses,
-  default2 as convertPropToCssClassName,
-  cssPrefix
-};
+export * from "@elliemae/ds-legacy-classnames";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';\nexport { default as aggregatedClasses } from './aggregatedClasses.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,UAAsC,iBAAiB;AAChE,SAAoB,WAAXA,gBAAoC;",
-  "names": ["default"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from '@elliemae/ds-legacy-classnames';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "names": []
 }

package/dist/types/index.d.ts

@@ -1,2 +1 @@
-export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';
-export { default as aggregatedClasses } from './aggregatedClasses.js';
+export * from '@elliemae/ds-legacy-classnames';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-classnames",
-  "version": "3.26.1-rc.1",
+  "version": "3.27.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum Library - Aggregated classNames to component",
   "files": [
@@ -13,42 +13,6 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
-    },
-    "./validateNativeProps": {
-      "import": "./dist/esm/validateNativeProps.js",
-      "require": "./dist/cjs/validateNativeProps.js"
-    },
-    "./convertPropToFeedBackModifiers": {
-      "import": "./dist/esm/convertPropToFeedBackModifiers.js",
-      "require": "./dist/cjs/convertPropToFeedBackModifiers.js"
-    },
-    "./convertPropsToTextModifiers": {
-      "import": "./dist/esm/convertPropsToTextModifiers.js",
-      "require": "./dist/cjs/convertPropsToTextModifiers.js"
-    },
-    "./convertPropsToSizeModifiers": {
-      "import": "./dist/esm/convertPropsToSizeModifiers.js",
-      "require": "./dist/cjs/convertPropsToSizeModifiers.js"
-    },
-    "./convertPropsToLayoutModifiers": {
-      "import": "./dist/esm/convertPropsToLayoutModifiers.js",
-      "require": "./dist/cjs/convertPropsToLayoutModifiers.js"
-    },
-    "./convertPropsToColorModifiers": {
-      "import": "./dist/esm/convertPropsToColorModifiers.js",
-      "require": "./dist/cjs/convertPropsToColorModifiers.js"
-    },
-    "./converPropsToFormModifiers": {
-      "import": "./dist/esm/converPropsToFormModifiers.js",
-      "require": "./dist/cjs/converPropsToFormModifiers.js"
-    },
-    "./classNameManager": {
-      "import": "./dist/esm/classNameManager.js",
-      "require": "./dist/cjs/classNameManager.js"
-    },
-    "./aggregatedClasses": {
-      "import": "./dist/esm/aggregatedClasses.js",
-      "require": "./dist/cjs/aggregatedClasses.js"
     }
   },
   "sideEffects": [
@@ -71,13 +35,12 @@
     "indent": 4
   },
   "dependencies": {
-    "obj-str": "~1.1.0",
-    "@elliemae/ds-utilities": "3.26.1-rc.1"
+    "@elliemae/ds-legacy-classnames": "1.0.1"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.26.1-rc.1"
+    "@elliemae/ds-monorepo-devops": "3.27.0-next.2"
   },
   "publishConfig": {
     "access": "public",
@@ -89,14 +52,14 @@
     "react-dom": "^17.0.2"
   },
   "scripts": {
-    "test": "pui-cli test --passWithNoTests",
-    "lint": "node ../../../scripts/lint.mjs",
-    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
-    "dts": "node ../../../scripts/dts.mjs",
+    "test": "exit 0 | echo",
+    "lint": "exit 0 | echo",
+    "eslint:fix": "exit 0 | echo",
+    "dts": "exit 0 | echo",
     "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
     "dev:build": "pnpm --filter {.}... build",
     "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
-    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\"",
+    "checkDeps": "exit 0 | echo",
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch"
   }
 }

package/dist/cjs/aggregatedClasses.js

@@ -1,87 +0,0 @@
-"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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var aggregatedClasses_exports = {};
-__export(aggregatedClasses_exports, {
-  cssPrefix: () => cssPrefix,
-  default: () => aggregatedClasses_default
-});
-module.exports = __toCommonJS(aggregatedClasses_exports);
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_obj_str = __toESM(require("obj-str"));
-var import_classNameManager = require("./classNameManager.js");
-var import_dimsum_config = require("./dimsum.config.js");
-var import_validateNativeProps = require("./validateNativeProps.js");
-const cssPrefix = import_dimsum_config.dimsumConfig.classNamePrefix;
-const generateClassNameWithModifier = (block, element, modifier) => `${cssPrefix}-${block}${element ? `__${element}` : ""}--${modifier}`;
-const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce(
-  (acc, key) => ({
-    ...acc,
-    [`${generateClassNameWithModifier(block, element, key)}`]: obj[key]
-  }),
-  {}
-) : [];
-const aggregatedClasses = (type, props) => (block, element, additionalModifiers, options = {}) => import_react.default.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {
-  let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
-  if (typeof additionalModifiers === "function")
-    otherModifiers = appendBlockAndPrefixToObj(
-      additionalModifiers({ ...rest, ...classProps, className }),
-      block,
-      element
-    );
-  const otherModifiersStr = (0, import_obj_str.default)(otherModifiers);
-  const { prefix, propsToRemoveFromFinalElement = [] } = options;
-  const { cssClassName: classNames } = (0, import_classNameManager.convertPropToCssClassName)(
-    block,
-    null,
-    { ...classProps },
-    { prefix, element }
-  );
-  const cleanedPropsPassedDown = { ...props, ...rest };
-  propsToRemoveFromFinalElement.forEach((propKey) => {
-    delete cleanedPropsPassedDown[propKey];
-  });
-  if ((0, import_validateNativeProps.isNativeHTMLElement)(block)) {
-    Object.keys(cleanedPropsPassedDown).forEach((key) => {
-      if (!(0, import_validateNativeProps.isValidNativeAttribute)(key))
-        delete cleanedPropsPassedDown[key];
-    });
-  }
-  return import_react.default.createElement(
-    as || type,
-    {
-      ref: innerRef || ref,
-      className: [classNames, otherModifiersStr, className].join(" "),
-      ...cleanedPropsPassedDown
-    },
-    children
-  );
-});
-var aggregatedClasses_default = aggregatedClasses;
-//# sourceMappingURL=aggregatedClasses.js.map

package/dist/cjs/aggregatedClasses.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/aggregatedClasses.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable prettier/prettier */\n/* eslint-disable max-params */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport cx from 'obj-str';\nimport { convertPropToCssClassName } from './classNameManager.js';\nimport { dimsumConfig } from './dimsum.config.js';\nimport {\n  isValidNativeAttribute,\n  isNativeHTMLElement,\n} from './validateNativeProps.js';\n\nexport const cssPrefix = dimsumConfig.classNamePrefix;\n\ntype AggregatedClassesT<T = unknown> = (\n  type: any,\n  props?: any,\n) => (\n  block: string,\n  element?: string | null,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  additionalModifiers?: { [key: string]: unknown } | ((arg: any) => { [key: string]: unknown }),\n  options?: { [key: string]: unknown },\n) => React.ForwardRefExoticComponent<React.RefAttributes<T>>;\n\nconst generateClassNameWithModifier = (block, element, modifier) =>\n  `${cssPrefix}-${block}${element ? `__${element}` : ''}--${modifier}`;\n\nconst appendBlockAndPrefixToObj = (obj, block, element) =>\n  obj\n    ? Object.keys(obj).reduce(\n      (acc, key) => ({\n        ...acc,\n        [`${generateClassNameWithModifier(block, element, key)}`]: obj[key],\n      }),\n      {},\n    )\n    : [];\n\nconst aggregatedClasses: AggregatedClassesT=\n  (type, props) =>\n    (block, element, additionalModifiers, options = {}) =>\n      React.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {\n      // get the additional classNames either from a function or an object\n        let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);\n        if (typeof additionalModifiers === 'function')\n          otherModifiers = appendBlockAndPrefixToObj(\n            additionalModifiers({ ...rest, ...classProps, className }),\n            block,\n            element,\n          );\n\n        const otherModifiersStr = cx(otherModifiers);\n        const { prefix, propsToRemoveFromFinalElement = [] } = options;\n        const { cssClassName: classNames } = convertPropToCssClassName(\n          block,\n          null,\n          { ...classProps },\n          { prefix, element },\n        );\n        const cleanedPropsPassedDown = { ...props, ...rest };\n        propsToRemoveFromFinalElement.forEach((propKey) => {\n          delete cleanedPropsPassedDown[propKey];\n        });\n\n        if (isNativeHTMLElement(block)) {\n          Object.keys(cleanedPropsPassedDown).forEach((key) => {\n            if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];\n          });\n        }\n\n        return React.createElement(\n          as || type,\n          {\n            ref: innerRef || ref,\n            className: [classNames, otherModifiersStr, className].join(' '),\n            ...cleanedPropsPassedDown,\n          },\n          children,\n        );\n      });\n\nexport default aggregatedClasses;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkB;AAClB,qBAAe;AACf,8BAA0C;AAC1C,2BAA6B;AAC7B,iCAGO;AAEA,MAAM,YAAY,kCAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,GAAG,EAAE;AAAA,EACjB,CAAC,KAAK,SAAS;AAAA,IACb,GAAG;AAAA,IACH,CAAC,GAAG,8BAA8B,OAAO,SAAS,GAAG,GAAG,GAAG,IAAI,GAAG;AAAA,EACpE;AAAA,EACA,CAAC;AACH,IACE,CAAC;AAEP,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,CAAC,MAC/C,aAAAA,QAAM,WAAW,CAAC,EAAE,UAAU,UAAU,YAAY,cAAc,WAAW,IAAI,GAAG,KAAK,GAAG,QAAQ;AAElG,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO,OAAO;AAClF,MAAI,OAAO,wBAAwB;AACjC,qBAAiB;AAAA,MACf,oBAAoB,EAAE,GAAG,MAAM,GAAG,YAAY,UAAU,CAAC;AAAA,MACzD;AAAA,MACA;AAAA,IACF;AAEF,QAAM,wBAAoB,eAAAC,SAAG,cAAc;AAC3C,QAAM,EAAE,QAAQ,gCAAgC,CAAC,EAAE,IAAI;AACvD,QAAM,EAAE,cAAc,WAAW,QAAI;AAAA,IACnC;AAAA,IACA;AAAA,IACA,EAAE,GAAG,WAAW;AAAA,IAChB,EAAE,QAAQ,QAAQ;AAAA,EACpB;AACA,QAAM,yBAAyB,EAAE,GAAG,OAAO,GAAG,KAAK;AACnD,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB,OAAO;AAAA,EACvC,CAAC;AAED,UAAI,gDAAoB,KAAK,GAAG;AAC9B,WAAO,KAAK,sBAAsB,EAAE,QAAQ,CAAC,QAAQ;AACnD,UAAI,KAAC,mDAAuB,GAAG;AAAG,eAAO,uBAAuB,GAAG;AAAA,IACrE,CAAC;AAAA,EACH;AAEA,SAAO,aAAAD,QAAM;AAAA,IACX,MAAM;AAAA,IACN;AAAA,MACE,KAAK,YAAY;AAAA,MACjB,WAAW,CAAC,YAAY,mBAAmB,SAAS,EAAE,KAAK,GAAG;AAAA,MAC9D,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF,CAAC;AAEP,IAAO,4BAAQ;",
-  "names": ["React", "cx"]
-}

package/dist/cjs/aggregatedClasses.md

@@ -1,323 +0,0 @@
-# aggregatedClasses
-
-Utility to clean up the renders of too many classNames, internally uses the classNamePipeline and obj-str to ease the workflow.
-Follows BEM methodology (block - element - modifier)
-<br> This utility allows us to create components outside the render method with the block-element-modifiers injected in the className
-## Constructor
-
-```jsx
-const blockName = 'form-item'
-
-const Label = aggregatedClasses('div')(blockName, 'label')
-const InputController = aggregatedClasses('div')(blockName, 'controller')
-
-// generates 
-<div className='ds-em-form-item__label' /> 
-<div className='ds-em-form-item__controller' /> 
-
-// and based on the props passed through classProps is going to inject the proper modifiers
-render() {
-    return (
-        <Label
-            classProps={{ 
-                hasError: true, 
-                readOnly: true, 
-                disabled: true 
-            }}
-        />
-    )
-}
-
-// generates
-<div className='ds-em-form-item__label ds-em-form-item__label--error ds-em-form-item__label--readonly ds-em-form-item__label--disabled' /> 
-
-```
-
-This creates a component with the specified element or other component and creates the className based on the blockName, the elementName, and the props that this component is going to receive.
-
-
-### Parameters
-```js 
-export default type => (block, element, additionalClassNames, options)
-```
-
-@type - element or component to create <br>
-@block - block name <br>
-@element - element name  
-@additionalModifiers - object that appends new modifiers to the className if the value is true. <br>
-Also we can use a function that takes the props of the component created <br>
-<br>
-@options - Object to configure 'prefix'
-
-####Example
-```js
-const Wrapper = aggregatedClasses('div')(blockName, 'elementName', props => ({
-  someModifier: true, 
-  otherModifier: props.hasClass
-}))
-```
-
-
-####Example
-```js
-const Wrapper = aggregatedClasses('div')(blockName, 'elementName', {someClassName: true}, {prefix: 'DIMSUM'})
-```
-
-```jsx 
-
-
-// this translates
-const Wrapper = ({ children, ...rest }) => {
-  const { cssClassName } = convertPropToCssClassName(
-    blockName,
-    null,
-    { ...rest })
-  return (
-    <div className={cssClassName}>
-      { children }
-    </div>
-  )
-}
-
-// to this
-const WrapperClassed = aggregatedClasses('div')(blockName, null)
-```
-
-## Complete example 
-before
-```jsx
-import React, { Component } from 'react'
-import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
-import { convertPropToCssClassName } from '@elliemae/ds-classnames'
-import { DSTextWrapper } from 'components/index'
-
-const blockName = 'labeled-outline'
-const pfxBlockName = `em-ds-${blockName}`
-
-class DSFloatingLabelInput extends Component {
-  constructor(props) {
-    super(props)
-    this.wrapper = React.createRef()
-    this.pathEl = React.createRef()
-    this.outlineEl = React.createRef()
-    this.outlineIdleEl = React.createRef()
-    this.labelEl = React.createRef()
-    this.state = {
-      open: props.open,
-      value: props.value,
-      focused: false,
-    }
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePath)
-  }
-  get sizes() {
-    return {
-      labelWidth: this.labelEl.current.offsetWidth * 0.9,
-      width: this.wrapper.current.offsetWidth,
-      height: this.wrapper.current.offsetHeight,
-      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
-    }
-  }
-  updatePath() {
-    const path = getSvgPath(this.sizes)
-    this.pathEl.current.setAttribute('d', path)
-  }
-  openOutline() {
-    this.setState({ open: true })
-  }
-  closeOutline() {
-    this.setState({ open: false })
-  }
-  render() {
-    const {
-      className,
-      hasError,
-      readOnly,
-      disabled,
-      inputComponent,
-      label,
-    } = this.props
-    const InputComponent = inputComponent
-    const { open, focused, value } = this.state
-    const isOpen = open || focused || !!value
-
-    const { cssClassName: classNames } = convertPropToCssClassName(
-      blockName,
-      className, {
-        hasError,
-        readOnly,
-        disabled,
-      })
-    return (
-      <div
-        ref={this.wrapper}
-        className={`${classNames} ${isOpen ? `${pfxBlockName}--opened` : ''} ${focused ? `${pfxBlockName}--focused` : ''}`}
-        onMouseEnter={this.openOutline}
-        onMouseLeave={this.closeOutline}
-      >
-        <div
-          ref={this.outlineEl}
-          className={`${pfxBlockName}__outline`}
-        >
-          <svg>
-            <path
-              ref={this.pathEl}
-              className={`${pfxBlockName}__outline__path`}
-            />
-          </svg>
-        </div>
-        <div
-          ref={this.outlineIdleEl}
-          className={`${pfxBlockName}__idle`}
-        />
-        <div className={`${pfxBlockName}__content`}>
-          <InputComponent
-            disabled={disabled}
-            hasError={hasError}
-            onBlur={() => this.setState({ focused: false })}
-            onChange={e => this.setState({ value: e.target.value })}
-            onFocus={() => this.setState({ focused: true })}
-            readOnly={readOnly}
-            value={value}
-          />
-          <label
-            ref={this.labelEl}
-            className={`${pfxBlockName}__label ${isOpen ? `${pfxBlockName}__label--floated` : ''}`}
-          >
-            <DSTextWrapper
-              innerRef={this.labelEl}
-              maxWidth='20px'
-              text={label}
-              textEllipsis
-            />
-          </label>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default DSFloatingLabelInput
-
-```
-
-after
-
-```jsx 
-import React, { Component } from 'react'
-import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
-import { DSTextWrapper } from 'components/index'
-import { aggregatedClasses } from '@elliemae/ds-classnames'
-
-const blockName = 'labeled-outline'
-
-const Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen, isFocused }) => ({
-  opened: isOpen,
-  focused: isFocused,
-}))
-
-const FloatingLabel = aggregatedClasses('label')(blockName, 'label', ({ isOpen }) => ({
-  floated: isOpen,
-}))
-
-const OutlineContent = aggregatedClasses('div')(blockName, 'content')
-const OutlineIdle = aggregatedClasses('div')(blockName, 'idle')
-const Outline = aggregatedClasses('div')(blockName, 'outline')
-const OutlinePath = aggregatedClasses('path')(blockName, 'outline__path')
-
-class DSFloatingLabelInput extends Component {
-  constructor(props) {
-    super(props)
-    this.wrapper = React.createRef()
-    this.pathEl = React.createRef()
-    this.outlineEl = React.createRef()
-    this.outlineIdleEl = React.createRef()
-    this.labelEl = React.createRef()
-    this.state = {
-      open: props.open,
-      value: props.value,
-      focused: false,
-    }
-  }
-  componentDidMount() {
-    // TODO: not getting referenced elements height / width without this
-    // this is a temporary workaround
-    setTimeout(() => this.updatePath(), 1)
-    window.addEventListener('resize', this.updatePath)
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updatePath)
-  }
-  get sizes() {
-    return {
-      labelWidth: this.labelEl.current.offsetWidth * 0.9,
-      width: this.wrapper.current.offsetWidth,
-      height: this.wrapper.current.offsetHeight,
-      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
-    }
-  }
-  updatePath() {
-    const path = getSvgPath(this.sizes)
-    this.pathEl.current.setAttribute('d', path)
-  }
-  openOutline() {
-    this.setState({ open: true })
-  }
-  closeOutline() {
-    this.setState({ open: false })
-  }
-  render() {
-    const {
-      hasError,
-      readOnly,
-      disabled,
-      inputComponent,
-      label,
-    } = this.props
-    const InputComponent = inputComponent
-    const { open, focused, value } = this.state
-    const isOpen = open || focused || !!value
-
-    return (
-      <Wrapper
-        classProps={{ hasError, isOpen, isFocused: focused, readOnly, disabled }}
-        innerRef={this.wrapper}
-        onMouseEnter={this.openOutline}
-        onMouseLeave={this.closeOutline}
-      >
-        <Outline innerRef={this.outlineEl}>
-          <svg>
-            <OutlinePath innerRef={this.pathEl} />
-          </svg>
-        </Outline>
-        <OutlineIdle innerRef={this.outlineIdleEl} />
-        <OutlineContent>
-          <InputComponent
-            disabled={disabled}
-            hasError={hasError}
-            onBlur={() => this.setState({ focused: false })}
-            onChange={e => this.setState({ value: e.target.value })}
-            onFocus={() => this.setState({ focused: true })}
-            readOnly={readOnly}
-            value={value}
-          />
-          <FloatingLabel
-            classProps={{ isOpen }}
-            innerRef={this.labelEl}
-          >
-            <DSTextWrapper
-              maxWidth='20px'
-              text={label}
-              textEllipsis
-            />
-          </FloatingLabel>
-        </OutlineContent>
-      </Wrapper>
-    )
-  }
-}
-
-export default DSFloatingLabelInput
-
-```

package/dist/cjs/classNameManager.js

@@ -1,84 +0,0 @@
-"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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var classNameManager_exports = {};
-__export(classNameManager_exports, {
-  convertPropToCssClassName: () => cssPipeline,
-  cssPrefix: () => cssPrefix,
-  default: () => classNameManager_default
-});
-module.exports = __toCommonJS(classNameManager_exports);
-var React = __toESM(require("react"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_dimsum_config = require("./dimsum.config.js");
-var import_converPropsToFormModifiers = require("./converPropsToFormModifiers.js");
-var import_convertPropsToLayoutModifiers = require("./convertPropsToLayoutModifiers.js");
-var import_convertPropToFeedBackModifiers = require("./convertPropToFeedBackModifiers.js");
-var import_convertPropsToSizeModifiers = require("./convertPropsToSizeModifiers.js");
-var import_convertPropsToTextModifiers = require("./convertPropsToTextModifiers.js");
-var import_convertPropsToColorModifiers = require("./convertPropsToColorModifiers.js");
-const cssPrefix = `${import_dimsum_config.dimsumConfig.classNamePrefix}-`;
-const executePipelines = (props) => {
-  const form = (0, import_converPropsToFormModifiers.pipe)().execute(props);
-  const layout = (0, import_convertPropsToLayoutModifiers.pipe)().execute(props);
-  const feedback = (0, import_convertPropToFeedBackModifiers.pipe)().execute(props);
-  const size = (0, import_convertPropsToSizeModifiers.pipe)().execute(props);
-  const text = (0, import_convertPropsToTextModifiers.pipe)().execute(props);
-  const color = (0, import_convertPropsToColorModifiers.pipe)().execute(props);
-  return [...form, ...layout, ...feedback, ...size, ...text, ...color];
-};
-const cssPipeline = (blockName = "block", cssClassNameModifier = "", props = {}, options = {}) => {
-  const { prefix, element } = options;
-  const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ""}`;
-  const pipes = !(0, import_ds_utilities.isEmpty)(props) ? executePipelines(props) : [];
-  const basePipeline = [prefixBlockName, ...pipes];
-  const className = cssClassNameModifier ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`) : [...basePipeline].join(` ${prefixBlockName}--`);
-  return {
-    blockName,
-    cssPrefix,
-    prefixBlockName,
-    cssClassName: className,
-    mainModifier(modifier) {
-      return `${className}--${modifier}`;
-    },
-    classNameBlock(elementName, usePrefix = true) {
-      return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;
-    },
-    classNameBlockModifier(modifierName, elementBlockName = "") {
-      return `${prefixBlockName}-${elementBlockName}--${modifierName}`;
-    },
-    classNameElement(elementName, elementBlockName = "") {
-      return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ""}__${elementName}`;
-    },
-    classNameModifier(modifierName, elementName = "") {
-      return `${prefixBlockName}${elementName ? `__${elementName}` : ""}--${modifierName}`;
-    }
-  };
-};
-var classNameManager_default = cssPipeline;
-//# sourceMappingURL=classNameManager.js.map