@northlight/ui 2.12.1 → 2.12.2

package/dist/es/northlight.d.ts

@@ -1155,7 +1155,7 @@ const MyCarousel = () => {
 
     <VStack
     borderColor="border.default"
-    borderWidth="st.border.width.sm" borderStyle="solid" p="2" borderRadius="st.border.radius.lg">
+    borderWidth="sm" borderStyle="solid" p="2" borderRadius="lg">
       <Box w="full" h="sm">
         <Carousel
           showArrows={ false }
@@ -1338,7 +1338,7 @@ interface SortableContainerProps {
  * <Center
  * boxSize="3xs"
  * boxShadow="xl"
- * borderRadius="st.border.radius.lg"
+ * borderRadius="lg"
  * bgColor="bg.overlayer"
  * >I am draggable</Center>
  * </Draggable>
@@ -2152,7 +2152,7 @@ declare const FilePickerField: ({ name, label, direction, isRequired, validate,
     <Box h="sm">
       <Carousel>
         { images.map((imageSrc) => (
-          <Image src={imageSrc} borderRadius="st.border.radius.md" />
+          <Image src={imageSrc} borderRadius="md" />
         )) }
       </Carousel>
     </Box>
@@ -2828,7 +2828,7 @@ declare const Tag: (props: TagProps & React__default.RefAttributes<unknown>) =>
  * ##Try resizing the window!
  * (?
   <TagGroup w="full"
-  borderWidth="st.border.width.sm"
+  borderWidth="sm"
   borderColor="border.default"
   borderStyle="solid"
   p="2"
@@ -3085,8 +3085,8 @@ interface CollapseProps extends FadeProps, Omit<CollapseProps$1, 'delay'> {
   return (
     <>
        <Button onClick={toggle}>Render random number</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
             <Fade in={ show} exitDuration={1}>
   <HStack p="10" bg="bg.filled" rounded="md" >
   <H3>
@@ -3125,8 +3125,8 @@ declare const Fade: ({ children, enterDuration, exitDuration, duration, in: show
   return (
     <>
        <Button onClick={toggle}>Render random number</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
             <SlideFade in={ show} exitDuration={1}>
   <HStack p="10" bg="bg.filled" rounded="md" >
   <H3>
@@ -3167,8 +3167,8 @@ declare const SlideFade: ({ children, enterDuration, exitDuration, duration, in:
   return (
     <>
        <Button onClick={toggle}>Click Me</Button>
-  <Box borderRadius="st.border.radius.sm"
-  borderWidth="st.border.width.sm" borderColor="border.default">
+  <Box borderRadius="sm"
+  borderWidth="sm" borderColor="border.default">
             <Collapse in={ show}>
   <HStack p="10" bg="bg.filled" rounded="md" >
   <P>

package/dist/es/northlight.js

@@ -633,7 +633,7 @@ function TagsInput(_a) {
     "data-testid",
     "value"
   ]);
-  const [borderColor] = useToken$1("colors.border.select", ["focus"]);
+  const [borderColor] = useToken$1("border.select", ["focus"]);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
   const [selectedOptions, setSelectedOptions] = useState(value);
@@ -9496,7 +9496,7 @@ const DragAndDrop = {
   parts: ["dropZone"],
   baseStyle: ({ sx }) => ({
     dropZone: merge({
-      borderWidth: "st.border.width.sm",
+      borderWidth: "sm",
       borderStyle: "dashed",
       borderColor: "border.default",
       padding: "4",
@@ -10723,9 +10723,9 @@ const Table = {
       table: {
         borderSpacing: "0",
         borderCollapse: "separate",
-        borderRadius: "st.border.radius.md",
+        borderRadius: "md",
         borderColor: "border.default",
-        borderWidth: "st.border.width.xs",
+        borderWidth: "xs",
         px: "3"
       },
       th: {
@@ -10736,7 +10736,7 @@ const Table = {
       },
       td: {
         borderColor: "border.default",
-        borderTopWidth: "st.border.width.xs"
+        borderTopWidth: "xs"
       }
     })
   }