@workday/canvas-kit-labs-react 6.0.5 → 6.1.1

package/common/README.md

@@ -64,3 +64,35 @@ export const HelloWorld = ({backgroundImagePath}) => {
   );
 };
 ```
+
+## useThemedRing
+
+This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline` ring when the input is focused.
+Note: You should not rely on these colors alone to differentiate alerts, but use them in combination with icons or hint text.
+
+### Usage
+
+```tsx
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+
+
+export const MyInput = ({handleChange}) => {
+  const [value, setValue] = React.useState('invalid@email');
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <TextInput>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
+    </TextInput>
+  );
+}

package/common/lib/theming/useThemedRing.ts

@@ -1,6 +1,6 @@
 import {useThemeRTL} from './useThemeRTL';
 import {CanvasThemePalette, EmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {colors, CSSProperties, inputColors} from '@workday/canvas-kit-react/tokens';
+import {colors, CSSProperties, inputColors, statusColors} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 
 type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
@@ -14,44 +14,38 @@ const isAccessible = (foreground: string, background: string = colors.frenchVani
 };
 
 const getPaletteColorsFromTheme = (
-  fallbackColors: ContrastColors,
-  palette?: CanvasThemePalette
+  palette: CanvasThemePalette,
+  fallbackColors?: ContrastColors,
 ): ContrastColors => {
-  return palette
-    ? {
-        outer: isAccessible(palette?.main) ? palette?.main : palette?.darkest,
-        inner: palette?.main,
-      }
-    : fallbackColors;
+  return {
+    outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors?.outer,
+    inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
+  }
 };
 
 export function getPaletteColors(
   type: paletteSelection,
-  theme?: EmotionCanvasTheme
+  theme: EmotionCanvasTheme
 ): ContrastColors {
-  const palette = theme?.canvas.palette[type];
+  const palette = theme.canvas.palette[type];
 
   switch (type) {
     case 'error': {
-      return getPaletteColorsFromTheme(
-        {
-          outer: inputColors.error.border,
-          inner: inputColors.error.border,
-        },
-        palette
-      );
+      return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
     }
     case 'alert': {
-      return getPaletteColorsFromTheme(
-        {
-          outer: colors.cantaloupe600,
-          inner: inputColors.alert.border,
-        },
-        palette
-      );
+      return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
+    }
+    case 'success': {
+      return getPaletteColorsFromTheme(palette, {
+        outer: colors.greenApple600,
+        // The theme default for success.main is set to the darkest GreenApple
+        // For our default ring, we need to override it so the inner ring is a bit lighter
+        inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
+      });
     }
     default: {
-      return getPaletteColorsFromTheme({}, palette);
+      return getPaletteColorsFromTheme(palette);
     }
   }
 }

package/dist/commonjs/common/lib/theming/useThemedRing.d.ts

@@ -5,7 +5,7 @@ interface ContrastColors {
     outer?: string;
     inner?: string;
 }
-export declare function getPaletteColors(type: paletteSelection, theme?: EmotionCanvasTheme): ContrastColors;
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
 export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
 export {};
 //# sourceMappingURL=useThemedRing.d.ts.map

package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAGpF,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,CAAC,EAAE,kBAAkB,GACzB,cAAc,CA0BhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}

package/dist/commonjs/common/lib/theming/useThemedRing.js

@@ -10,31 +10,31 @@ var isAccessible = function (foreground, background) {
     if (background === void 0) { background = tokens_1.colors.frenchVanilla100; }
     return chroma_js_1.default.contrast(foreground, background) >= 3;
 };
-var getPaletteColorsFromTheme = function (fallbackColors, palette) {
-    return palette
-        ? {
-            outer: isAccessible(palette === null || palette === void 0 ? void 0 : palette.main) ? palette === null || palette === void 0 ? void 0 : palette.main : palette === null || palette === void 0 ? void 0 : palette.darkest,
-            inner: palette === null || palette === void 0 ? void 0 : palette.main,
-        }
-        : fallbackColors;
+var getPaletteColorsFromTheme = function (palette, fallbackColors) {
+    return {
+        outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
+        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
+    };
 };
 function getPaletteColors(type, theme) {
-    var palette = theme === null || theme === void 0 ? void 0 : theme.canvas.palette[type];
+    var palette = theme.canvas.palette[type];
     switch (type) {
         case 'error': {
-            return getPaletteColorsFromTheme({
-                outer: tokens_1.inputColors.error.border,
-                inner: tokens_1.inputColors.error.border,
-            }, palette);
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.inputColors.error.border });
         }
         case 'alert': {
-            return getPaletteColorsFromTheme({
-                outer: tokens_1.colors.cantaloupe600,
-                inner: tokens_1.inputColors.alert.border,
-            }, palette);
+            return getPaletteColorsFromTheme(palette, { outer: tokens_1.colors.cantaloupe600 });
+        }
+        case 'success': {
+            return getPaletteColorsFromTheme(palette, {
+                outer: tokens_1.colors.greenApple600,
+                // The theme default for success.main is set to the darkest GreenApple
+                // For our default ring, we need to override it so the inner ring is a bit lighter
+                inner: palette.main === tokens_1.colors.greenApple600 ? tokens_1.statusColors.success : palette.main,
+            });
         }
         default: {
-            return getPaletteColorsFromTheme({}, palette);
+            return getPaletteColorsFromTheme(palette);
         }
     }
 }

package/dist/commonjs/index.d.ts

@@ -3,6 +3,5 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/commonjs/index.js

@@ -8,5 +8,4 @@ __export(require("./common"));
 __export(require("./drawer"));
 __export(require("./header"));
 __export(require("./layout"));
-__export(require("./text-input"));
 __export(require("./search-form"));

package/dist/es6/common/lib/theming/useThemedRing.d.ts

@@ -5,7 +5,7 @@ interface ContrastColors {
     outer?: string;
     inner?: string;
 }
-export declare function getPaletteColors(type: paletteSelection, theme?: EmotionCanvasTheme): ContrastColors;
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
 export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
 export {};
 //# sourceMappingURL=useThemedRing.d.ts.map

package/dist/es6/common/lib/theming/useThemedRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AAGpF,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,CAAC,EAAE,kBAAkB,GACzB,cAAc,CA0BhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}
+{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}

package/dist/es6/common/lib/theming/useThemedRing.js

@@ -1,35 +1,35 @@
 import { useThemeRTL } from './useThemeRTL';
-import { colors, inputColors } from '@workday/canvas-kit-react/tokens';
+import { colors, inputColors, statusColors } from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
 var isAccessible = function (foreground, background) {
     if (background === void 0) { background = colors.frenchVanilla100; }
     return chroma.contrast(foreground, background) >= 3;
 };
-var getPaletteColorsFromTheme = function (fallbackColors, palette) {
-    return palette
-        ? {
-            outer: isAccessible(palette === null || palette === void 0 ? void 0 : palette.main) ? palette === null || palette === void 0 ? void 0 : palette.main : palette === null || palette === void 0 ? void 0 : palette.darkest,
-            inner: palette === null || palette === void 0 ? void 0 : palette.main,
-        }
-        : fallbackColors;
+var getPaletteColorsFromTheme = function (palette, fallbackColors) {
+    return {
+        outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
+        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
+    };
 };
 export function getPaletteColors(type, theme) {
-    var palette = theme === null || theme === void 0 ? void 0 : theme.canvas.palette[type];
+    var palette = theme.canvas.palette[type];
     switch (type) {
         case 'error': {
-            return getPaletteColorsFromTheme({
-                outer: inputColors.error.border,
-                inner: inputColors.error.border,
-            }, palette);
+            return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
         }
         case 'alert': {
-            return getPaletteColorsFromTheme({
-                outer: colors.cantaloupe600,
-                inner: inputColors.alert.border,
-            }, palette);
+            return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
+        }
+        case 'success': {
+            return getPaletteColorsFromTheme(palette, {
+                outer: colors.greenApple600,
+                // The theme default for success.main is set to the darkest GreenApple
+                // For our default ring, we need to override it so the inner ring is a bit lighter
+                inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
+            });
         }
         default: {
-            return getPaletteColorsFromTheme({}, palette);
+            return getPaletteColorsFromTheme(palette);
         }
     }
 }

package/dist/es6/index.d.ts

@@ -3,6 +3,5 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/es6/index.js

@@ -3,5 +3,4 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';

package/index.ts

@@ -3,5 +3,4 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "6.0.5",
+  "version": "6.1.1",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -38,7 +38,8 @@
     "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
     "prepack": "node ../../utils/publish.js pre labs-react",
     "postpack": "node ../../utils/publish.js post labs-react",
-    "depcheck": "node ../../utils/check-dependencies-exist.js"
+    "depcheck": "node ../../utils/check-dependencies-exist.js",
+    "typecheck:src": "tsc -p . --noEmit --incremental false"
   },
   "keywords": [
     "canvas",
@@ -55,8 +56,8 @@
     "@emotion/is-prop-valid": "^0.8.2",
     "@emotion/styled": "^10.0.27",
     "@types/uuid": "^3.4.4",
-    "@workday/canvas-kit-preview-react": "^6.0.5",
-    "@workday/canvas-kit-react": "^6.0.5",
+    "@workday/canvas-kit-preview-react": "^6.1.1",
+    "@workday/canvas-kit-react": "^6.1.1",
     "@workday/canvas-system-icons-web": "1.0.41",
     "chroma-js": "^2.1.0",
     "csstype": "^2.6.17",
@@ -65,9 +66,7 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@types/lodash.flatten": "^4.4.6",
-    "formik": "^2.2.9",
-    "yup": "^0.31.1"
+    "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "57439ccf19ad8753d7260730a1c83589b07c22a2"
+  "gitHead": "265ecd66ee2244f8f6be4b6ac87bf56af815fcac"
 }

package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts

@@ -5,7 +5,7 @@ interface ContrastColors {
     outer?: string;
     inner?: string;
 }
-export declare function getPaletteColors(type: paletteSelection, theme?: EmotionCanvasTheme): ContrastColors;
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
 export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
 export {};
 //# sourceMappingURL=useThemedRing.d.ts.map

package/ts3.5/dist/commonjs/index.d.ts

@@ -3,6 +3,5 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts

@@ -5,7 +5,7 @@ interface ContrastColors {
     outer?: string;
     inner?: string;
 }
-export declare function getPaletteColors(type: paletteSelection, theme?: EmotionCanvasTheme): ContrastColors;
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
 export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
 export {};
 //# sourceMappingURL=useThemedRing.d.ts.map

package/ts3.5/dist/es6/index.d.ts

@@ -3,6 +3,5 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/text-input/index.d.ts

@@ -1,7 +0,0 @@
-export * from './lib/TextInput';
-export * from './lib/hooks/useTextInputModel';
-export * from './lib/hooks/useTextInputHint';
-export * from './lib/hooks/useTextInputField';
-export * from './lib/hooks/useTextInputHint';
-export * from './lib/hooks/useTextInputLabel';
-//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/text-input/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC"}

package/dist/commonjs/text-input/index.js

@@ -1,11 +0,0 @@
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./lib/TextInput"));
-__export(require("./lib/hooks/useTextInputModel"));
-__export(require("./lib/hooks/useTextInputHint"));
-__export(require("./lib/hooks/useTextInputField"));
-__export(require("./lib/hooks/useTextInputHint"));
-__export(require("./lib/hooks/useTextInputLabel"));

package/dist/commonjs/text-input/lib/TextInput.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { TextInputModel, TextInputModelConfig } from './hooks/useTextInputModel';
-export declare const TextInputModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    inputId?: string | undefined;
-    hintId?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>>;
-export interface TextInputProps extends TextInputModelConfig {
-    model?: TextInputModel;
-    /**
-     * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
-     */
-    children: React.ReactNode;
-}
-export declare const TextInput: import("@workday/canvas-kit-react/common").Component<TextInputProps> & {
-    Field: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInputField").TextInputFieldProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("./TextInputLabel").TextInputLabelProps>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("./TextInputHint").TextInputHintProps>;
-};
-//# sourceMappingURL=TextInput.d.ts.map

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,cAAc,EAAE,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAKlG,eAAO,MAAM,qBAAqB;;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IAC1D,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAcpB,CAAC"}

package/dist/commonjs/text-input/lib/TextInput.js

@@ -1,36 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useTextInputModel_1 = require("./hooks/useTextInputModel");
-var TextInputField_1 = require("./TextInputField");
-var TextInputLabel_1 = require("./TextInputLabel");
-var TextInputHint_1 = require("./TextInputHint");
-exports.TextInputModelContext = react_1.default.createContext({});
-exports.TextInput = common_1.createComponent()({
-    displayName: 'TextInput',
-    Component: function (_a) {
-        var children = _a.children, model = _a.model, config = __rest(_a, ["children", "model"]);
-        var value = common_1.useDefaultModel(model, config, useTextInputModel_1.useTextInputModel);
-        return (react_1.default.createElement(exports.TextInputModelContext.Provider, { value: value }, children));
-    },
-    subComponents: {
-        Field: TextInputField_1.TextInputField,
-        Label: TextInputLabel_1.TextInputLabel,
-        Hint: TextInputHint_1.TextInputHint,
-    },
-});

package/dist/commonjs/text-input/lib/TextInputField.d.ts

@@ -1,8 +0,0 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { TextInputModel } from './hooks/useTextInputModel';
-export interface TextInputFieldProps extends ExtractProps<typeof Box, never> {
-    model?: TextInputModel;
-}
-export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputFieldProps>;
-//# sourceMappingURL=TextInputField.d.ts.map

package/dist/commonjs/text-input/lib/TextInputField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAA6B,MAAM,uCAAuC,CAAC;AAGtF,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGzD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAmCD,eAAO,MAAM,cAAc,2FAoBzB,CAAC"}

package/dist/commonjs/text-input/lib/TextInputField.js

@@ -1,66 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var common_2 = require("@workday/canvas-kit-labs-react/common");
-var TextInput_1 = require("./TextInput");
-var useTextInputField_1 = require("./hooks/useTextInputField");
-var baseStyles = __assign(__assign({}, tokens_1.type.levels.subtext.large), { padding: tokens_1.space.xxs, margin: 0, minWidth: '280px', border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, display: 'block', height: '40px', transition: '0.2s box-shadow, 0.2s border-color', '&::placeholder': {
-        color: tokens_1.inputColors.placeholder,
-    }, '&:hover': {
-        borderColor: tokens_1.inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
-        outline: 'none',
-    }, '&:disabled': {
-        backgroundColor: tokens_1.inputColors.disabled.background,
-        borderColor: tokens_1.inputColors.disabled.border,
-        color: tokens_1.inputColors.disabled.text,
-        '&::placeholder': {
-            color: tokens_1.inputColors.disabled.text,
-        },
-    }, '::-ms-clear': {
-        display: 'none',
-    } });
-exports.TextInputField = common_1.createComponent('input')({
-    displayName: 'TextInput.Field',
-    Component: function (_a, ref) {
-        var model = _a.model, elemProps = __rest(_a, ["model"]);
-        var localModel = common_1.useModelContext(TextInput_1.TextInputModelContext, model);
-        var props = useTextInputField_1.useTextInputField(localModel, elemProps, ref);
-        var _b = common_2.useThemeRTL(), themeRTL = _b.themeRTL, theme = _b.theme;
-        var errorRing = common_2.useThemedRing('error');
-        var focusStyles = localModel.state.hasError
-            ? errorRing
-            : themeRTL({
-                '&:focus:not([disabled])': {
-                    borderColor: theme.canvas.palette.common.focusOutline,
-                    boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
-                },
-            });
-        return core_1.jsx(common_2.Box, __assign({ as: "input", css: [themeRTL(baseStyles), focusStyles] }, props));
-    },
-});

package/dist/commonjs/text-input/lib/TextInputHint.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { TextInputModel } from './hooks/useTextInputModel';
-export interface TextInputHintProps extends ExtractProps<typeof Box, never> {
-    model?: TextInputModel;
-    /**
-     * Hint text to show to the user regarding the Error/Alert
-     */
-    children?: React.ReactNode;
-}
-export declare const TextInputHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", TextInputHintProps>;
-//# sourceMappingURL=TextInputHint.d.ts.map

package/dist/commonjs/text-input/lib/TextInputHint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInputHint.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAEhG,OAAO,EAAC,GAAG,EAAc,MAAM,uCAAuC,CAAC;AAGvE,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAQD,eAAO,MAAM,aAAa,sFAyBxB,CAAC"}

package/dist/commonjs/text-input/lib/TextInputHint.js

@@ -1,46 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_2 = require("@workday/canvas-kit-labs-react/common");
-var TextInput_1 = require("./TextInput");
-var useTextInputHint_1 = require("./hooks/useTextInputHint");
-var baseStyles = __assign(__assign({}, tokens_1.type.levels.subtext.medium), { margin: tokens_1.space.xxs + " 0 0", width: '100%' });
-exports.TextInputHint = common_1.createComponent('p')({
-    displayName: 'TextInput.Hint',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = common_1.useModelContext(TextInput_1.TextInputModelContext, model);
-        var props = useTextInputHint_1.useTextInputHint(localModel, elemProps, ref);
-        var _b = common_2.useThemeRTL(), themeRTL = _b.themeRTL, theme = _b.theme;
-        if (!children) {
-            // If there is no hint text just skip rendering
-            return null;
-        }
-        return (core_1.jsx(common_2.Box, __assign({ as: Element, css: themeRTL(baseStyles, localModel.state.hasError ? { color: theme.canvas.palette.error.main } : {}) }, props), children));
-    },
-});

package/dist/commonjs/text-input/lib/TextInputLabel.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { TextInputModel } from './hooks/useTextInputModel';
-export interface TextInputLabelProps extends ExtractProps<typeof Box, never> {
-    model?: TextInputModel;
-    /**
-     * If true, apply the `accessibleHide` styles to the Label.
-     */
-    isVisuallyHidden?: boolean;
-    /**
-     * The text of the label.
-     */
-    children: React.ReactNode;
-}
-export declare const TextInputLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", TextInputLabelProps>;
-//# sourceMappingURL=TextInputLabel.d.ts.map

package/dist/commonjs/text-input/lib/TextInputLabel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInputLabel.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAA+B,MAAM,uCAAuC,CAAC;AAKxF,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGzD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkBD,eAAO,MAAM,cAAc,2FA2BzB,CAAC"}